Important

You are browsing the documentation for version 3.1 of OroCommerce, OroCRM and OroPlatform, which is no longer maintained. Read version 5.1 (the latest LTS version) of the Oro documentation to get up-to-date information.

See our Release Process documentation for more information on the currently supported and upcoming releases.

Customize Product List Page

Every product list page contains the current category_id and the category_ids in the layout context. You can use these values to evaluate the layout conditions. When you customize any page, remember to use Symfony Profiler and look into the Layout section, where the current layout context data and actual layout tree can be found.

Please see the Debug Information section for more details.

Static Block Only

For the first case, create the first level category (with id = 8) that contains a static block only.

The page looks the following way:

Static Block only example

Create the layout update:

src/Acme/Bundle/ProductBundle/Resources/views/layouts/default/oro_product_frontend_product_index/static_block_only.yml
 1 layout:
 2     imports:
 3         -
 4             id: oro_product_list
 5             root: featured_products_container
 6             namespace: featured
 7
 8     actions:
 9         - '@setBlockTheme':
10             themes: 'AcmeProductBundle:layouts:default/oro_product_frontend_product_index/static_block.html.twig'
11
12         - '@addTree':
13             items:
14                 product_index_page:
15                     blockType: container
16                 embedded_example_1:
17                     blockType: block
18             tree:
19                 page_content:
20                     product_index_page:
21                         embedded_example_1: ~
22
23         - '@setOption':
24             id: featured_products
25             optionName: items
26             optionValue: '=data["featured_products"].getProducts()'
27
28         - '@setOption':
29             id: featured_products
30             optionName: label
31             optionValue: oro.product.featured_products.label
32
33         - '@setOption':
34             id: featured_products
35             optionName: slider_options
36             optionValue: {arrows: true, responsive: [{breakpoint: 1100, settings: {arrows: false}}, {breakpoint: 924, settings: {slidesToShow: 3, arrows: false}}, {breakpoint: 480, settings: {slidesToShow: 2, arrows: false}}]}
37
38         - '@setOption':
39             id: featured_product_line_item_form
40             optionName: instance_name
41             optionValue: featured_products
42
43         - '@add':
44             id: featured_products_container
45             parentId: product_index_page
46             blockType: container
47
48     conditions: 'context["category_id"] in [8]' # affected categories

Create a template:

src/Acme/Bundle/ProductBundle/Resources/views/layouts/default/oro_product_frontend_product_index/static_block.html.twig
 1 {% block _featured_products_container_widget %}
 2     {% set attr = layout_attr_defaults(attr, {
 3     '~class': ' featured-products'
 4     }) %}
 5     {{ block_widget(block, {attr: attr}) }}
 6 {% endblock %}
 7
 8 {% block _featured_product_widget %}
 9     {% set attr = layout_attr_defaults(attr, {
10     '~class': ' featured-product'
11     }) %}
12     {{ block_widget(block, {attr: attr}) }}
13 {% endblock %}
14
15 {% block _embedded_example_1_widget %}
16     <div class="embedded-list">
17         <div class="embedded-list__container">
18             <div class=" hero-promo-item">
19                 <a href="#" style="float: left;">
20                     <div class="hero-promo-item__picture">
21                         <img src="{{ asset('/bundles/oroproduct/default/images/what_woud_wear.png') }}">
22                     </div>
23                 </a>
24
25                 <a href="#" style="float: right;">
26                     <div class="hero-promo-item__picture">
27                         <img src="{{ asset('/bundles/oroproduct/default/images/luma_bras_tanks.png') }}">
28                     </div>
29                 </a>
30
31                 <div style="clear: both;"></div>
32             </div>
33
34             <br>
35
36             <div class=" hero-promo-item">
37                 <a href="#">
38                     <div class="hero-promo-item__picture">
39                         <img class="hero-promo-item__img" src="{{ asset('/bundles/oroproduct/default/images/womens-main.jpg') }}">
40                     </div>
41                 </a>
42
43                 <div class="hero-promo-item__info">
44                     <div class="hero-promo-item__cover">
45                         <div class="hero-promo-item__desc">
46                             <a href="#" tabindex="-1">
47                                 <span class="hero-promo-item__pretitle">New Luma Yoga Collection</span>
48                                 <h2 class="hero-promo-item__title">Yoga is ancient <br/> Clothing shouldn’t be</h2>
49                             </a>
50                             <a href="#" class="btn theme-btn btn-dark hero-promo-item__view-btn">
51                                 Shop New Yoga
52                             </a>
53                         </div>
54                     </div>
55                 </div>
56             </div>
57         </div>
58     </div>
59 {% endblock %}

