This is Magento 2 Theming

KSS (Knowledge sharing session) by Suman KC

I am Suman KCMagento developer www.linkedin.com/in/sumankc

www.sumankc.com

Hello!

Topics

◉Introduction◉Themes◉Layout◉Templates◉CSS

IntroductionMagento & Magento 2 intro leading to theming aspects

1

◉eCommerce platform◉Huge◉Unique◉Poor documentation◉Edition(Community & enterprise)

Magento in general

14K+ Files & 5K+ FoldersThat’s a lot of files & directory

109MBand that's before you add themes, modules and all your image

libraries

300+ tablesProduct & category alone has 50+ tables relations

Mag

ento

1.9

.2

Magento views are separated into

Magento views

LayoutsBlocks Templates

ThemesCreation, Structure, Configuration & Inheritance

2

1. Prerequisites◉ Not modify out of box Magento themes

[Compatibility,upgradability & easy maintenance]

◉ Set magento application to developer mode[mode influences the way static files are cached]

Creating a theme

app/design/frontend/<Vendor>/├── <theme>/│ ├── etc/│ │ ├── view.xml│ ├── web/│ │ ├── images│ │ │ ├── logo.svg│ ├── registration.php│ ├── theme.xml│ ├── composer.json

Theme directory structure

<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

Typi

cal M

agen

to th

eme

dire

ctor

y

Apply a theme1. In Admin, go to Stores > Configuration > Design.2. In the Store View drop-down field, select the store view

where you want to apply the theme.3. On the Design Theme tab, select your newly created

theme in the Design Theme drop-down.4. Click Save Config.5. If caching is enabled, clear the cache.6. To see your changes applied, reload the store front pages.

Configure a theme (admin section)

The properties of product images used on the storefront are stored in the view.xml configuration file.

<theme_dir>/etc/view.xml

Image properties are configured for each image type defined by the id and type attributes of the <image> element:

<images module="Magento_Catalog"><image id="unique_image_id"

type="image_type">...</image><images/>

Configure image properties

◉ Set a parent theme

◉ Override view.xml file

◉ Override static assets

Theme inheritance

◉ Override templates

◉ Extend Layouts

◉ Override Layouts

◉ Current theme static files: <theme_dir>/web/◉ Ancestor’s static files, recursively, until a theme with no

parent is reached: <parent_theme_dir>/web/

Module context◉ Current theme module static files

<theme_dir>/<Namespace>_<Module>/web/

◉ Ancestor themes module static files, recursively, until a theme with no ancestor is reached: <parent_theme_dir>/<Namespace>_<Module>/web/

Override static assets

Fallback schema◉ Current theme templates:

<theme_dir>/<Namespace>_<Module>/templates

◉ Ancestors themes templates, recursively, until a theme with no ancestor is reached: <parent_theme_dir>/<Namespace>_<Module>/templates

◉ Module templates: <module_dir>/view/frontend/templates

Override templates

The system collects layout files in the following order◉ Current theme layouts:

<theme_dir>/<Vendor>_<Module>/layout/

◉ Ancestors themes <parent_theme_dir>/<Vendor>_<Module>/layout/

◉ Module templates: <module_dir>/view/frontend/templates

◉ Module layouts for the frontend area: <module_dir>/view/frontend/layout/

◉ Module layouts for the base area: <module_dir>/view/base/layout/

Extend Layouts

To override the instructions from an ancestor theme layout file:

● Create a layout file with the same name in the <theme_dir>/<Vendor>_<Module>/layout/override/theme/<Vendor>/<ancestor_theme> directory.

*Though overriding layouts is not recommended, it is still possible, and might be a solution for certain customization tasks.

Overriding Layouts

LayoutInstruction, extending, overriding and Customizations

3

◉NO local.xml file - to modify, make a new xml file with same name

◉All attributes & definitions from origianl module will be inherited

◉move action - great feature of new XML◉Structural & content blocks to

containers & blocks

Layouts

◉ Common layout instructions to customize layoutLayout instructions

◉<block>◉<container>◉<before> &

<after>◉<action>◉<referenceBlock>

and <referenceContainer>

◉<move>◉<remove>◉<update>◉<argument>

◉ Container is a structure without content which holds other blocks and containers

◉ You can specify HTML attributes...

◉ When extending, we have referenceBlock & referenceContainer

Containers and blocks

◉ Updates in <referenceBlock> & <referenceContainer> are applied to the corresponding <block> or <container>.

