Magento 2 Enhanced Theme/Skin Localization
- 1. Magento 2 Enhanced Theme/Skin Localization Sergii Shymko Software Engineer, Magento, a division of X.commerce, Inc. (an eBay company)
- 2. Introduction • Theme/Skin – graphical appearance of an application • Magento distinguishes theme & skin – Responsibility – File types – Web-access
- 3. Magento Theme • Theme – markup & text, blocks presence & rendering order • Theme files – dynamically processed, no web access
- 4. Magento Skin • Skin – look and feel of a theme, colors & styles • Skin files – static, web-accessible
- 5. Magento 1.x Design Configuration Text Fields
- 6. 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“default” theme “mobile” theme“mobile” theme “default” skin“default” skin “modern” skin“modern” skin “simple” skin“simple” skin
- 7. • Skin belongs to one theme only • Skin files are located in a theme • Skin files web-access challenge “example” package“example” package Magento 2 Skin “default” theme“default” theme “mobile” theme“mobile” theme “default” skin“default” skin “modern” skin“modern” skin “simple” skin“simple” skin
- 8. Magento 2 Design Configuration Package Theme Skin
- 10. Example 1 • Logo variations – Default – German (de_DE locale) – French (fr_FR locale) – Brazilian (pt_BR locale) – …
- 11. Magento 1.x Locale Configuration Admin Panel
- 12. Magento 1.x Locale Configuration Text is translated Logo is NOT localized
- 13. • New skin for every locale • Inconsistent configuration: locale + localized skin “example” package“example” package Magento 1.x "Localization Skins" “default” theme“default” theme “german” skin“german” skin “default” skin“default” skin “french” skin“french” skin
- 14. • Skin provides files for multiple locales • Consistent configuration: locale “example” package“example” package Magento 2 Skin Files Localization “default” theme“default” theme “default” skin“default” skin “de_DE” locale“de_DE” locale “fr_FR” locale“fr_FR” locale
- 15. Example 2 • Logo variations – Default – Christmas – New Year – Halloween – ... • Slogan variations – Default – German (de_DE) – Brazilian (pt_BR) – ...
- 16. Halloween @ Magento Headquarters
- 17. HOW TO SCHEDULE DESIGN FOR HOLIDAYS?
- 18. Magento 1.x Design Change Rules • Custom theme can be specified • Skin “default” is used implicitly Package Theme Dates
- 19. “example” package“example” package “default” theme“default” theme Magento 1.x Implementation “default” skin“default” skin slogan.png “german” skin“german” skin slogan.png “brazilian” skin“brazilian” skin slogan.png logo.png “christmas” theme“christmas” theme “default” skin“default” skin slogan.png logo.png “christmas_de_DE” theme“christmas_de_DE” theme “default” skin“default” skin slogan.png logo.png “christmas_pt_BR” theme“christmas_pt_BR” theme “default” skin“default” skin slogan.png logo.png “new_year” theme“new_year” theme “default” skin“default” skin slogan.png logo.png “new_year _de_DE” theme“new_year _de_DE” theme “default” skin“default” skin slogan.png logo.png “new_year _pt_BR” theme“new_year _pt_BR” theme “default” skin“default” skin slogan.png logo.png inheritance
- 20. Lots of Copy & Paste
- 21. Magento 2 Design Change Rules Package Theme Skin
- 22. “example” package“example” package “default” theme“default” theme Magento 2 Implementation “default” skin“default” skin logo.png “de_DE” locale“de_DE” locale slogan.png slogan.png “pt_BR” locale“pt_BR” locale slogan.png “christmas” skin“christmas” skin logo.png “new_year” skin“new_year” skin logo.png “halloween” skin“halloween” skin logo.png inheritance
- 23. Summary • Magento 2 – Skin belongs to a theme – Single design configuration field – Skin provides localized files – Consistent locale configuration – No skin files duplication
- 25. Thank You! Q & A Sergii Shymko sshymko@ebay.com sergey@shymko.net