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.


Andrey Yatsenco

March 12, 2019



  2. Frontend Developers’ Experience with OroCommerce 3.1 LTS

  3. Andrey Yatsenko Passionate about Symfony & DX - Trainer

    - Developer - Community Evangelist
  4. Storefront & Back-office

  5. 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. Customize Storefront

  7. Required Knowledge to Start • HTML • CSS &

    SCSS • YAML • Twig • Command line basics
  8. 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. 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. 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. 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. Customize HTML with Layout Component

  13. Layout Tree: • root • header • body •

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

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

    id • options • block type Block Types • container - can have children • block - cannot have children
  16. 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. Manipulate the Layout Tree To define & modify the

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

  19. 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. Layout Tree: • root • header • body •

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

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

  23. Apply Block Themes With Layout update Yaml file

  24. 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. Pass Data to the Template Send data from the

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

    limited to a single line with only 2 variables, context and data.
  27. 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. Summary

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

    on Twitter.