DataFirefly Ontwerper voor transactionele e-mails voor PrestaShop

Overzicht

De module dfmaileditor vervangt de inhoud van de transactionele e-mails van PrestaShop 8 en 9 door ontwerpen uit een visuele editor. Ze wijzigt geen enkel bestand in /mails of in het thema en installeert geen override: bij verzending grijpt ze in via de hooks actionEmailSendBefore en actionEmailAddAfterContent en levert ze eigen HTML en een eigen tekstversie.

Zolang een e-mail geen actief ontwerp heeft, verstuurt PrestaShop de standaard e-mail. Als het renderen van een ontwerp mislukt, wordt de fout gelogd en gaat de standaard e-mail weg: geen enkele verzending wordt geblokkeerd.

Installatie

1. Klik in Modules > Modulebeheer op Een module uploaden en kies het bestand dfmaileditor.zip.
2. De module maakt haar tabellen aan, de map img/dfmaileditor voor afbeeldingen en de pagina Design > E-mailontwerper.
3. Bij installatie verandert er geen enkele e-mail: ontwerpen worden inactief aangemaakt en je activeert ze één voor één.

De lijst met e-mails

De startpagina van de module toont de e-mails van de winkel per groep: bestellingen, betaling, bestelstatus, klantaccount, meldingen voor de verkoper en andere sjablonen. E-mails van geïnstalleerde modules worden herkend en verschijnen in de laatste groep.

• Schakelaar Aan / Uit: activeert het ontwerp van de e-mail. Uit betekent dat de standaard e-mail wordt verstuurd.
• Ontwerpen of Bewerken opent de editor. Het kruisje verwijdert het ontwerp en geeft terug aan de standaard e-mail.
• Onder elke e-mail: de datum van de laatste wijziging en het aantal verzendingen met het ontwerp in de laatste 30 dagen.
• Het zoekveld filtert de lijst op e-mail- of sjabloonnaam.

Alle e-mails ontwerpen vanuit een stijl

Deze knop maakt in één keer de ontwerpen van de 16 belangrijkste e-mails: bestelbevestiging, wachten op overschrijving, wachten op cheque, betaling geaccepteerd, betalingsfout, wordt voorbereid, verzonden, onderweg, in nabestelling, bestelling geannuleerd, terugbetaling, tegoedbon, account aangemaakt, gast omgezet naar klant, wachtwoordherstel en de melding van een nieuwe bestelling van de module ps_emailalerts.

Kies een van de drie stijlen aan de hand van het voorbeeld:

• Strak: marineblauw, systeemlettertype, links uitgelijnd.
• Atelier: titels in Palatino, omlijnde knoppen, rechte hoeken.
• Levendig: gekleurde band bovenaan, gevulde knoppen, afgeronde hoeken.

Opties: Mijn merkkleur gebruiken (ingesteld in Instellingen), Bestaande ontwerpen vervangen en Nu activeren. Zonder dat laatste vakje blijven de ontwerpen inactief zodat je ze kunt nakijken. De teksten zijn geschreven in elke geïnstalleerde taal uit Frans, Engels, Spaans, Duits, Italiaans, Nederlands, Pools en Portugees; andere talen krijgen de Engelse tekst.

De editor

De editor heeft drie kolommen:

• Links het blokkenpalet en de structuur van de e-mail. Klik op een blok in het palet om het onder het geselecteerde blok toe te voegen, of sleep het naar de structuur. De structuur herschik je door te slepen.
• In het midden het voorbeeld. Een klik op een blok selecteert het. Daarboven: de talen, de schakelaar desktop / mobiel, het veld voor het bestel-ID, het onderwerp en de knop Controles.
• Rechts het tabblad Blok met de instellingen van het geselecteerde blok en het tabblad E-mail met de instellingen van de hele e-mail.

De bovenste balk bevat Beginnen vanuit een stijl, Geschiedenis, Test versturen, de schakelaar Actief en Opslaan. Sneltoetsen: Ctrl+S slaat op, Ctrl+Z maakt ongedaan, Ctrl+Y herhaalt, Del verwijdert het geselecteerde blok.

De blokken

• Inhoud: titel, tekst (vet, cursief, onderstreept, links, lijsten), knop, afbeelding, afbeelding en tekst, uitgelicht kader, drie kolommen.
• Bestelling: bestelgegevens (referentie, datum, betaling, vervoerder), bestelde producten, besteltotalen, adressen.
• Marketing: aanbevolen producten, persoonlijke tegoedbon, promobanner.
• Opmaak: koptekst met logo, scheidingslijn, witruimte, sociale links, eigen HTML, voettekst.

