magento2 what's new in theming
TRANSCRIPT
![Page 1: Magento2 what's new in theming](https://reader035.vdocument.in/reader035/viewer/2022070510/58a68cc61a28ab31478b4fa9/html5/thumbnails/1.jpg)
Magento2What’s New in
Theming
Waruna Perera Senior Front End Software Engineer
![Page 2: Magento2 what's new in theming](https://reader035.vdocument.in/reader035/viewer/2022070510/58a68cc61a28ab31478b4fa9/html5/thumbnails/2.jpg)
Agenda
New folder structure Less instead of Sass Layouts UI Components / JS Creating a New Theme
![Page 3: Magento2 what's new in theming](https://reader035.vdocument.in/reader035/viewer/2022070510/58a68cc61a28ab31478b4fa9/html5/thumbnails/3.jpg)
Magento1 theme folders
![Page 4: Magento2 what's new in theming](https://reader035.vdocument.in/reader035/viewer/2022070510/58a68cc61a28ab31478b4fa9/html5/thumbnails/4.jpg)
New Folder Structure
No skin folder New Pub Folder All static files are published in Pub folder Front End themes are located under app/design/frontend/<Vendor>/ Magento default themes can be found under vendor/magento/theme-frontend-<theme_code>
![Page 5: Magento2 what's new in theming](https://reader035.vdocument.in/reader035/viewer/2022070510/58a68cc61a28ab31478b4fa9/html5/thumbnails/5.jpg)
Magento2 theme folders
![Page 6: Magento2 what's new in theming](https://reader035.vdocument.in/reader035/viewer/2022070510/58a68cc61a28ab31478b4fa9/html5/thumbnails/6.jpg)
Pub/static
![Page 7: Magento2 what's new in theming](https://reader035.vdocument.in/reader035/viewer/2022070510/58a68cc61a28ab31478b4fa9/html5/thumbnails/7.jpg)
Theme Inheritance
Static view files - css/js/fonts/images Dynamic view files – less/templates/layouts
Theme Files
Guarantees that if a view file is not found in the current theme, the system searches in the ancestor themes, module view files or library.
Parent theme is defined in the child theme theme.xml file Static files can be overridden by adding a file with the same name on
relevant location .less (even though they are not static files) files are also overridden
by a file with same name
![Page 8: Magento2 what's new in theming](https://reader035.vdocument.in/reader035/viewer/2022070510/58a68cc61a28ab31478b4fa9/html5/thumbnails/8.jpg)
Magento/test/theme.xml
![Page 9: Magento2 what's new in theming](https://reader035.vdocument.in/reader035/viewer/2022070510/58a68cc61a28ab31478b4fa9/html5/thumbnails/9.jpg)
Magento/test/etc/view.xml
![Page 10: Magento2 what's new in theming](https://reader035.vdocument.in/reader035/viewer/2022070510/58a68cc61a28ab31478b4fa9/html5/thumbnails/10.jpg)
Extending Layouts Unlike templates or images, layout can not be overridden, but only
extended Layouts are called in order of:
I. Current them layoutsII. Ancestor theme layoutsIII. Module layout for frontend areaIV. Module layout for base area
![Page 11: Magento2 what's new in theming](https://reader035.vdocument.in/reader035/viewer/2022070510/58a68cc61a28ab31478b4fa9/html5/thumbnails/11.jpg)
Include css files /Magento_Theme/layout/default_head_blocks.xml If the system does not find the included CSS files, it searches for the
same file names with a .less extension.
CSS files locations Css files are located at :
/module_name/web/css/ /web/css/
![Page 12: Magento2 what's new in theming](https://reader035.vdocument.in/reader035/viewer/2022070510/58a68cc61a28ab31478b4fa9/html5/thumbnails/12.jpg)
/Magento_Theme/layout/default_head_blocks.xml
![Page 13: Magento2 what's new in theming](https://reader035.vdocument.in/reader035/viewer/2022070510/58a68cc61a28ab31478b4fa9/html5/thumbnails/13.jpg)
Css/js with module files
![Page 14: Magento2 what's new in theming](https://reader035.vdocument.in/reader035/viewer/2022070510/58a68cc61a28ab31478b4fa9/html5/thumbnails/14.jpg)
Css pre-processor Sass on magento1.9. Less on magento 2 Less files are stored in web/css/source folder
Why Less? Not Sass? Sass is widely used than less Sass needs ruby to compilation Less can be compiled with less resources- grunt, less.js
![Page 15: Magento2 what's new in theming](https://reader035.vdocument.in/reader035/viewer/2022070510/58a68cc61a28ab31478b4fa9/html5/thumbnails/15.jpg)
Less compile methods1. Server-side LESS compilation.
default compilation mode compilation is performed on the server, using the LESS PHP library
2. Client-side LESS compilation. compilation is performed on the browser using less.js library Used on development mode
![Page 16: Magento2 what's new in theming](https://reader035.vdocument.in/reader035/viewer/2022070510/58a68cc61a28ab31478b4fa9/html5/thumbnails/16.jpg)
Less compile methodsStores > Configuration > ADVANCED > Developer.
![Page 17: Magento2 what's new in theming](https://reader035.vdocument.in/reader035/viewer/2022070510/58a68cc61a28ab31478b4fa9/html5/thumbnails/17.jpg)
Less compile with grunt
In server-side compilation mode, you can use the Grunt JavaScript task runner.
Need node.js installed Install Grunt CLI Install Grunt in your Magento directory Install (or refresh) the node.js project dependency for your Magento
instance Add your theme to Grunt configuration -
dev/tools/grunt/configs/themes.js
![Page 18: Magento2 what's new in theming](https://reader035.vdocument.in/reader035/viewer/2022070510/58a68cc61a28ab31478b4fa9/html5/thumbnails/18.jpg)
Magento UI library Flexible LESS-based frontend library designed to assist Magento theme
developers. It employs a set of mixins for base elements to ease frontend theme
development and customization. Located at lib/web/css
Action-toolbar, breadcrumbs, buttons, drop-downs, forms, icons, layout, loaders, messages, pagination, popups
Inbuilt components
![Page 19: Magento2 what's new in theming](https://reader035.vdocument.in/reader035/viewer/2022070510/58a68cc61a28ab31478b4fa9/html5/thumbnails/19.jpg)
Magento UI library
![Page 20: Magento2 what's new in theming](https://reader035.vdocument.in/reader035/viewer/2022070510/58a68cc61a28ab31478b4fa9/html5/thumbnails/20.jpg)
Less Mixins You can use a mixin with default variables values, or you can redefine
them when calling a mixin. Variables starting with _@ are private variables within a mixin.
![Page 21: Magento2 what's new in theming](https://reader035.vdocument.in/reader035/viewer/2022070510/58a68cc61a28ab31478b4fa9/html5/thumbnails/21.jpg)
Require js Including javascript on header can slow down page loading speed Magento2 uses Require js library to overcome this problem RequireJS improves the perceived page load time because it allows
JavaScript to load in the background It enables asynchronous javaScript loading. RequireJS improves the speed and quality of your code by breaking
large application into smaller manageable code RequireJS loads plain JavaScript files as well as more defined modules RequireJS only loads the JS script that the page needs.
• require.js - app\code\Magento\Theme\view\frontend\layout\default_head_blocks.xml• requirejs-config.js - app/code/{Namespace}/{Module}/view/{area}/requirejs-config.js
![Page 22: Magento2 what's new in theming](https://reader035.vdocument.in/reader035/viewer/2022070510/58a68cc61a28ab31478b4fa9/html5/thumbnails/22.jpg)
Env.php
![Page 23: Magento2 what's new in theming](https://reader035.vdocument.in/reader035/viewer/2022070510/58a68cc61a28ab31478b4fa9/html5/thumbnails/23.jpg)
Creating a new theme
![Page 24: Magento2 what's new in theming](https://reader035.vdocument.in/reader035/viewer/2022070510/58a68cc61a28ab31478b4fa9/html5/thumbnails/24.jpg)
Thank you!!