Responsive E-Mail-Templates in Magento CE 1.9.1...21. Magento-Stammtisch Hamburg 17.12.2014 Responsive E-Mails in Magento ab Magento EE 1.14.1 und CE 1.9.1.0 Verfügbar für Transaktionsmails

Responsive E-Mails in Magento 1.9.1.0

Philipp Zabel

21. Magento-Stammtisch Hamburg17.12.2014

Agenda

● Was sind responsive E-Mails?

● Responsive E-Mails in Magento

● Kompatibilität

● E-Mail-Queue über Cronjob

● Hinweise zur Migration

● Fazit


Was sind responsive E-Mails?

● Responsive Design für HTML-E-Mails

● Unabhängig von der Bildschirmgröße

● Unterstützung von Smartphones und Tablets


Prognose zu responsive E-Mails


Statistik zur Nutzung von E-Mails mobil


Responsive E-Mails in Magento

● ab Magento EE 1.14.1 und CE 1.9.1.0

● Verfügbar für Transaktionsmails und Newsletter

● Neues Layout der Inhaltez.B. bei Bestellbestätigung

● Zentralisierung von Header und Footer

● High Resolution Logo

● Ausgliederung von CSS in Dateien


Beispiel einer responsive E-Mail


Vorher


Nachher


Header und Footer

● Verwendung als eigene TemplatesDatei-Vorlagen unter app/locale/SPRACHE/template/email/html/

● Konfiguration über System-Konfiguration:Allgemein > Design > Transaktions-E-Mails

● Multi-Store fähig

● Übergeben von Variablen möglich{{template config_path=“...“ show_terms=“1“}}


High Resolution Logo

● Hochaufgelöstes Logo für Retina Displays

● Feste Maße in System-Konfiguration

● High Resolution Logo mit doppelten Maßen

● Hochladen über System-Konfiguration oder Datei-System

Beispiel:

Maße in System-Konfiguration: 200 x 100 (Pixel)

Größe des High Resolution Logos: 400 x 200 (Pixel)


Verwendung von CSS-Dateien

● Einbinden von „Non Inline CSS“

– Platzhalter: {{var non_inline_styles}}

– Datei skin/frontend/[base/rwd]/default/[css/scss]/email-non-inline.(s)css

● Einbinden von „Inline CSS“

– Platzhalter: {{inlinecss file="email-inline.css"}}

– Datei skin/frontend/[base/rwd]/default/[css/scss]/email-inline.(s)css


Non Inline CSS

● Beinhaltet Media-Queries

● Wird im Kopfbereich eingefügt

● Konfiguration weiterer Dateien über System-Konfiguration


Inline CSS

● Ersetzung von CSS-Classes durch Style-Attribut

● Verwendete Bibliothek: Emogrifier

● Wird unterhalb des Kopfbereichs eingefügt

● Platzhalter nur einmal möglich


Neue Standard Variablen

● Telefon: store_phone

● Öffnungszeiten: store_hours

● Kontakt-E-Mail: store_email

● Werte aus System-KonfigurationAllgemein > Allgemein > Store Information

Beispiel:Kontaktieren Sie uns unter {{var store_phone}}.


Kompatibilität


E-Mail-Queue über Cronjob

● Asynchroner Versand der Bestell-E-Mails (max. 100 pro Run)

● Cronjob muss aktiv sein, minütliche Ausführung

● Speicherung der gerenderten E-Mails in DB-Tabelle core_email_queue

● Hinterlegen der Empfänger (z.B. bei BCC) in DB-Tabelle core_email_queue_recipients

● Nächtliche Löschung verschickter E-Mails aus Queue

● Hinzufügen einer E-Mail zur Queue anhand von Queue-Object und der Methode setQueue()

● Testen über Aoe_Scheduler oder n98-magerun


Hinweise zur Migration

● Achtung bei Update von 1.9.0.1 auf 1.9.1.0Aufgrund stark veränderter Template-Dateien

● Nur bei Vererbung des RWD-Themes

● Setzen der Maße vom Logo

● Bisher keine Aktualisierung des deutschen Sprachpakets

● Bisher keine Aktualisierung von MageSetup


Fazit

● Responsive E-Mails zeitgemäß, aber zu spät

● Missbrauch der E-Mail-Vorlagen für Header und Footer

● Komplizierte Konfiguration

● Redundanter Code bei E-Mail-Queue


Links / Quellen

● User Guide von Magentowww.magentocommerce.com/knowledge-base/entry/ee1141-ce191-responsive-email

● Ausführung von Cronjobs über das Backendhttps://github.com/AOEpeople/Aoe_Scheduler

● Emogrifier-Bibliothekhttps://github.com/jjriv/emogrifier

● n98-magerunhttps://github.com/netz98/n98-magerun

Viel Spaß!

Responsive E-Mail-Templates in Magento CE 1.9.1...21. Magento-Stammtisch Hamburg 17.12.2014 Responsive E-Mails in Magento ab Magento EE 1.14.1 und CE 1.9.1.0 Verfügbar für Transaktionsmails

Documents