DF Product Story: bloki storytellingowe na karcie produktu

Przegląd

DF Product Story dodaje sekcje storytellingu do kart produktów PrestaShop: obraz + tekst, zalety, tabelę porównawczą, wideo, FAQ, opinię i tekst. Każdą historię tworzysz w edytorze wizualnym z podglądem na żywo, a potem wybierasz produkty lub kategorie, na których się wyświetla, pod kartą produktu lub w zakładce.

Instalacja i aktualizacja

1. W panelu otwórz Moduły > Menedżer modułów > Wgraj moduł.
2. Wgraj dfproductstory-2.0.0.zip i kliknij Zainstaluj (lub Aktualizuj, jeśli masz wersję 1.x).
3. Otwórz Katalog > Historie produktów, aby utworzyć pierwszą historię.

Aktualizacja z 1.x zachowuje historie, bloki, tłumaczenia i przypisania. Dodaje nowe kolumny, kopiuje obrazy do /img/dfproductstory/, czyści HTML zapisany przez 1.x i opróżnia łączoną pamięć podręczną CSS/JS.

Zgodność: PrestaShop od 1.7.8 do 9.x, PHP 7.1 lub nowszy, Classic, Hummingbird i motywy potomne.

Lista historii

Katalog > Historie produktów pokazuje kluczowe liczby oraz dla każdej historii miejsce wyświetlania, liczbę bloków i widoczność: Online, Start: …, Zakończona, Niekompletna lub Wyłączona. Menu wiersza pozwala Duplikować historię; kopia jest nieaktywna.

Tworzenie historii

Kliknij Nowa historia. Wybierz gotowy układ (pełna historia, prezentacja zalet, dlaczego my, prezentacja wideo) i zastąp przykładowe teksty albo zacznij od pustej historii. Nazwa historii jest widoczna tylko w panelu.

Edytor ma trzy zakładki: Treść, Gdzie wyświetlać oraz Harmonogram i priorytet. Górny pasek pokazuje stan zapisu, Podgląd w sklepie i Zapisz (Ctrl+S). Przed opuszczeniem strony z niezapisanymi zmianami pojawia się ostrzeżenie.

Typy bloków

• Obraz + tekst: obraz po lewej lub prawej, etykieta, tytuł, sformatowany tekst, tekst alternatywny i opcjonalny przycisk.
• Zalety: od 2 do 4 kolumn z ikoną (emoji, klasa Font Awesome lub wysłany obraz), tytułem i tekstem.
• Tabela porównawcza: wiersze i kolumny, wyróżniona kolumna (gwiazdka), ✓ lub ✗ wyświetlane jako znacznik lub krzyżyk.
• Wideo: link YouTube, Vimeo lub MP4 rozpoznawany automatycznie; z okładką brak żądań do YouTube przed kliknięciem.
• FAQ: pytania i odpowiedzi w dostępnym akordeonie.
• Opinia: cytat, imię, funkcja, zdjęcie i ocena od 1 do 5.
• Sekcja tekstowa: tytuł i akapit, wyrównany do lewej lub wyśrodkowany.

Każdy blok można zwinąć, ukryć, zduplikować, przesunąć (strzałki lub przeciąganie), wstawić między dwa bloki i usunąć z opcją Cofnij.

Języki i podgląd na żywo

Znaczniki języków pokazują stan: zielony pełny, pomarańczowy częściowy, czerwony pusty. Wiersze, kolumny i elementy są wspólne dla wszystkich języków; zmieniają się tylko teksty. Kopiuj teksty z… pozwala zacząć od innego języka.

Podgląd aktualizuje się podczas pisania i przewija do edytowanego bloku, na komputerze lub telefonie. Dokładny wygląd z Twoim motywem pokazuje Podgląd w sklepie, także dla historii nieaktywnej lub zaplanowanej.

Gdzie wyświetlać historię

• Produkty: wyszukiwanie po nazwie, indeksie lub ID.
• Kategorie: zaznacz kategorie w filtrowanym drzewie; Uwzględnij podkategorie obejmuje też kategorie podrzędne.

Podsumowanie pokazuje liczbę objętych produktów. Zasada: produkt wybrany bezpośrednio zawsze pokazuje własne historie; produkt bez własnej historii pokazuje historie swoich kategorii.

Harmonogram, priorytet i status

Ustaw datę rozpoczęcia i/lub zakończenia dla treści sezonowych. Gdy do produktu pasuje kilka historii, wyświetlają się według rosnącego priorytetu (0 najpierw). Nieaktywna historia nigdy nie jest pokazywana klientom, ale można zobaczyć jej podgląd.

Ustawienia wyświetlania

Otwórz Moduły > DF Product Story > Konfiguruj:

• Położenie: pod kartą produktu (zalecane), w zakładce produktu (zakładka Classic lub akordeon Hummingbird) albo własne położenie z {hook h='displayDfProductStory' product=$product} lub {widget name='dfproductstory' product=$product}.
• Tytuł zakładki w każdym języku.
• Styl Delikatny, Kontur lub Minimalny, kolor akcentu (domyślnie kolor motywu) i szerokość.
• Animacja pojawiania, ładowanie wideo po kliknięciu i Font Awesome (tylko gdy historia używa ikony fa-).

Urządzenia mobilne i dostępność

Bloki dopasowują się do ekranu i dostępnej szerokości. Prawdziwy przycisk dla wideo, nagłówki tabel, znaczniki i krzyżyki odczytywane przez czytniki ekranu, widoczny fokus i wyłączone animacje dla osób, które wolą ograniczyć ruch.

Bezpieczeństwo i uprawnienia

• Sformatowane teksty są filtrowane białą listą (bez skryptów, atrybutów zdarzeń i linków javascript:).
• Każda akcja sprawdza uprawnienia: profil tylko do odczytu nie może zapisywać.
• Wysyłane pliki: prawdziwe obrazy JPG, PNG, WebP i GIF do 8 MB w /img/dfproductstory/.

Wydajność i prywatność

• CSS i JS tylko na kartach z historią; Font Awesome tylko w razie potrzeby.
• Obrazy ładowane leniwie z wymiarami; odtwarzacze YouTube i Vimeo ładowane po kliknięciu (youtube-nocookie.com, Vimeo dnt=1).
• Bez nadpisywania klas i kontrolerów.

Odinstalowanie

Odinstalowanie usuwa historie, bloki, przypisania, zakładkę administracyjną i ustawienia. Obrazy w /img/dfproductstory/ pozostają.

Rozwiązywanie problemów

Historia się nie wyświetla

• Sprawdź, czy jest aktywna, w okresie wyświetlania i przypisana do produktu lub jednej z jego kategorii.
• Sprawdź, czy bloki mają treść w oglądanym języku.
• Jeśli produkt ma własną historię, historie kategorii się na nim nie wyświetlają.

Po aktualizacji widać stary wygląd

Wyczyść pamięć podręczną w Zaawansowane > Wydajność, jeśli kopiowałeś pliki ręcznie.