Display related products

Overview

In this short tutorial, we'll guide you through building a custom component to showcase a list of related products using the Avonni Carousel flow screen component. The Carousel component is a powerful way to display multiple items in a sliding format, perfect for appealingly presenting related products.

By the end of this tutorial, you'll have a working Carousel component that presents a list of related products seamlessly integrated into your Salesforce Flow. Let's dive in and start creating your interactive product display!

Result

Steps

1. Create a Get Records collection

The very first step starts with creating our Get Records collection to ask Flow Builder to fetch all the Product records by following the below steps:

• Add a Get Records element to fetch product records

• Enter a collection Label > GetProducts

• Select the Product Object

• Select "None - Get all Task Records" in the condition requirements field

• Select "All Records" regarding the number of records to display

• Click "Done"

2. Add our first screen element

The very first step starts with creating our Get Records collection to ask Flow Builder to fetch all the Task records by following the below steps:

• Add a screen element

• Enter a Label: Screen 1

• Click on the Configure Header section and uncheck "Show Header"

• Click on the Configure Footer section and uncheck "Show Footer"

3. Add the Carousel component

Under the Header component, we will drag the Carousel component, the second part of our product showcase component.

• Drag the Carousel component from the components list to our screen flow (the Carousel component is located under the custom section)

• Enter an API Name. For example, carouselProducts.

4. Configure the Carousel

General settings

• Click on the Open Component Builder button to access all the settings for the Carousel component

• Set the Items per panel to 2 (same for Small, Medium and Large)

• Expand the Data Source section and select Variable

• Select our source collection, the one created in Step 1 > GetProducts

Configure Data Mapping

Now we can link fields from our source collection to attributes from the Carousel element. The following fields can be associated to the following attributes:

• Title => Product Name

• Description => Product Description

• Image Source => Display URL (or the name of your field that store the image)

• Name => Product ID

Create an interaction on Item Click

We just completed the data mapping to map fields with carousel attributes. Now, we can create an interaction to define the action when users click on a Carousel item.

• Click on the Interactions tab

• Type => Flow Navigation

• Type => Next Screen