◉ Eg. if you make a reference by <referenceBlock name=”right”>, you are targeting the block <block name=”right”>

◉ Attributes = remove & display, values = true/false

◉ <referenceBlock name="block.name" remove="true" />

<referenceBlock> & <referenceContainer>

◉ <move> helps moving elements to other location without the need to unset or removing from one place

<move element="name.of.an.element" destination="name.of.destination.element" as="new_alias" after="name.of.element.after" before="name.of.element.before"/>

◉ <remove> to remove static resource linked in a page <head and to remove blocks & containers

<head> <!-- Remove local resources --> <remove src="css/styles-m.css" />

<move> & <remove>

Extend a layout

Overriding layouts

Overriding layouts (from parent theme)

1. Set page layout<page layout="2columns-left" xmlns:xsi="" xsi:noNamespaceSchemaLocation="">...</page>

2. Include/remove static resources<page xmlns:xsi="" xsi:noNamespaceSchemaLocation=""> <head> <!-- Add local resources --> <css src="css/my-styles.css"/>

<css src="css/ie-9.css" ie_condition="IE 9" />

<remove src="my-js.js"

Layout Customization examples

3. Create a container - Reference a container<container name="some.container" as="someContainer" label="Some Container" htmlTag="div" htmlClass="some-container" />

<referenceContainer name="header.panel"> <block class="Magento\Framework\View…”>....</block>

4. Create a block - Reference block<block class="Magento\Catalog\Block\Product\View\Description" name="product.info.sku" template="product/view/attribute.phtml" after="product.info.type"> <arguments>...</arguments></block>

<referenceBlock name="logo">...</referenceBlock>

Layout Customization examples

TemplatesBasic concepts, customizations & overriding

4

◉ Template hint - to locate template(store> config > advanced > developer > debug > enable template)

◉ Copy template to your theme following convention◉ Make required changes

For eg. form inside <Magento_Review_module_dir>/view/frontend/templates/form.phtml

app/design/frontend/OrangeCo/orange/Magento_Review/templates

Template customization walkthrough

◉ Templates are usually initiated in layout files. ◉ Each layout block has an associated template.

◉ The template is specified in the template attribute of the layout instruction. For example, from <Magento_Catalog_module_dir>/view/frontend/layout/catalog_category_view.xml:

<block class="Magento\Catalog\Block\Category\View" name="category.image" template="Magento_Catalog::category/image.phtml"/>

Template initiation

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>

Conventional template location

Customize email templates using theme◉ Template fallback is supported for email templates◉ For eg, to override the New Order email template, create a

template named order_new.html in the <theme_dir>/Magento_Sales/email

◉ Customize using Magento Admin◉ In the Magento Admin, navigate to MARKETING > Communications >

Email Templates◉ Click Add New Template.

Customizing email templates

CSSInclude, preprocessor & Magento UI Library

5

In the Magento application, CSS files are included in layout files.◉ Include css in

<Magento_Blank_theme_dir>/Magento_Theme/layout/default_head_blocks.xml

◉ <page xmlns:xsi="" xsi:noNamespaceSchemaLocation=""> <head> <css src="css/styles-m.css" />

◉ Module-specific styles - /<Namespace>_<Module>/web/css

◉ web/css - styles-m.less, styles-l.less, _styles.less

Include CSS

how stylesheets are preprocessed and compiled to CSS◉ Server-side LESS compilation

default compilation mode, only option for production mode, Compilation performed server, using the LESS PHP library.

◉ Client-side LESS compilationWhen your application is not in the production mode, you can set Magento to compile .less files in a browseBackend : Stores > Configuration > ADVANCED > Developer [Store View drop-down field,

select Default Config.] Front-end development workflow, in the Workflow type

Preprocessor (LESS)

The Magento UI library is a flexible LESS-based frontend library designed to assist Magento theme developers● actions-toolbar● breadcrumbs● buttons● drop-downs● Forms.. And so on

Magento UI Library

You can find the Magento UI library under lib/web/css.Magento UI Library location

Any questions ?Appreciate your participation !!

Thanks!

◉ Magento 2 frontend developers guide◉ Sessiondigital & Inchoo articles

Credit◉Presentation template by SlidesCarnival◉Prepared slides using Google Slides

Frontend Demo: https://iwdagency.com/magento2/Backend Demo: https://iwdagency.com/magento2/admin/User: demoPass: demo123

Reference