DataFirefly Editor di email transazionali per PrestaShop

Panoramica

Il modulo dfmaileditor sostituisce il contenuto delle email transazionali di PrestaShop 8 e 9 con design creati in un editor visuale. Non modifica alcun file di /mails o del tema e non installa override: al momento dell’invio intercetta l’email tramite gli hook actionEmailSendBefore e actionEmailAddAfterContent e fornisce il proprio HTML e la propria versione testo.

Finché un’email non ha un design attivo, PrestaShop invia l’email nativa. Se il rendering di un design fallisce, l’errore viene registrato e parte l’email nativa: nessun invio viene mai bloccato.

Installazione

1. In Moduli > Gestione moduli, fai clic su Carica un modulo e invia il file dfmaileditor.zip.
2. Il modulo crea le sue tabelle, la cartella img/dfmaileditor per le immagini e la pagina Aspetto > Editor email.
3. All’installazione nessuna email cambia: i design vengono creati inattivi e li attivi uno alla volta.

L’elenco delle email

La pagina principale del modulo elenca le email del negozio per gruppo: ordini, pagamento, stato dell’ordine, account cliente, avvisi per il negoziante e altri template. Le email dei moduli installati vengono rilevate e compaiono nell’ultimo gruppo.

• Interruttore Attivo / Disattivo: attiva il design dell’email. Disattivato, viene inviata l’email nativa.
• Progetta o Modifica apre l’editor. La croce elimina il design e torna all’email nativa.
• Sotto ogni email: la data dell’ultima modifica e il numero di invii fatti con il design negli ultimi 30 giorni.
• Il campo di ricerca filtra l’elenco per nome dell’email o del template.

Progettare tutte le email da uno stile

Questo pulsante crea in una volta i design delle 16 email principali: conferma d’ordine, in attesa di bonifico, in attesa di assegno, pagamento accettato, errore di pagamento, preparazione in corso, spedito, in transito, in riassortimento, ordine annullato, rimborso, buono, creazione account, ospite convertito in cliente, reimpostazione password e l’avviso di nuovo ordine del modulo ps_emailalerts.

Scegli uno dei tre stili guardando l’anteprima:

• Essenziale: blu navy, carattere di sistema, allineamento a sinistra.
• Atelier: titoli in Palatino, pulsanti a contorno, angoli vivi.
• Vivace: fascia colorata in alto, pulsanti pieni, angoli arrotondati.

Opzioni: Usa il colore del mio brand (impostato nelle Impostazioni), Sostituisci i design esistenti e Attivali subito. Senza quest’ultima casella i design restano inattivi, così puoi rivederli. I testi sono scritti in ogni lingua installata tra francese, inglese, spagnolo, tedesco, italiano, olandese, polacco e portoghese; le altre lingue ricevono il testo inglese.

L’editor

L’editor ha tre colonne:

• A sinistra la palette dei blocchi e la struttura dell’email. Fai clic su un blocco della palette per aggiungerlo sotto il blocco selezionato, oppure trascinalo nella struttura. Riordina la struttura trascinando.
• Al centro l’anteprima. Un clic su un blocco lo seleziona. Sopra: le lingue, il passaggio desktop / mobile, il campo ID ordine, l’oggetto dell’email e il pulsante Controlli.
• A destra la scheda Blocco con le impostazioni del blocco selezionato e la scheda Email con quelle di tutta l’email.

La barra in alto contiene Parti da uno stile, Cronologia, Invia un test, l’interruttore Attivo e Salva. Scorciatoie: Ctrl+S salva, Ctrl+Z annulla, Ctrl+Y ripete, Canc elimina il blocco selezionato.

I blocchi

• Contenuto: titolo, testo (grassetto, corsivo, sottolineato, link, elenchi), pulsante, immagine, immagine e testo, riquadro in evidenza, tre colonne.
• Ordine: dettagli dell’ordine (riferimento, data, pagamento, corriere), prodotti ordinati, totali dell’ordine, indirizzi.
• Marketing: prodotti consigliati, buono personale, banner promo.
• Layout: intestazione con logo, separatore, spaziatore, link social, HTML personalizzato, piè di pagina.

