Konfiguracja

Lookbook ma dwie warstwy ustawień: każdy lookbook niesie własny obraz i hotspoty, a ekran globalny ustala domyślne ustawienia prezentacji obowiązujące każdy lookbook.

Ustawienia per-lookbook (edytor Lookbooks)

Każdy lookbook to osobny wpis w menu Lookbooks.

Obraz

Ustaw obraz lookbooka standardowym polem Obrazek wyróżniający. To scena, którą kupujący będą przeglądać. Obraz rezerwuje swoje miejsce na stronie, więc nie ma przeskoku układu podczas ładowania.

Hotspoty

Dodaj jeden hotspot na każdy produkt, który chcesz przypiąć:

• X — pozycja pozioma jako procent od lewej krawędzi (0–100).
• Y — pozycja pionowa jako procent od górnej krawędzi (0–100).
• ID produktu — produkt WooCommerce, do którego prowadzi hotspot.

Edytor pokazuje podgląd na żywo obrazu, byś dopasował każdy znacznik do produktu na zdjęciu. Dodaj tyle hotspotów, ile potrzebuje scena.

Prezentacja globalna (WooCommerce → Lookbook)

Te domyślne ustawienia obowiązują wszystkie lookbooki:

• Pokaż cenę — przełącz wyświetlanie ceny na żywo w karcie produktu.
• Pokaż dodaj do koszyka — przełącz link dodaj do koszyka w karcie i dostosuj jego etykietę.
• Styl znacznika — wybierz, jak renderują się hotspoty:
  • Pulsująca kropka — delikatnie animowana kropka.
  • Znak plus — znacznik plus.
  • Numerowany — kolejne numery, przydatne przy prowadzonych looków.

Animacja pulsowania respektuje prefers-reduced-motion.

Dane produktu na żywo

Lookbook czyta dane produktu na żywo z WooCommerce, więc cena i stan magazynowy pokazane w karcie są zawsze aktualne — nic nie trzeba synchronizować po zmianie cen.

Bezpieczne zachowanie

Lookbook jest zbudowany tak, by nigdy nie renderować zepsutego wyniku:

• Lookbook bez obrazu renderuje się czysto.
• Lookbook bez hotspotów renderuje obraz bez znaczników.
• Hotspot wskazujący na usunięty lub niepublikowany produkt jest po prostu pomijany — dla nieistniejącego produktu nie rysuje się znacznik.

Wydajność

Arkusz stylów i skrypt ładują się tylko na stronach, które faktycznie renderują lookbook, skrypt jest odroczony (defer), nie używa się jQuery, a obraz rezerwuje miejsce — więc nie ma przeskoku układu (CLS).