Recommended
More Related Content
Similar to Magento 2 View Layer Evolution
Similar to Magento 2 View Layer Evolution (20)
More from Sergii Shymko
More from Sergii Shymko (13)
Recently uploaded
Recently uploaded (20)
Magento 2 View Layer Evolution
- 2. Magento 2 View Layer Evolution Sergey Shymko Software Engineer, Magento, a division of X.commerce, Inc. (an eBay company)
- 3. • Theme/Skin – graphical appearance of an application • Magento distinguishes theme & skin • Responsibility • File types • Web-accessibility Introduction
- 4. • Theme – markup & text, blocks presence & positioning • Theme files – dynamically processed, no web access Magento Theme
- 5. • Skin – look and feel of a theme, colors & styles • Skin files – static, web-accessible Magento Skin
- 6. • Skins are located separately from themes • Any skin can be chosen for any theme • Incompatible skin can be chosen for a theme “example” package “default” theme “mobile” theme “default” skin “modern” skin “simple” skin Magento 1.x Skin
- 7. • Skin belongs to one theme only • Skin is located within a theme • Skin files web-access challenge “example” package “default” theme “mobile” theme “default” skin “modern” skin “simple” skin Magento 2 Skin
- 8. • New skin for every locale • Inconsistent configuration: locale + localized skin “example” package “default” theme “default” skin “german” skin “french” skin Magento 1.x Skin Localization
- 9. • Skin provides files for multiple locales • Consistent configuration: locale “example” package “default” theme “default” skin “de_DE” locale “fr_FR” locale Magento 2 Skin Localization
- 10. Magento 2 View Layer Modularity
- 11. Package Theme/Skin 1. <current> <current> 2. <current> <default> 3. <current> “default” 4. “base” “default” <xxx> – configured name “xxx” – exact name <current> package “base” package Magento 1.x View Layer Fallback <current> <default> “default” “default”
- 12. • Contains pseudo-modular view files • app/design/frontend/base/default/… • catalog • checkout • cms • sales • … • Modules depend on “base/default” Module aliases Magento 1.x “base/default” Theme/Skin
- 13. • app/code/<pool>/<Namespace>/<Module> • view • <area> • layout.xml • template.phtml • logo.png • style.css • Modules are independent of themes Modular View Files Skin files Theme files
- 14. • Referring modular file <Namespace>_<Module>::file.ext • Omit module scope • If template used solely within its own module • In module’s configuration file* • In module’s layout update file* • In module’s CSS file* * - not implemented yet Module Scope
- 15. Package Theme 1. <current> <current> 2. <current> <default> 2. <current> “default” 3. “base” “default” 3. Module theme files <xxx> – configured name “xxx” – exact name <current> package Module files Theme Files Fallback <current> theme “default” theme
- 16. JavaScript lib Module files Theme Skin 1. <current> <current> 2. <current> “default” 3. “default” <current> 4. “default” “default” 5. Module skin files 6. JavaScript libraries <current> package <current> theme “default” theme Skin Files Fallback <current> skin “default” skin <current> skin “default” skin
- 17. • Single interface for skin and JS lib files • Simplified HTML <head> tag manipulation • Skin can override JS lib files • Skin may require specific version of JS lib JavaScript Libraries Fallback
- 18. • Need web-access • Modular skin files • app/code/<pool>/<Namespace>/<Module>/view • Skins • app/design/<area>/<package>/<theme>/skin/<skin> • Publication – copying to web-accessible location Skin Files Web-Access
- 19. • Need processing • Relative URLs • URLs with module scope • Don’t need processing • Absolute URLs CSS Files Processing
- 21. Container vs Block • Block – unit of a page output • Container – unit of a page structure • Container consists of • Blocks • Containers • Container renders all children
- 22. Containers in Layout Updates <container> directive attributes: • name – unique name • label – human-readable label • html{Tag,Id,Class} – HTML tag name & attributes <?xml version="1.0"?> <layout version="2.0"> <example_handle> <container name="root_container" label="Root Container" htmlTag="div"> <block type="Mage_Core_Block_Template" name="block1" template="1.phtml"/> <container name="nested_container" label="Nested Container"/> </container>
- 24. Magento 1.x Page Rendering • Layout handle – instructions of visual elements positioning and properties • Controller uses arbitrary layout handles
- 25. Page Types • Page types – special layout handles • Controller uses one page type only • Page type may inherit a page type • Inherited page types are loaded implicitly
- 26. Page Types in Layout Updates Layout handle attributes: • type="page" – distinguish page type • parent – ancestor page type <?xml version="1.0"?> <layout version="2.0"> <default type="page"> <block type="Mage_Core_Block_Template" name="block1" template="1.phtml"/> </default> <example_handle type="page" parent="default"> <block type="Mage_Core_Block_Template" name="block2" template="2.phtml"/> </example_handle>
- 27. Containers & Page Types Usage The Visual Design Editor Page type breadcrumbs Container with the block Block drag & drop
- 28. Summary • Magento 2 Features • Skin files relocation & localization • Modular view files • Containers • Page types • Links https://github.com/magento/magento2 https://wiki.magento.com/display/MAGE2DOC https://wiki.magento.com/display/MAGE2PROJECT
- 29. Thank You! Q & A Sergey Shymko sergey.shymko@magento.com
Editor's Notes
- Design package (instance) – group of themes/skins
- Multiple skins may exists for a theme
- Same skin can be used for multiple themes. However, It’s practically impossible to create skin compatible with multiple themes.
- Text in images, JavaScript, etc.
- Better skin files reuse
- Workaround for absence of true view modularity
- View files are divided by areas Theme & skin files reside together Theme/skin files distinguished by extension Theme/skin can refer to module’s files Module cannot refer to theme/skin
- Skin file lookup is performed within the <current> package only
- There can be different ways to provide web access. We’ve chosen the publication. Algorithms With files duplication – faster, more storage space Without files duplication – slower, less storage space
- CSS publication requires algorithm “with files duplication”
- Blocks don’t guarantee children rendering, it’s up to template. Converted to containers Mage_Core_Block_Text_List Mage_Page_Block_Html_Wrapper
- Used layout handle not always corresponds to action name Any combination of layout handles can be used No way to determine actual number of pages a website has
- Page type breadcrumbs & navigation Drag-n-drop of blocks & containers