Skip to main content
All CollectionsLimeSpot Personalizer App1:1 Product RecommendationsFAQ
Integrating LimeSpot recommendation boxes into BigCommerce's slide-out cart
Integrating LimeSpot recommendation boxes into BigCommerce's slide-out cart

A technical walkthrough of how you can add LimeSpot recommendations to your BigCommerce slide-out cart

W
Written by Will Wadman
Updated over a week ago

Creating unique personalized shopping experiences can significantly enhance user engagement and increase store performance. One effective way to achieve this is by adding product recommendation to key parts of your store. In this article, we'll explore how to integrate a LimeSpot recommendation box into the slide-out cart of a BigCommerce store using JavaScript, and how to adapt this integration for different themes.

This is a technical guide and requires basic understanding of HTML markup and JavaScript.

Understanding the code

The JavaScript snippet provided below consists of the following components:

  • Functions to check and modify the cart dropdown: Functions that detect when the cart dropdown is open and insert a custom recommendation box.

  • LimeSpot recommendation box configuration: Sets up the recommendation box with specific options like the type of recommendations, appearance, and placement.

  • Event listeners and MutationObserver: Monitor changes to the cart dropdown's state and respond by possibly re-rendering the recommendation box.

Let's break down each part and how they contribute to the integration.

Step 1: Detecting dropdown cart state

The checkCartDropDown function checks if the cart dropdown (identified by a specific ID or class depending on your theme, e.g., #cart-preview-dropdown or .cart-dropdown) is open. If the dropdown is open, it then calls addQuickCartBox to render the LimeSpot box.

function checkCartDropDown() {
const dropdownMenu = document.getElementById("cart-preview-dropdown"); // Adjust based on your theme

if (dropdownMenu.classList.contains("is-open")) {
addQuickCartBox();
}

Step 2: Configuring and Adding the LimeSpot Box

The addQuickCartBox function uses LimeSpot's API to create a recommendation box configured as an "Upsell" type. The box is set up with options for appearance such as the number of items, item image margins, and maximum dimensions. After creating the box, it is loaded with recommendations and then mounted into the .dropdown-menu container (or equivalent in your theme) just before a designated element like .previewCartList.

function addQuickCartBox() { LimeSpot.recommendation.createBox({ 
boxType: "Upsell",
options: {
Title: "You might also like",
FallbackMethod: "ShowRelatedItems",
AppearanceOptions: {
ItemsLimit: 5,
ImageMarginRight:10,
ImageMaxWidth: 120,
ImageMaxHeight: 120,
ItemsPerPage: 5,
QuickActionsMode: "always",
QuickActionsAddToCartTitle: "ADD TO CART",
ExtraClasses: "quickcart",
},
},
})

.then((box) => LimeSpot.recommendation.loadBoxRecommendations({
box}))
.then((box) => LimeSpot.recommendation.mountBox({
box,containerSelector: ".dropdown-menu", // Adjust if needed
options: {
PlacementSibling: ".previewCartList", // Adjust based on your
theme's structure
PlacementMethod: "before",
},
})
);
}

Step 3: Observing Changes and Attaching Event Listeners

A MutationObserver is set up to observe changes to the attributes of the dropdown menu. This observer triggers addQuickCartBox whenever the cart is detected to open, ensuring that the recommendations are up-to-date.

const observer = new MutationObserver((mutations) => {
mutations.forEach((mutation) => {
if (mutation.attributeName === "class" &&
dropdownMenu.classList.contains("is-open")) {
addQuickCartBox();
}
});
});

observer.observe(dropdownMenu, { attributes: true });

Additionally, various event listeners are attached to ensure checkCartDropDown is executed during different interactions such as page load, resizing, and mouse events, ensuring consistent behavior across different user actions.

document.addEventListener("DOMContentLoaded", checkCartDropDown); window.addEventListener("resize", checkCartDropDown); document.addEventListener("click", checkCartDropDown); document.addEventListener("mouseover", checkCartDropDown); document.addEventListener("mouseout", checkCartDropDown);

Conclusion

Integrating LimeSpot's recommendation engine into BigCommerce's slide-out cart can dynamically enhance the shopping experience by suggesting relevant upsell items to customers. This setup not only improves user engagement but also leverages AI-driven recommendations to potentially increase order values. By understanding and applying the above steps and adjusting them according to your specific theme, front-end developers can effectively implement sophisticated features in their e-commerce solutions.

Did this answer your question?