SlideShare ist ein Scribd-Unternehmen logo
1 von 19
Magento-Stammtisch-
Stuttgart.de
Twitter: @magento_STR
Hashtag: #msstr
WILLKOMMEN!
Mathias Elle
Mein Hintergrund:
- eCommerce Webentwicklung seit 2005
- Magento & Wordpress seit 2011
- Magento Certified Frontend Developer
- Frontent Development bei netz98 new media GmbH
Meine Aufgaben:
- Frontend Developer für Magento 1 und 2
im Magento Enterprise Bereich
- Umsetzung responsive Webdesign
Magento-Stammtisch-Stuttgart.de | Twitter: @magento_STR | Hashtag: #msstr Mathias Elle | @dermatz_DE
Magento 2 - Under the Hood
2 Standard Themes
blank & Luma
Template-
Strukturen
Frontend-Coding
Tools & Lib‘s
Mit dem Magento 2 wird die Webentwicklung rund um Magento um lang ersehnte
Features bereichert, aber auch an vielen Stellen komplexer!
Was ändert sich im Frontend? – Das schauen wir uns heute Abend an!
Magento-Stammtisch-Stuttgart.de | Twitter: @magento_STR | Hashtag: #msstr Mathias Elle | @dermatz_DE
BlankTheme
Magento-Stammtisch-Stuttgart.de | Twitter: @magento_STR | Hashtag: #msstr Mathias Elle | @dermatz_DE
BlankTheme
Magento-Stammtisch-Stuttgart.de | Twitter: @magento_STR | Hashtag: #msstr Mathias Elle | @dermatz_DE
LumaTheme
Magento-Stammtisch-Stuttgart.de | Twitter: @magento_STR | Hashtag: #msstr Mathias Elle | @dermatz_DE
LumaTheme
Magento-Stammtisch-Stuttgart.de | Twitter: @magento_STR | Hashtag: #msstr Mathias Elle | @dermatz_DE
LumaThemeMobileView
Magento-Stammtisch-Stuttgart.de | Twitter: @magento_STR | Hashtag: #msstr Mathias Elle | @dermatz_DE
Wichtigste Änderungen zu Magento 1
1. Modul und dazugehörige Templates & CSS sind nun in einem Ordner
2. Layout XML Files werden nicht nach dem alten Fallback-System komplett
überschrieben, sondern zusammengeführt/ergänzt
3. Layout XML Files bekommen Container
4. Einführung eines /pub/static Ordners mit kompilierten Daten
5. Vollständige LESS Integration mit riesiger Magento Less-Library
Magento-Stammtisch-Stuttgart.de | Twitter: @magento_STR | Hashtag: #msstr Mathias Elle | @dermatz_DE
1. Magento2 Theme Struktur
Ein Theme beinhaltet nun
1. Vendor/Module – alle relevanten Modul-Dateien
2. etc – Enthält die view.xml – diese Steuert alle Bildgrößen
3. i18n – kurz für „internationalization“ – translate.csv
4. Media – Enthält den Theme-Screenshot als Vorschaubild
5. Web – Static-Files, die direkt im Frontend geladen werden können
1. CSS/Source – Enthält Theme-Less Dateien, die die Magento
Standard – Less-Dateien aus der UI-Library überschreiben
Wichtig: In dieser Datei Theme.less werden nur die Standard-
Theme Variablen (z.B. von Luma) überschrieben.
CSS Anpassungen für das eigene Template werden in den
Vendor/Module/web/css/source .. gemacht
Magento-Stammtisch-Stuttgart.de | Twitter: @magento_STR | Hashtag: #msstr Mathias Elle | @dermatz_DE
2. Layout-XML Fallback-System
• Magento Layout XML werden nicht mehr “überschrieben”, sondern “extended”
Die Anweisungen in der customer_account.xml im Theme erweitern die Anweisungen der
customer_account.xml aus dem Parent Theme und diese wiederum ergänzen die aus dem Original-
Modul (Base Layout).
• Überschreiben von XML Dateien nur im Ordner Override
<theme_dir>/<Namespace_Module>/layout/override/base/<layout1>.xml
Magento-Stammtisch-Stuttgart.de | Twitter: @magento_STR | Hashtag: #msstr Mathias Elle | @dermatz_DE
3. XML - CONTAINER
Magento-Stammtisch-Stuttgart.de | Twitter: @magento_STR | Hashtag: #msstr Mathias Elle | @dermatz_DE
Beispiel für einen Container
<container name="div.sidebar.additional" htmlTag="div" htmlClass="sidebar sidebar-additional" after="div.sidebar.main">
<container name="sidebar.additional" as="sidebar_additional" label="Sidebar Additional"/>
</container>
Ideal für kleinere HTML Elemente (z.B. Banner, Infotexte, ...)
Magento-Stammtisch-Stuttgart.de | Twitter: @magento_STR | Hashtag: #msstr Mathias Elle | @dermatz_DE
4. Der /pub/static Ordner
Unterschied Static und Dynamic View Files
• Was ist im pub/static Ordner
• Dateien, die direkt vom Browser aufgerufen werden können
• fonts, images, CSS
• /pub/static/frontend/<Vendor>/<theme>/<language>/
• Dynamic Files
• Dateien, die vom Server ausgeführt oder verarbeitet werden,
um die angefragte Seite mit ihren Inhalten darzustellen
• .less Dateien, Templates und Layouts
• Diese Dateien kann man NICHT über eine URL im Browser aufrufen und sind deshalb
auch nicht im /pub/static
Magento-Stammtisch-Stuttgart.de | Twitter: @magento_STR | Hashtag: #msstr Mathias Elle | @dermatz_DE
Require.js
lib/web/css/source/lib
Less als Preprozessor mit riesige Magento
CSS-UI-Library mit vordefinierten Variablen,
Less-Mixins
UI-Library
Damit Bilder, JavaScript und andere Ressourcen
nur dann geladen, wenn Sie gebraucht werden
Grunt
Grunt Taskrunner als Magento – Theme Compiler
Magento-Stammtisch-Stuttgart.de | Twitter: @magento_STR | Hashtag: #msstr Mathias Elle | @dermatz_DE
Neues zum Javascript
• Magento 2 verwendet RequireJS zur Einbindung der JavaScript-Komponenten
http://requirejs.org/
• Magento 2 verwendet unter anderem jQuery und jQuery UI als Grundlage
• weitere Bibliotheken stehen zur Verfügung und werden verwendet
• Knockout JS (http://knockoutjs.com/)
• Underscore JS (http://underscorejs.org/)
• Magento jQuery Widgets liegen unter lib/web/mage
• JS Unit-Tests für das Frontend ( z.B. JS-Testdriver, Jasmine, Q-Unit )
Magento-Stammtisch-Stuttgart.de | Twitter: @magento_STR | Hashtag: #msstr Mathias Elle | @dermatz_DE
Magento-Stammtisch-Stuttgart.de | Twitter: @magento_STR | Hashtag: #msstr Mathias Elle | @dermatz_DE
FrontendWorkflow
$ grunt watch
Nur LESS Dateien Neue Template Datei/en + Less
$ Grunt watch stoppen .. (ctrl + c)
$ grunt exec:themename de_DE
$ grunt less:themename
Testing im Browser
Testing im Browser
Danke!
Magento-Stammtisch-Stuttgart.de
Twitter: @magento_STR
Hashtag: #msstr
Mathias Elle | @dermatz_DE | www.dermatz.de

Weitere ähnliche Inhalte

Ähnlich wie Magento2 - Frontend under the hood

JSN Dome Anpassungshandbuch
JSN Dome AnpassungshandbuchJSN Dome Anpassungshandbuch
JSN Dome AnpassungshandbuchJoomlaShine
 
Make your IBM connections deployment your own - customize it
Make your IBM connections deployment your own - customize itMake your IBM connections deployment your own - customize it
Make your IBM connections deployment your own - customize itBelsoft
 
WordPress- eine Einführung
WordPress- eine EinführungWordPress- eine Einführung
WordPress- eine EinführungJohannes Fruth
 
Zend Framework 2 - Best Practices
Zend Framework 2 - Best PracticesZend Framework 2 - Best Practices
Zend Framework 2 - Best PracticesRalf Eggert
 
JSN Teki Anpassungshandbuch
JSN Teki AnpassungshandbuchJSN Teki Anpassungshandbuch
JSN Teki AnpassungshandbuchJoomlaShine
 
SharePointCommunity.ch SharePoint Lösungen für die Zukunft
SharePointCommunity.ch SharePoint Lösungen für die ZukunftSharePointCommunity.ch SharePoint Lösungen für die Zukunft
SharePointCommunity.ch SharePoint Lösungen für die ZukunftDavid Schneider
 
Web460 ppt-de-jul-wi-web-all-2020
Web460 ppt-de-jul-wi-web-all-2020Web460 ppt-de-jul-wi-web-all-2020
Web460 ppt-de-jul-wi-web-all-2020HansruediDbeli1
 
WordPress Professional – SEO Campixx
WordPress Professional – SEO CampixxWordPress Professional – SEO Campixx
WordPress Professional – SEO CampixxSebastian Blum
 
Frontend-Architektur der 1&1 Bestellsysteme
Frontend-Architektur der 1&1 BestellsystemeFrontend-Architektur der 1&1 Bestellsysteme
Frontend-Architektur der 1&1 BestellsystemeNico Steiner
 
PHP-Module in statischen Seiten - Architektur-Ansätze
PHP-Module in statischen Seiten - Architektur-AnsätzePHP-Module in statischen Seiten - Architektur-Ansätze
PHP-Module in statischen Seiten - Architektur-AnsätzeRalf Lütke
 
We4IT LCTY 2013 - x-pages-men - whats next - application modernization roadmap
We4IT LCTY 2013 - x-pages-men - whats next - application modernization roadmapWe4IT LCTY 2013 - x-pages-men - whats next - application modernization roadmap
We4IT LCTY 2013 - x-pages-men - whats next - application modernization roadmapWe4IT Group
 
2. Technologie-Tag - Frontend Architektur
2. Technologie-Tag - Frontend Architektur2. Technologie-Tag - Frontend Architektur
2. Technologie-Tag - Frontend ArchitekturNico Steiner
 
Gentics Webinar: IT-Kosten sparen mit Unified Content & Collaboration Archite...
Gentics Webinar: IT-Kosten sparen mit Unified Content & Collaboration Archite...Gentics Webinar: IT-Kosten sparen mit Unified Content & Collaboration Archite...
Gentics Webinar: IT-Kosten sparen mit Unified Content & Collaboration Archite...Manuel Aghamanoukjan
 
Einführung XHTML CSS JS // MM 08-11
Einführung XHTML CSS JS // MM 08-11Einführung XHTML CSS JS // MM 08-11
Einführung XHTML CSS JS // MM 08-11Noël Bossart
 
We4IT - IBM Notes & Domino 9 Social Edition
We4IT - IBM Notes & Domino 9 Social EditionWe4IT - IBM Notes & Domino 9 Social Edition
We4IT - IBM Notes & Domino 9 Social EditionWe4IT Group
 
120124 taxxus i_pad_produktion
120124 taxxus i_pad_produktion120124 taxxus i_pad_produktion
120124 taxxus i_pad_produktionChristian Töpper
 
elemente websolutions - Zusammenfassung T3DD09
elemente websolutions - Zusammenfassung T3DD09elemente websolutions - Zusammenfassung T3DD09
elemente websolutions - Zusammenfassung T3DD09elemente websolutions
 
Interaktives Zusammenarbeiten mit Collaboration
Interaktives Zusammenarbeiten mit CollaborationInteraktives Zusammenarbeiten mit Collaboration
Interaktives Zusammenarbeiten mit CollaborationStefan Hilpp
 

Ähnlich wie Magento2 - Frontend under the hood (20)

Joomla
JoomlaJoomla
Joomla
 
JSN Dome Anpassungshandbuch
JSN Dome AnpassungshandbuchJSN Dome Anpassungshandbuch
JSN Dome Anpassungshandbuch
 
Make your IBM connections deployment your own - customize it
Make your IBM connections deployment your own - customize itMake your IBM connections deployment your own - customize it
Make your IBM connections deployment your own - customize it
 
WordPress- eine Einführung
WordPress- eine EinführungWordPress- eine Einführung
WordPress- eine Einführung
 
Zend Framework 2 - Best Practices
Zend Framework 2 - Best PracticesZend Framework 2 - Best Practices
Zend Framework 2 - Best Practices
 
JSN Teki Anpassungshandbuch
JSN Teki AnpassungshandbuchJSN Teki Anpassungshandbuch
JSN Teki Anpassungshandbuch
 
SharePointCommunity.ch SharePoint Lösungen für die Zukunft
SharePointCommunity.ch SharePoint Lösungen für die ZukunftSharePointCommunity.ch SharePoint Lösungen für die Zukunft
SharePointCommunity.ch SharePoint Lösungen für die Zukunft
 
Web460 ppt-de-jul-wi-web-all-2020
Web460 ppt-de-jul-wi-web-all-2020Web460 ppt-de-jul-wi-web-all-2020
Web460 ppt-de-jul-wi-web-all-2020
 
WordPress Professional – SEO Campixx
WordPress Professional – SEO CampixxWordPress Professional – SEO Campixx
WordPress Professional – SEO Campixx
 
Frontend-Architektur der 1&1 Bestellsysteme
Frontend-Architektur der 1&1 BestellsystemeFrontend-Architektur der 1&1 Bestellsysteme
Frontend-Architektur der 1&1 Bestellsysteme
 
PHP-Module in statischen Seiten - Architektur-Ansätze
PHP-Module in statischen Seiten - Architektur-AnsätzePHP-Module in statischen Seiten - Architektur-Ansätze
PHP-Module in statischen Seiten - Architektur-Ansätze
 
We4IT LCTY 2013 - x-pages-men - whats next - application modernization roadmap
We4IT LCTY 2013 - x-pages-men - whats next - application modernization roadmapWe4IT LCTY 2013 - x-pages-men - whats next - application modernization roadmap
We4IT LCTY 2013 - x-pages-men - whats next - application modernization roadmap
 
Joomla
JoomlaJoomla
Joomla
 
2. Technologie-Tag - Frontend Architektur
2. Technologie-Tag - Frontend Architektur2. Technologie-Tag - Frontend Architektur
2. Technologie-Tag - Frontend Architektur
 
Gentics Webinar: IT-Kosten sparen mit Unified Content & Collaboration Archite...
Gentics Webinar: IT-Kosten sparen mit Unified Content & Collaboration Archite...Gentics Webinar: IT-Kosten sparen mit Unified Content & Collaboration Archite...
Gentics Webinar: IT-Kosten sparen mit Unified Content & Collaboration Archite...
 
Einführung XHTML CSS JS // MM 08-11
Einführung XHTML CSS JS // MM 08-11Einführung XHTML CSS JS // MM 08-11
Einführung XHTML CSS JS // MM 08-11
 
We4IT - IBM Notes & Domino 9 Social Edition
We4IT - IBM Notes & Domino 9 Social EditionWe4IT - IBM Notes & Domino 9 Social Edition
We4IT - IBM Notes & Domino 9 Social Edition
 
120124 taxxus i_pad_produktion
120124 taxxus i_pad_produktion120124 taxxus i_pad_produktion
120124 taxxus i_pad_produktion
 
elemente websolutions - Zusammenfassung T3DD09
elemente websolutions - Zusammenfassung T3DD09elemente websolutions - Zusammenfassung T3DD09
elemente websolutions - Zusammenfassung T3DD09
 
Interaktives Zusammenarbeiten mit Collaboration
Interaktives Zusammenarbeiten mit CollaborationInteraktives Zusammenarbeiten mit Collaboration
Interaktives Zusammenarbeiten mit Collaboration
 

Magento2 - Frontend under the hood

  • 2. Mathias Elle Mein Hintergrund: - eCommerce Webentwicklung seit 2005 - Magento & Wordpress seit 2011 - Magento Certified Frontend Developer - Frontent Development bei netz98 new media GmbH Meine Aufgaben: - Frontend Developer für Magento 1 und 2 im Magento Enterprise Bereich - Umsetzung responsive Webdesign Magento-Stammtisch-Stuttgart.de | Twitter: @magento_STR | Hashtag: #msstr Mathias Elle | @dermatz_DE
  • 3. Magento 2 - Under the Hood 2 Standard Themes blank & Luma Template- Strukturen Frontend-Coding Tools & Lib‘s Mit dem Magento 2 wird die Webentwicklung rund um Magento um lang ersehnte Features bereichert, aber auch an vielen Stellen komplexer! Was ändert sich im Frontend? – Das schauen wir uns heute Abend an! Magento-Stammtisch-Stuttgart.de | Twitter: @magento_STR | Hashtag: #msstr Mathias Elle | @dermatz_DE
  • 4. BlankTheme Magento-Stammtisch-Stuttgart.de | Twitter: @magento_STR | Hashtag: #msstr Mathias Elle | @dermatz_DE
  • 5. BlankTheme Magento-Stammtisch-Stuttgart.de | Twitter: @magento_STR | Hashtag: #msstr Mathias Elle | @dermatz_DE
  • 6. LumaTheme Magento-Stammtisch-Stuttgart.de | Twitter: @magento_STR | Hashtag: #msstr Mathias Elle | @dermatz_DE
  • 7. LumaTheme Magento-Stammtisch-Stuttgart.de | Twitter: @magento_STR | Hashtag: #msstr Mathias Elle | @dermatz_DE
  • 8. LumaThemeMobileView Magento-Stammtisch-Stuttgart.de | Twitter: @magento_STR | Hashtag: #msstr Mathias Elle | @dermatz_DE
  • 9. Wichtigste Änderungen zu Magento 1 1. Modul und dazugehörige Templates & CSS sind nun in einem Ordner 2. Layout XML Files werden nicht nach dem alten Fallback-System komplett überschrieben, sondern zusammengeführt/ergänzt 3. Layout XML Files bekommen Container 4. Einführung eines /pub/static Ordners mit kompilierten Daten 5. Vollständige LESS Integration mit riesiger Magento Less-Library Magento-Stammtisch-Stuttgart.de | Twitter: @magento_STR | Hashtag: #msstr Mathias Elle | @dermatz_DE
  • 10. 1. Magento2 Theme Struktur Ein Theme beinhaltet nun 1. Vendor/Module – alle relevanten Modul-Dateien 2. etc – Enthält die view.xml – diese Steuert alle Bildgrößen 3. i18n – kurz für „internationalization“ – translate.csv 4. Media – Enthält den Theme-Screenshot als Vorschaubild 5. Web – Static-Files, die direkt im Frontend geladen werden können 1. CSS/Source – Enthält Theme-Less Dateien, die die Magento Standard – Less-Dateien aus der UI-Library überschreiben Wichtig: In dieser Datei Theme.less werden nur die Standard- Theme Variablen (z.B. von Luma) überschrieben. CSS Anpassungen für das eigene Template werden in den Vendor/Module/web/css/source .. gemacht Magento-Stammtisch-Stuttgart.de | Twitter: @magento_STR | Hashtag: #msstr Mathias Elle | @dermatz_DE
  • 11. 2. Layout-XML Fallback-System • Magento Layout XML werden nicht mehr “überschrieben”, sondern “extended” Die Anweisungen in der customer_account.xml im Theme erweitern die Anweisungen der customer_account.xml aus dem Parent Theme und diese wiederum ergänzen die aus dem Original- Modul (Base Layout). • Überschreiben von XML Dateien nur im Ordner Override <theme_dir>/<Namespace_Module>/layout/override/base/<layout1>.xml Magento-Stammtisch-Stuttgart.de | Twitter: @magento_STR | Hashtag: #msstr Mathias Elle | @dermatz_DE
  • 12. 3. XML - CONTAINER Magento-Stammtisch-Stuttgart.de | Twitter: @magento_STR | Hashtag: #msstr Mathias Elle | @dermatz_DE
  • 13. Beispiel für einen Container <container name="div.sidebar.additional" htmlTag="div" htmlClass="sidebar sidebar-additional" after="div.sidebar.main"> <container name="sidebar.additional" as="sidebar_additional" label="Sidebar Additional"/> </container> Ideal für kleinere HTML Elemente (z.B. Banner, Infotexte, ...) Magento-Stammtisch-Stuttgart.de | Twitter: @magento_STR | Hashtag: #msstr Mathias Elle | @dermatz_DE
  • 14. 4. Der /pub/static Ordner Unterschied Static und Dynamic View Files • Was ist im pub/static Ordner • Dateien, die direkt vom Browser aufgerufen werden können • fonts, images, CSS • /pub/static/frontend/<Vendor>/<theme>/<language>/ • Dynamic Files • Dateien, die vom Server ausgeführt oder verarbeitet werden, um die angefragte Seite mit ihren Inhalten darzustellen • .less Dateien, Templates und Layouts • Diese Dateien kann man NICHT über eine URL im Browser aufrufen und sind deshalb auch nicht im /pub/static Magento-Stammtisch-Stuttgart.de | Twitter: @magento_STR | Hashtag: #msstr Mathias Elle | @dermatz_DE
  • 15. Require.js lib/web/css/source/lib Less als Preprozessor mit riesige Magento CSS-UI-Library mit vordefinierten Variablen, Less-Mixins UI-Library Damit Bilder, JavaScript und andere Ressourcen nur dann geladen, wenn Sie gebraucht werden Grunt Grunt Taskrunner als Magento – Theme Compiler
  • 16. Magento-Stammtisch-Stuttgart.de | Twitter: @magento_STR | Hashtag: #msstr Mathias Elle | @dermatz_DE
  • 17. Neues zum Javascript • Magento 2 verwendet RequireJS zur Einbindung der JavaScript-Komponenten http://requirejs.org/ • Magento 2 verwendet unter anderem jQuery und jQuery UI als Grundlage • weitere Bibliotheken stehen zur Verfügung und werden verwendet • Knockout JS (http://knockoutjs.com/) • Underscore JS (http://underscorejs.org/) • Magento jQuery Widgets liegen unter lib/web/mage • JS Unit-Tests für das Frontend ( z.B. JS-Testdriver, Jasmine, Q-Unit ) Magento-Stammtisch-Stuttgart.de | Twitter: @magento_STR | Hashtag: #msstr Mathias Elle | @dermatz_DE
  • 18. Magento-Stammtisch-Stuttgart.de | Twitter: @magento_STR | Hashtag: #msstr Mathias Elle | @dermatz_DE FrontendWorkflow $ grunt watch Nur LESS Dateien Neue Template Datei/en + Less $ Grunt watch stoppen .. (ctrl + c) $ grunt exec:themename de_DE $ grunt less:themename Testing im Browser Testing im Browser