Slide 1

Slide 1 text

www.oroinc.com www.oroinc.com

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

www.oroinc.com Storefront & Back-office

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

www.oroinc.com Customize Storefront

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

www.oroinc.com Customize HTML with Layout Component

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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=

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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=

Slide 28

Slide 28 text

www.oroinc.com Summary

Slide 29

Slide 29 text

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