magento2 - frontend under the hood
TRANSCRIPT
Magento-Stammtisch-Stuttgart.deTwitter: @magento_STRHashtag: #msstr
WILLKOMMEN!
Mathias ElleMein 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
Blank Theme
Magento-Stammtisch-Stuttgart.de | Twitter: @magento_STR | Hashtag: #msstr Mathias Elle | @dermatz_DE
Blank Theme
Magento-Stammtisch-Stuttgart.de | Twitter: @magento_STR | Hashtag: #msstr Mathias Elle | @dermatz_DE
Luma Them
e
Magento-Stammtisch-Stuttgart.de | Twitter: @magento_STR | Hashtag: #msstr Mathias Elle | @dermatz_DE
Luma Them
e
Magento-Stammtisch-Stuttgart.de | Twitter: @magento_STR | Hashtag: #msstr Mathias Elle | @dermatz_DE
Luma Them
e Mobile View
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 StrukturEin Theme beinhaltet nun
1. Vendor/Module – alle relevanten Modul-Dateien2. etc – Enthält die view.xml – diese Steuert alle Bildgrößen3. i18n – kurz für „internationalization“ – translate.csv4. Media – Enthält den Theme-Screenshot als Vorschaubild5. 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 OrdnerUnterschied 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 Ressourcennur dann geladen, wenn Sie gebraucht werden
GruntGrunt 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
Frontend Workflow
$ 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