DF Product Story: bloki storytellingowe na karcie produktu

Prezentacja

DF Product Story dodaje rozbudowane sekcje storytellingowe na kartach produktów PrestaShop 8 i 9: naprzemienne bloki obraz + tekst, wideo click-to-play, tabelę porównawczą, siatkę ikon korzyści i dowolny tekst. Historie składa się w builderze przeciągnij i upuść w panelu administracyjnym, a następnie wyświetlają się automatycznie na wskazanych produktach lub kategoriach: pod opisem albo w dedykowanej zakładce.

Instalacja

1. W panelu administracyjnym PrestaShop przejdź do Moduły > Menedżer modułów > Zainstaluj moduł.
2. Wgraj plik dfproductstory-1.0.0.zip.
3. Kliknij Zainstaluj. Moduł tworzy swoje tabele, zakładkę administracyjną oraz domyślne tytuły zakładki w językach FR/EN/ES/DE/IT.

Po instalacji dostępne są dwa wejścia: strona konfiguracji modułu (Moduły > DF Product Story > Konfiguruj) oraz menedżer historii w Katalog > DF Product Story.

Konfiguracja ogólna

Strona konfiguracji modułu zawiera trzy ustawienia:

• Miejsce wyświetlania: „Pod treścią produktu” (hook displayFooterProduct, domyślnie) lub „Dodatkowa zakładka produktu” (hook displayProductExtraContent, obok opisu).
• Tytuł zakładki: wielojęzyczna etykieta używana wyłącznie w trybie zakładki. Wartości domyślne są dostarczone w pięciu językach.
• Lazy-load wideo: włączony domyślnie. Zastępuje iframe’y YouTube/Vimeo lekką fasadą click-to-play, zdecydowanie zalecane dla Core Web Vitals.

Tworzenie historii

1. Przejdź do Katalog > DF Product Story i kliknij Dodaj historię.
2. Uzupełnij nazwę wewnętrzną (nigdy nie jest wyświetlana na froncie), priorytet (im niższa liczba, tym wyżej wyświetla się historia, gdy kilka się kumuluje) oraz status Aktywna.
3. Dodaj bloki przyciskami + Dodaj blok, wypełnij je, a następnie kliknij Zapisz historię.

5 typów bloków

Obraz + tekst

Sztandarowy blok storytellingu: obraz z jednej strony, tytuł i tekst z drugiej. Wybierz pozycję obrazu (lewa lub prawa) i przeplataj bloki, aby stworzyć wizualny rytm zygzaka. Obraz wgrywa się bezpośrednio z buildera (jpg, png, webp, gif, maks. 4 MB). Pole tekstowe akceptuje HTML.

Wideo

Trzy możliwe źródła: YouTube (wklej dowolny URL watch, embed, shorts lub youtu.be), Vimeo albo bezpośredni MP4 (pełny URL pliku). Przy włączonym lazy-load YouTube i Vimeo wyświetlają się jako fasada click-to-play z miniaturą: iframe ładuje się dopiero po kliknięciu, przez youtube-nocookie.com i parametr dnt=1 Vimeo. Pole podpisu wyświetla się pod wideo.

Tabela porównawcza

Dodawaj dowolną liczbę kolumn i wierszy przyciskami + Kolumna / + Wiersz. Ustawienie Wyróżniona kolumna nakłada niebieskie podświetlenie na wybraną kolumnę, przydatne do kierowania uwagi na flagową gamę. Tabela przewija się poziomo na urządzeniach mobilnych.

Ikony korzyści

Siatka od 2 do 4 kolumn kluczowych argumentów. Każdy element zawiera ikonę (emoji, krótki tekst lub ścieżkę do wgranego obrazu), tytuł i tekst. Elementy zmieniają kolejność strzałkami.

Tekst

Tytuł i dowolna treść HTML, do długich sekcji narracyjnych lub każdej potrzeby niepokrytej przez pozostałe bloki.

Porządkowanie bloków

• Przeciągnij i upuść: chwyć uchwyt ⋮⋮ bloku i upuść go na nowej pozycji.
• Strzałki ↑ ↓: alternatywa klawiaturowa dla przeciągania.
• Duplikuj: kopiuje blok ze wszystkimi ustawieniami i treściami we wszystkich językach.
• Usuń: prosi o potwierdzenie przed usunięciem bloku.

Tłumaczenie treści

U góry panelu bloków zakładki pokazują każdy aktywny język sklepu (FR, EN, ES…). Kliknij zakładkę, aby przełączyć wszystkie edytory na ten język: tytuły, teksty, kolumny tabeli i elementy korzyści tłumaczy się niezależnie. Ustawienia strukturalne (pozycja obrazu, źródło wideo, liczba kolumn) są wspólne dla wszystkich języków.

Przypisywanie do produktów i kategorii

Panel przypisań działa na dwóch poziomach:

• Wybrane produkty: szukaj po nazwie, indeksie lub ID, a następnie kliknij wynik, aby dodać go jako chip. Jeśli wybrany jest co najmniej jeden produkt, historia wyświetla się tylko na tych produktach.
• Kategorie (fallback): zaznacz kategorie w drzewie. Historia wyświetla się na wszystkich produktach należących do tych kategorii, chyba że dla danego produktu istnieje już bezpośrednia historia produktowa.

Gdy kilka historii pasuje do tego samego produktu, wyświetlają się wszystkie, posortowane rosnąco według priorytetu.

Multisklep

W kontekście multisklepu historia utworzona z kontekstu „Wszystkie sklepy” jest widoczna w całej sieci. Historia utworzona z konkretnego sklepu jest ograniczona do tego sklepu.

Wydajność i RODO

• CSS i JS frontu ładują się wyłącznie na kartach produktów.
• Obrazy bloków używają natywnego lazy loadingu przeglądarki.
• Wideo w fasadzie click-to-play nie ładuje żadnego skryptu zewnętrznego przed kliknięciem odwiedzającego, dzięki youtube-nocookie.com i Vimeo dnt=1: żaden zewnętrzny plik cookie nie jest zapisywany przy ładowaniu strony.
• CSS frontu jest neutralny i dziedziczy typografię motywu.

Deinstalacja

Deinstalacja usuwa tabele modułu, historie i bloki, przypisania, zakładkę administracyjną oraz wartości konfiguracji. Obrazy wgrane do folderu modułu również są usuwane razem z nim.

FAQ / Rozwiązywanie problemów

Historia nie wyświetla się na froncie

• Sprawdź, czy historia jest aktywna i czy zawiera co najmniej jeden blok z treścią w przeglądanym języku.
• Sprawdź przypisania: jeśli wybrano produkty, historia pojawia się tylko na nich; w przeciwnym razie podąża za zaznaczonymi kategoriami.
• W trybie zakładki niektóre mocno zmodyfikowane motywy nie implementują displayProductExtraContent: przełącz na „Pod treścią produktu”.

Wideo YouTube się nie pojawia

Sprawdź, czy URL zawiera poprawny identyfikator filmu (akceptowane formaty: watch?v=, youtu.be/, embed/ oraz shorts/). Same playlisty nie są obsługiwane.

Wgrywanie obrazu kończy się błędem

Akceptowane formaty: jpg, jpeg, png, webp, gif, maksymalny rozmiar 4 MB. Sprawdź też, czy folder modułu ma prawa zapisu dla serwera WWW.