Magento – Zo pas je transactional e-mails aan

In dit artikel vertellen we jou hoe je diverse zaken kunt aanpassen in de transactionel e-mails binnen Magento.

Het logo vervangen in de Magento Transactional Emails

Vind je het ook belangrijk om professionele transactional emails te versturen? Een goed begin is het aanpassen van het logo in de Magento transactional emails.

Er bestaan verschillende manieren om het logo te vervangen. Een snelle manier kan via de Magento backend.

Ga naar: System > Configuration > General > Design > Transactional emails. Upload vervolgens het logo.

Het logo is vervangen in deze Magento transactionele email

Design aanpassen

Indien je de bedrijfshuisstijl wilt doorvoeren naar de Magento transactionele emails dan wil je de desbetreffende bestanden aanpassen (de email zelf en de juiste phtml’s).

Vind je het ook zo lastig om de phtml’s van de Magento transactional emails te vinden? Dan heb ik hier een handige tip om deze middels de Developer Toolbar te vinden. Het enige wat je hoeft te doen is de toolbar aan te zetten en een email via het Magento admin panel uit te sturen. Hieronder lees je meer over het snel vinden van de juiste phtml van de uitgestuurde Magento transactionele email.

Installeer de (gratis) Developer Toolbar

Ga in je Magento backend naar: Magento Connect > Magento Connect Manager.
Of typ in de adresbalk van je browser de volgende link: “www.uwwebsite.nl/downloader”.

Vul hier je gebruikersnaam en wachtwoord in (alleen een user met de Administrators permissies kan inloggen en extensies downloaden via de Magento Connect Manager. Ga naar: System > Permissions > Users (zie User Role).

Klik op de Magento Connect link om naar modules te zoeken (Search for modules via Magento Connect).
Op deze site (opent zich in nieuw venster) kun je zoeken naar extensies. In dit geval zoeken we de ‘Developer toolbar’. Kopieer en plak de gevonden ‘key’.

Als de Developer toolbar hier niet meer te vinden is, kun je vooralsnog naar de website van de ontwikkelaar van de module gaan: Mage-World.com.

In je Magento backend activeer je de toolbar (Systeem > Configuratie > Geavanceerd > Ontwikkelaar)

Zet in de developer toolbar de Template Path Hints aan

Verstuur een transcational email

Als je nu een transactional email verstuurd vanuit de Magento backend (Sales > orders. Klik op de bestelling en vervolgens op de button ‘Send Email’ (rechtsboven). In mijn geval heb ik de order_new.html aangepast en deze verstuur ik doordat ik ingelogd ben en een bestelling heb geplaatst.), dan zie je de hints ook in de ontvangen email zelf staan. Superhandig! Klik op de onderstaande afbeelding voor een vergroting.

Met deze ‘template path – frontend’ hints kun je zien waar bijvoorbeeld de kleur van “Artikel, Artikelnummer, Aantal en Subtotaal” in welk phtml bestand aangepast kan worden. Het desbetreffende pad is: frontend/base/default/template/email/order/items.phtml

Maak aanpassingen in de desbetreffende phtml

Kopieer vervolgens het items.phtml bestand naar je eigen template mapje. Je wilt namelijk het aanpassen van de Magento ‘base’ bestanden vermijden. Als je in de default bestanden aanpassingen maakt loop je bij een update het risico dat deze aanpassingen verloren gaan.

Volg bij het kopiëren van de phtml dezelfde mapstructuur, maak indien nodig folders aan.
Bijv: frontend/default/default/template/email/order/items.phtml

Bekijk in de items.phtml welke table, table row of table header enkele inline CSS toevoegingen en/of wijzigingen kan gebruiken. Onthoud: gebruik inline CSS, want we hebben het hier tenslotte over emails. Hieronder zie je een voorbeeld hoe de CSS is toegevoegd in de th:

<th align="left" bgcolor="#F58020" style="font-size:13px; padding:3px 9px; color:#FFFFFF"><?php echo $this->__('Item') ?></th> 

Klik op de onderstaande afbeelding voor het resultaat:<

Wil je ook de hyperlinks in de email een style meegeven?

Ga in je Magento backend naar je email template: System > Transactional emails*

Selecteer hier je aangemaakte template bij (New Order Confirmation Template). Dan hoef ik, wanneer ik de emails wil aanpassen, alleen maar in te loggen op het backend systeem en niet op de server zelf om het originele html bestand aan te passen.