Incisione sui prodotti Pro modulo per PrestaShop

Configuratore di incisione nella scheda prodotto

• Pulsante con prezzo a partire da: nella scheda prodotto compare il pulsante di personalizzazione con il prezzo più basso tra i tipi di incisione abilitati e, quando i prezzi differiscono, il prezzo è preceduto dalla parola “da”.
• Incisione gratuita con importo barrato: se uno qualsiasi dei tipi di incisione ha prezzo zero, accanto al pulsante viene visualizzata un’etichetta che informa della personalizzazione gratuita, mentre l’importo regolare resta visibile come barrato.
• Finestra del configuratore: la personalizzazione avviene in una finestra modale sulla stessa pagina, senza reindirizzare il cliente a un modulo separato e senza perdere la combinazione di prodotto selezionata in precedenza.
• Tre tipi di personalizzazione: incisione orizzontale, incisione verticale e simbolo o icona, ciascuno con il proprio prezzo, il proprio limite di caratteri e la propria dimensione del font salvata nel preset.
• Due posizioni di incisione: il cliente sceglie il layout “dal basso” oppure “al centro” dell’area designata, il che consente di gestire sia una scritta sotto una stampa esistente sia una scritta centrale.
• Ordine dei passaggi imposto dall’interfaccia: il campo di testo, la scelta del font e il pulsante di conferma vengono mostrati solo dopo aver indicato il tipo di incisione, e il pulsante di conferma resta inattivo finché la personalizzazione non è completa.
• Contatore dei caratteri: il campo di testo mostra in tempo reale il numero di caratteri inseriti rispetto al limite previsto per il tipo di incisione selezionato.

Anteprima sull’immagine del prodotto disegnata nel browser

• Rendering su elemento canvas: l’anteprima viene generata lato client, alla risoluzione dell’immagine usata come mockup, e si aggiorna a ogni modifica del testo, del font, della posizione, del tipo di incisione o dell’icona selezionata.
• Testo disposto sulla superficie dell’oggetto: il modulo calcola la disposizione delle lettere separatamente per ogni carattere, tenendo conto della curvatura della superficie, così la scritta su una tazza, una bottiglia o un altro oggetto arrotondato non appare come un’applicazione piatta.
• Anteprima coerente con ciò che viene salvato nell’ordine: lo stesso meccanismo di disegno crea l’immagine salvata con l’ordine, quindi il cliente e il laboratorio vedono lo stesso risultato.
• Font caricati su richiesta: i file dei font vengono scaricati solo all’apertura del configuratore, e non a ogni accesso alla scheda prodotto, così non si appesantisce il caricamento della pagina per i clienti che non usano la personalizzazione.
• Risorse caricate in modo condizionale: il foglio di stile e gli script del modulo vengono aggiunti esclusivamente alle schede prodotto con incisione abilitata – nelle altre pagine del negozio il modulo non aggiunge alcun file.

Preset – area di incisione e aspetto della scritta

• Immagine base della personalizzazione: nel preset si carica un’immagine in formato JPG, PNG o WebP sulla quale il cliente vedrà la propria incisione; può trattarsi della foto di catalogo del prodotto.
• Area selezionata con il mouse sull’immagine: il rettangolo di incisione si disegna direttamente sull’anteprima – trascinando sullo sfondo, afferrando il centro per spostarlo e un angolo per ridimensionarlo.
• Gli stessi valori disponibili da tastiera: quattro campi numerici consentono di inserire posizione e dimensione dell’area senza usare il mouse, rendendo l’impostazione più importante del modulo accessibile anche tramite tastiera.
• Area salvata in percentuale: posizione e dimensioni vengono memorizzate come percentuale della larghezza e dell’altezza dell’immagine, quindi la selezione resta corretta indipendentemente dalla risoluzione dell’anteprima.
• Dimensioni del font separate: il preset memorizza una dimensione per l’incisione orizzontale e una separata per quella verticale, perché la stessa scritta nei due layout richiede una scala diversa.
• Colore della scritta definito dal negozio: il colore dell’incisione viene definito dal proprietario del negozio nel preset, in modo che corrisponda all’effetto ottenuto sul materiale specifico; il cliente non può modificarlo.
• Ordine dei preset con trascinamento: l’elenco dei preset nel pannello supporta l’impostazione manuale dell’ordine e l’attivazione o disattivazione delle singole voci.

Galleria dei font gestita dal pannello

• File di font personalizzati: il pannello accetta file nei formati WOFF2, WOFF, TTF e OTF, quindi il negozio può mettere a disposizione esattamente i caratteri che il laboratorio è in grado di realizzare.
• Dodici caratteri dopo l’installazione: il modulo installa un set pronto di dodici font, tra cui Caveat, Dancing Script, Pacifico, Roboto Slab, Libre Baskerville, Montserrat, Oswald, Courgette, Lobster, Alfa Slab One, Josefin Sans e Comfortaa.
• Anteprima del carattere sul pulsante di selezione: ogni pulsante del font nel configuratore mostra il proprio nome proprio con quel carattere, così il cliente vede la scelta prima di confermarla.
• Attivazione, disattivazione e ordine: ogni font può essere nascosto senza eliminare il file, e l’ordine nell’elenco si imposta trascinando.
• Cartella dei font protetta: il modulo crea nella posizione di archiviazione dei font regole di accesso che limitano il modo in cui i file possono essere scaricati.

