magento 2 view layer evolution
TRANSCRIPT
Magento 2View Layer Evolution
Sergey ShymkoSoftware Engineer, Magento,a division of X.commerce, Inc. (an eBay company)
• Theme/Skin – graphical appearanceof an application
• Magento distinguishes theme & skin• Responsibility• File types• Web-accessibility
Introduction
• Theme – markup & text, blocks presence & positioning• Theme files – dynamically processed, no web access
Magento Theme
• Skin – look and feel of a theme, colors & styles• Skin files – static, web-accessible
Magento Skin
• 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
• 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
• 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
• 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
Magento 2
View Layer Modularity
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”
• 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
• 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
• 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
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
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
• 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
• 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
• Need processing• Relative URLs• URLs with module scope
• Don’t need processing• Absolute URLs
CSS Files Processing
Magento 2
Containers
Container vs Block
• Block – unit of a page output• Container – unit of a page structure• Container consists of
• Blocks• Containers
• Container renders all children
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>
Magento 2
Page Types
Magento 1.x Page Rendering
• Layout handle – instructions of visual elements positioning and properties
• Controller uses arbitrary layout handles
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 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>
Containers & Page Types Usage
The Visual Design EditorPage type breadcrumbs
Container with the block
Blockdrag & drop
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
