Embed Size (px)
Citation preview
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– 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
Text Fields
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
“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
“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)– …
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 @ 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
“german” skinslogan.png
“brazilian” skinslogan.png
logo.png
“christmas” theme
“default” skinslogan.png logo.png
“christmas_de_DE” theme
“default” skinslogan.png logo.png
“christmas_pt_BR” theme
“default” skinslogan.png logo.png
“new_year” theme
“default” skinslogan.png logo.png
“new_year _de_DE” theme
“default” skinslogan.png logo.png
“new_year _pt_BR” theme
“default” skinslogan.png logo.png
inheritance
Lots of Copy & Paste
Magento 2 Design Change Rules
Package ThemeSkin
“example” package
“default” theme
Magento 2 Implementation
“default” skinlogo.png
“de_DE” locale
slogan.png
slogan.png
“pt_BR” locale
slogan.png
“christmas” skinlogo.png
“new_year” skinlogo.png
“halloween” skinlogo.png
inheritance
Summary
• Magento 2– Skin belongs to a theme– Single design configuration field– Skin provides localized files– Consistent locale configuration– No skin files duplication
Magento 2 Links
Repositorygithub.com/magento/magento2
Documentationwiki.magento.com/display/MAGE2PROJECTwiki.magento.com/display/MAGE2DOC
