www.oroinc.com www.oroinc.com 

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

www.oroinc.com Andrey Yatsenko Passionate about Symfony & DX - Trainer - Developer - Community Evangelist 

www.oroinc.com Storefront & Back-office 

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 

www.oroinc.com Customize Storefront 

www.oroinc.com Required Knowledge to Start • HTML • CSS & SCSS • YAML • Twig • Command line basics 

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 

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 

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 

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 

www.oroinc.com Customize HTML with Layout Component 

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

www.oroinc.com Layout Tree: • root • header block • body • sidebar another block • main_content • footer Each Tree Item is a Layout Block 

www.oroinc.com Blocks & Block Types Block • id • parent id • options • block type Block Types • container - can have children • block - cannot have children 

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= 

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 • … 

www.oroinc.com Manipulate the Layout Tree Resources/views/layouts/orovibe/oro_product_frontend_product_view/product_view.yml 

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 

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

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

www.oroinc.com Twig blocks are organized into Block Theme Twig files Resources/views/layouts/blank/oro_product_frontend_product_view/sku.html.twig 

www.oroinc.com Apply Block Themes With Layout update Yaml file 

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 

www.oroinc.com Pass Data to the Template Send data from the layout block options with Expression language. 

www.oroinc.com Expression Language Syntax is similar to JavaScript but is limited to a single line with only 2 variables, context and data. 

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= 

www.oroinc.com Summary 

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