Icone e simboli con controllo della sicurezza dei file

• Grafica vettoriale SVG: i simboli vengono caricati come file SVG, così si scalano senza perdita di qualità indipendentemente dalla risoluzione dell’anteprima.
• Pulizia del file caricato: prima del salvataggio nel negozio, il file SVG viene elaborato e privato degli elementi eseguibili – script, attributi di evento, riferimenti esterni, indirizzi javascript codificati come entità e importazioni negli stili.
• Etichetta “novità”: le icone selezionate possono essere evidenziate nella galleria con un’etichetta novità, così da attirare l’attenzione del cliente sui modelli aggiunti di recente.
• Quattro simboli dopo l’installazione: il modulo installa un set iniziale contenente cuore, stella, montagna e zampa.
• Nascondimento automatico del passaggio: se nel negozio non ci sono icone attive, il tipo di personalizzazione “simbolo” non viene mostrato affatto al cliente.

Impostazioni di incisione per il singolo prodotto

• Scheda separata nella scheda prodotto: l’incisione si abilita direttamente nella modifica del prodotto nel pannello, senza passare dalla configurazione del modulo.
• Preset selezionato da un elenco: il prodotto indica un solo preset, quindi la stessa area e le stesse dimensioni del font possono essere usate per un intero gruppo di prodotti simili.
• Sei campi prezzo: per ogni prodotto si impostano il prezzo dell’incisione orizzontale, verticale e del simbolo, nonché i relativi prezzi promozionali.
• Prezzo promozionale visibile al cliente: quando è impostato un prezzo promozionale, il configuratore lo mostra accanto al prezzo regolare barrato per il relativo tipo di incisione.
• Attivazione senza eliminare le impostazioni: la personalizzazione del prodotto può essere disattivata mantenendo preset e prezzi per un uso successivo.

Varianti – immagine diversa e colore diverso per la variante del prodotto

• Mockup assegnato al valore dell’attributo: per le singole varianti del prodotto è possibile caricare un’immagine base separata, così il cliente vede l’incisione sulla variante da lui scelta.
• Immagine della combinazione dal catalogo: il modulo può usare l’immagine della combinazione già esistente nel negozio, purché mantenga l’inquadratura rispetto alla quale è stata definita l’area di incisione.
• Colore della scritta per variante: accanto all’immagine è possibile sovrascrivere il colore dell’incisione, in linea con la reale differenza dell’effetto su materiali e colori diversi.
• Sovrascrittura a livello dell’intero prodotto: quando ogni colore è nel negozio un prodotto separato, basta una sola sovrascrittura di immagine e colore invece di creare un preset separato.

Controllo del contenuto inserito dal cliente

• Elenco dei caratteri consentiti: la configurazione del modulo contiene un insieme di caratteri accettati per l’incisione, così al laboratorio non arriverà una scritta contenente un carattere impossibile da realizzare.
• Limiti di lunghezza separati per ogni tipo: per impostazione predefinita dieci caratteri per l’incisione orizzontale, venti per quella verticale e dieci per il simbolo; i valori possono essere modificati nelle impostazioni.
• Validazione lato server: il limite di caratteri e l’elenco dei caratteri consentiti vengono verificati nuovamente al salvataggio, e non solo nel browser.
• Salvataggio protetto da token: il salvataggio e la rimozione della personalizzazione avvengono tramite un endpoint del modulo che richiede un token di sessione valido.

Carrello, ordine e comunicazione con il cliente

• Personalizzazione standard PrestaShop: l’incisione confermata viene salvata come personalizzazione del prodotto, quindi passa attraverso il carrello e il processo di ordine tramite i meccanismi nativi del negozio.
• Miniatura sostituita dall’immagine con incisione: nel carrello, nel riepilogo dell’ordine e nelle schede ordine nel pannello, l’immagine del prodotto viene sostituita dall’anteprima generata della personalizzazione.
• Descrizione chiara nella riga dell’ordine: alla riga viene aggiunta una descrizione contenente il tipo di incisione, il contenuto, la posizione e il nome del font, preparata in modo da rientrare nel limite di lunghezza del campo di personalizzazione di PrestaShop.
• Dettagli dell’incisione nell’e-mail: il modulo integra il messaggio di conferma dell’ordine con le informazioni sulla personalizzazione ordinata.
• Addebito del prezzo della personalizzazione: il costo dell’incisione viene incluso nel valore della riga dell’ordine secondo il listino impostato per il prodotto specifico.

Gestione degli ordini nel pannello amministrativo

