Embed Size (px)
Citation preview
Magento 2Theme Localization
Software EngineerMagentoX.commerce, an eBay Inc. company
Sergii Shymko
Magento 1.xDesignConfiguration
• Package• Theme• Skin
Text Fields
Magento 2 Design Configuration
Package / Theme / Skin
Theme
LocalizationExamples
Simple Example
Slogan variations– Default– German (de_DE locale)– Spanish (sp_MX locale)– …
Magento 1.x Locale ConfigurationAdmin Panel
Magento 1.x Locale Configuration
Text translated
Slogan NOT localized
“example” package
Magento 1.x "Localization Skins"
• New skin for every locale• Configuration: locale + localized skin
“spanish” skinslogan.png
“default” theme
“default” skinslogan.png
• Localized files in themes• Consistent configuration: locale
“example” theme
Magento 2 Static Files Localization
“sp_MX” localeslogan.png
slogan.png
Complex Example
Logo– Default– Christmas– New Year– Halloween
Slogan– Default– German (de_DE)– Spanish (sp_MX)
Halloween @ Magento Headquarters
?How to schedule
design for holidays?
Magento 1.x Design Change Rules
• Custom theme can be specified• Skin with same name used implicitly
PackageTheme
Dates
“default” theme “new_year” theme
“new_year” skinlogo.png
“new_year_de_DE” theme
“new_year_de_DE” skinlogo.pngslogan.png
“new_year_es_MX” theme
“new_year_es_MX” skinlogo.pngslogan.png
“christmas” theme
“christmas” skinlogo.png
“christmas_de_DE” theme
“christmas_de_DE” skinlogo.pngslogan.png
“christmas_es_MX” theme
“christmas_es_MX” skinlogo.pngslogan.png
Magento 1.x Implementation
inheritance
“german” skinslogan.png
“default” skinlogo.pngslogan.png
“spanish” skinslogan.png
“default” theme “new_year” theme
“new_year” skin
“new_year_de_DE” theme
“new_year_de_DE” skin
“new_year_es_MX” theme
“new_year_es_MX” skin
“christmas” theme
“christmas” skin
“christmas_de_DE” theme
“christmas_de_DE” skin
“christmas_es_MX” theme
“christmas_es_MX” skin
Magento 1.x Implementation
inheritance
“german” skin
“default” skinlogo.pngslogan.png
“spanish” skin
slogan.png
slogan.png slogan.png logo.png
slogan.png logo.png
logo.png
slogan.png logo.png
logo.png
logo.pngslogan.png
Lots of Copy & Paste
Magento 2 Design Change Rules
ThemeDates
Magento 2 Theme Inheritance...
Theme Nslogan.png
1.png
Theme N-1logo.png
slogan.png
Inherited file
Overridden file
New file
Magento 2 Implementation“example” themelogo.png
Inheritance
slogan.png
“de_DE” locale
slogan.png
“sp_MX” locale
slogan.png
“christmas” theme
logo.png
“new_year” theme
logo.png
“halloween” theme
logo.png
Multi-Level Inheritance Example
“winter” themebg.png
“example” themebg.png logo.png
“christmas” themelogo.png
“new_year” themelogo.png
“halloween” themelogo.png
Summary
Magento 2– Design package / Theme / Skin– Single design configuration field– Theme provides localized files– Consistent locale configuration– Unlimited theme inheritance– No static files duplication
Resources
Repositorygithub.com/magento/magento2
Documentationwiki.magento.com/display/MAGE2PROJECTwiki.magento.com/display/MAGE2DOC
