Wenn man aus seinem Magentoshop HTML E-Mails verschicken möchte, die zum CI des Shops passen, so hat man freie Hand bei der Gestaltung. Da es unglaublich viele E-Mail Vorlagen im System gibt, möchte ich ein paar Tipps geben, wie man die Arbeit und spätere Pflege optimieren kann.

Wenn man sich für HTML Mails entscheidet und die E-Mail Vorlagen entsprechend umsetzen möchte, sollte man sich zunächst im Klaren darüber sein, dass die Darstellung der E-Mail beim Kunden je nach verwendetem Mail Programm (Outlook, Thunderbird, MacOs Mail…) oder Online Mail Provider (Google Mail, Web.de, GMX …) sehr unterschiedlich ist. Leider unterstützt kein Programm/Seite, alle HTML Funktionen und/oder CSS Eigenschaften, die man im modernen Webdesign verwendet. Besonders so weit verbreitete Mail Programme wie Outlook 2007 machen es nahezu unmöglich in HTML Mails “vernünftiges” Markup zu verwenden.

HTML und CSS in E-Mails

Bevor man sich an die Gestaltung macht, sollte man einen Blick in folgende Liste werfen: http://www.campaignmonitor.com/css/
Hier werden die wichtigsten Tags und CSS Eigenschaften der wichtigsten Mail Programme überprüft und man ieht sofort, was geht, was geht nicht.

Hat man sich durch die Liste gearbeitet, kommt man unweigerlich zu dem Schluß die E-Mails in einem Tabellenraster zu gestalten. CSS setze ich sparsam ein.
Meist genügt es, Schriftfarben, Hintergrundfarben anzupassen und ein Logo einzubinden.

Wiederkehrende Inhalte ausgliedern

- Jede meiner E-Mail Vorlagen hat die gleiche Kopfzeile mit dem Logo, einem Link zum Shop und Platz um eine wichtige Info einzublenden (z.B. für besondere Aktionen)
- Jede E-Mail Vorlage hat einen Footer mit Links zum Beutzerkonto, Impressum und AGB, außerdem Kontaktdaten, UstID und Ladenadresse
- Einige E-Mail Vorlagen verwenden im Footer das Widerrufsrecht
- Einige E-Mail Vorlagen verwenden einen Absatz mit Informationen “Sollten Sie fragen zu Ihrer Betsellung haben…”

Da diese Blöcke in fast jeder Mail vorkommen und eigenes Markup und Text haben, macht es Sinn sie auszugliedern. Änderungen müssen so nur in einer Datei gemacht werden und die E-Mail Vorlagen im Adminsystem müssen nicht geändert werden.

Zunächst habe ich mir im Verzeichnis app/design/frontend/default/meintheme/template/email die phtml-Dateien für die entsprechenden Blöcke angelegt. Diese Dateien beinhalten sämtliches Markup und ggf. Texte.

Beispiel für footer-start.phtml

<table class="footer" width="100%">
<tr>
<td style="border-top:2px solid #998682;">meinedomain |
<a href="http://www.meinedomain.de/index.php/customer/account/login/" style="color:#ad4a52;">Ihr Konto</a> |
<a  style="color:#ad4a52;" href="http://www.meinedomain.de/index.php/impressum">Impressum</a> |
<a style="color:#ad4a52;" href="http://www.meinedomain.de/index.php/agb">AGB</a></td>
</tr>

Sind alle Templatedateien vorbereitet, geht es nun daran die E-Mail Vorlagen in der Administration anzupassen, sodass die Templates auch verwendet werden. Das muss man einmalig erledigen. Sorry

Um die Templates nun in der E-Mail Vorlage aufzurufen fügt man folgendes ein:

{{block type='core/template' area='frontend' template='email/footer-start.phtml'}}

Hier mal ein Beispiel für eine komplette E-Mail (new-order):

