LWC - Product Grid

Product Grid

Product Grid Lightning Web Component (LWC) is designed to display merchandise and products that are available in your organization.  Items for sale are stored in a unique datasource that is linked to the Product Grid. You can even take advantage of Product Variants to extend your product offerings to constituents.

Configuration Options


Learn more about Experience Builder 

here

.


From the components list, select the Product Grid component and drag it onto the site page. 

On the page, click within the Product Grid component to bring up the Property editor.


image-2023-5-11_13-14-39.png

Figure 1. Product Grid LWC with configuration options


Properties

Description

Data Source

Shipped with a default Data Source "Lightning Store Data Source", the product grid is ready out-of-the-box to display active, enabled merchandise products.  Additional Data Sources can be 

created and configured to allow for flexibility in your Community.

Product Details URL

This is the base URL of products to display in your community. This URL is used along with a unique identifier to direct the user to an item specific detail page.

Items Per Page

This allows the Administrator to control the paging of items displayed. It is the maximum number of items to display per page.

Retail Price Label

This allows the Administrator to show different pricing options for non-members. 

Price classes for the relative product(s) need to be set up for this to work.


Member Price Label

This allows the Administrator to show different pricing options for members.

Price classes for the relative product(s) need to be set up for this to work. 


Show Search Bar

This allows the Administrator to check a box that allows members to search for product names.


Example

image-2023-6-9_17-0-45.png

Figure 2. Product Grid used to display products on a Store page in Experience Cloud Community Hub