Magento 2 Enhanced Theme/Skin Localization

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

Thank You!Q & A

Sergii Shymkosshymko@ebay.comsergey@shymko.net