Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Magento2 what's new in theming

Magento2 what's new in theming. comparison of magento2 theming with magento1

  • Inicia sesión para ver los comentarios

Magento2 what's new in theming

  1. 1. Magento2 What’s New in Theming Waruna Perera Senior Front End Software Engineer
  2. 2. Agenda  New folder structure  Less instead of Sass  Layouts  UI Components / JS  Creating a New Theme
  3. 3. Magento1 theme folders
  4. 4. 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>
  5. 5. Magento2 theme folders
  6. 6. Pub/static
  7. 7. 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
  8. 8. Magento/test/theme.xml
  9. 9. Magento/test/etc/view.xml
  10. 10. Extending Layouts  Unlike templates or images, layout can not be overridden, but only extended  Layouts are called in order of: I. Current them layouts II. Ancestor theme layouts III. Module layout for frontend area IV. Module layout for base area
  11. 11. 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/
  12. 12. /Magento_Theme/layout/default_head_blocks.xml
  13. 13.  Css/js with module files
  14. 14. 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
  15. 15. Less compile methods 1. 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
  16. 16. Less compile methods Stores > Configuration > ADVANCED > Developer.
  17. 17. 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
  18. 18. 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
  19. 19. Magento UI library
  20. 20. 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.
  21. 21. 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 - appcodeMagentoThemeviewfrontendlayoutdefault_head_blocks.xml • requirejs-config.js - app/code/{Namespace}/{Module}/view/{area}/requirejs-config.js
  22. 22. Env.php
  23. 23. Creating a new theme
  24. 24. Thank you!!