[Sugester V2](https://pomoc.sugester2.pl.md) / [CMS](https://pomoc.sugester2.pl/cms-1.md) # [Reużywalny sidebar - wzorzec](https://pomoc.sugester2.pl/reuzywalny-sidebar-wzorzec-FJHirb5v.md)

Gdy masz wiele podstron z tym samym sideberem (np. lista funkcji produktu), zamiast kopiować HTML do każdej strony, możesz użyć reużywalnego paragrafu.

Jak to działa

Schemat:

Layout                          Page
┌─────────────────────┐         ┌─────────────────────┐
│ {% if has_sidebar %}│         │ fields.has_sidebar  │
│   <flex>            │◄────────│ paragraph_codes     │
│     {{ paragraphs }}│         │ content (główna)    │
│     {{ content }}   │         └─────────────────────┘
│   </flex>           │                    │
│ {% endif %}         │                    ▼
└─────────────────────┘         Paragraph
                                ┌─────────────────────┐
                                │ code: my-sidebar    │
                                │ <aside>...</aside>  │
                                └─────────────────────┘

Krok 1: Utwórz paragraf z sideberem

W CMS utwórz paragraf z unikalnym kodem:

name: "Sidebar PL" (nazwa wewnętrzna)
code: "my-sidebar-pl" (do przypisywania przez API)
kind: text
content: HTML sidebara

Krok 2: Zmodyfikuj layout

Dodaj warunek do layoutu:

{% if has_sidebar %}
<section class="py-12 px-4">


      {% for p in paragraphs %}{{ p }}{% endfor %}
      <main class="min-w-0 flex-1">{{ content }}</main>


</section>
{% else %}
<main>
  {% for p in paragraphs %}{{ p }}{% endfor %}
  {{ content }}
</main>
{% endif %}

Kluczowe elementy Liquid:

{{ content }} - treść strony (page.content)
{% for p in paragraphs %}{{ p }}{% endfor %} - przypisane paragrafy
{% if has_sidebar %} - warunek z page.fields.has_sidebar

Krok 3a: Przypisanie przez GUI (ręcznie)

Dla każdej strony w panelu CMS:

Wejdź do CMS → Strony i wybierz stronę do edycji
W sekcji Pola własne (fields) zaznacz checkbox has_sidebar lub dodaj pole: has_sidebar = true
W polu Kody paragrafów (paragraph_codes) wpisz kod sidebara, np. my-sidebar-pl
Zapisz stronę

Uwaga: Upewnij się że paragraf z kodem my-sidebar-pl już istnieje.

Krok 3b: Przypisanie przez API

Dla każdej strony ustaw:

PUT /cms/pages/{id}.json?api_token=TWOJ_TOKEN
{
  "page": {
    "fields": {"has_sidebar": true},
    "paragraph_codes": ["my-sidebar-pl"]
  }
}

Bulk update (skrypt bash)

Gdy masz wiele stron do zaktualizowania jednocześnie:

#!/bin/bash
API_TOKEN="twoj_token"
BASE_URL="https://mojafirma.sugester2.pl"
SIDEBAR_CODE="my-sidebar-pl"

# Lista ID stron do aktualizacji
PAGE_IDS=(101 102 103 104)

for PAGE_ID in "${PAGE_IDS[@]}"; do
  echo "Updating page $PAGE_ID..."
  curl -s -X PUT "$BASE_URL/cms/pages/$PAGE_ID.json?api_token=$API_TOKEN" \
    -H "Content-Type: application/json" \
    -d "{\"page\": {\"paragraph_codes\": [\"$SIDEBAR_CODE\"]}}"
  echo ""
done

echo "Done!"

Przykład: MojaFirma

Przykładowa implementacja dla strony z dokumentacją funkcji:

Zasób	Opis
Site	Strona marketingowa firmy
Layout	Marketing Layout z obsługą sidebara
Sidebar PL	code: `sidebar-funkcje-pl`
Sidebar EN	code: `sidebar-features-en`

Strony do przypisania:

Podstrony w sekcji /funkcje/* (PL) → sidebar-funkcje-pl
Podstrony w sekcji /features/* (EN) → sidebar-features-en

Przykładowy skrypt

#!/bin/bash
API_TOKEN="twoj_api_token"
BASE_URL="https://mojafirma.sugester2.pl"

# Strony PL
for PAGE_ID in 101 102 103 104 105; do
  curl -s -X PUT "$BASE_URL/cms/pages/$PAGE_ID.json?api_token=$API_TOKEN" \
    -H "Content-Type: application/json" \
    -d '{"page": {"paragraph_codes": ["sidebar-funkcje-pl"]}}'
done

# Strony EN
for PAGE_ID in 201 202 203 204 205; do
  curl -s -X PUT "$BASE_URL/cms/pages/$PAGE_ID.json?api_token=$API_TOKEN" \
    -H "Content-Type: application/json" \
    -d '{"page": {"paragraph_codes": ["sidebar-features-en"]}}'
done

Efekt: Zmiana sidebara w jednym paragrafie automatycznie aktualizuje wszystkie przypisane strony.

Debugowanie

Jeśli sidebar się nie wyświetla:

Sprawdź has_sidebar - czy strona ma fields.has_sidebar: true?
Sprawdź paragraph_codes - czy zawiera właściwy kod paragrafu?
Sprawdź kod paragrafu - czy paragraf ma ustawione pole code?
Sprawdź layout - czy zawiera pętlę {% for p in paragraphs %}?

Weryfikacja przez API:

# Sprawdź stronę
curl -s "https://mojafirma.sugester2.pl/cms/pages/ID.json?api_token=TOKEN" | jq '{paragraph_codes, fields}'

# Sprawdź paragrafy z kodami
curl -s "https://mojafirma.sugester2.pl/cms/paragraphs.json?api_token=TOKEN&site_id=ID" | jq '.[] | select(.code) | {id, name, code}'