Static Block and Products

For the second case, create a second level category (with id = 9) that contains a static block and products.

The page looks the following way:

Static Block and Products example

Create the layout update:

src/Acme/Bundle/ProductBundle/Resources/views/layouts/default/oro_product_frontend_product_index/static_block_and_products.yml
 1 layout:
 2     imports:
 3         - oro_product_grid
 4
 5     actions:
 6         - '@setBlockTheme':
 7             themes:
 8                 - 'AcmeProductBundle:layouts:default/oro_product_frontend_product_index/products.html.twig'
 9                 - 'AcmeProductBundle:layouts:default/oro_product_frontend_product_index/static_block.html.twig'
10
11         - '@addTree':
12             items:
13                 product_index_page:
14                     blockType: container
15                 embedded_example_2:
16                     blockType: block
17                 product_grid_container:
18                     blockType: container
19             tree:
20                 page_content:
21                     product_index_page:
22                         embedded_example_2: ~
23                         product_grid_container: ~
24
25     conditions: 'context["category_id"] in [9]' # affected categories

Extend static block template with our block:

src/Acme/Bundle/ProductBundle/Resources/views/layouts/default/oro_product_frontend_product_index/static_block.html.twig
 1 ...
 2
 3 {% block _embedded_example_2_widget %}
 4     <div class="embedded-list">
 5         <div class="embedded-list__container">
 6             <div class=" hero-promo-item">
 7                 <a href="#" style="float: left;">
 8                     <div class="hero-promo-item__picture">
 9                         <img src="{{ asset('/bundles/oroproduct/default/images/what_woud_wear.png') }}">
10                     </div>
11                 </a>
12
13                 <a href="#" style="float: right;">
14                     <div class="hero-promo-item__picture">
15                         <img src="{{ asset('/bundles/oroproduct/default/images/luma_bras_tanks.png') }}">
16                     </div>
17                 </a>
18
19                 <div style="clear: both;"></div>
20             </div>
21         </div>
22     </div>
23 {% endblock %}
24
25 ...

Products Only

For the third case, create a third level category (all ids that are not equal 8 or 9) that contains products only.

The page looks the following way:

Products only example

Create a layout update:

src/Acme/Bundle/ProductBundle/Resources/views/layouts/default/oro_product_frontend_product_index/products_only.yml
 1 layout:
 2     imports:
 3         - oro_product_grid
 4
 5     actions:
 6         - '@setBlockTheme':
 7             themes: 'AcmeProductBundle:layouts:default/oro_product_frontend_product_index/products.html.twig'
 8         - '@addTree':
 9             items:
10                 product_index_page:
11                     blockType: container
12                 product_grid_container:
13                     blockType: container
14             tree:
15                 page_content:
16                     product_index_page:
17                         product_grid_container: ~
18
19     conditions: 'context["category_id"] not in [8, 9]' # affected categories

Create a template:

src/Acme/Bundle/ProductBundle/Resources/views/layouts/default/oro_product_frontend_product_index/products.html.twig
 1 {% block _product_grid_container_widget %}
 2     {% set attr = layout_attr_defaults(attr, {
 3         'data-page-component-module': 'oroui/js/app/components/view-component',
 4         '~data-page-component-options': {
 5             view: 'orofrontend/default/js/app/views/footer-align-view',
 6             elements: {
 7                 items: '.product-item_gallery-view',
 8                 footer: '.product-item__qty'
 9             }
10         }
11     }) %}
12
13     <div {{ block('block_attributes') }}>
14         {{ block_widget(block) }}
15     </div>
16 {% endblock %}