Magento is an eBay Inc. company. © 2013 Magento, Inc. All rights reserved.
Magento 2 Fronted Architecture
© 2013 Magento, Inc. Page | 2
Magento 2 Platform Goals
Improve PerformanceEasier Upgrades High Quality Code
Update TechnologyEngage with Community Streamline Customization
© 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
© 2013 Magento, Inc. Page | 4
Get Started
github.com/magento/magento2
© 2013 Magento, Inc. Page | 5© 2013 Magento, Inc. Page | 5
2 How to Create a Theme
© 2013 Magento, Inc. Page | 6
Single Place Frontend Development
This is where all the magic happens
© 2013 Magento, Inc. Page | 7
What Defines a Theme?
Vendor name (brand name)
Theme name
Theme preview for admin panel
Theme configuration file
© 2013 Magento, Inc. Page | 8
Theme Configuration File
theme.xmlTheme name
Path to preview
Path to parent theme
© 2013 Magento, Inc. Page | 9
Themes Relationships
© 2013 Magento, Inc. Page | 10
Multilevel Theme Inheritance
VendorName/Imagine
Module/view/frontend Magento/blank
VendorName/NewYear VendorName/SeasonSales
© 2013 Magento, Inc. Page | 11
Apply Theme
© 2013 Magento, Inc. Page | 12© 2013 Magento, Inc. Page | 12
3 How to Work with CSS
© 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
© 2013 Magento, Inc. Page | 14
Magento UI Library Documentation
lib/web/css/docs
© 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
© 2013 Magento, Inc. Page | 16
CSS Extension
css/source/extend.less
© 2013 Magento, Inc. Page | 17
Blank Theme Structure
© 2013 Magento, Inc. Page | 18
NewYear Theme
NewYear
© 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
© 2013 Magento, Inc. Page | 20
NewYear Theme: Image fallback
© 2013 Magento, Inc. Page | 21© 2013 Magento, Inc. Page | 21
4 How to Work with XML Layout
© 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
© 2013 Magento, Inc. Page | 23
Layout Extend
Theme/view/frontend/layout
© 2013 Magento, Inc. Page | 24
Layout Extend
© 2013 Magento, Inc. Page | 25
Layout Override
© 2013 Magento, Inc. Page | 26
Layout Override
© 2013 Magento, Inc. Page | 27© 2013 Magento, Inc. Page | 27
5 How to Work with Templates
© 2013 Magento, Inc. Page | 28
Template Override
© 2013 Magento, Inc. Page | 29
Template Override
© 2013 Magento, Inc. Page | 30
Layout Extend
Theme/view/frontend/layout
© 2013 Magento, Inc. Page | 31© 2013 Magento, Inc. Page | 31
6 Q&A
© 2013 Magento, Inc. Page | 32© 2013 Magento, Inc. Page | 32
7 Thank you!