magento2 - frontend under the hood
TRANSCRIPT
![Page 1: Magento2 - Frontend under the hood](https://reader033.vdocuments.pub/reader033/viewer/2022050914/58ecc6401a28abec2c8b45fb/html5/thumbnails/1.jpg)
Magento-Stammtisch-Stuttgart.deTwitter: @magento_STRHashtag: #msstr
WILLKOMMEN!
![Page 2: Magento2 - Frontend under the hood](https://reader033.vdocuments.pub/reader033/viewer/2022050914/58ecc6401a28abec2c8b45fb/html5/thumbnails/2.jpg)
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
![Page 3: Magento2 - Frontend under the hood](https://reader033.vdocuments.pub/reader033/viewer/2022050914/58ecc6401a28abec2c8b45fb/html5/thumbnails/3.jpg)
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
![Page 4: Magento2 - Frontend under the hood](https://reader033.vdocuments.pub/reader033/viewer/2022050914/58ecc6401a28abec2c8b45fb/html5/thumbnails/4.jpg)
Blank Theme
Magento-Stammtisch-Stuttgart.de | Twitter: @magento_STR | Hashtag: #msstr Mathias Elle | @dermatz_DE
![Page 5: Magento2 - Frontend under the hood](https://reader033.vdocuments.pub/reader033/viewer/2022050914/58ecc6401a28abec2c8b45fb/html5/thumbnails/5.jpg)
Blank Theme
Magento-Stammtisch-Stuttgart.de | Twitter: @magento_STR | Hashtag: #msstr Mathias Elle | @dermatz_DE
![Page 6: Magento2 - Frontend under the hood](https://reader033.vdocuments.pub/reader033/viewer/2022050914/58ecc6401a28abec2c8b45fb/html5/thumbnails/6.jpg)
Luma Them
e
Magento-Stammtisch-Stuttgart.de | Twitter: @magento_STR | Hashtag: #msstr Mathias Elle | @dermatz_DE
![Page 7: Magento2 - Frontend under the hood](https://reader033.vdocuments.pub/reader033/viewer/2022050914/58ecc6401a28abec2c8b45fb/html5/thumbnails/7.jpg)
Luma Them
e
Magento-Stammtisch-Stuttgart.de | Twitter: @magento_STR | Hashtag: #msstr Mathias Elle | @dermatz_DE
![Page 8: Magento2 - Frontend under the hood](https://reader033.vdocuments.pub/reader033/viewer/2022050914/58ecc6401a28abec2c8b45fb/html5/thumbnails/8.jpg)
Luma Them
e Mobile View
Magento-Stammtisch-Stuttgart.de | Twitter: @magento_STR | Hashtag: #msstr Mathias Elle | @dermatz_DE
![Page 9: Magento2 - Frontend under the hood](https://reader033.vdocuments.pub/reader033/viewer/2022050914/58ecc6401a28abec2c8b45fb/html5/thumbnails/9.jpg)
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
![Page 10: Magento2 - Frontend under the hood](https://reader033.vdocuments.pub/reader033/viewer/2022050914/58ecc6401a28abec2c8b45fb/html5/thumbnails/10.jpg)
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
![Page 11: Magento2 - Frontend under the hood](https://reader033.vdocuments.pub/reader033/viewer/2022050914/58ecc6401a28abec2c8b45fb/html5/thumbnails/11.jpg)
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
![Page 12: Magento2 - Frontend under the hood](https://reader033.vdocuments.pub/reader033/viewer/2022050914/58ecc6401a28abec2c8b45fb/html5/thumbnails/12.jpg)
3. XML - CONTAINER
Magento-Stammtisch-Stuttgart.de | Twitter: @magento_STR | Hashtag: #msstr Mathias Elle | @dermatz_DE
![Page 13: Magento2 - Frontend under the hood](https://reader033.vdocuments.pub/reader033/viewer/2022050914/58ecc6401a28abec2c8b45fb/html5/thumbnails/13.jpg)
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
![Page 14: Magento2 - Frontend under the hood](https://reader033.vdocuments.pub/reader033/viewer/2022050914/58ecc6401a28abec2c8b45fb/html5/thumbnails/14.jpg)
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
![Page 15: Magento2 - Frontend under the hood](https://reader033.vdocuments.pub/reader033/viewer/2022050914/58ecc6401a28abec2c8b45fb/html5/thumbnails/15.jpg)
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
![Page 16: Magento2 - Frontend under the hood](https://reader033.vdocuments.pub/reader033/viewer/2022050914/58ecc6401a28abec2c8b45fb/html5/thumbnails/16.jpg)
Magento-Stammtisch-Stuttgart.de | Twitter: @magento_STR | Hashtag: #msstr Mathias Elle | @dermatz_DE
![Page 17: Magento2 - Frontend under the hood](https://reader033.vdocuments.pub/reader033/viewer/2022050914/58ecc6401a28abec2c8b45fb/html5/thumbnails/17.jpg)
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
![Page 18: Magento2 - Frontend under the hood](https://reader033.vdocuments.pub/reader033/viewer/2022050914/58ecc6401a28abec2c8b45fb/html5/thumbnails/18.jpg)
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
![Page 19: Magento2 - Frontend under the hood](https://reader033.vdocuments.pub/reader033/viewer/2022050914/58ecc6401a28abec2c8b45fb/html5/thumbnails/19.jpg)
Danke!
Magento-Stammtisch-Stuttgart.de
Twitter: @magento_STR
Hashtag: #msstr
Mathias Elle | @dermatz_DE | www.dermatz.de