Magento 2: How To Create a Theme (Pt.3)

Magento 2: How To Create a Theme (Pt.3)

Magento 2: How To Create a Theme (Pt.1)
Magento 2: How To Create a Theme (Pt.2)

In this part of our article we are going to overlook:

  • Internationalization
  • Layout extending and overriding
  • Modules templates
  • Theme removal

Internationalization
In Magento 1.9.x for CVS files storage, a locale folder is created in the theme folder. Then a language folder is created, for example, ru_RU, and within it, a file translate.csv.with is created. In Magento 2 is has been changed. An i18n folder should be created in the theme root. Then in the i18n folder, a file with translation is created, e.x. da_DK.csv.

Example: /app/design/frontend/Belvg/air/i18n/da_DK.csv

In order to generate a translation file in the folder you may use i18n tool. The command can be executed in home directory in Magento 2:

php bin/magento i18n:collect-phrases –output=”app/design/frontend/Belvg/air/i18n/da_DK.csv” app/design/frontend/Belvg/air

All lines are compiled into a dictionary, then a dictionary file is created: app/design/frontend/Belvg/air/i18n/da_DK .csv. Translation file has the same format as in Magento 1. 

Let’s generate a localization file by using default theme “luma” and execute a command: php bin/magento i18n:collect-phrases –output=”app/design/frontend/Belvg/air/i18n/da_DK.csv” app/design/frontend/Magento/luma

Here is the result:

Magento 2 How To Create a Theme (Pt.3)_1

Layout extending and overriding
Layouts in certain themes can be extended or overridden in Magento 2.

Extend a layout:

In order not to copy page layouts or common layouts from a default theme, you should define extending layout. For example, to customize the layout defined in <Magento_Catalog_module_dir>/view/frontend/layout/catalog_product_view.xml, you need to add a layout file with the same name in your custom theme, like following <theme_dir>/Magento_Catalog/layout/catalog_product_view.xml

 To add an extending page layout file put the file in the following location:

<theme_dir>
|__/<Namespace>_<Module>
|__/layout
|–<layout1>.xml
|–<layout2>.xml

 Override a layout:

Main basic layouts can be overridden by creating a folder override/base in the theme module folder:

<theme_dir>
|__/<Namespace_Module>
|__/layout
|__/override
|__/base
|–<layout1>.xml
|–<layout2>.xml
These files override the following layouts:

<module_dir>/view/frontend/layout/<layout1>.xml
<module_dir>/view/frontend/layout/<layout2>.xml

Besides, parent theme layouts can be overridden as well by creating a folder override/base in the theme module folder:

<theme_dir>
|__/<Namespace_Module>
|__/layout
|__/override
|__/theme
|__/<Parent_Vendor>
|__/<parent_theme>
|–<layout1>.xml
|–<layout2>.xml
 

These files override the following layouts:

<parent_theme_dir>/<Namespace>_<Module>/layout/<layout1>.xml
<parent_theme_dir>/<Namespace>_<Module>/layout/<layout1>.xml

Modules templates
Templates are stored in the following locations:

Module templates: <module_dir>/view/frontend/templates/<path_to_templates>
Theme templates: <theme_dir>/<Namespace>_<Module>/templates/<path_to_templates>

So in case if we want to override a template for search page that are located in the directory \app\code\Magento\CatalogSearch\view\frontend\templates\result.phtml, the path to templates will be following: \app\design\frontend\Belvg\air\Magento_CatalogSearch\templates\result.phtml

Theme removal
If a theme is a Composer package, it can be removed with a command:

Magento theme:uninstall [–backup-code] [-c|–clear-static-content] {theme path} … {theme path}

where:
{theme path} is the relative path to the theme, starting with the area name.
–backup-code backs up the Magento 2 codebase as discussed in the paragraphs that follow.
–clear-static-content cleans generated static view files, which is necessary to cause static view files to display properly.

In case if a theme is not a Composer package, you should carry out the following steps in order to remove a theme:

  • Remove a theme folder app/design/frontend/(Vendor);
  • Remove contents var/view_preprocessed;
  • Remove contents of pub/static/frontend/;
  • Open Magento 2 database, find theme table and remove a subject name line;
  • Remove cache with a command php bin/magento cache:flush.

Structure of a Magento theme
 The structure of a Magento theme directory typically would be like following:

<theme_dir>/
├── <Vendor>_<Module>/
├── web/
├── css/
├── source/
├── layout/
├── override/
├── templates/
├── etc/
├── i18n/
├── media/
├── web/
├── css/
├── source/
├── fonts/
├── images/
├── js/
├── composer.json
├── registration.php
├── theme.xml

Conclusion
As you can see, the structure in Magento 2 differs from Magento 1.x. The theme structure has been upgraded much, now it looks logically, theme files are assembled together, that’s why it’s easier to search. But the structure modified is not the only significant point. Besides, asynchronous modules load with RequireJS has been added. It can be performed without adding scripts in the head section. Instead of Prototype library, now jQuery/jQuery UI is used. “Less” used instead of CSS increases production rate when developing styles.  In addition, we have an opportunity to create themes as composer packages.

Magento 2: How To Create a Theme (Pt.1)
Magento 2: How To Create a Theme (Pt.2)



Post a new comment

top
BelVG Newsletter
Subscribe to our mailing list and get interesting stuff and updates to your email inbox.
Email *