Il blocco Prodotti ordinati mostra per ogni riga la foto della combinazione ordinata, il nome, gli attributi, le personalizzazioni del cliente, il riferimento facoltativo, la quantità e il prezzo unitario IVA inclusa o esclusa secondo le Impostazioni. I Prodotti consigliati si scelgono automaticamente, tra gli accessori dei prodotti ordinati, i più venduti, le novità o un elenco di ID, da 2 a 4 prodotti; i prodotti già ordinati sono esclusi.

Il blocco HTML personalizzato accetta il tuo codice, per lingua, per esempio un widget di recensioni. Script, moduli, iframe e attributi di evento vengono rimossi al salvataggio.

Spaziature e visibilità

Ogni blocco ha uno sfondo, uno spazio sopra e sotto, margini laterali (-1 usa quelli dell’email) e due opzioni:

• Nascondi su mobile.
• Mostra solo se questa variabile ha un valore: per esempio il pulsante Traccia il pacco con la variabile followup, che resta nascosto finché il pacco non ha un link di tracciamento. Nell’editor, un blocco nascosto dalla sua condizione appare sbiadito.

Impostazioni dell’email

La scheda Email imposta l’oggetto e il testo di anteprima mostrato nella casella di posta (per lingua), lo sfondo della pagina e dell’email, la larghezza da 480 a 720 px, i margini, l’arrotondamento degli angoli, i caratteri di titoli e testo e i colori: testo, testo secondario, principale (pulsanti), testo sul colore principale, link, linee, sfondo dei riquadri. Un oggetto vuoto mantiene l’oggetto di PrestaShop.

Variabili

Il pulsante { } accanto ai campi apre l’elenco delle variabili dell’email con il loro valore di esempio: {firstname}, {order_name}, {shop_url}, {followup}… PrestaShop le sostituisce all’invio. I link possono contenere una variabile, per esempio {shop_url} o {followup}.

Lingue

I pulsanti sopra l’anteprima cambiano la lingua mostrata e modificata. Un punto arancione su un pulsante segnala un testo mancante in quella lingua; il blocco interessato riporta il codice della lingua nella struttura. Sotto un campo vuoto, Copia il testo da riprende il testo di un’altra lingua. All’invio, un testo mancante viene sostituito da quello della lingua predefinita del negozio, poi dall’inglese.

Anteprima, test e controlli

• Desktop / Mobile mostra l’email alla larghezza di uno schermo di 390 px.
• Anteprima con: inserisci un ID ordine per vedere l’email con prodotti, totali e indirizzi di quell’ordine. Senza ID vengono usati dati di esempio.
• Invia un test spedisce il contenuto dell’editor, anche non salvato, all’indirizzo e nella lingua scelti. Non viene creato alcun buono.
• Controlli segnala: un’email oltre i 102 KB (Gmail la taglia e nasconde la fine), testi mancanti per lingua, un’immagine senza testo alternativo, un pulsante senza testo o senza link, l’assenza del testo di anteprima o dell’intestazione, un buono personale inserito in un’email per il negoziante. Un clic su una voce seleziona il blocco interessato.

Cronologia

Ogni salvataggio conserva una versione, fino a 20 per email. Ripristina carica una versione nell’editor; salva per mantenerla. La stessa finestra offre Esporta questo design ed Elimina il design.

Condividere e copiare

• Usa questo blocco in tutte le mie email, in fondo alle impostazioni di un blocco: sostituisce il blocco dello stesso tipo in tutte le altre email personalizzate. Intestazione e piè di pagina vengono aggiunti dove mancano. Utile per cambiare il piè di pagina una volta sola.
• Applica questi colori e caratteri a tutte le mie email, in cima alla scheda Email: riporta colori, caratteri, larghezza e margini senza toccare oggetti e testi di anteprima.
• Parti da uno stile > Copia il design di un’altra email: riprende i blocchi e i colori di un’email già personalizzata, mantenendo oggetto e testo di anteprima dell’email corrente.

Buono personale

Questo blocco mostra un codice sconto unico per il cliente. Impostazioni: titolo, testo, testo sopra il codice, pulsante e relativo link, tipo di sconto (percentuale, importo fisso o spedizione gratuita), valore, validità da 1 a 365 giorni, importo minimo d’ordine e prefisso del codice (per esempio GRAZIE dà GRAZIE-K7P2M9QX). Nei testi, {voucher_value} mostra il valore dello sconto e {voucher_expiry} la data di scadenza.

