# 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…
- Strona:
- Język: pl
- Zaktualizowano: 2026-11-02
- Inne języki: [fr](https://www.datafirefly.com/documentation/dfproductstory/index.md), [en](https://www.datafirefly.com/en/documentation/dfproductstory/index.md), [es](https://www.datafirefly.com/es/documentation/dfproductstory/index.md), [de](https://www.datafirefly.com/de/documentation/dfproductstory/index.md), [it](https://www.datafirefly.com/it/documentation/dfproductstory/index.md), [pt](https://www.datafirefly.com/pt/documentation/dfproductstory/index.md), [nl](https://www.datafirefly.com/nl/documentation/dfproductstory/index.md)
- Indeks:
## 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.
**Nowości w 2.0.0:** edytor wizualny z podglądem na żywo, 4 gotowe szablony, bloki FAQ i opinii, harmonogram, podkategorie, link podglądu w sklepie, zgodność z PrestaShop 1.7.8, pełne tłumaczenia w 8 językach i wzmocnione bezpieczeństwo.
Historia na karcie produktu: blok obraz + tekst i cztery zalety w Hummingbird
## 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.
Lista historii produktów z kluczowymi liczbami i statusem widoczności w panelu PrestaShop
## 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.
Ekran startowy z czterema gotowymi szablonami historii lub pustą historią
Wizualny edytor historii z blokiem obraz + tekst i podglądem na żywo
## 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**.
Wybór typu bloku: obraz + tekst, zalety, porównanie, wideo, FAQ, opinia, tekst
Edytor tabeli porównawczej z wyróżnioną kolumną i ikonami znacznika i krzyżyka
Karta produktu: blok technologii i tabela porównawcza z wyróżnioną kolumną
Wideo produktu ładowane po kliknięciu z okładką i opinia klienta z oceną
FAQ produktu w dostępnym akordeonie z rozwiniętym pierwszym pytaniem
## 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.
Blok zalet edytowany z mobilnym podglądem na żywo
## 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.
Wybór produktów i kategorii z podkategoriami i podsumowaniem
## 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.
Status, okres wyświetlania i priorytet historii
## 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-`).
Ustawienia modułu: położenie, styl, kolor akcentu, szerokość, animacja i ładowanie wideo
Historia wyświetlana w zakładce produktu (akordeon Hummingbird)
## 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.
Responsywna historia produktu na smartfonie
## 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.