Top Banner

Click here to load reader

Magento2 - Frontend under the hood

Apr 11, 2017

ReportDownload

Internet

PowerPoint-Prsentation

Magento-Stammtisch-Stuttgart.deTwitter: @magento_STRHashtag: #msstrWILLKOMMEN!

Mathias Elle

Mein Hintergrund: eCommerce Webentwicklung seit 2005Magento & Wordpress seit 2011Magento Certified Frontend DeveloperFrontent Development bei netz98 new media GmbH

Meine Aufgaben: Frontend Developer fr Magento 1 und 2im Magento Enterprise BereichUmsetzung responsive Webdesign

Magento-Stammtisch-Stuttgart.de |Twitter: @magento_STR | Hashtag: #msstr

Mathias Elle | @dermatz_DE

Magento 2 - Under the Hood

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

3

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 Theme

Magento-Stammtisch-Stuttgart.de |Twitter: @magento_STR | Hashtag: #msstr

Mathias Elle | @dermatz_DE

Luma Theme

Magento-Stammtisch-Stuttgart.de |Twitter: @magento_STR | Hashtag: #msstr

Mathias Elle | @dermatz_DE

Luma Theme Mobile View

Magento-Stammtisch-Stuttgart.de |Twitter: @magento_STR | Hashtag: #msstr

Mathias Elle | @dermatz_DE

Wichtigste nderungen zu Magento 1 Modul und dazugehrige Templates & CSS sind nun in einem OrdnerLayout XML Files werden nicht nach dem alten Fallback-System komplett berschrieben, sondern zusammengefhrt/ergnztLayout XML Files bekommen ContainerEinfhrung eines /pub/static Ordners mit kompilierten DatenVollstndige 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

Vendor/Module alle relevanten Modul-Dateienetc Enthlt die view.xml diese Steuert alle Bildgreni18n kurz fr internationalization translate.csvMedia Enthlt den Theme-Screenshot als VorschaubildWeb Static-Files, die direkt im Frontend geladen werden knnenCSS/Source Enthlt 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 fr 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-SystemMagento Layout XML werden nicht mehr berschrieben, sondern extendedDie Anweisungen in der customer_account.xml im Theme erweitern die Anweisungen der customer_account.xml aus dem Parent Theme und diese wiederum ergnzen die aus dem Original-Modul (Base Layout).berschreiben von XML Dateien nur im Ordner Override//layout/override/base/.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

12

Beispiel fr einen Container

Ideal fr kleinere HTML Elemente (z.B. Banner, Infotexte, ...)Magento-Stammtisch-Stuttgart.de |Twitter: @magento_STR | Hashtag: #msstr

Mathias Elle | @dermatz_DE

13

4. Der /pub/static OrdnerUnterschied Static und Dynamic View Files

Was ist im pub/static OrdnerDateien, die direkt vom Browser aufgerufen werden knnenfonts, images, CSS/pub/static/frontend////

Dynamic FilesDateien, die vom Server ausgefhrt oder verarbeitet werden, um die angefragte Seite mit ihren Inhalten darzustellen.less Dateien, Templates und LayoutsDiese 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-LibraryDamit Bilder, JavaScript und andere Ressourcennur dann geladen, wenn Sie gebraucht werdenGruntGrunt 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-Komponentenhttp://requirejs.org/Magento 2 verwendet unter anderem jQuery und jQuery UI als Grundlage weitere Bibliotheken stehen zur Verfgung und werden verwendetKnockout JS (http://knockoutjs.com/) Underscore JS (http://underscorejs.org/) Magento jQuery Widgets liegen unter lib/web/mage JS Unit-Tests fr 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 watchNur LESS DateienNeue Template Datei/en + Less$ Grunt watch stoppen .. (ctrl + c) $ grunt exec:themename de_DE$ grunt less:themenameTesting im BrowserTesting im Browser

Danke!Magento-Stammtisch-Stuttgart.de Twitter: @magento_STRHashtag: #msstr

Mathias Elle | @dermatz_DE | www.dermatz.de

Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.