Magento 2 Enhanced Theme/Skin Localization
-
Upload
sergii-shymko -
Category
Engineering
-
view
77 -
download
2
Transcript of Magento 2 Enhanced Theme/Skin Localization
![Page 1: Magento 2 Enhanced Theme/Skin Localization](https://reader036.fdocuments.us/reader036/viewer/2022070516/5871afa11a28abda6a8b6539/html5/thumbnails/1.jpg)
Magento 2Enhanced Theme/Skin Localization
Sergii ShymkoSoftware Engineer, Magento,
a division of X.commerce, Inc. (an eBay company)
![Page 2: Magento 2 Enhanced Theme/Skin Localization](https://reader036.fdocuments.us/reader036/viewer/2022070516/5871afa11a28abda6a8b6539/html5/thumbnails/2.jpg)
Introduction
• Theme/Skin – graphical appearanceof an application
• Magento distinguishes theme & skin– Responsibility– File types– Web-access
![Page 3: Magento 2 Enhanced Theme/Skin Localization](https://reader036.fdocuments.us/reader036/viewer/2022070516/5871afa11a28abda6a8b6539/html5/thumbnails/3.jpg)
Magento Theme
• Theme – markup & text, blocks presence & rendering order
• Theme files – dynamically processed, no web access
![Page 4: Magento 2 Enhanced Theme/Skin Localization](https://reader036.fdocuments.us/reader036/viewer/2022070516/5871afa11a28abda6a8b6539/html5/thumbnails/4.jpg)
Magento Skin
• Skin – look and feel of a theme, colors & styles• Skin files – static, web-accessible
![Page 5: Magento 2 Enhanced Theme/Skin Localization](https://reader036.fdocuments.us/reader036/viewer/2022070516/5871afa11a28abda6a8b6539/html5/thumbnails/5.jpg)
Magento 1.x Design Configuration
Text Fields
![Page 6: Magento 2 Enhanced Theme/Skin Localization](https://reader036.fdocuments.us/reader036/viewer/2022070516/5871afa11a28abda6a8b6539/html5/thumbnails/6.jpg)
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
![Page 7: Magento 2 Enhanced Theme/Skin Localization](https://reader036.fdocuments.us/reader036/viewer/2022070516/5871afa11a28abda6a8b6539/html5/thumbnails/7.jpg)
• 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
![Page 8: Magento 2 Enhanced Theme/Skin Localization](https://reader036.fdocuments.us/reader036/viewer/2022070516/5871afa11a28abda6a8b6539/html5/thumbnails/8.jpg)
Magento 2 Design Configuration
Package ThemeSkin
![Page 9: Magento 2 Enhanced Theme/Skin Localization](https://reader036.fdocuments.us/reader036/viewer/2022070516/5871afa11a28abda6a8b6539/html5/thumbnails/9.jpg)
LOCALIZATIONIN MAGENTO 1.X
Challenges of
![Page 10: Magento 2 Enhanced Theme/Skin Localization](https://reader036.fdocuments.us/reader036/viewer/2022070516/5871afa11a28abda6a8b6539/html5/thumbnails/10.jpg)
Example 1
• Logo variations– Default– German (de_DE locale)– French (fr_FR locale)– Brazilian (pt_BR locale)– …
![Page 11: Magento 2 Enhanced Theme/Skin Localization](https://reader036.fdocuments.us/reader036/viewer/2022070516/5871afa11a28abda6a8b6539/html5/thumbnails/11.jpg)
Magento 1.x Locale Configuration
Admin Panel
![Page 12: Magento 2 Enhanced Theme/Skin Localization](https://reader036.fdocuments.us/reader036/viewer/2022070516/5871afa11a28abda6a8b6539/html5/thumbnails/12.jpg)
Magento 1.x Locale Configuration
Text is translated
Logo is NOT localized
![Page 13: Magento 2 Enhanced Theme/Skin Localization](https://reader036.fdocuments.us/reader036/viewer/2022070516/5871afa11a28abda6a8b6539/html5/thumbnails/13.jpg)
• 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
![Page 14: Magento 2 Enhanced Theme/Skin Localization](https://reader036.fdocuments.us/reader036/viewer/2022070516/5871afa11a28abda6a8b6539/html5/thumbnails/14.jpg)
• 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
![Page 15: Magento 2 Enhanced Theme/Skin Localization](https://reader036.fdocuments.us/reader036/viewer/2022070516/5871afa11a28abda6a8b6539/html5/thumbnails/15.jpg)
Example 2
• Logo variations– Default– Christmas– New Year– Halloween– ...
• Slogan variations– Default– German (de_DE)– Brazilian (pt_BR)– ...
![Page 16: Magento 2 Enhanced Theme/Skin Localization](https://reader036.fdocuments.us/reader036/viewer/2022070516/5871afa11a28abda6a8b6539/html5/thumbnails/16.jpg)
Halloween @ Magento Headquarters
![Page 17: Magento 2 Enhanced Theme/Skin Localization](https://reader036.fdocuments.us/reader036/viewer/2022070516/5871afa11a28abda6a8b6539/html5/thumbnails/17.jpg)
HOW TO SCHEDULE DESIGN FOR HOLIDAYS?
![Page 18: Magento 2 Enhanced Theme/Skin Localization](https://reader036.fdocuments.us/reader036/viewer/2022070516/5871afa11a28abda6a8b6539/html5/thumbnails/18.jpg)
Magento 1.x Design Change Rules
• Custom theme can be specified• Skin “default” is used implicitly
Package Theme
Dates
![Page 19: Magento 2 Enhanced Theme/Skin Localization](https://reader036.fdocuments.us/reader036/viewer/2022070516/5871afa11a28abda6a8b6539/html5/thumbnails/19.jpg)
“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
![Page 20: Magento 2 Enhanced Theme/Skin Localization](https://reader036.fdocuments.us/reader036/viewer/2022070516/5871afa11a28abda6a8b6539/html5/thumbnails/20.jpg)
Lots of Copy & Paste
![Page 21: Magento 2 Enhanced Theme/Skin Localization](https://reader036.fdocuments.us/reader036/viewer/2022070516/5871afa11a28abda6a8b6539/html5/thumbnails/21.jpg)
Magento 2 Design Change Rules
Package ThemeSkin
![Page 22: Magento 2 Enhanced Theme/Skin Localization](https://reader036.fdocuments.us/reader036/viewer/2022070516/5871afa11a28abda6a8b6539/html5/thumbnails/22.jpg)
“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
![Page 23: Magento 2 Enhanced Theme/Skin Localization](https://reader036.fdocuments.us/reader036/viewer/2022070516/5871afa11a28abda6a8b6539/html5/thumbnails/23.jpg)
Summary
• Magento 2– Skin belongs to a theme– Single design configuration field– Skin provides localized files– Consistent locale configuration– No skin files duplication
![Page 24: Magento 2 Enhanced Theme/Skin Localization](https://reader036.fdocuments.us/reader036/viewer/2022070516/5871afa11a28abda6a8b6539/html5/thumbnails/24.jpg)
Magento 2 Links
Repositorygithub.com/magento/magento2
Documentationwiki.magento.com/display/MAGE2PROJECTwiki.magento.com/display/MAGE2DOC