Slider

Scena typu Slider renderuje się jako hero slider osadzony w stronie CMS Shopware (Shopping Experiences). W przeciwieństwie do popupu nie odpala się client-side — jest częścią normalnego pipeline’u layoutu CMS, renderowanym server-side w momencie ładowania strony. Wiele slajdów, każdy ze swoją sceną warstw, utrzymywanych w synchronizacji przez wbudowaną oś czasu slidera.

Kiedy używać slidera

• Rotacja hero na stronie głównej — typowy use case “5 bannerów, które auto-rotują”.
• Sekcje storytellingowe na landing pages kategorii — sekwencyjne kadry prowadzące odwiedzającego przez kampanię.
• Siatki porównawcze, gdzie każdy slajd to inne ujęcie tej samej oferty.

Jeśli chcesz coś, co odpala raz na sesję na dowolnych stronach, użyj popupu.

Slajdy

Każdy slajd to jedna warstwa scene (kontener z własną wewnętrzną osią czasu) plus opcjonalne warstwy constant, które utrzymują się na wszystkich slajdach (logo, kropki nawigacyjne, nawigacja, elementy dekoracyjne). Slajdami zarządzasz z panelu Slider slide panel na dole edytora.

Wbudowana root-scena Slider timeline auto-aligns slajdy do jednej master timeline, dzięki czemu per-slajdowe animacje i transitiony między slajdami pozostają zsynchronizowane.

Dodawanie slidera do strony CMS

1. Otwórz Catalogues → Shopping Experiences → Pages (albo layout przypisany do kategorii).
2. Edytuj layout, dodaj sekcję, a w niej blok.
3. Z element pickera bloku wybierz P2Lab Stage Slider (element CMS zarejestrowany jako p2lab-stage-slider).
4. Config elementu (prawy panel boczny) pokazuje picker Slider stage. Wybierz jedną ze swoich scen typu slider. Preview storefrontu odświeża się inline.
5. Zapisz stronę CMS.

Dopóki scena nie jest przypisana, element pokazuje “Pick a slider stage in the side panel to assign.” Po przypisaniu preview pokazuje live render slidera.

Konfiguracja odtwarzania

Odtwarzanie slidera konfigurujesz per scena w modalu Stage settings (ikona koła zębatego w toolbarze edytora), sekcja Slider:

• Autoplay — slajdy przesuwają się automatycznie.
• Loop slides — gdy autoplay dojdzie do ostatniego slajdu, wraca do pierwszego zamiast zatrzymać się.
• Transition — efekt wizualny między slajdami. Crossfade, horizontal slide albo 3D flip.
• Transition duration (ms) — jak długo animuje się przejście.
• Show prev/next arrows — buttony strzałek lewo/prawo renderowane nad krawędziami slidera.
• Show dots — dolny pasek małych kropek nawigacyjnych (po jednej na slajd). Każda kropka ma role="tab" + aria-current dla dostępności.
• Pause on hover — autoplay pauzuje, gdy kursor jest nad sliderem.
• Enable touch swipe — odwiedzający mogą swipować lewo/prawo na urządzeniach dotykowych.

Opcja Convert to multi-slide jest dostępna, gdy edytor wykryje scenę z jednym slajdem i zaproponuje upgrade.

Co renderuje storefront

Element CMS deleguje do partiala stage-slider.html.twig, który produkuje:

• <div class="p2lab-stage-slider" data-p2lab-stage-slider> jako root
• .p2lab-stage-slider__viewport zawierający jeden .p2lab-stage-slider__slide na slajd
• .p2lab-stage-slider__global-overlay na constant cross-slide layery (jeśli są)
• .p2lab-stage-slider__nav ze strzałkami prev/next (jeśli włączone)
• pasek .p2lab-stage-slider__dots (jeśli włączony)

Instancja JS P2LabStageSliderPlugin na każdym elemencie data-p2lab-stage-slider obsługuje autoplay, transitiony, swipe, klawiaturę i silnik parallax.

Slidery vs popupy — w skrócie

	Slider	Popup
Gdzie się pojawia	Wewnątrz sekcji strony CMS	Nakładka na dowolnej stronie
Kiedy się renderuje	Server-side ze stroną	Client-side po /p2lab-stage/resolve
Wiele wariantów	Nie (zawsze inline)	9 wariantów (modal, banner, slide-in, toast)
Wiele “klatek”	Tak (slajdy)	Nie (pojedyncza scena)
Trigger / częstotliwość	n/d (zawsze widoczny na stronie hosta)	Konfigurowalne per scena
Targetowanie	Przez przypisanie strony CMS	Przez typy stron / wzorce URL / kanały / reguły
Statystyki	Obecnie ukierunkowane na popupy — slidery nie odpalają eventów impression / close w ten sam sposób	Pełne tracking impression / CTA / close / dismiss

Powiązane

• Edytor → Stage Settings — sekcja Slider (autoplay / loop / transition / arrows / dots).
• Edytor → Timeline — keyframe’y i presety działają tak samo na slider scenes.
• Edytor → Templates — wbudowane slider startery (rotating-cans, studio-edit, editorial-spotlight).
• Storefront → Customizacja CSS — slider-specific klasy (.p2lab-stage-slider__*).