{{block type='core/template' area='frontend' template='email/header-start.phtml'}}
<table cellspacing="0" cellpadding="0" border="0" width="100%">
  <tr>
  <td valign="top">
  <p><strong>Hallo {{htmlescape var=$order.getBillingAddress().getName()}}</strong>,<br/>
  Vielen Dank für Ihre Bestellung</p>
{{block type='core/template' area='frontend' template='email/paragraph-questions.phtml'}}
  <h3 style="border-bottom:2px solid #eee; font-size:1.05em; padding-bottom:1px; ">Ihre Bestellung Nr.{{var order.increment_id}} <small>(vom {{var order.getCreatedAtFormated('long')}})</small></h3>
  <table cellspacing="0" cellpadding="0" border="0" width="100%">
  <thead>
  <tr>
  <th align="left" width="48.5%" bgcolor="#D9CFC7" style="padding:5px 9px 6px 9px; border:1px solid #bebcb7; border-bottom:none; line-height:1em;">Rechnungsinformationen:</th>
  <th width="3%"></th>
  <th align="left" width="48.5%" bgcolor="#D9CFC7" style="padding:5px 9px 6px 9px; border:1px solid #bebcb7; border-bottom:none; line-height:1em;">Zahlungsmethode:</th>
  </tr>
  </thead>
  <tbody>
  <tr>
  <td valign="top" style="padding:7px 9px 9px 9px; border:1px solid #bebcb7; border-top:0;">
  {{var order.getBillingAddress().format('html')}}
  </td>
  <td>&nbsp;</td>
  <td valign="top" style="padding:7px 9px 9px 9px; border:1px solid #bebcb7; border-top:0;;">
  {{var payment_html}}
  </td>
  </tr>
  </tbody>
  </table>
  <br/>
  {{depend order.getIsNotVirtual()}}
  <table cellspacing="0" cellpadding="0" border="0" width="100%">
  <thead>
  <tr>
  <th align="left" width="48.5%" bgcolor="#D9CFC7" style="padding:5px 9px 6px 9px; border:1px solid #bebcb7; border-bottom:none; line-height:1em;">Versandinformationen:</th>
  <th width="3%"></th>
  <th align="left" width="48.5%" bgcolor="#D9CFC7" style="padding:5px 9px 6px 9px; border:1px solid #bebcb7; border-bottom:none; line-height:1em;">Versandart:</th>
  </tr>
  </thead>
  <tbody>
  <tr>
  <td valign="top" style="padding:7px 9px 9px 9px; border:1px solid #bebcb7; border-top:0;">
  {{var order.getShippingAddress().format('html')}}
  &nbsp;
  </td>
  <td>&nbsp;</td>
  <td valign="top" style="padding:7px 9px 9px 9px; border:1px solid #bebcb7; border-top:0;">
  {{var order.getShippingDescription()}}
  &nbsp;
  </td>
  </tr>
  </tbody>
  </table>
  <br/>
  {{/depend}}
  <table cellspacing="0" cellpadding="0" border="0" width="100%">
  <thead>
  <tr>
  <th align="left" bgcolor="#D9CFC7" style="padding:5px 9px 6px 9px; border:1px solid #D9CFC7; border-bottom:none; line-height:1em;">Ihr Kommentar:</th>
  </tr>
  </thead>
  <tbody>
  <tr>
  <td valign="top" style="padding:7px 9px 9px 9px; border:1px solid #bebcb7; border-top:0;">
  {{var order.getBiebersdorfCustomerordercomment()}}
  </td>
  </tr>
  </tbody>
  </table>
  <br/>
  {{layout handle="sales_email_order_items" order=$order}}
  <br/>
  {{var order.getEmailCustomerNote()}}
  </td>
  </tr>
  </table>
  {{block type='core/template' area='frontend' template='email/footer-start.phtml'}}
  {{block type='core/template' area='frontend' template='email/footer-sub-data.phtml'}}
  {{block type='core/template' area='frontend' template='email/footer-sub-disclaimer.phtml'}}
  {{block type='core/template' area='frontend' template='email/footer-end.phtml'}}

Weitere Möglichkeiten

Da es für mich immer einfacher ist und schneller geht die Inhalte in den phtml Dateien zu wechseln habe ich alle Texte in diesen stehen. Möchte man die Elemnte aber über die Adminoberfläche pflegen, so kann man statt der phtml Dateien natürlich auch statische Blöcke einbinden. Optimal ist sicher die Kombination aus beidem. So kann man als Entwickler das Markup einfach über die phtml Dateien pflegen und wer auch immer für die Texte zuständig ist, kann diese via Adminoberfläche Pflegen.

Statische Blöcke direkt in der E-Mail:

{{block type="cms/block" block_id="cms_email_footer"}}

In diesem Fall muss via Admin der statische Block mit dem Seitenbezeichner “cms_email_footer” angelegt werden.

Statische Blöcke in den Templatedateien:

<? getLayout()->createBlock('cms/block')->setBlockId('cms_email_footer')->toHtml() ?>