LWC - Cross Sell Carousel
Cross Sell Carousel
With the Cross Sell Carousel, you now have more control over what your users get to see in Lightning Community or Community Hub. You can also set the title you would like them to see: Like "You Might Also Like", or "Customers who bought this also bought..." to hook the users and encourage them to look at related products to promote cross selling.
Check out the Floating Component Property Editor given below, which enables you to do this and the properties table for how you can perform point-and-click configuration to make the cross sell carousel look just like want it to!
Configuration Options
From the components list on the left panel, select the Cross Sell Carousel component and drag it onto the site page.
On the page, click within the Cross Sell Carousel component to bring up the Property editor.
Figure 1. Cross Sell Carousel LWC with configuration properties
| Properties | Description |
|---|---|
| Carousel Title | This will appear at the top of the carousel, to attract the user's attention to the recommended products. By default, it is set to: |
| Data Source | Enter the Data Source used to power the records in the cross sell carousel. Default value is Creating your own Data Source For ease of use and the benefit of one time set up, you can also create a new SOQL query and use it in a data source. To do this, follow the below steps:
Given below is an example of what a query can look like. Please enter the values as per requirement. 2. Create a Data Source. While creating a data source for cross sell carousel, use the below details:
The items in the data source created by you will display irrespective of selections in following fields, unless added to the query:
|
| Filters | Enter a comma separated list of all objects and/or records that you want to display in the carousel from all the records returned by the Data Source. If this is left blank, all records returned from the data source are displayed. Enter values in any of the formats given in help text. For example: It's a much quicker way than creating a new data source! |
| Maximum Items | Enter the maximum number of items which can be displayed in the Carousel. For Query based data sources, Nimble AMS will consider the lesser value of the two fields: Maximum Items and Limit of the query. Default value for this is 15. |
| Items Per View | Enter the number of items to be displayed per Carousel view. Default value for this is 4. We recommend keeping the items per view at or below 5-7. Setting this number too high could impact the user experience and make it more challenging to find products. |
| Scroll Duration (millisecond) | Enter the duration after which the carousel should slide (in milliseconds). Default value is 0, which means carousel will not scroll. |
| Open in new browser window | Select this checkbox, to open the record in a browser window when a user clicks on it. It is unchecked by default. |
Example
Figure 2. Cross Sell Carousel when used in Experience Cloud