Frontend Developers’ Experience with OroCommerce 3.1 LTS

Frontend Developers’ Experience with OroCommerce 3.1 LTS

In this report, we will show you how to develop custom themes for the OroCommerce storefront. We’ll cover the main steps from changing the CSS styles to complete redesign of the html page layout. Also, we’ll present new time-saving tools for frontend designers that were added to 3.1 LTS release.

6d1d6c68fd6df4614c2f07b7ffa0a7b0?s=128

Andrey Yatsenco

March 12, 2019
Tweet

Transcript

  1. www.oroinc.com www.oroinc.com

  2. www.oroinc.com Frontend Developers’ Experience with OroCommerce 3.1 LTS

  3. www.oroinc.com Andrey Yatsenko Passionate about Symfony & DX - Trainer

    - Developer - Community Evangelist
  4. www.oroinc.com Storefront & Back-office

  5. www.oroinc.com Customize with Themes Storefront themes • CSS • HTML

    layouts • Blocks placement • Reusable blocks • Customizable from extensions • Theme specific JavaScript • Theme specific configs • Theme per website* Back-Office themes • CSS only
  6. www.oroinc.com Customize Storefront

  7. www.oroinc.com Required Knowledge to Start • HTML • CSS &

    SCSS • YAML • Twig • Command line basics
  8. www.oroinc.com Create a Theme 1) Create a bundle (*optional) 2)

    Create a folder with a theme name in Resources/views/layouts/ 3) Create a theme.yml file 4) Activate a theme from the Back-office 5) Run bin/console oro:requirejs:build as JS is built per theme
  9. www.oroinc.com Add a Logo 1) Put a logo to Resources/public/

    2) Edit the theme.yml file 3) Run bin/console assets:install --symlink 4) Run bin/console cache:clear to apply changes
  10. www.oroinc.com Add Stylesheets with SCSS 1) Create SCSS files with

    custom styles in Resources/public/ folder 2) Create assets.yml in the theme config/ folder 3) Register SCSS files in assets.yml
  11. www.oroinc.com Edit Stylesheets with SCSS 1) Run bin/console assets:install --symlink

    to edit styles in bundles 2) Run bin/console oro:assets:build --watch to see changes immediately 3) Use SCSS source maps to find styles definition 4) Use frontend stylebook to check how updated styles affect the UI elements
  12. www.oroinc.com Customize HTML with Layout Component

  13. www.oroinc.com Layout Tree: • root • header • body •

    sidebar • main_content • footer Layout is a Tree Representation of a Page
  14. www.oroinc.com Layout Tree: • root • header block • body

    • sidebar another block • main_content • footer Each Tree Item is a Layout Block
  15. www.oroinc.com Blocks & Block Types Block • id • parent

    id • options • block type Block Types • container - can have children • block - cannot have children
  16. www.oroinc.com Block Types Block Types (150+) • block • container

    • text • logo • … • order_total • … • product_datagrid • ... To get the list of available block types, run bin/console oro:debug:layout To see the options of a single block type, run bin/console oro:debug:layout \ --type=<block-type-name>
  17. www.oroinc.com Manipulate the Layout Tree To define & modify the

    layout tree, use actions organized into layout update Yaml files: • @add • @addTree • @remove • @move • …
  18. www.oroinc.com Manipulate the Layout Tree Resources/views/layouts/orovibe/oro_product_frontend_product_view/product_view.yml

  19. www.oroinc.com Manipulate the Layout Tree 1) Use Symfony Profiler •

    to see the current layout tree structure • to know where to place the layout update Yaml file 2) Create a layout update Yaml file with actions
  20. www.oroinc.com Layout Tree: • root • header • body •

    sidebar • main_content • footer Each Layout Block is Rendered with a Twig Block
  21. www.oroinc.com Layout Tree: • root • header • body •

    sidebar • main_content • footer Each Layout Block is Rendered with a Twig Block
  22. www.oroinc.com Twig blocks are organized into Block Theme Twig files

    Resources/views/layouts/blank/oro_product_frontend_product_view/sku.html.twig
  23. www.oroinc.com Apply Block Themes With Layout update Yaml file

  24. www.oroinc.com Apply Block Themes 1) Use Symfony Profiler </> &

    • to find the template • to know where to place the layout update Yaml file • to know how to name the Twig block 2) Use the dump function to discover variables in a Twig template
  25. www.oroinc.com Pass Data to the Template Send data from the

    layout block options with Expression language.
  26. www.oroinc.com Expression Language Syntax is similar to JavaScript but is

    limited to a single line with only 2 variables, context and data.
  27. www.oroinc.com Expression Language 1) To discover context variables, use Symfony

    Profiler 2) To discover data providers, run bin/console oro:debug:layout 3) To get data provider details with usage example, run bin/console oro:debug:layout --provider=<data-provider-name>
  28. www.oroinc.com Summary

  29. www.oroinc.com Thank you! Check the code on GitHub. Ask questions

    on Twitter.