• Pannello incisioni nella scheda ordine: una tabella separata riunisce anteprima, nome del prodotto, tipo di incisione, contenuto, font, posizione, icona e prezzo – l’insieme completo dei dati necessari per eseguire l’ordine.
• Colonna “Incisione” nell’elenco ordini: l’elenco ordini nel pannello ottiene una colonna che contrassegna gli ordini contenenti personalizzazione, posizionata accanto alla colonna del pagamento.
• Anteprima nella riga dell’ordine: accanto alla riga personalizzata compare un link all’immagine di anteprima dell’incisione.
• Link limitato ai file del modulo: l’indirizzo dell’anteprima viene costruito esclusivamente sulla base dei nomi dei file generati da questo modulo, salvati nel database delle personalizzazioni.

Manutenzione dei dati e ordine nel negozio

• Attività di pulizia eseguita ciclicamente: il modulo mette a disposizione un indirizzo per il programma CRON, che elimina le immagini di anteprima provenienti da carrelli abbandonati e i dati di personalizzazione orfani.
• Token generato per il negozio: l’endpoint di pulizia richiede un token definito durante l’installazione e confrontato con un metodo resistente all’analisi dei tempi di risposta, quindi la sola conoscenza dell’indirizzo non basta per avviare l’attività.
• Età configurabile dei dati da eliminare: l’età minima dei file destinati alla rimozione viene passata come parametro della chiamata, il che consente di adattare la pulizia alla durata del tipico percorso di acquisto.
• Data dell’ultima esecuzione: il modulo salva il momento dell’ultima esecuzione dell’attività di pulizia.
• Pulizia dopo l’eliminazione del prodotto: l’eliminazione di un prodotto nel negozio rimuove la configurazione di incisione a esso collegata e i dati delle varianti.
• Limiti per le immagini: il modulo accetta file grafici fino a due megabyte e con lato fino a 2400 pixel, e completa le anteprime salvate con una miniatura con lato di 600 pixel.

Implementazione, multistore e aggiornamenti

• Dati separati per negozio: preset, font, icone, impostazioni dei prodotti e varianti vengono memorizzati con assegnazione al negozio, il che consente di gestire offerte di personalizzazione diverse in ambiente multistore.
• Set iniziale dopo l’installazione: l’installazione crea la struttura delle cartelle per i file, copia font e icone e imposta i valori predefiniti dei limiti e dell’elenco dei caratteri consentiti.
• Sezione dedicata nel menu del pannello: il modulo aggiunge una sezione con tre schermate di gestione – preset, font e icone.
• Percorso di aggiornamento: il pacchetto contiene tredici script di aggiornamento che portano l’installazione dalle prime versioni a quella corrente, senza modifiche manuali al database.
• Disinstallazione pulita: la disinstallazione rimuove le tabelle del modulo, le sue impostazioni e la cartella con i file di font, icone e immagini base.
• Nessuna dipendenza esterna: il modulo non richiede Composer, librerie PHP esterne né servizi di rete – funziona esclusivamente con il codice fornito nel pacchetto e con l’API di PrestaShop.

Vantaggi per il negozio online

• Valore medio del carrello più alto: la personalizzazione è un’aggiunta a pagamento al prodotto, il cui prezzo viene definito dal negozio separatamente per ogni tipo di incisione e per ogni prodotto.
• Meno domande prima dell’acquisto: il cliente vede la propria scritta sulla foto del prodotto prima di aggiungerlo al carrello, quindi chiede meno spesso all’assistenza come apparirà il risultato.
• Meno errori in laboratorio: l’ordine arriva nel pannello con anteprima e descrizione completa – tipo, contenuto, font e posizione – invece che con una nota nel commento dell’ordine.
• Personalizzazione come argomento di marketing: l’incisione gratuita può essere messa in evidenza nella scheda prodotto con un’etichetta e il prezzo regolare barrato.
• Configurazione una sola volta, uso ripetuto: un solo preset gestisce un intero gruppo di prodotti con forma e inquadratura della foto simili.
• Controllo su ciò che è realizzabile: l’elenco dei caratteri consentiti e i limiti di lunghezza limitano gli ordini a scritte effettivamente realizzabili.
• Nessun disordine crescente nei file: l’attività di pulizia elimina le anteprime dei carrelli che non sono mai diventati ordini.

Compatibilità

PD Grawer na produktach Pro è predisposto per PrestaShop dalla versione 1.7.8.2, passando per 8.x fino a 9.x, nonché per PHP 7.0–8.5, e memorizza i dati in MySQL 5.6+ o MariaDB 10.x+. Il modulo non richiede Composer né librerie esterne, e l’anteprima dell’incisione viene generata nel browser del cliente senza ricorrere a servizi esterni. L’interfaccia cliente e il pannello sono tradotti in lingua polacca, e il modulo supporta l’ambiente multistore, assegnando preset, font, icone e impostazioni dei prodotti al negozio specifico.

Link alla demo del modulo:

Demo pannello amministrativo:
https://moduly-prestashop.eu/grawer-na-produktach/admin-dev

Demo front office:
https://moduly-prestashop.eu/grawer-na-produktach

Prodotto dimostrativo di esempio sul front office:
https://moduly-prestashop.eu/grawer-na-produktach/home-accessories/19-customizable-mug.html