Magento2 - Frontend under the hood

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!

BlankTheme

LumaTheme

LumaThemeMobileView

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

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

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

3. XML - CONTAINER

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, ...)

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

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

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 )

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

Magento2 - Frontend under the hood

Recommandé

Recommandé

Contenu connexe

Similaire à Magento2 - Frontend under the hood

Similaire à Magento2 - Frontend under the hood (20)

Magento2 - Frontend under the hood