Karuzela towarów

Wstaw znacznik [karuzela_towarow] w treść wpisu CMS (pole „opis"). Bramka przy zapisie (POST/PUT) zamieni go na gotową, przewijaną karuzelę produktów: zdjęcie + nazwa + cena + link do karty. Możesz wstawić dowolną liczbę karuzel, każdą z innym zestawem towarów.

1. Kreator znacznika

Ustaw opcje — znacznik i podgląd zaktualizują się na żywo. Skopiuj gotowy znacznik do treści.

Bez ids/kody karuzela pokaże towary powiązane przypisane do wpisu. Z ids/kody — dokładnie wskazane (nie muszą być powiązane).

2. Podgląd na żywo

Podgląd poglądowy (przykładowe kafle). Zdjęcia i ceny na sklepie pobierane są z kart towarów przy zapisie.

3. Wszystkie atrybuty

Ceny na kaflu

Cena pobierana jest automatycznie przy zapisie (nie ustawiasz jej w znaczniku):

• Cena bieżąca (brutto) — zawsze, gdy towar ma cenę.
• Cena przekreślona — gdy na towarze ustawiona jest „cena przekreślona" (pole w karcie towaru; promocja/rabat to osobny mechanizm — nie pojawia się jako przekreślona).
• Cena w punktach („· N pkt") — gdy towar ma cenę punktową.

Wszystkie ceny (bieżąca z promocją, przekreślona, omnibus, punkty) pobierane są automatycznie ze Storefront GraphQL API sklepu — bez żadnej dodatkowej konfiguracji ani klucza.

4. CSS — wgraj RAZ do sklepu

Panel → Menedżer plików CMS → plik data/include/cms/cms_styles/cms_pages.css (jest już ładowany na stronach CMS) → dopisz na końcu:

.dp-karuzela{display:flex;gap:14px;overflow-x:auto;padding:8px 2px 16px;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none}
.dp-karuzela::-webkit-scrollbar{display:none}
.dp-karuzela__title{font-size:18px;font-weight:700;margin:18px 0 8px}
.dp-karuzela__item{flex:0 0 auto;width:170px;display:flex;flex-direction:column;text-decoration:none;color:inherit;border:1px solid #e5e5e5;border-radius:10px;overflow:hidden;background:#fff;transition:box-shadow .15s,transform .15s}
.dp-karuzela__item:hover{box-shadow:0 4px 14px rgba(0,0,0,.12);transform:translateY(-2px)}
.dp-karuzela__ph{display:flex;align-items:center;justify-content:center;aspect-ratio:1/1;background:#f6f6f6;overflow:hidden}
.dp-karuzela__ph img{width:100%;height:100%;object-fit:contain}
.dp-karuzela__name{padding:8px 10px 4px;font-size:13px;line-height:1.35;font-weight:500;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dp-karuzela__price{margin-top:auto;padding:2px 10px 12px;font-size:15px;font-weight:700;color:#c0392b}
.dp-karuzela__old{color:#8a8f98;font-weight:400;font-size:13px;text-decoration:line-through;margin-right:5px}
.dp-karuzela__pts{color:#666;font-weight:500;font-size:12px}
.dp-karuzela__save{color:#c0392b;font-weight:600;font-size:13px}
.dp-karuzela__omni{display:block;padding:0 10px 8px;font-size:11px;color:#8a8f98;font-weight:400}
.dp-siatka{display:grid;gap:14px;padding:8px 0 16px}
.dp-siatka .dp-karuzela__item{width:auto}
.dp-karuzela-wrap{position:relative;padding:0 46px}
.dp-karuzela__nav{position:absolute;top:38%;transform:translateY(-50%);width:38px;height:38px;border-radius:50%;border:1px solid #e0e0e0;background:#fff;color:#333;font-size:22px;line-height:1;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.15);z-index:2;display:none;align-items:center;justify-content:center;padding:0}
.dp-karuzela__nav:hover{background:#f3f3f3}
.dp-karuzela__nav--prev{left:2px}
.dp-karuzela__nav--next{right:2px}
.dp-karuzela-wrap.dp-scroll .dp-karuzela__nav{display:flex}
.dp-karuzela-wrap.dp-atstart .dp-karuzela__nav--prev{display:none}
.dp-karuzela-wrap.dp-atend .dp-karuzela__nav--next{display:none}
.dp-karuzela-wrap::before,.dp-karuzela-wrap::after{content:"";position:absolute;top:0;bottom:16px;width:64px;z-index:1;pointer-events:none;opacity:0;transition:opacity .2s}
.dp-karuzela-wrap::before{left:0;background:linear-gradient(90deg,#fff 22%,rgba(255,255,255,0))}
.dp-karuzela-wrap::after{right:0;background:linear-gradient(270deg,#fff 22%,rgba(255,255,255,0))}
.dp-karuzela-wrap.dp-scroll::before,.dp-karuzela-wrap.dp-scroll::after{opacity:1}
.dp-karuzela-wrap.dp-atstart::before{opacity:0}
.dp-karuzela-wrap.dp-atend::after{opacity:0}

Dla działających strzałek dodaj też jednorazowo skrypt (globalny JS szablonu) — albo użyj style=inline, które wstrzyknie CSS i skrypt strzałek automatycznie.

Alternatywa bez ruszania sklepu: dodaj do znacznika style=inline — wtedy CSS wjedzie razem z treścią (raz na stronę).

5. Przykłady

Jedna karuzela z powiązanych, z tytułem, ukrywająca blok natywny:

<h2>O ofercie</h2><p>Opis wpisu…</p>
[karuzela_towarow tytul="Polecane" ukryj_powiazane=1]

Dwie różne karuzele w jednym wpisie:

<h2>Bestsellery</h2>
[karuzela_towarow tytul="Bestsellery" ids=100001488,100001408]

<h2>Akcesoria</h2>
[karuzela_towarow tytul="Akcesoria" ids=800,100001407 limit=4]

Siatka 4 kolumny (grid) zamiast karuzeli:

[karuzela_towarow tytul="Nasze produkty" uklad=siatka kolumny=4 ids=100001488,100001408,100001407,800]

Karuzela ze strzałkami, ukrywająca natywny blok, z inline CSS:

[karuzela_towarow tytul="Polecane" ids=100001488,100001408,100001407,800,801,802 strzalki=1 style=inline ukryj_powiazane=1]

Pełne body do POST /page:

{
  "visibility": "all",
  "settings": { "showInIndex": "y", "showIndexOnPage": "y", "showInSearchHints": "y" },
  "content": {
    "pol": {
      "title": "Moja podstrona",
      "html": "<h2>Opis</h2><p>Treść…</p>[karuzela_towarow tytul=\"Polecane\" ids=100001488,100001408 ukryj_powiazane=1]"
    }
  }
}

6. Ważne

• Cena to cena brutto pobrana z karty towaru. Towar bez aktywnej ceny → kafel bez ceny.
• Link kafla prowadzi do karty towaru (adres kanoniczny). Towar niedostępny publicznie może zostać pominięty.
• Możesz wstawić dowolną liczbę znaczników — każdy to osobna karuzela.
• Znacznik działa w każdym języku wpisu (osobno w treści danego języka).