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
   

   View Slide

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

   View Slide

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

   View Slide

4. www.oroinc.com
   Storefront & Back-office
   

   View Slide

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
   

   View Slide

6. www.oroinc.com
   Customize Storefront
   

   View Slide

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

   View Slide

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
   

   View Slide

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
   

   View Slide

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
    

    View Slide

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
    

    View Slide

12. www.oroinc.com
    Customize HTML with Layout Component
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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=
    

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

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.
    

    View Slide

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=
    

    View Slide

28. www.oroinc.com
    Summary
    

    View Slide

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

    View Slide