Overview
This article will help you make Wise Cart more compatible with your theme so that you can give your website visitors a consistent user experience. We have covered some commonly occurring problems that you might face while setting up Wise Cart with your theme.
Theme’s native cart is being shown behind Wise Cart
In some themes, your theme's native cart would be shown to the end user behind the Wise Cart. Therefore you'll notice that sometimes when you close Wise Cart, your native cart is still there.
To solve this problem, we can add a custom JavaScript code to your theme code or in tag managers (like Google Tag Manager) to close your theme's native cart when Wise Cart is shown to users.
Here's an example of where this code can be added to the theme's code:
Follow these 3 simple steps to hide your native theme cart.
STEP 1
Copy this code and paste it into your theme.liquid file, right below <head> (refer to the screenshot above).
<script>
window.addEventListener("DOMContentLoaded", (event) => {
var style = document.createElement("style");
style.textContent = ".wise-cart _REPLACE_THIS_WITH_YOUR_NATIVE_CART_SELECTOR_ { display:none !important }";
document.head.appendChild(style);
window.addEventListener('wiseCartOpen', function updateCartCount(event) {
var intvMaxTime = 0;
var intv = setInterval(function(){
var closeBtn = document.querySelector('_REPLACE_THIS_WITH_YOUR_NATIVE_CART_CLOSE_ICON_SELECTOR_');
if(closeBtn) {
console.log(closeBtn);
closeBtn.click();
clearInterval(intv);
} else if(intvMaxTime === 10000) {
clearInterval(intv);
}
intvMaxTime = intvMaxTime+1000;
}, 1000);
});
window.addEventListener('wiseCartClose', ()=>{
setTimeout(()=>{document.body.style.overflow = 'unset'}, 500)
});
});
</script>
STEP 2
In the above code, you'll need to replace _REPLACE_THIS_WITH_YOUR_NATIVE_CART_SELECTOR_ with your theme's native cart selector.
Open up the developer tools (right-click, inspect element), and find the element of your theme's native cart.
Here's an example of how to find the selector in your theme (please note - this should work on most themes, but can vary in some custom themes)
STEP 3
Next, replace _REPLACE_THIS_WITH_YOUR_NATIVE_CART_CLOSE_ICON_SELECTOR_ with your native cart's close icon's selector.
Here's an example of how to find the selector in your theme (please note - this should work on most themes, but can vary in some custom themes)
STEP 4
Click Save and go to your website / Wise Cart preview to check.
Note: The above code might have to be modified depending on how your theme shows the cart drawer. Please consult your developer or reach out to us on Live Chat if you need more assistance with writing this code.
User is redirected to the cart page and is not able to see Wise Cart
This issue happens in some themes on click of the "add to cart" button from your Product page.
To resolve this, go to your theme's settings in the Shopify dashboard and change the cart type from "Page" to "Drawer". This will prevent the redirection to the cart page and allow Wise Cart to open instantly.
After changing this setting from "Page" to "Drawer", you might face the issue of your theme’s native cart being shown behind Wise Cart. We have provided a solution for that in the above section of this help article.