Upgrade to Pro — share decks privately, control downloads, hide ads and more …

How to kickstart your Magento 2 Theme

How to kickstart your Magento 2 Theme

https://be.meet-magento.com/presentation/kickstart-magento-2-theme/

Target audience:
Frontend Developers with scope on Magento 2, either new to the Magento eco system or in the transition from M1 > M2

Abstract:
Despite some similarities to Magento 1 the new frontend workflow comes with a lot of new concepts, approaches and technologies. From my own experience it can be frustrating even to experienced Magento 1 Developers to get productive in Magento 2.

I will guide through the basic concepts of templating in Magento 2, covering theme fallback, scaffolding, layout XML, PHTML Blocks and focus on the implementation and usage of the built in themes. Therefore I will give a very brief introduction to the Magento 2 CSS library and its use cases & caveats.

Sandro Wagner

September 27, 2017
Tweet

Other Decks in Programming

Transcript

  1. How to KICKSTART your Magento 2 Theme Sandro Wagner />

    How to kickstart your Magento 2 Theme
  2. Sandro Wagner Magento Certified Frontend Developer @integer_net // 2014 Magento

    // 2011 Web development // 2006 Sandro Wagner /> How to kickstart your Magento 2 Theme
  3. Sandro Wagner /> How to kickstart your Magento 2 Theme

    ...should have checked my FALLBACK system!
  4. Sandro Wagner /> How to kickstart your Magento 2 Theme

    app/design/frontend/ myVendor/myTheme/theme.xml Theme FALLBACK <theme xmlns:xsi="..." ...> <title>MyVendor: My Theme Name</title> <parent>Magento/luma</parent> </theme> MyTheme Magento/luma Magento_Theme MyChildTheme <theme xmlns:xsi="..." ...> <title>MyVendor: My Child Theme</title> <parent>MyVendor/MyTheme</parent> </theme>
  5. Sandro Wagner /> How to kickstart your Magento 2 Theme

    <MyTheme_dir> |__/Magento_Catalog |__/layout |__catalog_product_view.xml Theme FALLBACK (Layout) <Magento_Catalog_module_dir> |--/view/frontend/layout/catalog_product_view.xml <MyTheme_dir> |__/Magento_Catalog |__/layout |__/override/[base|frontend] |__ catalog_product_view.xml EXTEND a Layout OVERRIDE a Layout
  6. Sandro Wagner /> How to kickstart your Magento 2 Theme

    Theme FALLBACK (CSS) MyTheme Magento/luma Magento/blank MyChildTheme styles[-m/-l].css styles[-m/-l].less lib/web/css module context?
  7. Sandro Wagner /> How to kickstart your Magento 2 Theme

    3. Install dependencies $ cd <installation directory> &&/ cp Gruntfile.js.sample Gruntfile.js &&/ cp package.json.sample package.json &&/ npm install 1. Install Node.js 2. Install Grunt CLI $ npm install -g grunt-cli Prepare ENVIRONMENT
  8. Sandro Wagner /> How to kickstart your Magento 2 Theme

    app/design/frontend/<MyVendor>/<MyTheme> Create THEME app/code/<MyVendor>/<MyTheme>/ MyVendor_MyTheme and theme MODULE
  9. Sandro Wagner /> How to kickstart your Magento 2 Theme

    dev/tools/grunt/configs/themes.js REGISTER theme/locale module.exports = { blank: {...}, luma: {...}, backend: {...}, myTheme: { area: 'frontend', name: 'MyVendor/MyTheme', locale: 'be_FR', files: [ 'css/styles-m', 'css/styles-l' ], dsl: 'less' } };
  10. Sandro Wagner /> How to kickstart your Magento 2 Theme

    $ grunt clean:myTheme && \ grunt exec:myTheme && \ grunt less:myTheme && \ grunt watch Start CSS WORKFLOW
  11. Sandro Wagner /> How to kickstart your Magento 2 Theme

    BESTPRACTICE Stick to standard as much as possible add/change/remove/replace granular components/modules re-usables via composer leave minimal footprint
  12. Sandro Wagner /> How to kickstart your Magento 2 Theme

    “Customize or create new .xml layout files instead of customizing and overriding .phtml templates. For example, if you need to create a new container, it is better to add an .xml file and create it there, than override a template.” BESTPRACTICE http://devdocs.magento.com/guides/v2.1/frontend-dev-guide /theme-best-practice.html
  13. Sandro Wagner /> How to kickstart your Magento 2 Theme

    BESTPRACTICE app/design/frontend/<MyVendor>/<MyTheme>/ Magento_Module/ Vendor_Module/ Use module scope! MyVendor_MyTheme/ Theme specific (including bootstrapping CSS) web/css/source/ modify base theme related style here
  14. Sandro Wagner /> How to kickstart your Magento 2 Theme

    BESTPRACTICE 01. Check for available framework variables MyVendor/MyTheme/web/css/source/_variables.less 02. Modify theme variables MyVendor/MyTheme/web/css/source/_theme.less 02. Use _module or _extend hook MyVendor/MyTheme/MyVendor_MyTheme/web/css/source/_module.less MyVendor/MyTheme/web/css/source/_extend.less
  15. Sandro Wagner /> How to kickstart your Magento 2 Theme

    BESTPRACTICE Magento recommends MyVendor/MyTheme/ web/css/source/ _extend.less extend/ some/_partial.less Alternative bootstrapping I use MyVendor/MyTheme/ MyVendor_MyTheme web/css/source/ _module.less module/ some/_partial.less
  16. Sandro Wagner /> How to kickstart your Magento 2 Theme

    MEDIAQueries Common Styles Breakpoint related Styles & when (@media-common = true) { … } .media-width ( @extremum, @break ) when ( @extremum = 'max|max' ) and ( @break = @screen__m ) { … } Prevent DUPLICATE CSS!
  17. Sandro Wagner /> How to kickstart your Magento 2 Theme

    BASE LAYOUT in Magento 1 (1column.phtml) <html> <head><?php //head ?></head> <body> ... <div class="wrapper">... <div class="page"> <?php //header ?> <div class="main-container col1-layout"> <div class="main"> ... <div class="col-main"> ... <?php //content ?> </div> </div> </div> ... </div> </div></body></html>
  18. Sandro Wagner /> How to kickstart your Magento 2 Theme

    BASE LAYOUT in Magento 2 (empty.xml) <container name="root"> <container htmlTag="div" htmlClass="page-wrapper"> <container htmlTag="main" htmlId="maincontent" htmlClass="page-main"> <container htmlTag="div" htmlClass="columns"> <container htmlTag="div" htmlClass="column main"/> </container> </container> </container> </container>
  19. Sandro Wagner /> How to kickstart your Magento 2 Theme

    CUSTOM LAYOUT in Magento 2 (empty.xml) <!-- Remove Markup from page wrapper --> <referenceContainer name="page.wrapper" htmlTag="" htmlId="" htmlClass=""/> <!-- Build Custom Header --> <referenceContainer name="root"> <block name="MyVendor.header" class template after="after.body.start"> <block name="MyVendor.header.products" class template/> <block name="MyVendor.header.search" class template /> </block> </referenceContainer>