Magento - Transactional emails (Deel 2)

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).

Magento Developer Toolbar

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

Template path hints

Verstuur een Magento Transactional 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.

In je email hints ontvangen

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:

In je email hints ontvangen

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.

Template in backend wijzigen

*Ik heb er voor gekozen om de email toe te voegen als een template en deze toe te wijzen.
Dit doe je bij: System > Configuration > Sales > Sales Emails > Order > New Order Confirmation Template.

Maar het kan dus zijn dat jij graag de originele html email bestanden aanpast (met als voordeel dat je ze in de backend niet hoeft toe te wijzen). Deze zitten in het mapje locale/en_US (of als je een Nederlands taalpakket hebt geïnstalleerd bij locale/nl_NL). Aan jou de keuze hoe je graag te werk gaat.

Hier kun je het resultaat zien van de Magento transactional email met enkele CSS aanpassingen.

Transactionele Email design

Hulp nodig bij het opmaken van de transactional emails?

Indien je de bedrijfshuisstijl wilt doorvoeren naar de transactionele emails, dan staat Supportdesk voor je klaar.

 
  • woensdag, 10 oktober 2012

Reacties (0)

Plaats een reactie

U plaatst een reactie als gast

Are u ready 4 Magento 2?

Are u ready 4 Magento 2?

Are you currenty using Magento 1, and looking forward to continue your business using the latest functionality in ecommerce, than Magento 2 is ready for you.

Magento 2 is a brand new platform and ready to serve your ecommerce needs now and in the future.

more info

Stel je vraag

Stel je vraag

Stap 1. Impact analyse

Stap 1. Impact analyse

Stap 2. Pre-paid ticket

Stap 2. Pre-paid ticket

Stap 3. Uitvoeren

Stap3: Uitvoeren

Bel nu! 020 337 5961

SupportDesk B.V.
Hogehilweg 19
1101 CB Amsterdam

E-mail: support @ supportdesk.nu

meer gegevens