/   /   /  Orocommerce B2B For developers : Customize featured categories in home page

Note:

For more extensions and themes visit our store

Orocommerce B2B For developers : Customize featured categories in home page


So in in home page we have FEATURED CATEGORIES section which show some categories with 
images and product count inside every category .

The bundle responsible of this section is OroCatalogBundle , Yes and start point layout is vendor/oro/commerce/src/Oro/Bundle/CatalogBundle/Resources/views/layouts/blank/oro_frontend_root/default.yml 

But the very important lines inside this .yml:

  1.  
  2. layout:
  3.     actions:
  4.         - '@setBlockTheme':
  5.             themes: 'OroCatalogBundle:layouts:blank/oro_frontend_root/default.html.twig'
  6.         - '@appendOption':
  7.             id: page_main
  8.             optionName: attr.class
  9.             optionValue: ' offset-none'
  10.         - '@addTree':
  11.             items:
  12.                 featured_categories_container:
  13.                     blockType: container
  14.                     siblingId: featured_menu_container
  15.                     options:
  16.                         attr:
  17.                             itemprop: 'hasOfferCatalog'
  18.                             itemscope: ~
  19.                             itemtype: 'http://schema.org/OfferCatalog'
  20.                 featured_categories:
  21.                     blockType: embedded_list
  22.                     options:
  23.                         label: 'oro.catalog.featured_categories.label'
  24.                         item_key: 'category'
  25.                         items: '=data["featured_categories"].getAll([2,3,4,6,7,8,9,10])'
  26.                         items_data:
  27.                             categoryProductsCount: '=data["categories_products"].getCountByCategories([2,3,4,6,7,8,9,10])'
  28.                         item_extra_class: 'embedded-list__item—hide-same'


Which defined the twig renderer file :

  1.  
  2.         - '@setBlockTheme':
  3.             themes: 'OroCatalogBundle:layouts:blank/oro_frontend_root/default.html.twig'

and container :
  1.  
  2.                 featured_categories_container:
  3.                     blockType: container
  4.                     siblingId: featured_menu_container
  5.                     options:
  6.                         attr:
  7.                             itemprop: 'hasOfferCatalog'
  8.                             itemscope: ~
  9.                             itemtype: 'http://schema.org/OfferCatalog'

After that the block responsible of getting data and render it :

  1.  
  2.                 featured_categories:
  3.                     blockType: embedded_list
  4.                     options:
  5.                         label: 'oro.catalog.featured_categories.label'
  6.                         item_key: 'category'
  7.                         items: '=data["featured_categories"].getAll([2,3,4,6,7,8,9,10])'
  8.                         items_data:
  9.                             categoryProductsCount: '=data["categories_products"].getCountByCategories([2,3,4,6,7,8,9,10])'
  10.                         item_extra_class: 'embedded-list__item—hide-same'

As you see :
items: '=data["featured_categories"].getAll([2,3,4,6,7,8,9,10])'
using layout data provider  -featured_categories- to call function  getAll with array argument of all featured categories , you can find the declaration of 2 data providers for featured categories and product count inside  : vendor/oro/commerce/src/Oro/Bundle/CatalogBundle/Resources/config/layout.yml :

  1.  
  2.    oro_catalog.layout.data_provider.featured_categories:
  3.         class: 'Oro\Bundle\CatalogBundle\Layout\DataProvider\FeaturedCategoriesProvider'
  4.         public: true
  5.         arguments:
  6.             - "@oro_catalog.provider.category_tree_provider"
  7.             - "@security.token_storage"
  8.             - '@oro_locale.helper.localization'
  9.         calls:
  10.             - [setCache, ['@oro_catalog.layout.data_provider.category.cache', 3600]]
  11.         tags:
  12.             - { name: layout.data_provider, alias: featured_categories }
  13.   oro_catalog.layout.data_provider.featured_categories_products:
  14.         class: 'Oro\Bundle\CatalogBundle\Layout\DataProvider\CategoriesProductsProvider'
  15.         public: true
  16.         arguments:
  17.             - "@oro_catalog.repository.category"
  18.             - "@oro_catalog.website_search.repository.product"
  19.         calls:
  20.             - [setCache, ['@oro_catalog.layout.data_provider.category.cache', 3600]]
  21.         tags:
  22.             - { name: layout.data_provider, alias: categories_products }

 

the 1 functions getAll([2,3,4,6,7,8,9,10]) and getCountByCategories([2,3,4,6,7,8,9,10]) is inside 
FeaturedCategoriesProviderCategoriesProductsProvider .

 

Use Case


1 - Remove Featured Categories from Home Page :
inside you bundle of customization for example :
src/Ibnab/Bundle/CustomhomeBundle/Resources/views/layouts/blank/oro_frontend_root/default.yml
create default.yml and push :

  1.  
  2. layout:
  3.     actions:
  4.         - '@remove':
  5.             id: featured_categories_container


2 - Override the array of categories  :
inside the default.yml for example show just 4 categories and 4 count products push :
layout:
  1.  
  2.     actions:
  3.         - '@setOption':
  4.             id: featured_categories
  5.             optionName: items
  6.             optionValue: '=data["featured_categories"].getAll([5,4,3,1])'
  7.         - '@setOption':
  8.             id: featured_categories
  9.             optionName: items_data
  10.             optionValue: 
  11.                 categoryProductsCount: '=data["categories_products"].getCountByCategories([5,4,3,1])'


3 - Other things  :
You can create dynamic categories by adding field in configuration section , and using inside your custom data layout  provider Instead data["featured_categories"].getAll([5,4,3,1]) use your data["my-featured_categories"].getAll([5,4,3,1]) , plz see how to create data layout provider .

You can customize the by adding src/Ibnab/Bundle/CustomhomeBundle/Resources/views/layouts/blank/oro_frontend_root/default.html.twig and fill with content of OroCatalogBundle:layouts:blank/oro_frontend_root/default.html.twig and start customization .

Comments

Related Posts

make your store more efficient

Solving problems. With open source technology. Professional results. That’s what makes Ibnab your best choice

IBNAB is a company made of a group of professionals whose work is providing secure open source solutions. Our company strives for reaching magnificent results with each experience and provides professional open source solutions that cover every part of the business process.