Responsive s in Magento

Transkript

1 Responsive s in Magento

2 Philipp Zabel

3 Agenda Was sind responsive s? Responsive s in Magento Kompatibilität -Queue über Cronjob Hinweise zur Migration Fazit

4 Was sind responsive s? Responsive Design für HTML- s Unabhängig von der Bildschirmgröße Unterstützung von Smartphones und Tablets

5 Prognose zu responsive s

6 Statistik zur Nutzung von s mobil

7 Responsive s in Magento ab Magento EE und CE Verfügbar für Transaktionsmails und Newsletter Neues Layout der Inhalte z.b. bei Bestellbestätigung Zentralisierung von Header und Footer High Resolution Logo Ausgliederung von CSS in Dateien

8 Beispiel einer responsive

9 Vorher

10 Nachher

11 Header und Footer Verwendung als eigene Templates Datei-Vorlagen unter app/locale/sprache/template/ /html/ Konfiguration über System-Konfiguration: Allgemein > Design > Transaktions- s Multi-Store fähig Übergeben von Variablen möglich {{template config_path=... show_terms= 1 }}

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

13 Verwendung von CSS-Dateien Einbinden von Non Inline CSS Platzhalter: {{var non_inline_styles}} Datei skin/frontend/[base/rwd]/default/ [css/scss]/ -non-inline.(s)css Einbinden von Inline CSS Platzhalter: {{inlinecss file=" -inline.css"}} Datei skin/frontend/[base/rwd]/default/ [css/scss]/ -inline.(s)css

14 Non Inline CSS Beinhaltet Media-Queries Wird im Kopfbereich eingefügt Konfiguration weiterer Dateien über System-Konfiguration

15 Inline CSS Ersetzung von CSS-Classes durch Style-Attribut Verwendete Bibliothek: Emogrifier Wird unterhalb des Kopfbereichs eingefügt Platzhalter nur einmal möglich

16 Neue Standard Variablen Telefon: store_phone Öffnungszeiten: store_hours Kontakt- store_ Werte aus System-Konfiguration Allgemein > Allgemein > Store Information Beispiel: Kontaktieren Sie uns unter {{var store_phone}}.

17 Kompatibilität

18 -Queue über Cronjob Asynchroner Versand der Bestell- s (max. 100 pro Run) Cronjob muss aktiv sein, minütliche Ausführung Speicherung der gerenderten s in DB-Tabelle core_ _queue Hinterlegen der Empfänger (z.b. bei BCC) in DB-Tabelle core_ _queue_recipients Nächtliche Löschung verschickter s aus Queue Hinzufügen einer zur Queue anhand von Queue-Object und der Methode setqueue() Testen über Aoe_Scheduler oder n98-magerun

19 Hinweise zur Migration Achtung bei Update von auf Aufgrund 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

20 Fazit Responsive s zeitgemäß, aber zu spät Missbrauch der -Vorlagen für Header und Footer Komplizierte Konfiguration Redundanter Code bei -Queue

21 Links / Quellen User Guide von Magento Ausführung von Cronjobs über das Backend Emogrifier-Bibliothek n98-magerun

22 Viel Spaß!