magento 2 view layer evolution
TRANSCRIPT
![Page 1: Magento 2 View Layer Evolution](https://reader036.vdocuments.site/reader036/viewer/2022062310/5871af9c1a28abda6a8b6535/html5/thumbnails/1.jpg)
![Page 2: Magento 2 View Layer Evolution](https://reader036.vdocuments.site/reader036/viewer/2022062310/5871af9c1a28abda6a8b6535/html5/thumbnails/2.jpg)
Magento 2View Layer Evolution
Sergey ShymkoSoftware Engineer, Magento,a division of X.commerce, Inc. (an eBay company)
![Page 3: Magento 2 View Layer Evolution](https://reader036.vdocuments.site/reader036/viewer/2022062310/5871af9c1a28abda6a8b6535/html5/thumbnails/3.jpg)
• Theme/Skin – graphical appearanceof an application
• Magento distinguishes theme & skin• Responsibility• File types• Web-accessibility
Introduction
![Page 4: Magento 2 View Layer Evolution](https://reader036.vdocuments.site/reader036/viewer/2022062310/5871af9c1a28abda6a8b6535/html5/thumbnails/4.jpg)
• Theme – markup & text, blocks presence & positioning• Theme files – dynamically processed, no web access
Magento Theme
![Page 5: Magento 2 View Layer Evolution](https://reader036.vdocuments.site/reader036/viewer/2022062310/5871af9c1a28abda6a8b6535/html5/thumbnails/5.jpg)
• Skin – look and feel of a theme, colors & styles• Skin files – static, web-accessible
Magento Skin
![Page 6: Magento 2 View Layer Evolution](https://reader036.vdocuments.site/reader036/viewer/2022062310/5871af9c1a28abda6a8b6535/html5/thumbnails/6.jpg)
• 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
![Page 7: Magento 2 View Layer Evolution](https://reader036.vdocuments.site/reader036/viewer/2022062310/5871af9c1a28abda6a8b6535/html5/thumbnails/7.jpg)
• 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
![Page 8: Magento 2 View Layer Evolution](https://reader036.vdocuments.site/reader036/viewer/2022062310/5871af9c1a28abda6a8b6535/html5/thumbnails/8.jpg)
• 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
![Page 9: Magento 2 View Layer Evolution](https://reader036.vdocuments.site/reader036/viewer/2022062310/5871af9c1a28abda6a8b6535/html5/thumbnails/9.jpg)
• 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
![Page 10: Magento 2 View Layer Evolution](https://reader036.vdocuments.site/reader036/viewer/2022062310/5871af9c1a28abda6a8b6535/html5/thumbnails/10.jpg)
Magento 2
View Layer Modularity
![Page 11: Magento 2 View Layer Evolution](https://reader036.vdocuments.site/reader036/viewer/2022062310/5871af9c1a28abda6a8b6535/html5/thumbnails/11.jpg)
Package Theme/Skin1. <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”
![Page 12: Magento 2 View Layer Evolution](https://reader036.vdocuments.site/reader036/viewer/2022062310/5871af9c1a28abda6a8b6535/html5/thumbnails/12.jpg)
• 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
![Page 13: Magento 2 View Layer Evolution](https://reader036.vdocuments.site/reader036/viewer/2022062310/5871af9c1a28abda6a8b6535/html5/thumbnails/13.jpg)
• 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
![Page 14: Magento 2 View Layer Evolution](https://reader036.vdocuments.site/reader036/viewer/2022062310/5871af9c1a28abda6a8b6535/html5/thumbnails/14.jpg)
• 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
![Page 15: Magento 2 View Layer Evolution](https://reader036.vdocuments.site/reader036/viewer/2022062310/5871af9c1a28abda6a8b6535/html5/thumbnails/15.jpg)
Package Theme1. <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
![Page 16: Magento 2 View Layer Evolution](https://reader036.vdocuments.site/reader036/viewer/2022062310/5871af9c1a28abda6a8b6535/html5/thumbnails/16.jpg)
JavaScript lib
Module files
ThemeSkin1. <current> <current>2. <current> “default”3. “default” <current>4. “default” “default”5. Module skin files6. JavaScript libraries
<current> package
<current> theme
“default” theme
Skin Files Fallback
<current> skin
“default” skin
<current> skin
“default” skin
![Page 17: Magento 2 View Layer Evolution](https://reader036.vdocuments.site/reader036/viewer/2022062310/5871af9c1a28abda6a8b6535/html5/thumbnails/17.jpg)
• 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
![Page 18: Magento 2 View Layer Evolution](https://reader036.vdocuments.site/reader036/viewer/2022062310/5871af9c1a28abda6a8b6535/html5/thumbnails/18.jpg)
• 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
![Page 19: Magento 2 View Layer Evolution](https://reader036.vdocuments.site/reader036/viewer/2022062310/5871af9c1a28abda6a8b6535/html5/thumbnails/19.jpg)
• Need processing• Relative URLs• URLs with module scope
• Don’t need processing• Absolute URLs
CSS Files Processing
![Page 20: Magento 2 View Layer Evolution](https://reader036.vdocuments.site/reader036/viewer/2022062310/5871af9c1a28abda6a8b6535/html5/thumbnails/20.jpg)
Magento 2
Containers
![Page 21: Magento 2 View Layer Evolution](https://reader036.vdocuments.site/reader036/viewer/2022062310/5871af9c1a28abda6a8b6535/html5/thumbnails/21.jpg)
Container vs Block
• Block – unit of a page output• Container – unit of a page structure• Container consists of
• Blocks• Containers
• Container renders all children
![Page 22: Magento 2 View Layer Evolution](https://reader036.vdocuments.site/reader036/viewer/2022062310/5871af9c1a28abda6a8b6535/html5/thumbnails/22.jpg)
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>
![Page 23: Magento 2 View Layer Evolution](https://reader036.vdocuments.site/reader036/viewer/2022062310/5871af9c1a28abda6a8b6535/html5/thumbnails/23.jpg)
Magento 2
Page Types
![Page 24: Magento 2 View Layer Evolution](https://reader036.vdocuments.site/reader036/viewer/2022062310/5871af9c1a28abda6a8b6535/html5/thumbnails/24.jpg)
Magento 1.x Page Rendering
• Layout handle – instructions of visual elements positioning and properties
• Controller uses arbitrary layout handles
![Page 25: Magento 2 View Layer Evolution](https://reader036.vdocuments.site/reader036/viewer/2022062310/5871af9c1a28abda6a8b6535/html5/thumbnails/25.jpg)
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
![Page 26: Magento 2 View Layer Evolution](https://reader036.vdocuments.site/reader036/viewer/2022062310/5871af9c1a28abda6a8b6535/html5/thumbnails/26.jpg)
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>
![Page 27: Magento 2 View Layer Evolution](https://reader036.vdocuments.site/reader036/viewer/2022062310/5871af9c1a28abda6a8b6535/html5/thumbnails/27.jpg)
Containers & Page Types Usage
The Visual Design EditorPage type breadcrumbs
Container with the block
Blockdrag & drop
![Page 28: Magento 2 View Layer Evolution](https://reader036.vdocuments.site/reader036/viewer/2022062310/5871af9c1a28abda6a8b6535/html5/thumbnails/28.jpg)
Summary
• Magento 2 Features• Skin files relocation & localization• Modular view files• Containers• Page types
• Linkshttps://github.com/magento/magento2https://wiki.magento.com/display/MAGE2DOChttps://wiki.magento.com/display/MAGE2PROJECT