How to make the Cart Drawer work with Add to cart button in EComposer?

Cart Drawer is a feature that allows customers to view and manage their shopping cart from any page on your store. This can be useful for customers who want to keep track of their shopping progress, or for stores that want to encourage customers to complete their purchases. 

First, you need to install the Ajax cart extension and select the action to Show a cart popup for the Add to cart button on your product page.

Then, you need to add some custom code below to the Custom js code box in the Site Settings tab of EComposer. Don’t forget to click the Save settings button to save the changes.

Note: The Cart drawer will make your page reload after the customer clicks on the Add to cart button and then open the Cart sidebar.

1. With Kalles (version 4.x or older)

You can find Kalles theme on Themeforest via this link.

The code below is for Kalles (version 4.x or older) and Unsen theme:

setTimeout(function() {
if(window.EComposer){
  window.EComposer.ajaxCartSuccess = function (data, form) {
    document.dispatchEvent(new CustomEvent('cart:refresh:opend'))
  };
}
}, 1000)

2. With Unsen theme

You can find Unsen theme on Themeforest via this link.

setTimeout(function() {
if(window.EComposer){
  window.EComposer.ajaxCartSuccess = function (data, form) {
    document.dispatchEvent(new CustomEvent('cart:refresh:opend'))
    $(".t4s-site-nav__icon.t4s-site-nav__cart a").click();
  };
}
}, 1000)

2. With other themes (which support the Cart Drawer function)

This is the code for those themes:

setTimeout(function() {
  if(window.EComposer){
      EComposer.ajaxCartSuccess = function(data,f){
        window.location.hash="ec-added-cart";
        window.location.reload();
      }
  }
}, 2000)
document.addEventListener('DOMContentLoaded', function() {
 
if(window.location.hash.includes('ec-added-cart')){
  setTimeout(function(){
    const cart = document.querySelector('.icon_cart a:not(.clicked)');
    if(cart) {
      cart.click();
      cart.classList.add('clicked');
      window.location.hash='';
    }
  },500);
}
})

Note: The red one (.icon_cart a) from the code above needs to be changed depending on each theme.

You can inspect the website (or press F12) to find a suitable selector. If you can’t do it by yourself, don’t hesitate to contact us via live chat.