LWC - Cross Sell

With the Lightning 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 lightning carousel look just like want it to!

Figure 2


PropertiesDescription
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: You Might Also Like.

Data Source

Enter the Data Source used to power the records in the Lightning Carousel. Default value is LightningStoreCarouselDataSource which gives correctly configured products that have same tags as the logged in account or purchase history of last 90 days. You can also create a new SOQL query and use it in a new data source, and select the newly created data source from the dropdown. 

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:

  1. Create a SOQL query. While doing this, keep in mind to select the below values:
    • Select Sharing Mode as System
    • In SELECT, enter ID, Name.

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 lightning carousel, use the below details:

  • Enter Class Name as LightningCarouselSOQLDataSource
  • Enter the Query Name (given while creating the query in step 1 in Context field.
  • Enter SObject Type/Class as NC.CrossSellCarouselDetails

The items in the data source created by you will display irrespective of selections in following fields, unless added to the query:

  • Self Service enabled (in Product record)

  • Cannot be sold separately (in Lightning Carousel configuration)

  • Status (in Product record)

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: NU__Product__c to display all items in Product object, OR Merchandise to display all items in Merchandise Record Type OR NU__Product__c.Merchandise to display all items of Merchandise Record Type in Product object.

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 windowSelect this checkbox, to open the record in a browser window when a user clicks on it. It is unchecked by default.