Product Grid Component - BloomReach Experience - Open Source CMS

Product Grid Component

Synopsis

The Products Grid component offers everything you need to display a set of products in your Starter Store boot application-based project. Products can be fetched by text query or categories id and this component works OOTB with Bloomreach APIs and commerce platforms supported. 

Component Overview

Product Grid consists of two drag 'n drop component available in the Starter Store Boot application:

  • Product Grid (Category) fetching products by category id,
  • Product Grid (Search) fetching products using a query string parameter.

Both the components are available in the components section in the channel manager. 

In addition, the component provides other configuration options, such as:

  • Template: switch between different templates
  • Show Pagination: show the paginations at the bottom of the page
  • Page Size: set the number of products in your grid 
  • Query or Id: text search query or item id, based on the type of the grid (search or category)
  • Commerce Connector Id: Starter Store components use the default commerce connector defined in the channel configuration. In case a specific Product Grid wants to use a different connector, this can be set here.
  • Widget Id (BR API only): uses the Widget API

Component Details

Product Grid is a command chain delivery component. It's basically a product search component, indeed the connector components used are:

  • productSearch in case of Product Grid (Search)
  • productSearchByCategory in case of Product Grid (Category)

Both the components work seamlessly with both Bloomreach APIs and commerce platforms supported. If the Bloomreach APIs is enabled in the channel configurations, then only those APIs are used to fetch external data. However, as explained in the previous paragraph, system integrators can specify the Commerce Connector Id and set which commerce connector to use in a specific Grid component. 

Bloomreach APIs

If Bloomreach APIs is enabled, it's possibile to benefit from the Widget API. This is part of Bloomreach Search & Merchandising and optimizes your link structure and page content by populating the content in your Related Searches and Related Products widgets. 

Using your instance of Bloomreach Search & Merchandising [1], you will be able to customize your search result. 

Template Details

At the moment, the Starter Store Boot application provides two templates for the Product Grid component:

  • starterstore-productlist.ftl providing a product preview.
  • starterstore-productlist-atc.ftl showing an Add to Cart button.

References

[1] Bloomreach Search & Merchandising Control Panel https://tools.bloomreach.com/ 

Did you find this page helpful?
How could this documentation serve you better?
On this page
    Did you find this page helpful?
    How could this documentation serve you better?