• Il codice viene creato all’invio reale dell’email, come regola carrello riservata al cliente e utilizzabile una volta.
• Se la stessa email viene rinviata per lo stesso ordine, per esempio dalla scheda dell’ordine, viene riutilizzato il codice già creato.
• Anteprime ed email di prova mostrano un codice di esempio e non creano nulla.
• Il buono compare solo se il destinatario è il cliente: mai nell’avviso di nuovo ordine inviato al negoziante.

Le regole create hanno la descrizione dfmaileditor: nome_template in Catalogo > Sconti > Regole carrello.

Banner promo

La scheda Banner promo gestisce banner riutilizzabili. Ogni banner ha un nome interno, uno stato, date di inizio e fine facoltative, un colore di sfondo per l’area di testo e un elenco di email destinatarie (tutte o una selezione). Per lingua: immagine (JPG, PNG o GIF, consigliati 1200 px di larghezza, max 3 MB), link, testo alternativo, titolo, testo e codice sconto da mostrare.

In un’email, il blocco Banner promo mostra il primo banner attivo destinato a quell’email (modalità automatica, nell’ordine dell’elenco) oppure un banner specifico. Un banner programmato compare e scompare da solo in base alle date.

Impostazioni

• Usa le email personalizzate: interruttore generale. Disattivato, tutte le email tornano al formato nativo e i design vengono conservati.
• Prezzi IVA inclusa nei blocchi prodotto: prezzi unitari e totali di riga IVA inclusa o esclusa.
• Colore del brand: usato dagli stili pronti quando l’opzione è selezionata.
• Dimensione immagine nelle righe dell’ordine e nei prodotti consigliati, tra i formati immagine prodotto del negozio.
• Link social: link mostrati dal blocco Link social come pulsanti di testo. Un campo vuoto nasconde il social.
• Tracciamento dei link: aggiunge utm_source, utm_medium e utm_campaign (nome del template) solo ai link verso il tuo negozio.

Esportazione e importazione

Esporta, nell’elenco, scarica uno ZIP con tutti i design del negozio e le immagini caricate con il modulo; la cronologia di un’email offre l’esportazione del solo design. Senza l’estensione PHP ZipArchive, l’esportazione è un JSON senza immagini.

Importa accetta questo ZIP o JSON. Le immagini vengono controllate (solo veri JPG, PNG o GIF) e copiate in img/dfmaileditor. Opzioni: sostituire i design esistenti, mantenere attivi i design che lo erano nell’esportazione. Senza queste caselle, le email già personalizzate vengono saltate e i nuovi design arrivano inattivi. I banner non fanno parte dell’esportazione.

Risoluzione dei problemi

Un’email parte ancora nel formato nativo

Controlla che il design sia attivo nell’elenco e che l’interruttore generale delle Impostazioni sia attivato. Se l’email viene inviata dal back office (cambio di stato dell’ordine), PrestaShop salta gli hook di un modulo quando il profilo del dipendente connesso non ha il permesso Visualizza su quel modulo: concedilo in Parametri avanzati > Team > Permessi > Moduli. Infine consulta Parametri avanzati > Log: un errore di rendering vi compare con il prefisso [dfmaileditor].

Le immagini non compaiono al cliente

Le immagini vengono caricate dall’URL pubblico del negozio: non si vedono da un negozio locale o protetto da password. Alcuni client di posta bloccano le immagini finché il destinatario non le autorizza; compare allora il testo alternativo.

Gmail mostra «Messaggio troncato»

L’email supera i 102 KB. Togli blocchi, in particolare HTML personalizzato voluminoso, o mostra meno prodotti consigliati. Il pulsante Controlli indica il peso esatto.

Il buono non compare

Nell’editor e nei test viene mostrato un codice di esempio. All’invio reale il buono compare solo per un destinatario unico che sia il cliente dell’ordine, o un cliente esistente per le email dell’account.

Due elenchi di prodotti nell’email

Un altro modulo aggiunge le proprie righe di prodotti alle email. Disattivalo per le email personalizzate: il blocco Prodotti ordinati mostra già le foto.