magento 2 theming - knowledge sharing session by suman kc
TRANSCRIPT
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