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.