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 commercetools.
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 commercetools. 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 Discovery 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 Discovery [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 Discovery Control Panel https://tools.bloomreach.com/