Configuratore di Prodotto a Step — Guida completa

Panoramica

DF Product Configurator trasforma una scheda prodotto PrestaShop in un configuratore guidato per step: il cliente sceglie un colore, aggiunge un’incisione, seleziona un accessorio, vede il risultato composto in tempo reale sulla foto del prodotto, e il sovrapprezzo corrispondente viene applicato al carrello — lato server, in modo non falsificabile.

Il modulo si basa su due concetti semplici:

• Step: una domanda posta al cliente, collegata a un prodotto. Esistono due tipi: Scelta visiva (il cliente clicca su un’opzione) e Testo / incisione (il cliente digita un testo libero).
• Opzione: una risposta possibile di uno step di scelta visiva, con il suo visual (miniatura fotografica o campione colore), il suo livello di anteprima e il suo impatto sul prezzo.

Installazione

1. Nel back office di PrestaShop, aprite Moduli → Gestione moduli → Carica un modulo.
2. Caricate il file dfproductconfigurator.zip e cliccate su Installa.
3. Sotto Catalogo compaiono due nuove schede: Configuratore — Step e Configuratore — Opzioni.

Creare uno step

1. Aprite Catalogo → Configuratore — Step e cliccate su Aggiungi.
2. Indicate il prodotto: digitate almeno 3 caratteri nel campo di ricerca e cliccate su un risultato — l’ID prodotto si compila automaticamente.
3. Scegliete il tipo di step: Scelta visiva o Testo / incisione.
4. Inserite l’etichetta in ogni lingua (ad esempio «Colore», «Incisione», «Accessorio»). È il testo mostrato nello stepper.
5. Spuntate Obbligatorio se il cliente deve rispondere a questo step prima di poter aggiungere al carrello.
6. Regolate la posizione per ordinare gli step.

Campi specifici degli step di incisione

Per uno step di tipo Testo / incisione compaiono campi aggiuntivi:

• Lunghezza massima: numero di caratteri consentiti (validato anche lato server).
• Impatto sul prezzo: sovrapprezzo applicato non appena il cliente digita un testo (0 per un’incisione gratuita).
• Posizione X / Y: posizione del testo nell’anteprima, in percentuale della larghezza e dell’altezza dell’immagine (50 / 50 = centro).
• Dimensione e colore del testo: dimensione in pixel e colore esadecimale dell’overlay.
• Placeholder: testo di invito mostrato nel campo, traducibile.

Creare le opzioni di uno step

1. Nell’elenco degli step, cliccate sull’azione Opzioni dello step interessato (oppure aprite Catalogo → Configuratore — Opzioni).
2. Cliccate su Aggiungi e inserite l’etichetta multilingue dell’opzione.
3. Definite il suo impatto sul prezzo al netto delle imposte: positivo (sovrapprezzo), negativo (sconto) o nullo (incluso).
4. Scegliete il visual della card dell’opzione: un colore esadecimale (mostrato come campione rotondo) oppure una miniatura fotografica (ridimensionata automaticamente a 400 px).
5. Se necessario, caricate un livello PNG trasparente (fino a 1600 px): verrà sovrapposto alla foto del prodotto nell’anteprima composta.
6. Spuntate Predefinita per preselezionare questa opzione — una sola opzione predefinita per step, il modulo lo garantisce.

Come funziona il prezzo

Gli impatti sul prezzo sono definiti al netto delle imposte, nella valuta predefinita del negozio. Nella scheda prodotto, il modulo li converte nella valuta del visitatore e li mostra con o senza IVA in base al gruppo cliente, con un totale ricalcolato in diretta.

Quel totale mostrato è puramente indicativo. Al momento del carrello, il sovrapprezzo reale viene applicato dall’hook nativo di calcolo prezzi di PrestaShop, lato server, a partire dalla configurazione salvata nel database: conversione di valuta al tasso di cambio, IVA del contesto cliente, arrotondamento ai decimali della valuta. Un cliente che manipola il DOM o le richieste non può cambiare il prezzo fatturato.

Percorso del cliente nella scheda prodotto

Il blocco configuratore viene mostrato automaticamente nella scheda prodotto (hook delle informazioni aggiuntive) non appena esiste almeno uno step attivo per il prodotto. Il cliente:

1. naviga tra gli step tramite lo stepper (gli step completati sono spuntati);
2. clicca sulle opzioni o digita l’incisione — l’anteprima composta e il totale si aggiornano all’istante;
3. clicca su Aggiungi al carrello: il modulo valida gli step obbligatori, salva la configurazione lato server e lascia che l’aggiunta al carrello prosegua normalmente.

Se uno step obbligatorio è incompleto, il configuratore si apre su quello step con un messaggio esplicito e l’aggiunta al carrello viene bloccata.

Carrello, ordine e fattura

Ogni configurazione convalidata crea una personalizzazione nativa di PrestaShop: due configurazioni diverse dello stesso prodotto generano due righe di carrello distinte, ciascuna con il proprio prezzo. Il riepilogo leggibile (ad esempio Colore: Blu oceano · Incisione: Lea · Accessorio: Tappo in bambù) compare sotto il nome del prodotto nel carrello, nell’ordine, nella fattura e nel dettaglio ordine del back office — senza alcuna impostazione aggiuntiva.

Alla convalida dell’ordine, la configurazione viene archiviata in una tabella dedicata. Le configurazioni dei carrelli abbandonati vengono eliminate automaticamente dopo 60 giorni.

Combinazioni, ospiti e multi-valuta

• Combinazioni: il configuratore segue la combinazione selezionata — l’anteprima si ricostruisce e il prezzo base mostrato è quello della combinazione.
• Clienti ospiti: un carrello viene creato automaticamente se necessario al salvataggio della configurazione.
• Multi-valuta: la conversione usa il tasso di cambio del negozio, sia nella visualizzazione sia nel calcolo lato server.

Disinstallazione e pulizia

Il modulo pulisce dietro di sé:

• all’eliminazione di un prodotto, i suoi step, le opzioni e le immagini delle opzioni vengono eliminati;
• alla disinstallazione, le tabelle del modulo vengono eliminate e i campi di personalizzazione creati vengono liberati (i contatori prodotto vengono decrementati).

Risoluzione dei problemi

Il blocco configuratore non viene mostrato

• Verificate che almeno uno step attivo sia collegato al prodotto giusto (ID prodotto corretto).
• Svuotate la cache di PrestaShop (Parametri avanzati → Prestazioni).
• Verificate che il vostro tema chiami l’hook displayProductAdditionalInfo (è il caso del tema Classic e di quasi tutti i temi).

L’anteprima composta è disallineata

Il livello PNG non condivide l’inquadratura della foto di copertina. Riesportate il livello con lo stesso rapporto e la stessa posizione del prodotto dell’immagine principale.

Il sovrapprezzo non compare nel carrello

• Verificate che l’opzione selezionata abbia effettivamente un impatto sul prezzo diverso da zero.
• Il prezzo del carrello viene ricalcolato da PrestaShop: svuotate la cache e riprovate con un carrello nuovo.

Due aggiunte identiche creano due righe

È il comportamento previsto se le configurazioni differiscono. Se sono strettamente identiche e aggiunte nella stessa sessione, il modulo riutilizza la stessa personalizzazione e incrementa la quantità.