Het blok Bestelde producten toont per regel de foto van de bestelde combinatie, de naam, de attributen, de personalisaties van de klant, optioneel de referentie, het aantal en de stukprijs incl. of excl. btw volgens de Instellingen. Aanbevolen producten worden automatisch gekozen, uit de accessoires van de bestelde producten, de bestsellers, de nieuwe producten of een lijst van ID’s, 2 tot 4 producten; reeds bestelde producten worden uitgesloten.

Het blok Eigen HTML neemt je eigen code per taal op, bijvoorbeeld een reviewwidget. Scripts, formulieren, iframes en event-attributen worden bij het opslaan verwijderd.

Witruimte en zichtbaarheid

Elk blok heeft een achtergrond, ruimte boven en onder, zijmarges (-1 neemt die van de e-mail over) en twee opties:

• Verbergen op mobiel.
• Alleen tonen als deze variabele een waarde heeft: bijvoorbeeld de knop Volg mijn pakket met de variabele followup, die verborgen blijft zolang het pakket geen tracklink heeft. In de editor verschijnt een blok dat door zijn voorwaarde verborgen is vervaagd.

E-mailinstellingen

Het tabblad E-mail stelt het onderwerp en de voorbeeldtekst in de inbox in (per taal), de achtergrond van de pagina en van de e-mail, de breedte van 480 tot 720 px, de marges, de afronding van de hoeken, de lettertypen voor titels en tekst en de kleuren: tekst, secundaire tekst, hoofdkleur (knoppen), tekst op de hoofdkleur, links, lijnen, achtergrond van de kaders. Een leeg onderwerp behoudt het onderwerp van PrestaShop.

Variabelen

De knop { } naast de velden opent de lijst met variabelen van de e-mail en hun voorbeeldwaarde: {firstname}, {order_name}, {shop_url}, {followup}… PrestaShop vervangt ze bij verzending. Links kunnen een variabele bevatten, bijvoorbeeld {shop_url} of {followup}.

Talen

De knoppen boven het voorbeeld wisselen de getoonde en bewerkte taal. Een oranje stip op een knop markeert een ontbrekende tekst in die taal; het betreffende blok draagt de taalcode in de structuur. Onder een leeg veld neemt Tekst kopiëren uit de tekst van een andere taal over. Bij verzending wordt een ontbrekende tekst vervangen door de standaardtaal van de winkel en daarna door Engels.

Voorbeeld, test en controles

• Desktop / Mobiel toont de e-mail op de breedte van een scherm van 390 px.
• Voorbeeld met: vul een bestel-ID in om de e-mail te zien met de producten, totalen en adressen van die bestelling. Zonder ID worden voorbeeldgegevens gebruikt.
• Test versturen stuurt de inhoud van de editor, ook niet-opgeslagen, naar het gekozen adres en in de gekozen taal. Er wordt geen tegoedbon aangemaakt.
• Controles meldt: een e-mail boven 102 KB (Gmail knipt hem af en verbergt het einde), ontbrekende teksten per taal, een afbeelding zonder alternatieve tekst, een knop zonder tekst of link, een ontbrekende voorbeeldtekst of koptekst, een persoonlijke tegoedbon in een e-mail voor de verkoper. Een klik op een punt selecteert het betreffende blok.

Geschiedenis

Elke keer opslaan bewaart een versie, tot 20 per e-mail. Herstellen laadt een versie in de editor; sla op om ze te behouden. Hetzelfde venster biedt Dit ontwerp exporteren en Ontwerp verwijderen.

Delen en kopiëren

• Dit blok in al mijn e-mails gebruiken, onderaan de instellingen van een blok: vervangt het blok van hetzelfde type in alle andere ontworpen e-mails. Een ontbrekende koptekst of voettekst wordt toegevoegd. Handig om de voettekst één keer aan te passen.
• Deze kleuren en lettertypen toepassen op al mijn e-mails, bovenaan het tabblad E-mail: neemt kleuren, lettertypen, breedte en marges over zonder onderwerpen of voorbeeldteksten te wijzigen.
• Beginnen vanuit een stijl > Het ontwerp van een andere e-mail kopiëren: neemt de blokken en kleuren van een al ontworpen e-mail over en behoudt het onderwerp en de voorbeeldtekst van de huidige e-mail.

Persoonlijke tegoedbon

Dit blok toont een kortingscode die alleen voor de klant geldt. Instellingen: titel, tekst, tekst boven de code, knop en link, soort korting (percentage, vast bedrag of gratis verzending), waarde, geldigheid van 1 tot 365 dagen, minimaal bestelbedrag en voorvoegsel van de code (bijvoorbeeld BEDANKT geeft BEDANKT-K7P2M9QX). In de teksten toont {voucher_value} de waarde van de korting en {voucher_expiry} de einddatum.

