# Configuratore di Prodotto a Step: guida completa > Presentazione Il Configuratore di Prodotto a Step aggiunge alla scheda prodotto un percorso guidato: il cliente sceglie le sue opzioni (formato, supporto, colore, cornice…), scrive un testo, carica un file,… - Pagina: - Lingua: it - Aggiornato il: 2026-10-11 - Altre lingue: [fr](https://www.datafirefly.com/documentation/dfproductconfigurator/index.md), [en](https://www.datafirefly.com/en/documentation/dfproductconfigurator/index.md), [es](https://www.datafirefly.com/es/documentation/dfproductconfigurator/index.md), [de](https://www.datafirefly.com/de/documentation/dfproductconfigurator/index.md), [pl](https://www.datafirefly.com/pl/documentation/dfproductconfigurator/index.md), [nl](https://www.datafirefly.com/nl/documentation/dfproductconfigurator/index.md), [pt](https://www.datafirefly.com/pt/documentation/dfproductconfigurator/index.md) - Indice: ## Presentazione Il Configuratore di Prodotto a Step aggiunge alla scheda prodotto un percorso guidato: il cliente sceglie le sue opzioni (formato, supporto, colore, cornice…), scrive un testo, carica un file, e il prezzo si aggiorna a ogni scelta. Il sovrapprezzo è calcolato lato server e portato da una personalizzazione nativa di PrestaShop, quindi segue carrello, ordine e fattura. Il modulo sostituisce con vantaggio le combinazioni quando un prodotto unisce molte opzioni: non viene creata alcuna combinazione, ogni opzione porta il proprio prezzo e il proprio peso, e uno stesso configuratore può servire un intero catalogo. - **Configuratore**: un insieme di campi, collegato a uno o più prodotti e, se serve, a categorie. - **Campo**: uno step del percorso (elenco, pulsanti radio, campioni, miniature, testo, upload…). - **Opzione**: una scelta proposta in un campo, con prezzo, peso, riferimento e immagine. ## Installazione e aggiornamento 1. Nel back-office, apri **Moduli → Gestione moduli → Carica un modulo** e carica lo ZIP del modulo. 2. Clicca su **Configura** per accedere alle impostazioni di visualizzazione e ai dati demo. 3. I configuratori si gestiscono in **Moduli → Configuratori prodotto**. Compatibilità: PrestaShop da 1.7.7 a 9.x, PHP 7.1 e superiore (secondo la versione di PrestaShop). Il modulo non usa né Composer né jQuery e non richiede modifiche al tema. Per aggiornare, carica semplicemente il nuovo ZIP. Schema del database, hook e cache vengono aggiornati automaticamente, anche se i file sono stati copiati a mano senza passare dalla gestione moduli. I configuratori esistenti vengono conservati. ## Impostazioni di visualizzazione La pagina **Configura** del modulo raccoglie le impostazioni comuni a tutti i configuratori: - **Modalità di visualizzazione**: blocco integrato nella scheda prodotto (consigliato con un page builder), pulsante «Configura» che apre un popup a schermo intero, oppure sostituzione completa della scheda prodotto. - **Posizionamento**: automatico (hook `displayProductAdditionalInfo` del tema) o manuale (posizioni tu il configuratore, vedi la sezione Creative Elements). - **Nascondi il pulsante carrello nativo del tema**: evita l'aggiunta al carrello senza passare dal configuratore. - **Selettore di quantità nel configuratore**: in modalità integrata, mostra la quantità accanto al pulsante «Aggiungi al carrello» del configuratore e nasconde quella del tema. - **Mostra nome e descrizione del configuratore**: da disattivare quando titolo e testo del prodotto sono già gestiti dal tema o dal page builder. - **Mostra la barra dei passaggi** e **Numera i passaggi**: la riga di pulsanti sopra i campi e i numeri davanti a ogni titolo si possono nascondere separatamente. - **Dopo l'aggiunta al carrello**: popup con il dettaglio della personalizzazione, popup nativo del tema (modulo carrello `ps_shoppingcart`) oppure un semplice messaggio sotto il pulsante. ## Creare un configuratore In **Moduli → Configuratori prodotto**, clicca su **Nuovo configuratore**. Dalla scheda di un prodotto nel back-office (vecchia pagina prodotto), il pulsante «Crea un configuratore per questo prodotto» precompila il prodotto. ### Prodotti e categorie collegati - **Prodotti collegati**: digita un nome, un riferimento o un ID e clicca sul risultato. Aggiungi tutti i prodotti necessari; la croce di un'etichetta rimuove il prodotto. - **Categorie collegate**: seleziona le categorie i cui prodotti devono ricevere tutti il configuratore. Il filtro sopra l'elenco trova una categoria per nome. L'opzione **Includi sottocategorie** estende il collegamento a tutto l'albero. Ogni prodotto mantiene il proprio prezzo base. Se un prodotto è collegato a più configuratori attivi, il collegamento diretto al prodotto prevale su quello per categoria, poi il configuratore più vecchio. Un avviso elenca i prodotti interessati. ### Impostazioni generali - **Nome interno (facoltativo)**: serve a ritrovare il configuratore nell'elenco. Se vuoto, prende il nome del primo prodotto collegato. Appare nella scheda prodotto solo se l'impostazione corrispondente è attiva. - **Attivo**: un configuratore inattivo non appare su nessun prodotto. - **Blocca l'aggiunta se non valido**: il pulsante «Aggiungi al carrello» resta disattivato finché manca un campo obbligatorio. - **Modalità prezzo**: prezzo del prodotto + opzioni (caso generale), oppure prezzo base personalizzato + opzioni. ## I campi Clicca su **Aggiungi un campo**, scegli il tipo, inserisci l'etichetta in ogni lingua (selettore di lingua in alto nel modulo) e spunta **Obbligatorio** se serve. Sotto il titolo può comparire un testo di aiuto. ### Tipi di campo - **Menu a tendina**, **Pulsanti radio**, **Campioni di colore**, **Miniature**: una scelta tra più opzioni. - **Caselle di spunta**: più scelte possibili (finiture, confezione regalo…). - **Campo di testo**, **Area di testo**, **Numero**, **Data**, **Upload di file**: inserimento libero. Una sola opzione «portante» definisce allora la tariffa (per esempio 0,20 € per carattere). ### Opzioni Ogni opzione ha un'etichetta multilingua, un impatto sul prezzo con il suo tipo (importo fisso, percentuale del prezzo base, per carattere, per unità, formula), un colore per i campioni, una miniatura per le miniature, un **peso** in kg, un **riferimento**, lo stato «predefinita» e la disponibilità. Un'opzione non disponibile resta visibile ma in grigio. ### Riordinare campi e opzioni Trascina un campo dalla sua maniglia per cambiare l'ordine degli step; il pulsante **Comprimi tutto** semplifica l'operazione su un configuratore lungo. Le opzioni si riordinano allo stesso modo con la loro maniglia. L'ordine viene salvato con il configuratore. ### Mostra solo se… Un campo può comparire solo quando viene scelta una certa opzione di un altro campo. Esempio: il campo «Cornice» appare solo se in «Tipo» viene scelta «Stampa con cornice». Nel blocco **Mostra solo se…**, seleziona l'opzione o le opzioni di attivazione (Ctrl o Cmd + clic per sceglierne più di una: il campo appare se ne viene scelta una). Senza selezione, il campo è sempre visibile. Le dipendenze a catena sono gestite: se un campo di attivazione è nascosto, anche i campi che dipendono da esso lo sono. Un campo nascosto non entra né nel prezzo né nell'ordine, anche se è obbligatorio. Nell'elenco compaiono solo le opzioni già salvate. Dopo aver creato nuove opzioni, salva una volta il configuratore e poi definisci le condizioni. ### Link informativo (finestra) Ogni campo può mostrare, a destra del titolo, un link come «Guida ai materiali» o «Guida alle taglie». Un clic apre una finestra sopra la pagina. - **Testo del link**: l'etichetta mostrata, in ogni lingua. Vuoto: nessun link. - **Contenuto della finestra**: HTML (testo, tabella, immagini) e i tag `{hook …}` e `{widget …}`, eseguiti come nel widget Shortcode di Creative Elements. Per un'impaginazione ricca, crea la finestra come modello salvato in Creative Elements e incolla il suo shortcode. Script e iframe vengono rifiutati al salvataggio per motivi di sicurezza: un avviso lo segnala e il contenuto precedente viene conservato. ## Prezzo e peso Gli impatti si inseriscono **al netto delle tasse** nella valuta predefinita. La scheda prodotto mostra prezzo base, totale delle opzioni e totale IVA inclusa, aggiornati a ogni scelta. Quel totale è solo una visualizzazione: il prezzo reale viene ricalcolato lato server a partire dalle scelte del cliente e portato dalla personalizzazione nativa di PrestaShop. Modificare la pagina o le richieste nel browser non cambia il prezzo fatturato. PrestaShop somma il **peso** delle opzioni scelte al peso del carrello. Le fasce di peso dei tuoi corrieri si applicano quindi normalmente, e il prezzo delle opzioni conta nel totale usato per la soglia di spedizione gratuita. Per spese di spedizione che dipendono dal formato, assegna a ogni formato un peso reale o volumetrico (per esempio 40 × 60 con cornice = 2,5 kg). I limiti di dimensione dei corrieri leggono solo le dimensioni del prodotto, non le opzioni scelte. ## Anteprima visiva (opzionale) Nel blocco **Anteprima visiva** del configuratore, attiva l'anteprima e carica un'immagine di sfondo (PNG trasparente consigliato). Ogni campo può allora posare un livello immagine, tingere la sagoma o mostrare il testo del cliente in una zona che disegni con il mouse. Il cliente può scegliere font, dimensione e colore del testo, e i colori possono essere collegati a un altro campo. All'aggiunta al carrello, l'immagine finale viene composta e salvata con l'ordine. Anteprima disattivata: nessuna anteprima viene mostrata, le immagini del tema o del page builder non vengono mai modificate e le impostazioni di anteprima dei campi sono nascoste nell'editor (restano salvate se riattivi l'anteprima). ## Creative Elements e page builder 1. Nelle impostazioni del modulo, scegli la modalità **Integrata** e il posizionamento **Manuale**. 2. Disattiva l'anteprima nel configuratore: le immagini della scheda restano quelle del page builder. 3. Nel modello della scheda prodotto di Creative Elements, aggiungi un widget **Moduli**, scegli il modulo DataFirefly Configuratore e inserisci l'hook `displayDfProductConfigurator`. In alternativa usa un widget **Shortcode** con `{hook h='displayDfProductConfigurator'}`. 4. Posiziona il widget dove vuoi, per esempio sotto titolo e prezzo. Sui prodotti senza configuratore il widget non mostra nulla. 5. Se serve, disattiva numerazione, barra degli step e nome del configuratore, poi attiva il selettore di quantità integrato se il widget «Aggiungi al carrello» di Creative Elements non è presente nella scheda. In un tema, lo stesso hook si richiama con `{hook h='displayDfProductConfigurator' product=$product}`. Il configuratore viene mostrato una sola volta per pagina. ## Dopo l'aggiunta al carrello Con l'impostazione predefinita si apre un popup: immagine del prodotto, prezzo unitario, dettaglio di ogni scelta (per esempio Tipo: Stampa con cornice, Formato: 40 × 60 cm, Cornice: Noce), quantità, poi numero di articoli, subtotale, spedizione e totale del carrello, con i pulsanti **Continua gli acquisti** e **Procedi all'ordine**. Il template `views/templates/front/cart_modal.tpl` può essere sovrascritto nel tema. L'impostazione «Popup nativo del tema» usa il popup del modulo carrello, che non mostra il dettaglio della personalizzazione. L'impostazione «Messaggio» mostra un link al carrello sotto il pulsante. ## Carrello, ordine e produzione Ogni configurazione validata crea una personalizzazione nativa di PrestaShop: due configurazioni diverse danno due righe di carrello distinte. Il riepilogo leggibile (Formato: 40 × 60 cm · Tipo: Stampa con cornice · Cornice: Noce) appare nel carrello, nell'ordine, nella fattura e nel back-office. Il dettaglio ordine del back-office mostra un pannello **Personalizzazioni** con il riepilogo campo per campo, i file inviati dal cliente e, se l'anteprima è attiva, l'immagine finale. Con il tema Classic, un cambio di quantità ricarica parte della scheda prodotto in AJAX: il configuratore resta al suo posto e conserva le scelte del cliente. ## Duplicare un configuratore Nell'elenco, apri il menu della riga e clicca su **Duplica** (il pulsante si trova anche in fondo all'editor). La copia riprende impostazioni, campi, opzioni, traduzioni e immagini. Le condizioni «Mostra solo se…» e i colori collegati vengono ricollegati ai campi copiati. La copia viene creata **inattiva e senza prodotti né categorie collegati**, per non prendere il posto dell'originale: collega i tuoi prodotti e attivala. ## Dati demo La pagina **Configura** propone tre import, ripetibili senza duplicati: - **Tazza, vaso, t-shirt**: anteprima composta, testo inciso, colori in base alla forma, formula di prezzo, upload. - **Ricamo (patch e berretto)**: colori collegati tra più elementi. - **Quadro foto (arte murale)**: anteprima disattivata, link «Guida ai materiali», formati con peso, tipo di supporto in miniature, foto del cliente, colore di sfondo, cornice mostrata solo per la stampa con cornice. ## Risoluzione dei problemi ### Il configuratore non appare - Verifica che il configuratore sia **attivo** e collegato al prodotto, direttamente o tramite una categoria. - Con il posizionamento manuale, verifica che l'hook `displayDfProductConfigurator` sia presente nel modello della scheda prodotto. - Con il posizionamento automatico, verifica che il tema richiami `displayProductAdditionalInfo` (il tema Classic lo fa). - Svuota la cache (**Parametri avanzati → Prestazioni**). ### Un'opzione non compare in «Mostra solo se…» Non è ancora salvata. Salva il configuratore e torna sul campo. ### Il link informativo non appare Il testo del link e il contenuto della finestra devono essere compilati entrambi nella lingua mostrata. ### Il pulsante «Aggiungi al carrello» resta grigio Manca un campo obbligatorio visibile: il messaggio sotto il totale indica quale. Disattiva «Blocca l'aggiunta se non valido» per lasciare il pulsante attivo e mostrare gli errori al clic. ### Le spese di spedizione non cambiano con le opzioni Verifica che le opzioni abbiano un peso e che il corriere fatturi in base al peso (e non al prezzo). ## Cronologia delle versioni - **1.3.0**: PrestaShop 1.7.7 e 1.7.8, più prodotti e categorie per configuratore, duplicazione, condizioni scelte da un elenco di opzioni, link informativi in finestra, hook dedicato per i page builder, popup carrello, impostazioni di visualizzazione, trascinamento, demo quadro foto. - **1.2.1**: anteprima identica all'immagine finale, messaggi del front-end tradotti, editor delle zone con le proporzioni corrette. - **1.2.0**: colori collegati, ricolorazione delle immagini, demo con un clic, anteprima sempre visibile. - **1.1.0**: font, dimensione e colore a scelta del cliente, zone di posizionamento con il mouse, immagine finale e pannello ordine, tre modalità di visualizzazione. - **1.0.0**: versione iniziale.