Magento 2 Enhanced Theme/Skin...
Transcript of Magento 2 Enhanced Theme/Skin...
Magento 2Enhanced Theme/Skin Localization
Sergii ShymkoSoftware Engineer, Magento,
a division of X.commerce, Inc. (an eBay company)
Introduction
• Theme/Skin – graphical appearanceof an application
• Magento distinguishes theme & skin– Responsibility– File types– File types– Web-access
Magento Theme
• Theme – markup & text, blocks presence & rendering order
• Theme files – dynamically processed, no web access
Magento Skin
• Skin – look and feel of a theme, colors & styles• Skin files – static, web-accessible
Magento 1.x Design Configuration
Magento 1.x 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“example” package
“default” theme
“mobile” theme
“default” skin
“modern” skin
“simple” skin
• Skin belongs to one theme only• Skin files are located in a theme• Skin files web-access challenge
“example” package
Magento 2 Skin
“example” package
“default” theme
“mobile” theme
“default” skin
“modern” skin
“simple” skin
Magento 2 Design Configuration
Package ThemeSkin
LOCALIZATIONIN MAGENTO 1.X
Challenges of
Example 1
• Logo variations– Default– German (de_DE locale)– French (fr_FR locale)– Brazilian (pt_BR locale)– Brazilian (pt_BR locale)– …
Magento 1.x Locale Configuration
Admin Panel
Magento 1.x Locale Configuration
Text is translated
Logo is NOT localized
• New skin for every locale• Inconsistent configuration: locale + localized skin
“example” package
Magento 1.x "Localization Skins"
“default” theme
“german” skin
“default” skin
“french” skin
• Skin provides files for multiple locales• Consistent configuration: locale
“example” package
Magento 2 Skin Files Localization
“default” theme
“default” skin
“de_DE” locale
“fr_FR” locale
Example 2
• Logo variations– Default– Christmas– New Year– Halloween
• Slogan variations– Default– German (de_DE)– Brazilian (pt_BR)– ...– Halloween
– ...– ...
Halloween @ Magento Headquarters
HOW TO SCHEDULE DESIGN FOR HOLIDAYS?
Magento 1.x Design Change Rules
• Custom theme can be specified• Skin “default” is used implicitly
Package Theme
Dates
“example” package
“default” theme
Magento 1.x Implementation
“default” skinslogan.png logo.png
“christmas” theme
“default” skinslogan.png logo.png
“christmas_de_DE” theme
“new_year” theme
“default” skinslogan.png logo.png
“new_year _de_DE” themeinheritance
“german” skinslogan.png
“brazilian” skinslogan.png
“default” skinslogan.png logo.png
“christmas_pt_BR” theme
“default” skinslogan.png logo.png
“default” skinslogan.png logo.png
“new_year _pt_BR” theme
“default” skinslogan.png logo.png
Lots of Copy & Paste
Magento 2 Design Change Rules
Package ThemeSkin
“example” package
“default” theme
Magento 2 Implementation
“default” skinlogo.png
slogan.png
“christmas” skinlogo.png
“new_year” skin
inheritance
“de_DE” locale
slogan.png
“pt_BR” locale
slogan.png
“new_year” skinlogo.png
“halloween” skinlogo.png
Summary
• Magento 2– Skin belongs to a theme– Single design configuration field– Skin provides localized files– Consistent locale configuration– Consistent locale configuration– No skin files duplication
Magento 2 Links
Repositorygithub.com/magento/magento2
Documentationwiki.magento.com/display/MAGE2PROJECTwiki.magento.com/display/MAGE2DOCwiki.magento.com/display/MAGE2DOC
Thank You!Q & AQ & A
Sergii [email protected]@shymko.net