Magento2 - Frontend under the hood

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