Product Grid Component

Overview

The Product Grid component displays a collection of products in a Bloomreach Accelerator: B2C Commerce Boot application project. You can configure the component to retrieve products by text query or category ID. The Product Grid integrates with Bloomreach APIs and all supported commerce platforms.

Component Structure

The Product Grid is available as two drag-and-drop components in the Bloomreach Accelerator: B2C Commerce Boot application:

Product Grid (Category): Retrieves products by category ID.
Product Grid (Search): Retrieves products using a query string parameter.

Both components are accessible from the Components section in the Experience manager.

You can configure the following options for each Product Grid component:

Template: Select the template used to render the grid.
Show Pagination: Enable or disable pagination controls at the bottom of the grid.
Page Size: Set the number of products displayed per page.
Query or Id: Specify a text search query or a category/item ID, depending on the grid type.
Commerce Connector Id: By default, the component uses the commerce connector defined in the channel configuration. To use a different connector for a specific Product Grid, set this value.
Widget Id (Bloomreach API only): Uses the Widget API.

Component Behavior

The Product Grid component is implemented as a command chain delivery component. It functions as a product search component and uses the following connector components:

productSearch for Product Grid (Search)
productSearchByCategory for Product Grid (Category)

Both variants support integration with Bloomreach APIs and all supported commerce platforms. If Bloomreach APIs are enabled in the channel configuration, the component uses only those APIs to fetch product data. You can override the default connector by specifying the Commerce Connector Id in the component configuration.

Bloomreach APIs Integration

When Bloomreach APIs are enabled, you can use the Widget API, part of Bloomreach Discovery, to optimize link structures and page content. The Widget API populates content in Related Searches and Related Products widgets.

You can customize search results using your Bloomreach Discovery instance. For more information, see the Bloomreach Discovery Control Panel.

Template Options

The Bloomreach Accelerator: B2C Commerce Boot application provides two templates for the Product Grid component:

starterstore-productlist.ftl: Displays a product preview.
starterstore-productlist-atc.ftl: Displays products with an Add to Cart button.

References

[1] Bloomreach Discovery Control Panel: https://tools.bloomreach.com/