Transactionele e-mails in Magento makkelijker beheren
Iedereen die wel eens een Magento webshop heeft gebouwd of beheerd, weet dat redigeren en opmaken van de transactionele e-mails een vervelende klus is. Transactionele e-mails worden naar een klant verzonden in opvolging van een bestelling in de webshop, zoals een orderbevestiging, factuur, verzendingsbevestiging of creditnota, maar ook bevestigingen van aangemaakte klantaccounts, nieuwsbriefaanmeldingen, aankondigingen van prijsveranderingen, tell-a-friend mails en voorraadstatus-updates. Alles bij elkaar gaat het om zo'n 30 e-mails.
Omdat het om klantcommunicatie gaat, wil je als webshopbouwer of -eigenaar dat transactionele e-mails er netjes uitzien. Daar kun je wel even mee bezig zijn, want het aanpassen van de standaard Magento e-mail templates is erg bewerkelijk. Wil je kleuren of fonts aanpassen, dan zul je de HTML van elke template afzonderlijk moeten bewerken. Heb je een meertalige webshop, dan kun je je lol helemaal op. Ook al vanwege de behoorlijke verschillen (zowel in layout als tekstueel) tussen de verschillende taalversies van de standaard Magento e-mail templates.
Bij WebGenerator hebben we daarom een manier bedacht die sneller werkt. Dat heeft tot nu toe geresulteerd in geuniformeerde mailtemplate-sets voor Nederlands en Engels; Duits, Frans en Spaans zijn in de maak. Onderaan dit artikel kun je de Nederlandse en Engelse sets downloaden.
Maar lees eerst even verder want er hoort een verhaaltje bij...
Scheiding van opmaak en inhoud en opmaak centraal beheren
Een van de eerste dingen die we gedaan hebben, is het scheiden van tekst en opmaak in de HTML van de standaard Magento-templates. De "styling" plaatsten we geïsoleerd bovenin de e-mail template. Dat op zich scheelde al veel tijd, want zo hoef je niet meer door de HTML heen te ploegen op zoek naar opmaakcodes. Je kunt het styles-gedeelte bovendien in z'n geheel kopiëren en in alle mailtemplates plakken.
Maar ook bij deze werkwijze zou je nog steeds alle mailtemplates apart moeten openen als je een wijziging wilt doorvoeren in de opmaak. Dat moest handiger kunnen, dachten wij. We vonden de oplossing in de "Custom Variables" functie van Magento. Bij ervaren Magento-ontwikkelaars gaat nu misschien al een lampje branden. We leggen het hieronder even uit.
Custom Variable voor opmaak van transactionele e-mails in Magento
-
Maak in Magento een Custom Variable aan met de code "mail_styles".
-
Plak daarin de geïsoleerde opmaakcode van de transactionele e-mails.
-
Plaats die Custom Variable bovenin de HTML van elke transactionele e-mail.
In Magento ziet e.e.a. er dan zo uit:
De Custom Variable
Verwijzing naar de Custom Variable in de e-mail template
Opmerking: bovenstaande afbeeldingen gaan er van uit dat je de mailtemplates in de admin-omgeving van Magento beheert. Wij zelf doen dat niet: we maken de templates lokaal in orde in een HTML-editor en uploaden ze daarna in de juiste locale-mappen van Magento. Dat werkt uiteindelijk sneller en bijkomend voordeel is dat je bij
Configuratie >
Verkopen >
E-mails voor verkopen niet voor elke e-mail de template-verwijzing hoeft aan te passen.
Het grote voordeel van deze werkwijze is dat je nu de opmaak van al je transactionele e-mails centraal kunt beheren.
Download de transactionele templates en de style sheet
Hieronder kun je de Nederlandse en Engelse template-sets en een style sheet downloaden. We zullen hier op termijn ook Duitse, Franse en Spaanse versies toevoegen.
|
|
Magento transactionele e-mail templates Nederlands |
|
|
Magento transactionele e-mail templates Engels |
|
|
Magento transactionele e-mail templates style sheet |
In elke Zip zit de correcte Magento mapstructuur, dus een hoofdmap met daarin alle "non-sales" mails en in een aparte map "Sales" alle sales-mails. In de variables.zip zit een map met een stylesheet. Kopieer die map naar de hoofdmap van de e-mail templates. In alle mails zit een lokale verwijzing naar de stylesheet zodat je de mails met opmaak kunt bekijken. Voordat je mails implementeert moet die lokale verwijzing uit alle mails worden verwijderd. Doe dat bijvoorbeeld door alle bestanden in Notepad++ te openen en d.m.v. Zoek & Vervang de code te verwijderen. Bij implementatie van de mails in Magento plaats je de inhoud van de style sheet als Custom Variable met de code "mail_styles". Verder moet je bij implementatie de inhoud van de stylesheet als custom variable met de naam "mail_styles" invoeren. In alle mails is al een verwijzing opgenomen naar die custom variable. In de stylesheet zelf vind je hierover verdere instructies.
PS: Gebruik van deze bestanden is gratis. Feedback is van harte welkom, maar de bestanden worden "as is" beschikbaar gesteld: we leveren geen support en gebruik is voor eigen risico. Gebruik vereist kennis van Magento en HTML.
Bent u niet technisch onderlegd, maar overweegt u een Magento webshop te laten ontwikkelen? Neem dan gerust contact met ons op (036 30 200 15) of vraag vrijblijvend een
webshop-offerte
aan.
Leuk artikel om te lezen! En ben het met je eens:
Dit is een goede tip. Ga ik zeker toepassen op onze shop
Werkt het ook met Gmail? Mijn ervaring is dat externe stylesheets door Gmail genegeerd worden en dus de opmaak niet altijd getoond wordt zoals je het wenst.
Bedankt Chris, duidelijk en handig. Werkt perfect!
Niels
28.6.2012, 23:38
28.6.2012, 23:38
Zeker handig!
Ik ben benieuwd naar de Duitse, Franse en Spaanse versies.
Zijn die al beschikbaar?
Peter
13.7.2012, 19:54
13.7.2012, 19:54
Handig om eens te bekijken. Gaan we zeker gebruiken voor onze overhemden op http://mouwlengte7.com
Hallo;
De scheiding tussen opmaak en inhoud is mij helemaal duidelijk. De gebruikte mappenstruktuur nog niet.
Ik maak gebruik van het eigen template 'dieet'.
Plaats ik alles nu onder
1) app/locale/nl_NL/template/... of
2) app/design/frontend/default/dieet/locale/nl_NL/template/... of
3) app/design/frontend/default/default..
Hallo;
De scheiding tussen opmaak en inhoud is mij helemaal duidelijk. De gebruikte mappenstruktuur nog niet.
Ik maak gebruik van het eigen template 'dieet'.
Plaats ik alles nu onder
1) app/locale/nl_NL/template/... of
2) app/design/frontend/default/dieet/locale/nl_NL/template/... of
3) app/design/frontend/default/default..
Werkt prima. Mijn vraag is alleen, waar zit het logo in. Ik wil echter het tekstgedeelte inkaderen. Ander achtergrond kleur etc. Om de tekst van de main table van de rand te krijgen voeg ik een padding toe, echter de table waar het logo in zit is voor mij onvindbaar.
Reageer op dit artikel
Niet-relevante reacties worden verwijderd. De website-link is "no-follow".
