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.

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.