Reużywalny sidebar - wzorzec

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  │
│               │◄────────│ paragraph_codes     │
│     {{ paragraphs }}│         │ content (główna)    │
│     {{ content }}   │         └─────────────────────┘
│              │                    │
│ {% endif %}         │                    ▼
└─────────────────────┘         Paragraph
                                ┌─────────────────────┐
                                │ code: my-sidebar    │
                                │ ...  │
                                └─────────────────────┘

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 %}

  

    

      {% for p in paragraphs %}{{ p }}{% endfor %}
      {{ content }}
    
  

{% else %}

  {% for p in paragraphs %}{{ p }}{% endfor %}
  {{ content }}

{% 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:

1. Wejdź do CMS → Strony i wybierz stronę do edycji
2. W sekcji Pola własne (fields) zaznacz checkbox has_sidebar lub dodaj pole: has_sidebar = true
3. W polu Kody paragrafów (paragraph_codes) wpisz kod sidebara, np. my-sidebar-pl
4. 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:

1. Sprawdź has_sidebar - czy strona ma fields.has_sidebar: true?
2. Sprawdź paragraph_codes - czy zawiera właściwy kod paragrafu?
3. Sprawdź kod paragrafu - czy paragraf ma ustawione pole code?
4. 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}'