Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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
Tweet

More Decks by Andrey Yatsenco

Other Decks in Technology

Transcript

  1. www.oroinc.com
    www.oroinc.com

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

  6. www.oroinc.com
    Customize Storefront

    View full-size slide

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

    View full-size 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 full-size 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 full-size 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 full-size 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 full-size slide

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

    View full-size slide

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

    View full-size 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 full-size 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 full-size 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 full-size 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 full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size 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 full-size slide

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

    View full-size 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 full-size 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 full-size slide

  28. www.oroinc.com
    Summary

    View full-size slide

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

    View full-size slide