Editor Rich-Text per le Email (TinyMCE)
Il corpo di ogni messaggio di promemoria viene modificato tramite un editor rich-text completo basato su TinyMCE, che consente di formattare il testo, aggiungere link e inserire variabili template senza dover toccare l'HTML grezzo.
Disponibile dalla v1.0.0
Panoramica
Quando apri un messaggio di promemoria per aggiungerlo o modificarlo, il campo Messaggio da inviare nell'email diventa un'area di modifica visiva con una barra degli strumenti di formattazione. L'editor gira nel browser e salva il contenuto come HTML, che viene poi incorporato nel wrapper del template email ogni volta che viene inviato un promemoria.
L'editor è l'integrazione TinyMCE nativa di PrestaShop, quindi si comporta esattamente come l'editor della descrizione prodotto o delle pagine CMS che potresti già conoscere. La barra degli strumenti e i controlli disponibili dipendono dalla tua versione di PrestaShop: PS 1.7 e PS 8 caricano TinyMCE tramite il wrapper tinySetup() di PrestaShop; PS 1.6 carica direttamente TinyMCE 3 con il tema "Advanced" e una barra degli strumenti leggermente diversa.
Un dettaglio tecnico importante che ti riguarda: l'editor è configurato per archiviare il contenuto con codifica entità raw. Ciò significa che i segnaposto con parentesi graffe come {completename} o {totalamount} vengono salvati esattamente come li digiti — non vengono convertiti in entità HTML — in modo che il modulo possa sostituirli con i valori reali al momento dell'invio.
Configurazione
L'editor è integrato nel modulo di composizione dei messaggi di promemoria — non esiste un'impostazione separata per attivarlo o disattivarlo. Si attiva automaticamente ogni volta che apri il campo del corpo del messaggio.
- Vai su Moduli > Gestione moduli, trova Order Payment Reminders Pro e clicca su Configura.
- Scorri fino alla sezione Messaggi e clicca su Modifica accanto a un promemoria esistente, oppure clicca su Aggiungi nuovo messaggio.
- Si apre il modulo del messaggio. Il campo Messaggio da inviare nell'email carica l'editor TinyMCE al termine del caricamento del JavaScript della pagina — attendi che appaia la barra degli strumenti prima di iniziare a digitare.
Se vedi un'area di testo semplice invece della barra degli strumenti, il JavaScript della pagina non ha terminato il caricamento. Ricarica la pagina e riprova. Assicurati che nessuna estensione del browser stia bloccando gli script del dominio del tuo Back Office.
L'editor è presente anche nella procedura guidata di configurazione iniziale.
Impostazioni dell'editor applicate dal modulo
Il modulo fissa le seguenti impostazioni di TinyMCE. Non è possibile modificarle dal Back Office:
| Impostazione | Valore | Perché è importante |
|---|---|---|
| Formato elemento | html | Il contenuto viene salvato come HTML, non come XHTML |
| Codifica entità | raw | I segnaposto con parentesi graffe come {completename} vengono archiviati letteralmente, senza codifica HTML |
| Consenti HTML negli anchor con nome | abilitato | Necessario per i link di ancoraggio nell'HTML delle email |
| Selettore editor | autoload_rte | L'editor si attiva solo sul campo del corpo del messaggio, non sulle altre aree di testo della pagina |
Come Funziona
Scrivere e formattare il messaggio
Digita direttamente nell'area dell'editor come faresti in qualsiasi elaboratore di testi. Usa i pulsanti della barra degli strumenti per applicare la formattazione:
| Controllo nella barra | Cosa fa |
|---|---|
| G / C / S | Grassetto, corsivo, sottolineato |
| Barrato | Testo con tratto |
| Pulsanti di giustificazione | Allinea a sinistra, al centro, a destra o giustificato |
| Formato / Font / Dimensione | Applica livelli di intestazione (H1–H4) o cambia la dimensione del carattere |
| Colore testo / sfondo | Cambia il colore del testo o evidenzia |
| Elenco puntato / numerato | Crea elenchi non ordinati o ordinati |
| Rientra / Riduci rientro | Sposta elementi di elenco o paragrafi |
| Annulla / Ripristina | Torna indietro o avanti nelle modifiche (Ctrl+Z / Ctrl+Y) |
| Schermo intero | Espande l'editor per occupare l'intera finestra del browser — utile per messaggi lunghi |
Le scorciatoie da tastiera funzionano nell'area dell'editor: Ctrl+B per il grassetto, Ctrl+I per il corsivo, Ctrl+K per inserire un link.
Inserire variabili template
Le variabili template sono segnaposto in testo normale — le digiti direttamente nell'area dell'editor e il modulo le sostituisce con i valori reali al momento dell'invio di ogni email.
- Posiziona il cursore nel punto in cui vuoi che appaia la variabile.
- Digita il nome della variabile racchiuso tra parentesi graffe, ad esempio
{completename}o{totalamount}. - Il segnaposto appare come testo letterale nell'area dell'editor. È corretto — non mostrerà un valore reale in anteprima qui.
Sotto l'editor compare un elenco di riferimento Variabili disponibili comprimibile. Clicca sull'intestazione per espanderlo e visualizzare tutti i nomi delle variabili con le relative descrizioni. Per l'elenco completo consulta Variabili del template email.
I nomi delle variabili sono sensibili alle maiuscole.
{totalamount}funziona;{TotalAmount}no. Copia sempre il nome della variabile esattamente come mostrato nell'elenco di riferimento.
Inserire un link
- Seleziona il testo che vuoi trasformare in link.
- Clicca sul pulsante Inserisci/Modifica link (icona a catena) nella barra degli strumenti.
- Inserisci l'URL completo nella finestra di dialogo, ad esempio
https://iltuonegozio.com/ordine. - Imposta Destinazione su Apri in nuova finestra se vuoi che il link si apra in una nuova scheda.
- Clicca su Inserisci per confermare.
Per rimuovere un link, posiziona il cursore al suo interno e clicca sul pulsante Rimuovi link (icona a catena spezzata).
Passare alla visualizzazione sorgente HTML
- Clicca sul pulsante Codice sorgente (
< >o HTML nelle versioni precedenti di PS) nella barra degli strumenti. - L'area dell'editor passa a un'area di testo HTML grezzo.
- Apporta le modifiche direttamente in HTML.
- Clicca nuovamente lo stesso pulsante (o Aggiorna, a seconda della tua versione PS) per tornare all'area visiva.
Usa la visualizzazione sorgente per incollare un blocco HTML precompilato, rimuovere tag <span> o <font> indesiderati rimasti dopo un'operazione di incolla, o verificare che un segnaposto variabile sia scritto correttamente.
Incollare contenuto da Word o Google Docs
Incollare testo formattato direttamente spesso porta con sé CSS nascosto o markup di Microsoft Office che compromette la resa dell'email. Usa il pulsante Incolla come testo normale (appunti con una "T") prima di incollare:
- Clicca su Incolla come testo normale in modo che il pulsante sia attivo/evidenziato.
- Incolla (
Ctrl+V/Cmd+V). L'editor rimuove tutta la formattazione esterna. - Riapplica la formattazione che ti serve usando la barra degli strumenti.
In alternativa, incolla normalmente e poi seleziona tutto il testo e clicca su Rimuovi formattazione (icona a gomma) per eliminare gli stili inline.
Aggiungere immagini
L'editor include un pulsante Inserisci/Modifica immagine, ma le email di promemoria sono email HTML inviate dal tuo server. Affinché le immagini appaiano nella casella di posta dei destinatari, devono essere ospitate a un URL accessibile pubblicamente.
- Carica l'immagine sul server multimediale del tuo negozio, su un CDN o su un servizio di hosting di immagini pubblico.
- Clicca sul pulsante Inserisci/Modifica immagine nella barra degli strumenti.
- Incolla l'URL pubblico completo (che inizia con
https://) nel campo Sorgente. - Aggiungi un Testo alternativo descrittivo per i client email che bloccano le immagini.
- Clicca su Salva.
Non incollare immagini codificate in base64. La maggior parte dei client email le rimuove o contrassegna l'email come spam. Usa solo URL ospitati.
I template email precompilati del modulo usano {shop_logo} — una variabile sostituita con l'URL del logo del tuo negozio al momento dell'invio — invece di un percorso immagine fisso. L'uso di {shop_logo} nell'intestazione è l'approccio consigliato.
Come viene salvato il contenuto dell'editor
Quando clicchi su Salva nel modulo del messaggio, l'output HTML dell'editor viene archiviato nel database. Il modulo inserisce poi questo HTML nel wrapper del template email (il file contenente {wr_title} e {wr_message}) ogni volta che viene inviato un promemoria corrispondente. I tag <p></p> vuoti che TinyMCE a volte aggiunge vengono automaticamente rimossi prima del salvataggio.
Esempi d'Uso
Esempio: Aggiungere un promemoria sulla scadenza di pagamento con enfasi in grassetto
Vuoi ricordare ai clienti che il loro ordine verrà annullato tra 3 giorni. Nell'area dell'editor scrivi il tuo messaggio, poi seleziona la frase "3 giorni" e clicca su G nella barra degli strumenti. Il testo viene salvato come <strong>3 giorni</strong> e appare in grassetto nei client email dei destinatari. Aggiungi {daysleft} al posto del numero letterale in modo che il valore sia sempre accurato per ogni ordine.
Esempio: Creare un elenco strutturato di istruzioni per il pagamento
Vuoi includere i passaggi per il bonifico bancario nell'email. Digita ogni passaggio su una nuova riga, selezionali tutti e clicca sul pulsante Elenco numerato. Poi aggiungi un collegamento ipertestuale su "i dettagli del tuo conto bancario" che punta a una pagina del tuo negozio. Passa alla visualizzazione sorgente per verificare che l'HTML sia pulito prima di salvare.
Esempio: Incollare un template HTML preconfezionato
Hai creato un blocco HTML per l'email con uno strumento esterno. Apri l'editor, clicca sul pulsante Codice sorgente, seleziona tutto l'HTML esistente e incolla il tuo blocco. Clicca di nuovo il pulsante sorgente per tornare alla modalità visiva e controllare il layout. Inserisci {completename} e {totalamount} nei punti appropriati, poi salva.
Note Importanti
- L'editor è multilingua. Se il tuo negozio ha più lingue attive, il modulo del messaggio mostra una scheda di lingua per ciascuna. L'editor si attiva per la scheda di lingua selezionata — passa tra le schede e modifica ogni lingua in modo indipendente.
- L'applicazione di un template email precompilato dal selettore di template sostituisce l'intero corpo del messaggio, inclusa qualsiasi formattazione personalizzata già aggiunta. Scegli sempre prima il template, poi applica formattazione e variabili.
- Il campo dell'oggetto è un input di testo normale — TinyMCE non si applica ad esso. Non incollare HTML nel campo dell'oggetto.
- La configurazione TinyMCE di PrestaShop applica un filtro di sicurezza del contenuto. I blocchi
<script>inline e le sezioni<style>nel<head>verranno rimossi al salvataggio. Usa invece attributistyle=""inline sui singoli elementi. - Il modulo è compatibile con PS 1.5+ e PS 1.6+. PS 1.6 usa TinyMCE 3 con una barra degli strumenti leggermente diversa (più pulsanti nella seconda riga, senza maniglia di ridimensionamento nelle versioni più vecchie).
- Multi-shop: il contenuto dei messaggi è archiviato per negozio. L'editor funziona allo stesso modo indipendentemente dal contesto di negozio in cui ti trovi.
Risoluzione dei Problemi
| Problema | Soluzione |
|---|---|
| L'editor appare come un'area di testo semplice invece di mostrare la barra degli strumenti | Il JavaScript della pagina non ha caricato completamente. Ricarica la pagina. Se il problema persiste, controlla la console del browser per eventuali errori e verifica che nessuna estensione stia bloccando gli script del dominio del Back Office. |
| Il contenuto viene salvato ma l'email mostra i tag HTML grezzi | Il tuo HTML potrebbe essere finito nel campo dell'oggetto, che è testo normale. Verifica che il contenuto formattato sia nel campo Messaggio da inviare nell'email, non nell'oggetto. |
Il segnaposto variabile come {completename} appare come testo letterale nelle email ricevute | Il segnaposto è scritto in modo errato. Passa alla visualizzazione sorgente HTML e confronta il segnaposto carattere per carattere con l'elenco di riferimento sotto l'editor. Controlla spazi aggiuntivi, maiuscole errate o parentesi graffe mancanti. |
| Il contenuto incollato appare rovinato nelle email ricevute | Il CSS esterno o il markup di Office è stato incluso nell'operazione di incolla. Passa alla visualizzazione sorgente e rimuovi gli attributi style=, oppure incolla di nuovo usando Incolla come testo normale. |
| Le immagini non appaiono ai destinatari dell'email | L'URL dell'immagine non è accessibile pubblicamente. Apri l'URL in una finestra del browser in incognito per verificarlo. Sostituisci i percorsi relativi (/img/...) con URL assoluti completi (https://iltuonegozio.com/img/...). |
| L'editor non appare nella procedura guidata di configurazione | Il passaggio della procedura inizializza TinyMCE al termine della sua animazione. Se l'editor è ancora assente dopo il caricamento del passaggio, scorri verso il basso e clicca altrove sulla pagina — l'editor potrebbe aver bisogno di un momento su connessioni più lente. |
| Dopo il salvataggio, la riapertura del modulo mostra il vecchio contenuto | Potresti aver navigato altrove prima che apparisse la conferma del salvataggio. Controlla l'elenco Messaggi per verificare quale versione è stata salvata. Il contenuto viene aggiornato solo quando clicchi su Salva e vedi il banner di conferma. |
Domande Frequenti
Posso scrivere un'email in testo normale senza formattazione?
Sì. Digita direttamente nell'area dell'editor senza usare alcun pulsante della barra degli strumenti e il modulo salverà il tuo testo come semplici tag <p>. La maggior parte dei client email lo renderà come testo dall'aspetto semplice. Non esiste una parte in testo normale separata da configurare — il modulo invia una singola email HTML.
La mia formattazione andrà persa se applico uno dei template email precompilati?
Sì. L'applicazione di un template precompilato dal selettore di template sostituisce l'intero corpo del messaggio. Scegli prima il template, poi aggiungi la formattazione e le variabili — non il contrario.
Posso usare tabelle HTML per il layout?
Sì. Passa alla visualizzazione sorgente e incolla direttamente il markup della tabella. L'editor preserva i tag standard <table>, <tr>, <td> e gli attributi inline style="". Evita i nomi di classi CSS che fanno riferimento al tema del tuo negozio — quei selettori non esisteranno nei client email dei destinatari.
Perché le variabili con parentesi graffe come {completename} funzionano anche se l'HTML normalmente fa l'escape delle parentesi graffe?
Il modulo configura l'editor con entity_encoding: "raw", che indica a TinyMCE di archiviare le parentesi graffe e altri caratteri letteralmente invece di convertirli in entità HTML. Questa impostazione viene applicata automaticamente — non devi fare nulla di speciale.
Devo inserire un messaggio separato per ogni lingua?
Sì. Il corpo del messaggio è traducibile. Se il tuo negozio ha più lingue attive, il modulo mostra una scheda di lingua per ciascuna. Passa tra le schede e modifica il messaggio in modo indipendente per ogni lingua. L'editor è attivo per la scheda che stai visualizzando in quel momento.
Cosa succede se salvo con il corpo del messaggio vuoto?
Il modulo salva un corpo vuoto. Quando viene eseguito il cron, l'email verrà inviata senza contenuto visibile nel corpo — appariranno solo il wrapper del template email e l'oggetto. Inserisci sempre il contenuto del messaggio prima di attivare un promemoria.