Magento Email Templates einheitlich stylen

Beitrag vom: 20.05.2011, 13:11:04

Eine zugegebenermaßen ziemlich unliebsame Aufgabe bei der Designumsetzung in Magento ist das Stylen der Email-Templates. Diese erstrecken sich von den Template-Dateien im verwendeten Theme über die Transaktions-Mails im Backend bis hin zu den Standardvorlagen im locale-Ordner. Gar nicht so einfach alle Emails einheitlich aussehen zu lassen ohne einen kleinen Schnippsel zu vergessen.

Daher habe ich mir das Ganze mal näher angeschaut und mir folgende Herangehensweise erarbeitet um mir selbst viel Zeit zu ersparen.

Da wir als Agentur naturgemäß viele deutsche Shops gestalten, installieren wir als erstes immer das MRG-Modul von Symmetrics. Der Vorteil ist, dass durch die Extension sämtliche Email-Vorlagen als Transaktions-Mails angelegt werden. Somit kann der Shopbetreiber die Emails alle bequem selbst bearbeiten wenn er denn möchte. Außerdem könnt ihr dadurch euer CSS schneller loswerden, dazu weiter unten mehr.

1. Als weitere Grundlage müsst ihr erstmal der Design-Vorlage entsprechend eine Email durchstylen. Ich benutze dazu immer die Transaktions-Mail “Neue Bestellung”. Im Backend zu finden unter “System -> Transaktions-E-Mails”, in der Liste dann auf den entsprechenden Eintrag klicken.
Im Bearbeiten-Fenster seht ihr ganz unten das Feld “Vorlagen-Stile”. Dort trage ich als Basis folgendes CSS ein:

a {
   color: #9A539D !important;
}
th {
   color: #fff !important;
   border: 1px solid #9A539D !important;
   background: #9A539D !important;
}
th ~ th {
   border: 0 !important;
   background: 0 !important;
}
th ~ th ~ th {
   color: #fff !important;
   border: 1px solid #9A539D !important;
   background: #9A539D !important;
}
table#items th {
   color: #fff !important;
   border: 1px solid #9A539D !important;
   background: #9A539D !important;
}
table table table td {
   border: 1px solid #9A539D !important;
}
table table table td ~ td {
   border: 0 !important;
}
table table table td ~ td ~td {
   border: 1px solid #9A539D !important;
}
table#items td {
   border: 1px solid #9A539D !important;
}

Sämtliche Farbangaben ersetze ich dann durch die passende Hauptfarbe des Screendesigns.

Im selben Fenster könnt ihr eine Vorlagenansicht begutachten (oben in der Buttonleiste auf “Vorlagenvorschau” klicken). Wenn euch die Vorlage gefällt, könnt ihr die restlichen Mails mit demselben CSS mit den folgenden Schritten anpassen.

2. Falls noch nicht geschehen, kopiert ihr diesen Ordner:

app/design/frontend/base/default/template/email

in die entsprechende Struktur eures eigenen Theme-Verzeichnisses. 
Alle Tabellen-Elemente die sich in den Templates dieses Ordners befinden erhalten die id=”items”verpasst, also:

<table id="items" ...>...</table>

Der Grund ist, dass ich im obigen CSS den Selektor table#items verwende um spezifischer auf die Tabellen einzugehen. Da keine Tabelle eine id besitzt, könnt ihr bequem die Suchen/Ersetzen-Funktion eures Lieblings-Editors verwenden (in meinem Falle Eclipse PDT).

3. Dann müsst ihr etwas tun, was eigentlich ungern gemacht wird, in diesem Fall aber viel Arbeit erspart.
Alle Transaktions-Mails werden in der Datenbank in der Tabelle {db_prefix}core_email_templategespeichert. Die Spalte template_styles speichert das CSS, welches im Backend unter Punkt 1 weiter oben eingetragen wird. Da alle Mails gleich aussehen sollen, kann also dasselbe CSS in jeder Datenbankzeile eingetragen werden. Also bequem per phpMyAdmin.

 

Wenn ihr das ein paar Mal gemacht habt, braucht ihr dafür eine knappe viertel Stunde. Im Vergleich dazu habe ich zu Beginn meiner Magento-Zeit gerne drei Stunden verbracht um auch wirklich jede einzelne Mail zu testen.

Würde mich freuen wenn euch dieser Tipp hilft!


Kontakt