How to make the Cart Drawer work with Add to cart button in Nitro Lookbook?
Cart Drawer is a slide-out or pop-up mini-cart that appears on the side of the screen when a customer adds a product to their cart. Instead of redirecting the user to a separate cart page, the cart drawer allows them to view and modify their cart contents without leaving their current page. This enhances the shopping experience by keeping customers engaged and reducing friction in the checkout process.
Note: You can only do this when your theme has the cart drawer function.
To make the Cart Drawer work with Add to cart button in Nitro Lookbook, you need follow some steps below:
Step1: Open the Lookbook item
Step2: On the Display tabs -> Action button in product tooltip, choose Add to cart
Step3: On Action after add to cart field, choose Open theme cart drawer
Step4: If your theme appears in our dropdown list, select it, and you're all set. If not, go to Step5
Step5: Go to App settings -> Custom code to paste the custom code for each specific theme
1. With the Symmetry_7.21 theme
Add the code below:
document.addEventListener('nt-cart-added', function (e) {
document.dispatchEvent(new Event('dispatch:cart-drawer:refresh'))
document.dispatchEvent(new Event('dispatch:cart-drawer:open'))
})
2. With the Eurus theme
Add the code below:
document.addEventListener('nt-cart-added', function (e) {
Alpine.store('xMiniCart').openCart();
const getSectionInnerHTML = (html, selector = '.shopify-section') => {
return new DOMParser()
.parseFromString(html, 'text/html')
.querySelector(selector).innerHTML;
}
function getSectionsToRender() {
const cartItemEl = document.getElementById('main-cart-items');
if (cartItemEl) {
const templateId = cartItemEl.closest('.shopify-section').id
.replace('cart-items', '')
.replace('shopify-section-', '');
return [
{
id: templateId + 'cart-items',
selector: '#main-cart-items'
},
{
id: templateId + 'cart-footer',
selector: '#main-cart-footer'
},
{
id: templateId + 'cart-upsell',
selector: '#main-cart-upsell'
},
{
id: "cart-icon-bubble",
selector: '#cart-icon-bubble'
},
{
id: 'mobile-cart-icon-bubble',
selector: '#mobile-cart-icon-bubble'
}
];
}
return [
{
id: "cart-icon-bubble",
selector: '#cart-icon-bubble'
},
{
id: 'mobile-cart-icon-bubble',
selector: '#mobile-cart-icon-bubble'
},
{
id: 'cart-drawer',
selector: '#CartDrawer'
}
];
}
const sectionsToRender = getSectionsToRender();
const data = e.detail;
sectionsToRender.forEach((section => {
const sectionElement = document.querySelector(section.selector);
if (sectionElement) {
if (data.sections[section.id])
sectionElement.innerHTML = getSectionInnerHTML(data.sections[section.id], section.selector);
}
Alpine.store('xMiniCart').openCart();
Alpine.store('xCartHelper').currentItemCount = parseInt(document.querySelector('#cart-icon-bubble span').innerHTML);
document.dispatchEvent(new CustomEvent("eurus:cart:items-changed"));
}));
fetch('/cart.json')
.then(res => res.json())
.then((res) => {
const counts = document.querySelectorAll('#cart-icon-bubble span');
if(counts.length) {
counts.forEach((count) => {
count.innerHTML = res.item_count
})
}
})
});