DF Product Story: storytellingblokken op de productfiche
DF Product Story installeren en gebruiken: drag-and-dropbouwer, storytellingblokken, vertaling en doelbepaling per product of categorie.
Overzicht
DF Product Story voegt rijke storytellingsecties toe aan uw productfiches in PrestaShop 8 en 9: blokken met afwisselend beeld en tekst, video met click-to-play, een vergelijkingstabel, een raster met voordelenpictogrammen en vrije tekst. U stelt de verhalen samen in een drag-and-dropbouwer in de backoffice, waarna ze automatisch verschijnen op de producten of categorieën die u aanduidt, onder de beschrijving of in een eigen tabblad.
Een verhaal dat aan een categorie is toegewezen, dekt automatisch al haar producten. Rechtstreekse toewijzingen aan een product blijven voorgaan: ideaal om uw bestsellers eigen inhoud te geven.
Installatie
- Ga in uw PrestaShop-backoffice naar Modules > Modulebeheer > Een module installeren.
- Upload het bestand
dfproductstory-1.1.0.zip. - Klik op Installeren. De module maakt zijn tabellen, zijn beheertabblad en de standaard tabbladtitels in FR/EN/ES/DE/IT aan.
Na de installatie zijn er twee ingangen: de configuratiepagina van de module (Modules > DF Product Story > Configureren) en het beheer van de verhalen onder Catalogus > DF Product Story.
Algemene configuratie
De configuratiepagina van de module bevat vier instellingen:
- Weergaveplaats: « Onder de productinhoud » (hook displayFooterProduct, standaard) of « Extra producttabblad » (hook displayProductExtraContent, naast de beschrijving).
- Titel van het tabblad: meertalig opschrift dat alleen in de tabbladmodus wordt gebruikt. Er worden standaardwaarden in de vijf talen geleverd.
- Lazy load voor video’s: standaard aan. Vervangt de iframes van YouTube en Vimeo door een lichte click-to-playvoorkant, sterk aanbevolen voor de Core Web Vitals.
- Font Awesome laden (CDN): standaard uit. Laadt Font Awesome 6 op de productfiches zodat u klassen als « fa-solid fa-star » in de voordelenpictogrammen kunt gebruiken. Overbodig als uw thema Font Awesome al meebrengt.
Een verhaal aanmaken
- Ga naar Catalogus > DF Product Story en klik op Een verhaal toevoegen.
- Vul de interne naam in (nooit aan de frontzijde getoond), de prioriteit (hoe lager het cijfer, hoe hoger het verhaal verschijnt wanneer er meerdere samenkomen) en de status Actief.
- Voeg uw blokken toe met de knoppen + Een blok toevoegen, vul ze in en klik op Het verhaal opslaan.
Het opslaan gebeurt via AJAX: u blijft op de pagina en kunt aanpassingen na elkaar doorvoeren. Een melding bevestigt elke bewaring.
De 5 bloktypes
Beeld + tekst
Het kenmerkende storytellingblok: een afbeelding aan de ene kant, een titel en tekst aan de andere. Kies de positie van de afbeelding (links of rechts) en wissel de blokken af voor een zigzaggend visueel ritme. De afbeelding uploadt u rechtstreeks vanuit de bouwer (jpg, png, webp, gif, maximaal 4 MB). Het tekstveld aanvaardt HTML.
Video
Drie mogelijke bronnen: YouTube (plak eender welke URL van het type watch, embed, shorts of youtu.be), Vimeo of MP4 rechtstreeks (de volledige URL van het bestand). Met lazy load aan verschijnen YouTube en Vimeo als een click-to-playvoorkant met miniatuur: de iframe wordt pas bij de klik geladen, via youtube-nocookie.com en de parameter dnt=1 van Vimeo. Het bijschriftveld verschijnt onder de video.
Vergelijkingstabel
Voeg met de knoppen + Kolom en + Rij zoveel kolommen en rijen toe als nodig. De instelling Uitgelichte kolom geeft de kolom van uw keuze een blauwe markering, handig om naar uw sterkste gamma te sturen. De tabel schuift horizontaal op mobiel.
Voordelenpictogrammen
Een raster van 2 tot 4 kolommen met kernargumenten. Elk item bevat een pictogram (een emoji, een Font Awesome-klasse als « fa-solid fa-star » of het pad van een geüploade afbeelding), een titel en een tekst. De items herschikt u met de pijlen.
Tekst
Een titel en vrije HTML-inhoud, voor lange verhalende secties of elke behoefte die de andere blokken niet dekken.
De blokken ordenen
- Slepen en neerzetten: pak de greep ⋮⋮ van een blok en zet het op zijn nieuwe plaats.
- Pijlen ↑ ↓: alternatief met toetsenbord of muis voor het slepen.
- Dupliceren: kopieert het blok met al zijn instellingen en inhoud in alle talen.
- Verwijderen: vraagt om bevestiging voordat het blok weggaat.
De inhoud vertalen
Boven aan het blokkenpaneel staan tabbladen voor elke actieve taal van uw winkel (FR, EN, ES en zo verder). Klik op een tabblad om alle editors naar die taal om te schakelen: titels, teksten, tabelkolommen en voordeelitems vertaalt u onafhankelijk van elkaar. De structurele instellingen (positie van de afbeelding, videobron, aantal kolommen) zijn gedeeld tussen alle talen.
Denk eraan op te slaan voordat u de pagina verlaat: de inhoud die u in alle talen invoert, wordt in één bewaring verstuurd.
Producten en categorieën aanduiden
Het doelbepalingspaneel werkt op twee niveaus:
- Beoogde producten: zoek op naam, referentie of ID en klik op een resultaat om het als label toe te voegen. Is er minstens één product gekozen, dan verschijnt het verhaal alleen op die producten.
- Categorieën (terugval): vink categorieën aan in de boomstructuur. Het verhaal verschijnt op alle producten uit die categorieën, tenzij er voor die producten al een rechtstreeks producttoegewezen verhaal bestaat.
Passen meerdere verhalen bij hetzelfde product, dan verschijnen ze allemaal, gesorteerd op oplopende prioriteit.
Multistore
In een multistore-omgeving is een verhaal dat vanuit de context « Alle winkels » is aangemaakt, op het hele netwerk zichtbaar. Een verhaal dat vanuit één bepaalde winkel is aangemaakt, blijft tot die winkel beperkt.
Prestaties en AVG
- De CSS en JS aan de frontzijde worden alleen op de productfiches geladen.
- De afbeeldingen van de blokken gebruiken de native lazy loading van de browser.
- Video’s met een click-to-playvoorkant laden geen enkel extern script vóór de klik van de bezoeker, via youtube-nocookie.com en Vimeo dnt=1: er worden bij het laden van de pagina geen cookies van derden geplaatst.
- De CSS aan de frontzijde is neutraal en neemt de typografie van uw thema over.
Verwijderen
Bij het verwijderen worden de tabellen van de module, de verhalen en blokken, de toewijzingen, het beheertabblad en de configuratiewaarden gewist. De afbeeldingen die in de map van de module zijn geüpload, verdwijnen samen met die map.
FAQ en probleemoplossing
Het verhaal verschijnt niet aan de frontzijde
- Controleer of het verhaal actief is en of het minstens één blok met inhoud in de bekeken taal bevat.
- Controleer de doelbepaling: zijn er producten gekozen, dan verschijnt het verhaal alleen daar; anders volgt het de aangevinkte categorieën.
- In tabbladmodus implementeren sommige sterk aangepaste thema’s displayProductExtraContent niet: schakel dan over op « Onder de productinhoud ».
De YouTube-video verschijnt niet
Controleer of de URL wel een geldige video-identificatie bevat (de formaten watch?v=, youtu.be/, embed/ en shorts/ worden aanvaard). Losse afspeellijsten worden niet ondersteund.
Het uploaden van een afbeelding mislukt
Aanvaarde formaten: jpg, jpeg, png, webp en gif, met een maximale grootte van 4 MB. Controleer ook of de map van de module beschrijfbaar is voor de webserver.