[Sugester V2 EN](https://sugester.intum.pl/kb/sugester-v2-en.md) / [CMS](https://sugester.intum.pl/kb/sugester-v2-en/cms.md) # [Reusable sidebar - pattern](https://sugester.intum.pl/kb/sugester-v2-en/reusable-sidebar-pattern.md)

When you have multiple subpages with the same sidebar (e.g., product features list), instead of copying HTML to each page, you can use a reusable paragraph.

How it works

Diagram:

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

Step 1: Create a paragraph with a sidebar

In the CMS, create a paragraph with a unique code:

name: "Sidebar PL" (internal name)
code: "my-sidebar-pl" (for API assignment)
kind: text
content: HTML of the sidebar

Step 2: Modify the layout

Add a condition to the layout:

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

Key Liquid elements:

{{ content }} - page content (page.content)
{% for p in paragraphs %}{{ p }}{% endfor %} - assigned paragraphs
{% if has_sidebar %} - condition from page.fields.has_sidebar

Step 3a: Assignment via GUI (manually)

For each page in the CMS panel:

Go to CMS → Pages and select the page to edit
In the Custom Fields (fields) section, check the checkbox has_sidebar or add the field: has_sidebar = true
In the Paragraph Codes (paragraph_codes) field, enter the sidebar code, e.g., my-sidebar-pl
Save the page

Note: Make sure the paragraph with the code my-sidebar-pl already exists.

Step 3b: Assignment via API

For each page set:

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

Bulk update (bash script)

When you have many pages to update at once:

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

# List of page IDs to update
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!"

Example: MyCompany

Sample implementation for a feature documentation page:

Resource	Description
Site	Company marketing page
Layout	Marketing Layout with sidebar support
Sidebar PL	code: `sidebar-funkcje-pl`
Sidebar EN	code: `sidebar-features-en`

Pages to assign:

Subpages in the section /funkcje/* (PL) → sidebar-funkcje-pl
Subpages in the section /features/* (EN) → sidebar-features-en

Sample script

#!/bin/bash
API_TOKEN="your_api_token"
BASE_URL="https://yourcompany.sugester2.pl"

# PL Pages
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

# EN Pages
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

Effect: Changing the sidebar in one paragraph automatically updates all assigned pages.

Debugging

If the sidebar does not display:

Check has_sidebar - does the page have fields.has_sidebar: true?
Check paragraph_codes - does it contain the correct paragraph code?
Check the paragraph code - does the paragraph have the code field set?
Check the layout - does it contain the loop {% for p in paragraphs %}?

Verification via API:

# Check the page
curl -s "https://yourcompany.sugester2.pl/cms/pages/ID.json?api_token=TOKEN" | jq '{paragraph_codes, fields}'

# Check paragraphs with codes
curl -s "https://yourcompany.sugester2.pl/cms/paragraphs.json?api_token=TOKEN&site_id=ID" | jq '.[] | select(.code) | {id, name, code}'