• De code wordt aangemaakt wanneer de e-mail echt verstuurd wordt, als winkelwagenregel die voorbehouden is aan de klant en eenmalig bruikbaar is.
• Wordt dezelfde e-mail opnieuw verstuurd voor dezelfde bestelling, bijvoorbeeld vanuit de bestelpagina, dan wordt de al aangemaakte code hergebruikt.
• Voorbeelden en testmails tonen een voorbeeldcode en maken niets aan.
• De tegoedbon verschijnt alleen als de ontvanger de klant is: nooit in de melding van een nieuwe bestelling aan de verkoper.

De aangemaakte regels hebben de beschrijving dfmaileditor: sjabloonnaam in Catalogus > Kortingen > Winkelwagenregels.

Promobanners

Het tabblad Promobanners beheert herbruikbare banners. Elke banner heeft een interne naam, een status, optionele begin- en einddatum, een achtergrondkleur voor het tekstvak en een lijst met gekozen e-mails (alle of een selectie). Per taal: afbeelding (JPG, PNG of GIF, 1200 px breed aanbevolen, max. 3 MB), link, alternatieve tekst, kop, tekst en te tonen kortingscode.

In een e-mail toont het blok Promobanner de eerste actieve banner die op die e-mail gericht is (automatische modus, in de volgorde van de lijst) of een specifieke banner. Een geplande banner verschijnt en verdwijnt vanzelf volgens zijn data.

Instellingen

• Ontworpen e-mails gebruiken: hoofdschakelaar. Uit betekent dat alle e-mails terugkeren naar het standaardformaat; de ontwerpen blijven bewaard.
• Prijzen incl. btw in productblokken: stukprijzen en regeltotalen incl. of excl. btw.
• Merkkleur: gebruikt door de kant-en-klare stijlen als de optie aangevinkt is.
• Afbeeldingsformaat in de bestelregels en bij aanbevolen producten, uit de productafbeeldingsformaten van de winkel.
• Sociale links: links die het blok Sociale links als tekstknoppen toont. Een leeg veld verbergt het netwerk.
• Linktracking: voegt utm_source, utm_medium en utm_campaign (sjabloonnaam) alleen toe aan links naar je winkel.

Export en import

Exporteren in de lijst downloadt een ZIP met alle ontwerpen van de winkel en de afbeeldingen die via de module zijn geüpload; de geschiedenis van een e-mail biedt de export van alleen dat ontwerp. Zonder de PHP-extensie ZipArchive is de export een JSON-bestand zonder afbeeldingen.

Importeren accepteert die ZIP of JSON. De afbeeldingen worden gecontroleerd (alleen echte JPG, PNG of GIF) en naar img/dfmaileditor gekopieerd. Opties: bestaande ontwerpen vervangen, ontwerpen actief houden als ze dat in de export waren. Zonder deze vakjes worden al ontworpen e-mails overgeslagen en komen nieuwe ontwerpen inactief binnen. Banners maken geen deel uit van de export.

Problemen oplossen

Een e-mail gaat nog steeds in standaardformaat weg

Controleer of het ontwerp actief is in de lijst en of de hoofdschakelaar in Instellingen aan staat. Als de e-mail vanuit de back-office wordt verstuurd (wijziging van de bestelstatus), slaat PrestaShop de hooks van een module over wanneer het profiel van de ingelogde medewerker geen recht Bekijken op die module heeft: geef het in Geavanceerde instellingen > Team > Rechten > Modules. Kijk tot slot in Geavanceerde instellingen > Logs: een renderfout staat daar met het voorvoegsel [dfmaileditor].

Afbeeldingen verschijnen niet bij de klant

Afbeeldingen worden geladen vanaf de publieke URL van de winkel: vanuit een lokale of met wachtwoord beveiligde winkel verschijnen ze niet. Sommige e-mailprogramma’s blokkeren afbeeldingen tot de ontvanger ze toestaat; dan verschijnt de alternatieve tekst.

Gmail toont “Bericht ingekort”

De e-mail is groter dan 102 KB. Verwijder blokken, vooral omvangrijke eigen HTML, of toon minder aanbevolen producten. De knop Controles geeft het exacte gewicht.

De tegoedbon verschijnt niet

In de editor en in tests wordt een voorbeeldcode getoond. Bij echte verzending verschijnt de tegoedbon alleen voor één ontvanger die de klant van de bestelling is, of een bestaande klant bij accountmails.

Twee productlijsten in de e-mail

Een andere module voegt eigen productregels aan e-mails toe. Schakel die uit voor ontworpen e-mails: het blok Bestelde producten toont de foto’s al.