Scribd
Upload
100 views12 pages

Magento 2 Theming Changes: Jikke Broxterman

Magento 2 includes several changes to theming including moving base theme files to a module structure, using infinite fallback for parent themes, and replacing layout handles with separate XML files. To create a custom theme, developers must create a theme directory, declare the theme in theme.xml, configure images in view.xml, create directories for static files, and can override templates by copying them to the custom theme folder. Common layout instructions include blocks, containers, references, moves, updates, and arguments. General overrides involve creating module override folders and adding CSS/JavaScript files.

Uploaded by

Santosh Kumar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
100 views12 pages

Magento 2 Theming Changes: Jikke Broxterman

Magento 2 includes several changes to theming including moving base theme files to a module structure, using infinite fallback for parent themes, and replacing layout handles with separate XML files. To create a custom theme, developers must create a theme directory, declare the theme in theme.xml, configure images in view.xml, create directories for static files, and can override templates by copying them to the custom theme folder. Common layout instructions include blocks, containers, references, moves, updates, and arguments. General overrides involve creating module override folders and adding CSS/JavaScript files.

Uploaded by

Santosh Kumar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 12

Magento 2 theming changes


Jikke Broxterman
General Changes

• base/default theme files are moved to module structure



i.e. app/code/Magento/Catalog/view/

• infinite fallback through referring to parent themes

• layout handles replaced by separate xml files

• UI Library built on LESS


Steps to create custom theme
• Create a theme directory:

• app/design/frontend/vendor/mytheme

• Create composer package

• Declare Theme => app/design/frontend/vendor/mytheme


theme.xml

• Configure images => app/design/frontend/vendor/mytheme/etc/


view.xml
Example view.xml

• Example to set default square images size for category page

<var name="category_page_grid:type">small_image</var>

<var name="category_page_grid:width">250</var>

<var name="category_page_grid:ratio">1</var>

<var name="category_page_grid:height">250</var>
Steps to create custom theme
• Create directories for static files

• app/design/frontend/vendor/mytheme/web

app/design/frontend/vendor/mytheme/web/css

app/design/frontend/vendor/mytheme/web/fonts

app/design/frontend/vendor/mytheme/web/js

app/design/frontend/vendor/mytheme/web/images
Example of override product view
• Create module override folder

- app/design/frontend/vendor/mytheme/Magento_Catalog

• This folder may contain:



- layout

- templates 

- web

• Copy file to:



- app/design/frontend/vendor/mytheme/Magento_Catalog/templates/
product/view.phtml

• Copy file from:



- app/code/Magento/Catalog/view/templates/Product/view.phtml
Common Layout Instructions
• <block>

- i.e. <block class="Magento\Theme\Block\Html\Head\Css" name=“css-name">

• <container>

A container renders child elements during view output generation of
<container> and <block> elements.

• before and after attributes

• <action>

Example:

<action method="setText">

<argument name="text" translate="true" xsi:type="string">Text</argument>

</action>
Common Layout Instructions
• <remove>

- basically the same as 1.x

• <referenceBlock> and <referenceContainer>



- For example, if you make a reference by <referenceBlock name="right">, you're
targeting the block <block name="right">.

• <move>

- Sets the declared block or container element as a child of another element in
the specified order.

• <update>

- Includes a certain layout file.

• <argument>
General Overrides
• Create module override folder

- mytheme/Magento_Theme/layout/default.xml

- mytheme/Magento_Theme/layout/default_head_blocks.xml

• Add CSS file:


<referenceContainer name="head">

<block class="Magento\Theme\Block\Html\Head\Css" name="css-name">

<arguments>

<argument name="file" xsi:type="string">css/styles.css</argument

</arguments>

</block>

</referenceContainer>
Other Changes
• prototype has been replaced by jQuery

• prototype still available

• Factory name changes:



Mage::getModel(‘catalog/product’); replace by
Mage::getModel(‘Mage_Catalog_Model_Product’);
Questions!
• What’s your opinion?

• What’s your view?

• When to start with Magento 2?

• …..?
References

• http://devdocs.magento.com/guides/v1.0/frontend-dev-guide/
themes/debug-theme.html

• http://inchoo.net/magento-2/frontend-theme-architecture/

You might also like