DF Product Story — Blocchi storytelling scheda prodotto

Panoramica

DF Product Story aggiunge sezioni storytelling ricche alle tue schede prodotto PrestaShop 8 e 9: blocchi immagine + testo alternato, video click-to-play, tabella comparativa, griglia di icone benefici e testo libero. Le story si compongono in un builder drag & drop nel back office e vengono mostrate automaticamente sui prodotti o le categorie che scegli — sotto la descrizione o in una scheda dedicata.

Installazione

1. Nel back office di PrestaShop, vai su Moduli > Gestione moduli > Carica un modulo.
2. Carica il file dfproductstory-1.0.0.zip.
3. Fai clic su Installa. Il modulo crea le sue tabelle, la sua scheda di amministrazione e i titoli di scheda predefiniti in FR/EN/ES/DE/IT.

Dopo l’installazione sono disponibili due punti di accesso: la pagina di configurazione del modulo (Moduli > DF Product Story > Configura) e il gestore delle story in Catalogo > DF Product Story.

Configurazione generale

La pagina di configurazione del modulo contiene tre impostazioni:

• Posizione di visualizzazione: «Sotto il contenuto prodotto» (hook displayFooterProduct, predefinita) o «Scheda prodotto aggiuntiva» (hook displayProductExtraContent, accanto alla descrizione).
• Titolo della scheda: etichetta multilingua usata solo in modalità scheda. Valori predefiniti forniti nelle cinque lingue.
• Lazy-load dei video: attivo di default. Sostituisce gli iframe di YouTube/Vimeo con una facciata click-to-play leggera — fortemente consigliato per i Core Web Vitals.

Creare una story

1. Vai su Catalogo > DF Product Story e fai clic su Aggiungi una story.
2. Compila il nome interno (mai visibile sul front office), la priorità (più il numero è basso, più in alto appare la story quando più story si sommano) e lo stato Attivo.
3. Aggiungi i tuoi blocchi con i pulsanti + Aggiungi un blocco, compilali e fai clic su Salva story.

I 5 tipi di blocchi

Immagine + testo

Il blocco simbolo dello storytelling: un’immagine da un lato, un titolo e un testo dall’altro. Scegli la posizione dell’immagine (sinistra o destra) e alterna i blocchi per creare un ritmo visivo a zigzag. L’immagine si carica direttamente dal builder (jpg, png, webp, gif — max 4 MB). Il campo di testo accetta HTML.

Video

Tre sorgenti possibili: YouTube (incolla qualsiasi URL watch, embed, shorts o youtu.be), Vimeo o MP4 diretto (URL completo del file). Con il lazy-load attivo, YouTube e Vimeo appaiono come facciata click-to-play con miniatura — l’iframe si carica solo al clic, tramite youtube-nocookie.com e il parametro dnt=1 di Vimeo. Il campo didascalia appare sotto il video.

Tabella comparativa

Aggiungi tutte le colonne e righe necessarie con i pulsanti + Colonna / + Riga. L’impostazione Colonna in evidenza applica un’evidenziazione blu alla colonna scelta — utile per orientare verso la tua gamma di punta. La tabella scorre orizzontalmente su mobile.

Icone benefici

Una griglia da 2 a 4 colonne di argomenti chiave. Ogni voce ha un’icona (un emoji, un testo breve o il percorso di un’immagine caricata), un titolo e un testo. Le voci si riordinano con le frecce.

Testo

Un titolo e un contenuto HTML libero, per sezioni narrative lunghe o qualsiasi esigenza non coperta dagli altri blocchi.

Organizzare i blocchi

• Drag & drop: afferra la maniglia ⋮⋮ di un blocco e rilascialo nella nuova posizione.
• Frecce ↑ ↓: alternativa tastiera/mouse al drag & drop.
• Duplica: copia il blocco con tutte le impostazioni e i contenuti in tutte le lingue.
• Elimina: chiede conferma prima di rimuovere il blocco.

Tradurre i contenuti

In alto nel pannello dei blocchi, delle schede mostrano ogni lingua attiva del tuo negozio (FR, EN, ES…). Fai clic su una scheda per passare tutti gli editor a quella lingua: titoli, testi, colonne di tabella e voci di beneficio si traducono in modo indipendente. Le impostazioni strutturali (posizione immagine, sorgente video, numero di colonne) sono condivise tra tutte le lingue.

Targeting di prodotti e categorie

Il pannello Targeting funziona su due livelli:

• Prodotti target: cerca per nome, riferimento o ID, poi clicca su un risultato per aggiungerlo come chip. Se almeno un prodotto è selezionato, la story appare solo su quei prodotti.
• Categorie (fallback): spunta le categorie nell’albero. La story appare su tutti i prodotti di quelle categorie, salvo che esista già una story prodotto diretta per loro.

Quando più story corrispondono allo stesso prodotto, vengono mostrate tutte, ordinate per priorità crescente.

Multinegozio

In contesto multinegozio, una story creata dal contesto «Tutti i negozi» è visibile su tutta la rete. Una story creata da un negozio specifico resta limitata a quel negozio.

Prestazioni e GDPR

• CSS e JS del front si caricano solo sulle schede prodotto.
• Le immagini dei blocchi usano il lazy loading nativo del browser.
• Le facciate video click-to-play non caricano alcuno script di terze parti prima del clic del visitatore, tramite youtube-nocookie.com e Vimeo dnt=1 — nessun cookie di terze parti viene impostato al caricamento della pagina.
• Il CSS del front è neutro ed eredita la tipografia del tuo tema.

Disinstallazione

La disinstallazione rimuove le tabelle del modulo, le story e i blocchi, le assegnazioni, la scheda di amministrazione e i valori di configurazione. Anche le immagini caricate nella cartella del modulo vengono rimosse con esso.

FAQ / Risoluzione dei problemi

La story non appare sul front office

• Verifica che la story sia attiva e contenga almeno un blocco con contenuto nella lingua consultata.
• Controlla il targeting: se ci sono prodotti selezionati, la story appare solo su di essi; altrimenti segue le categorie spuntate.
• In modalità scheda, alcuni temi molto personalizzati non implementano displayProductExtraContent: passa a «Sotto il contenuto prodotto».

Il video YouTube non appare

Verifica che l’URL contenga un identificativo video valido (formati watch?v=, youtu.be/, embed/ o shorts/ accettati). Gli URL di sole playlist non sono supportati.

Il caricamento dell’immagine fallisce

Formati accettati: jpg, jpeg, png, webp, gif, dimensione massima 4 MB. Verifica anche che la cartella del modulo sia scrivibile dal server web.