Recommandé
Recommandé
Contenu connexe
Tendances
Tendances (20)
Similaire à Imagine recap-devhub
Similaire à Imagine recap-devhub (20)
Plus de Magento Dev
Plus de Magento Dev (17)
Dernier
Dernier (20)
Imagine recap-devhub
- 1. Magento is an eBay Inc. company. © 2013 Magento, Inc. All rights reserved. Magento 2 Fronted Architecture
- 2. © 2013 Magento, Inc. Page | 2 Magento 2 Platform Goals Improve PerformanceEasier Upgrades High Quality Code Update TechnologyEngage with Community Streamline Customization
- 3. © 2013 Magento, Inc. Page | 3 Consumers take a multi-device path to purchase Source — Google Inc. 65% Start on a Smartphone 61% Continue on a PC/Laptop 4% Continue on a Tablet 25% Start on a PC/Laptop 11% Start on a Tablet 19% Continue on a Smartphone 5% Continue on a Tablet 10% Continue on a PC/Laptop
- 4. © 2013 Magento, Inc. Page | 4 Get Started github.com/magento/magento2
- 5. © 2013 Magento, Inc. Page | 5© 2013 Magento, Inc. Page | 5 2 How to Create a Theme
- 6. © 2013 Magento, Inc. Page | 6 Single Place Frontend Development This is where all the magic happens
- 7. © 2013 Magento, Inc. Page | 7 What Defines a Theme? Vendor name (brand name) Theme name Theme preview for admin panel Theme configuration file
- 8. © 2013 Magento, Inc. Page | 8 Theme Configuration File theme.xml Theme name Path to preview Path to parent theme
- 9. © 2013 Magento, Inc. Page | 9 Themes Relationships
- 10. © 2013 Magento, Inc. Page | 10 Multilevel Theme Inheritance VendorName/Imagine Module/view/frontend Magento/blank VendorName/NewYear VendorName/SeasonSales
- 11. © 2013 Magento, Inc. Page | 11 Apply Theme
- 12. © 2013 Magento, Inc. Page | 12© 2013 Magento, Inc. Page | 12 3 How to Work with CSS
- 13. © 2013 Magento, Inc. Page | 13 Blank Theme Features Modern Technologies Mobile First Responsive Design Built with Magento UI library Compiled with Built-in PHP LESS Compiler WCAG 2.0 AA Compliant
- 14. © 2013 Magento, Inc. Page | 14 Magento UI Library Documentation lib/web/css/docs
- 15. © 2013 Magento, Inc. Page | 15 Blank Theme Structure Modularized CSS: • Upgradability Magento 2 compiles CSS itself • Performance • Maintenance • No tools required • Anyone can edit styles quickly • LESS Source and CSS is always synchronized
- 16. © 2013 Magento, Inc. Page | 16 CSS Extension css/source/extend.less
- 17. © 2013 Magento, Inc. Page | 17 Blank Theme Structure
- 18. © 2013 Magento, Inc. Page | 18 NewYear Theme NewYear
- 19. © 2013 Magento, Inc. Page | 19 Blank Theme Structure Modularized CSS: • Upgradability Magento 2 compiles CSS itself • Performance • Maintenance • No tools required • Anyone can edit styles quickly • LESS Source and CSS is always synchronized
- 20. © 2013 Magento, Inc. Page | 20 NewYear Theme: Image fallback
- 21. © 2013 Magento, Inc. Page | 21© 2013 Magento, Inc. Page | 21 4 How to Work with XML Layout
- 22. © 2013 Magento, Inc. Page | 22 What is Layout? • Behavior of containers is predictable • A wireframe of a page can be represented by bare containers • With containers, there is no point to having nested elements in blocks
- 23. © 2013 Magento, Inc. Page | 23 Layout Extend Theme/view/frontend/layout
- 24. © 2013 Magento, Inc. Page | 24 Layout Extend
- 25. © 2013 Magento, Inc. Page | 25 Layout Override
- 26. © 2013 Magento, Inc. Page | 26 Layout Override
- 27. © 2013 Magento, Inc. Page | 27© 2013 Magento, Inc. Page | 27 5 How to Work with Templates
- 28. © 2013 Magento, Inc. Page | 28 Template Override
- 29. © 2013 Magento, Inc. Page | 29 Template Override
- 30. © 2013 Magento, Inc. Page | 30 Layout Extend Theme/view/frontend/layout
- 31. © 2013 Magento, Inc. Page | 31© 2013 Magento, Inc. Page | 31 6 Q&A
- 32. © 2013 Magento, Inc. Page | 32© 2013 Magento, Inc. Page | 32 7 Thank you!