Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
Magento-Stammtisch-
Stuttgart.de
Twitter: @magento_STR
Hashtag: #msstr
WILLKOMMEN!
Mathias Elle
Mein Hintergrund:
- eCommerce Webentwicklung seit 2005
- Magento & Wordpress seit 2011
- Magento Certified Fr...
Magento 2 - Under the Hood
2 Standard Themes
blank & Luma
Template-
Strukturen
Frontend-Coding
Tools & Lib‘s
Mit dem Magen...
BlankTheme
Magento-Stammtisch-Stuttgart.de | Twitter: @magento_STR | Hashtag: #msstr Mathias Elle | @dermatz_DE
BlankTheme
Magento-Stammtisch-Stuttgart.de | Twitter: @magento_STR | Hashtag: #msstr Mathias Elle | @dermatz_DE
LumaTheme
Magento-Stammtisch-Stuttgart.de | Twitter: @magento_STR | Hashtag: #msstr Mathias Elle | @dermatz_DE
LumaTheme
Magento-Stammtisch-Stuttgart.de | Twitter: @magento_STR | Hashtag: #msstr Mathias Elle | @dermatz_DE
LumaThemeMobileView
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 ...
1. Magento2 Theme Struktur
Ein Theme beinhaltet nun
1. Vendor/Module – alle relevanten Modul-Dateien
2. etc – Enthält die ...
2. Layout-XML Fallback-System
• Magento Layout XML werden nicht mehr “überschrieben”, sondern “extended”
Die Anweisungen i...
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"...
4. Der /pub/static Ordner
Unterschied Static und Dynamic View Files
• Was ist im pub/static Ordner
• Dateien, die direkt v...
Require.js
lib/web/css/source/lib
Less als Preprozessor mit riesige Magento
CSS-UI-Library mit vordefinierten Variablen,
L...
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/
• Mag...
Magento-Stammtisch-Stuttgart.de | Twitter: @magento_STR | Hashtag: #msstr Mathias Elle | @dermatz_DE
FrontendWorkflow
$ gr...
Danke!
Magento-Stammtisch-Stuttgart.de
Twitter: @magento_STR
Hashtag: #msstr
Mathias Elle | @dermatz_DE | www.dermatz.de
Nächste SlideShare
Wird geladen in …5
×

Magento2 - Frontend under the hood

616 Aufrufe

Veröffentlicht am

Slides vom 1. Magento Stammtisch Stuttgart zum Thema Magento 2 Frontend Entwicklung - Übersicht zu neuen Magento Strukturen.

Veröffentlicht in: Internet
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Magento2 - Frontend under the hood

  1. 1. Magento-Stammtisch- Stuttgart.de Twitter: @magento_STR Hashtag: #msstr WILLKOMMEN!
  2. 2. 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
  3. 3. 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
  4. 4. BlankTheme Magento-Stammtisch-Stuttgart.de | Twitter: @magento_STR | Hashtag: #msstr Mathias Elle | @dermatz_DE
  5. 5. BlankTheme Magento-Stammtisch-Stuttgart.de | Twitter: @magento_STR | Hashtag: #msstr Mathias Elle | @dermatz_DE
  6. 6. LumaTheme Magento-Stammtisch-Stuttgart.de | Twitter: @magento_STR | Hashtag: #msstr Mathias Elle | @dermatz_DE
  7. 7. LumaTheme Magento-Stammtisch-Stuttgart.de | Twitter: @magento_STR | Hashtag: #msstr Mathias Elle | @dermatz_DE
  8. 8. LumaThemeMobileView Magento-Stammtisch-Stuttgart.de | Twitter: @magento_STR | Hashtag: #msstr Mathias Elle | @dermatz_DE
  9. 9. 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
  10. 10. 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 Magento-Stammtisch-Stuttgart.de | Twitter: @magento_STR | Hashtag: #msstr Mathias Elle | @dermatz_DE
  11. 11. 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
  12. 12. 3. XML - CONTAINER Magento-Stammtisch-Stuttgart.de | Twitter: @magento_STR | Hashtag: #msstr Mathias Elle | @dermatz_DE
  13. 13. 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
  14. 14. 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 Magento-Stammtisch-Stuttgart.de | Twitter: @magento_STR | Hashtag: #msstr Mathias Elle | @dermatz_DE
  15. 15. 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
  16. 16. Magento-Stammtisch-Stuttgart.de | Twitter: @magento_STR | Hashtag: #msstr Mathias Elle | @dermatz_DE
  17. 17. 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
  18. 18. Magento-Stammtisch-Stuttgart.de | Twitter: @magento_STR | Hashtag: #msstr Mathias Elle | @dermatz_DE 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
  19. 19. Danke! Magento-Stammtisch-Stuttgart.de Twitter: @magento_STR Hashtag: #msstr Mathias Elle | @dermatz_DE | www.dermatz.de

×