EComposer blank friday campain

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

Author: An Do 5734 views

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. 

Note: You can only do this when your theme has the cart drawer function and when the pages in EComposer have Shopify Header enabled.

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. The Ajax cart extension is available on the paid plans only.

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), Unsen, Ocolus, and Gecko (version 6.x) themes of The4

You can find the Kalles and Unsen theme on Themeforest.

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

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

2. With the Debutify theme

You can download the Debutify theme here

document.addEventListener("DOMContentLoaded", function () {
setTimeout(function() {
  if(window.EComposer && window.ajaxCart && window.ajaxCart.load){
      EComposer.ajaxCartSuccess = function(data,f){
        ajaxCart.load();
      }
  }
}, 1000)
});

Or this code:

document.addEventListener("DOMContentLoaded", function () {

setTimeout(function() {

  if(window.EComposer ){

    console.log('uuuuuuuu')

      EComposer.ajaxCartSuccess = function(data,f){

        theme.ajaxCart.update()

      }

  }

}, 1000)

});

3. With the Origin theme of Shopify

You can download the Origin theme here

document.addEventListener("DOMContentLoaded", function () {

  setTimeout(function () {

    if (window.EComposer) {

      window.EComposer.ajaxCartSuccess = function (data, form) {

        const cart = document.querySelector("cart-notification") || document.querySelector("cart-drawer");

        const cartItems = document.querySelector("cart-drawer-items");

        document.querySelector("cart-drawer") && document.querySelector("cart-drawer").classList.remove('is-empty');

        fetch(`${routes.cart_url}?section_id=main-cart-items`)

          .then((response) => response.text())

          .then((responseText) => {

            const html = new DOMParser().parseFromString(responseText, "text/html");

            const sourceQty = html.querySelector("cart-items");

            cartItems.innerHTML = sourceQty.innerHTML;

            cart.renderContents(data);

          })

          .catch((e) => {

            console.error(e);

          });

      };

    }

  }, 1000);

});

4. With the Umino theme

You can download the Umino theme here


document.addEventListener('DOMContentLoaded', function() {
    setTimeout(function() {
        if(window.EComposer){
            const cart = document.querySelector('cart-notification');
            EComposer.ajaxCartSuccess = function(data,f){
                if(cart) {
                    fetch(`/?sections=form-mini-cart`)
                    .then((res) => res.text())
                    .then((res) => {
                        const t = JSON.parse(res);
                        data.sections = t;
                        cart.getSectionsToRender().forEach((e) => {
                            const n = document.getElementById(e.id),
                                o = new DOMParser().parseFromString(data.sections[e.id], "text/html");
                            n.innerHTML = o.querySelector("#form-mini-cart").innerHTML;
                            const i = cart.querySelector(".cart-countdown-time"),
                                s = o.querySelector(".cart-countdown-time");
                            i && s && ((i.innerHTML = s.innerHTML), cart.countdownTimer());
                        })
                        cart.cartAction();
                        cart.open();
                        cart && cart.classList.contains("is-empty") && cart.classList.remove("is-empty"),
                        Shopify.termsConditionsAction(),
                        BlsLazyloadImg.init();
                        fetch('/cart.json')
                        .then((res) => res.json())
                        .then((res) => {
                            document.querySelectorAll(".cart-count").forEach((t) => {
                                t.innerHTML = res.item_count;
                            })
                        })
                        
                    })
                }

            }
        }
    }, 2000)
})

5. With the Dawn theme of Shopify

You can use the same code for Dawn, Spotlight, Refresh, Sense, Craft, and free themes of Shopify.

/* DAWN */

document.addEventListener("DOMContentLoaded", function () {

  setTimeout(function () {

    if (window.EComposer) {

      window.EComposer.ajaxCartSuccess = function (data, form) {

        const cart = document.querySelector("cart-notification") || document.querySelector("cart-drawer");

        if (cart) {

          cart.renderContents(data);

        cart.classList.remove('is-empty');

        }

      };

    }

  }, 1000);

});

If the above code doesn’t work, you can try the below code:

document.addEventListener("DOMContentLoaded", function () {
	setTimeout(function () {
		let cart = document.querySelector("cart-drawer");
		let sections = ['cart-drawer', 'cart-icon-bubble'];
		if (window.EComposer && cart) {
			window.EComposer.handleClickEvent = function (btn, event, list = false) {
				event.preventDefault();
				const wrapper = btn.closest('.ecom-collection__product-form__actions');
				let quantity = 1;
				let el_quantity = null;
				if(wrapper){
					el_quantity = wrapper.querySelector('.ecom-collection__product-quantity-input');
				}
				if(el_quantity){
					quantity = el_quantity.value;
				}
				const submitButton = btn,
					_this = window.EComposer;
				if (submitButton) {
					submitButton.style.cursor = "pointer";
					submitButton.style.pointerEvents = "auto";
					submitButton.classList.add("ecom-ajax-loading");
				}
				_this.beforeAjaxCartSend(event.target);
				window
					.fetch(_this.routes.cart_add_url, {
						method: "POST",
						headers: {
							Accept: "application/json",
							"Content-Type": "application/json",
						},
						body: JSON.stringify({
							id: submitButton.dataset.id,
							quantity: quantity,
							sections: sections
						}),
					})
					.then((res) => res.json())
					.then((response) => {
						if (response.errors) {
							throw new Error(response.errors);
						}
						let { action, href, textAddedCart, target, messageAddedCart } =
							submitButton.dataset;
						if (submitButton) {
							submitButton.style.cursor = "pointer";
							submitButton.style.pointerEvents = "auto";
							submitButton.classList.remove(
								"ecom-ajax-loading",
								"ecom-loading"
							);
							submitButton.querySelector(
								".ecom-add-to-cart-text"
							).innerHTML = textAddedCart;
						}
						if (_this.onAjaxCartSuccess) {
							_this.onAjaxCartSuccess(response, event.target);
						}
		
						if (list && !_this.configs.ajax_cart.enable) {
							return setTimeout(function () {
								return (window.location.href = _this.routes.cart_url);
							}, 500);
						}
						switch (action) {
							case "cart":
								return setTimeout(function () {
									return (window.location.href =
										_this.routes.cart_url);
								}, 500);
							case "reload":
								return setTimeout(function () {
									return window.location.reload();
								}, 500);
							case "checkout":
								return setTimeout(function () {
									return (window.location.href =
										_this.routes.root_url + "checkout");
								}, 500);
							case "message":
								_this.showToast(messageAddedCart);
								break;
							case "link":
								if (href) {
									return setTimeout(function () {
										if (target === "_blank") {
											return window.open(href);
										} else {
											return (window.location.href = href);
										}
									}, 500);
								}
							default:
								_this.ajaxCartSuccess(response, event.target);
								break;
						}
					})
					.catch((e) => {
						window.alert(e.message);
						console.error(e);
						if (submitButton) {
							submitButton.style.cursor = "pointer";
							submitButton.style.pointerEvents = "auto";
							submitButton.classList.remove(
								"ecom-ajax-loading",
								"ecom-loading"
							);
						}
						_this.ajaxCartError(e, event.target);
					});
			};
			EComposer.ajaxCartSuccess = function (data, f) {
				cart.classList.remove('is-empty');
				cart.renderContents(data);
			};

		}
	}, 2000);
});

Or this code:

/* DAWN */

document.addEventListener("DOMContentLoaded", function () {

  setTimeout(function () {

    if (window.EComposer) {

      window.EComposer.ajaxCartSuccess = function (data, form) {

        const cart = document.querySelector("cart-notification") || document.querySelector("cart-drawer");

        if (cart) {

          cart.renderContents(data);

        cart.classList.remove('is-empty');

        }

      };

      EComposer.handleClickEvent = function (btn, event, list = false) {
        event.preventDefault();
        const wrapper = btn.closest('.ecom-collection__product-form__actions');
        let quantity = 1;
        let el_quantity = null;
        if(wrapper){
            el_quantity = wrapper.querySelector('.ecom-collection__product-quantity-input');
        }
        if(el_quantity){
            quantity = el_quantity.value;
        }
        const submitButton = btn,
            _this = EComposer;
        if (submitButton) {
            submitButton.style.cursor = "pointer";
            submitButton.style.pointerEvents = "auto";
            submitButton.classList.add("ecom-ajax-loading");
        }
        _this.beforeAjaxCartSend(event.target);
        window
            .fetch(_this.routes.cart_add_url, {
                method: "POST",
                headers: {
                    Accept: "application/json",
                    "Content-Type": "application/json",
                },
                body: JSON.stringify({
                    id: submitButton.dataset.id,
                    quantity: quantity,
                    sections: "cart-notification-product,cart-notification-button,cart-icon-bubble,cart-drawer"
                }),
            })
            .then((res) => res.json())
            .then((response) => {
                if (response.errors) {
                    throw new Error(response.errors);
                }
                let { action, href, textAddedCart, target, messageAddedCart } =
                    submitButton.dataset;
                if (submitButton) {
                    submitButton.style.cursor = "pointer";
                    submitButton.style.pointerEvents = "auto";
                    submitButton.classList.remove(
                        "ecom-ajax-loading",
                        "ecom-loading"
                    );
                    submitButton.querySelector(
                        ".ecom-add-to-cart-text"
                    ).innerHTML = textAddedCart;
                }
                if (_this.onAjaxCartSuccess) {
                    _this.onAjaxCartSuccess(response, event.target);
                }

                if (list && !_this.configs.ajax_cart.enable) {
                    return setTimeout(function () {
                        return (window.location.href = _this.routes.cart_url);
                    }, 500);
                }
                switch (action) {
                    case "cart":
                        return setTimeout(function () {
                            return (window.location.href =
                                _this.routes.cart_url);
                        }, 500);
                    case "reload":
                        return setTimeout(function () {
                            return window.location.reload();
                        }, 500);
                    case "checkout":
                        return setTimeout(function () {
                            return (window.location.href =
                                _this.routes.root_url + "checkout");
                        }, 500);
                    case "message":
                        _this.showToast(messageAddedCart);
                        break;
                    case "link":
                        if (href) {
                            return setTimeout(function () {
                                if (target === "_blank") {
                                    return window.open(href);
                                } else {
                                    return (window.location.href = href);
                                }
                            }, 500);
                        }
                    default:
                        _this.ajaxCartSuccess(response, event.target);
                        break;
                }
            })
            .catch((e) => {
                window.alert(e.message);
                console.error(e);
                if (submitButton) {
                    submitButton.style.cursor = "pointer";
                    submitButton.style.pointerEvents = "auto";
                    submitButton.classList.remove(
                        "ecom-ajax-loading",
                        "ecom-loading"
                    );
                }
                _this.ajaxCartError(e, event.target);
            });
    };

    }

  }, 1000);

});

6. With the December theme of Shopify

document.addEventListener("DOMContentLoaded", function () {

  setTimeout(function () {

    if (window.EComposer) {

      window.EComposer.ajaxCartSuccess = function (data, form) {

        setTimeout(function() {
            theme.miniCart.updateElements();
            theme.miniCart.generateCart();
        }, 200)

      };

    }

  }, 500);

});

7. With the Sense theme of Shopify

document.addEventListener("DOMContentLoaded", function () {
  setTimeout(function () {
    if (window.EComposer) {
      window.EComposer.ajaxCartSuccess = function (data, form) {
        const cart = document.querySelector("cart-notification") || document.querySelector("cart-drawer");
        const cartItems = document.querySelector("cart-drawer-items");
        document.querySelector("cart-drawer") && document.querySelector("cart-drawer").classList.remove("is-empty");
        fetch(`${routes.cart_url}?section_id=main-cart-items`)
          .then((response) => response.text())
          .then((responseText) => {
            const html = new DOMParser().parseFromString(responseText, "text/html");
            const sourceQty = html.querySelector("cart-items");
            cartItems.innerHTML = sourceQty.innerHTML;
            cart.renderContents(data);
          })
          .catch((e) => {
            console.error(e);
          });
      };
    }
  }, 1500);
});

or this code if a problems happen

document.addEventListener("DOMContentLoaded", function () {

  setTimeout(function () {

    if (window.EComposer && window.routes) {

      window.EComposer.ajaxCartSuccess = function (data, form) {

        const cart = document.querySelector("cart-notification") || document.querySelector("cart-drawer");

        const cartItems = document.querySelector("cart-drawer-items");

        document.querySelector("cart-drawer") && document.querySelector("cart-drawer").classList.remove("is-empty");

        fetch(${routes.cart_url}?section_id=main-cart-items)

          .then((response) => response.text())

          .then((responseText) => {

            const html = new DOMParser().parseFromString(responseText, "text/html");

            const sourceQty = html.querySelector("cart-items");

            cartItems.innerHTML = sourceQty.innerHTML;

            cart.renderContents(data);

          })

          .catch((e) => {

            console.error(e);

          });

      };

    }

  }, 1500);

});

8. With the Upscale theme

You can download the theme here

document.addEventListener("DOMContentLoaded", function () {
    setTimeout(function () {
      if (window.EComposer) {
        const btn = document.querySelector("#HeaderCartIcon button");
        let cart =
          document.querySelector("loess-cart-notification") ||
          document.querySelector("loess-cart-drawer-items");
        function getSectionsToRender() {
          return [
            {
              id: "MainCartItems",
              section: "cart-drawer-items",
              selector: ".cart-items",
            },
            {
              id: "HeaderCartIcon",
              section: "header-cart-icon",
              selector: ".shopify-section",
            },
            {
              id: "FreeShippingText",
              section: "free-shipping-text",
              selector: ".shopify-section",
            },
            {
              id: "CartDrawerTotalPrice",
              section: "cart-total-price",
              selector: ".shopify-section",
            },
          ];
        }
        let sections = getSectionsToRender().map((section) => section.section);
        window.EComposer.ajaxCart = function () {
            var _this = window.EComposer;
            var handleEvent = (event) => {
                event.preventDefault();
                if (!event.target.querySelector('[name="id"]')) {
                    if (window.document.querySelector("#admin-bar-iframe")) {
                        alert(
                            'Please drag Variant picker element to this section to allow the "Add to cart" feature working. This message only show for owner\'s store'
                        );
                        return false;
                    } else {
                        return false;
                    }
                }
                var submitButton = event.target.querySelector(
                    ".ecom-product-single__add-to-cart--submit.ecom-clicked"
                );
                if(!submitButton) {
                    submitButton = event.target.querySelector(
                        ".ecom-product-single__add-to-cart--submit"
                    );
                }
    
                if (submitButton) {
                    submitButton.style.cursor = "not-allowed";
                    submitButton.style.pointerEvents = "none";
                    submitButton.classList.add("ecom-ajax-loading", "ecom-loading");
                }
                _this.beforeAjaxCartSend(event.target);
                let formData = new FormData(event.target);
                //Params to open cart draw dawn theme
                formData.append(
                    "sections",
                    sections
                );
                window
                    .fetch(_this.routes.cart_add_url, {
                        method: "POST",
                        headers: {
                            Accept: "application/json",
                        },
                        body: formData,
                    })
                    .then((res) => res.json())
                    .then((response) => {
                        if (response.errors) {
                            throw new Error(response.errors);
                        }
                        let {
                            action,
                            href,
                            textAddedCart,
                            target,
                            messageAddedCart,
                        } = submitButton.dataset;
                        if (submitButton) {
                            submitButton.style.cursor = "pointer";
                            submitButton.style.pointerEvents = "auto";
                            submitButton.classList.remove(
                                "ecom-ajax-loading",
                                "ecom-loading"
                            );
                            if (
                                submitButton.querySelector(".ecom-add-to-cart-text")
                            ) {
                                submitButton.querySelector(
                                    ".ecom-add-to-cart-text"
                                ).innerHTML = textAddedCart;
                            }
                        }
                        if (_this.onAjaxCartSuccess) {
                            _this.onAjaxCartSuccess(response, event.target);
                        }
                        let routes = _this.routes;
                        switch (action) {
                            case "cart":
                                return setTimeout(function () {
                                    window.location.href = routes.cart_url;
                                }, 500);
                            case "reload":
                                return setTimeout(function () {
                                    return window.location.reload();
                                }, 500);
    
                            case "checkout":
                                return setTimeout(function () {
                                    return (window.location.href =
                                        routes.root_url +
                                        (routes.root_url === "/" ? "" : "/") +
                                        "checkout");
                                }, 500);
                            case "message":
                                _this.showToast(messageAddedCart);
                                break;
                            case "link":
                                if (href) {
                                    setTimeout(function () {
                                        if (target === "_blank") {
                                            return window.open(href);
                                        } else {
                                            return (window.location.href = href);
                                        }
                                    }, 500);
                                }
                            default:
                                _this.ajaxCartSuccess(response, event.target);
                                break;
                        }
                    })
                    .catch((e) => {
                        if (submitButton) {
                            submitButton.style.cursor = "pointer";
                            submitButton.style.pointerEvents = "auto";
                            submitButton.classList.remove(
                                "ecom-ajax-loading",
                                "ecom-loading"
                            );
                        }
                        _this.ajaxCartError(e, event.target);
                    });
                return false;
            };
    
            //Handle ATC single product
            const submitButtons = document.querySelectorAll(
                ".ecom-product-single__add-to-cart--submit"
            );
            if(submitButtons.length) {
                submitButtons.forEach(function(btn) {
                    btn.addEventListener('click', function() {
                        submitButtons.forEach(function(b) {
                            b.classList.remove('ecom-clicked');
                        })
                        btn.classList.add('ecom-clicked');
                    })
                });
            }
    
            document.body.addEventListener("submit", function (e) {
                if (
                    e.target.classList.contains("ecom-product-form") &&
                    e.target.nodeName === "FORM"
                ) {
                    e.preventDefault();
                    e.stopPropagation();
                    handleEvent.bind(this)(e);
                    return false;
                }
            });
            _this.handleATCList();
            let $elements = document.querySelectorAll(
                ".ecom-ajax-cart-simple[data-id]"
            );
            $elements.forEach(function ($element) {
                $element.addEventListener("click", function (e) {
                    _this.handleClickEvent(this, e);
                });
            });
        };
        window.EComposer.ajaxCart();
        EComposer.ajaxCartSuccess = function (data, f) {
            if(data.sections['cart-drawer-items']) {
                cart.renderCartItems(data);
                setTimeout(() => {
                  document
                    .querySelector(
                      `[aria-controls="${cart.closest("loess-drawer").id}"`
                    )
                    .click();
                }, 100);
            }
            else return;
        };
      }
    }, 1000);
  });
  

If the above code doesn’t work, please try this code:

document.addEventListener('DOMContentLoaded', function() {
  setTimeout(function () {
    if (window.EComposer) {
      window.EComposer.ajaxCartSuccess = function (data, form) {
        const cart = document.querySelector("loess-drawer#CartDrawer");
        const cartItems = cart.querySelector("loess-cart-drawer-items");
        fetch(`/?sections=cart-drawer-items,cart-total-price,free-shipping-text,header-cart-icon`)
        .then((res) => res.json())
        .then((response) => {
          data.sections = response;
          cartItems.renderCartItems(data);
          setTimeout(() => {
              document.querySelector(`[aria-controls="${cartItems.closest('loess-drawer').id}"`).click();
          }, 100);
        });
      };
  
    }
  }, 1000);
})

9. With the Enterprise theme

You can download the theme here

document.addEventListener("DOMContentLoaded", function () {
    setTimeout(function () {
      if (window.EComposer) {
        const cart =
          document.querySelector("cart-notification") ||
          document.querySelector("cart-drawer");
        let sections = "cart-icon-bubble";
        sections += `,${cart
          .closest(".shopify-section")
          .id.replace("shopify-section-", "")}`;
        let sectionTheme = `${cart
          .closest(".shopify-section")
          .id.replace("shopify-section-", "")}`;
        window.EComposer.ajaxCartSuccess = function (data, form) {
          fetch(`/?sections=cart-icon-bubble,${sectionTheme}`)
          .then(res=>res.json())
          .then(res => {
            data.sections = res;
            const cart =
              document.querySelector("cart-notification") ||
              document.querySelector("cart-drawer");

            if (cart) {
              cart.renderContents(data);
            }
          })
          
        };
      }
    }, 1000);
  });
  

10. With the Stiletto theme

document.addEventListener("DOMContentLoaded", function () {
	setTimeout(function () {
		let cart = document.querySelector(".quick-cart__wrapper");
		let sections = ['cart-drawer', 'cart-icon-bubble'];
		if (window.EComposer && cart) {
			window.EComposer.handleClickEvent = function (btn, event, list = false) {
				event.preventDefault();
				event.stopPropagation();
				const wrapper = btn.closest('.ecom-collection__product-form__actions');
				let quantity = 1;
				let el_quantity = null;
				if(wrapper){
					el_quantity = wrapper.querySelector('.ecom-collection__product-quantity-input');
				}
				if(el_quantity){
					quantity = el_quantity.value;
				}
				const submitButton = btn,
					_this = window.EComposer;
				if (submitButton) {
					submitButton.style.cursor = "pointer";
					submitButton.style.pointerEvents = "auto";
					submitButton.classList.add("ecom-ajax-loading");
				}
				_this.beforeAjaxCartSend(event.target);
				window
					.fetch(_this.routes.cart_add_url, {
						method: "POST",
						headers: {
							Accept: "application/json",
							"Content-Type": "application/json",
						},
						body: JSON.stringify({
							id: submitButton.dataset.id,
							quantity: quantity,
							sections: sections
						}),
					})
					.then((res) => res.json())
					.then((response) => {
						if (response.errors) {
							throw new Error(response.errors);
						}
						let { action, href, textAddedCart, target, messageAddedCart } =
							submitButton.dataset;
						if (submitButton) {
							submitButton.style.cursor = "pointer";
							submitButton.style.pointerEvents = "auto";
							submitButton.classList.remove(
								"ecom-ajax-loading",
								"ecom-loading"
							);
							submitButton.querySelector(
								".ecom-add-to-cart-text"
							).innerHTML = textAddedCart;
						}
						if (_this.onAjaxCartSuccess) {
							_this.onAjaxCartSuccess(response, event.target);
						}
		
						if (list && !_this.configs.ajax_cart.enable) {
							return setTimeout(function () {
								return (window.location.href = _this.routes.cart_url);
							}, 500);
						}
						switch (action) {
							case "cart":
								return setTimeout(function () {
									return (window.location.href =
										_this.routes.cart_url);
								}, 500);
							case "reload":
								return setTimeout(function () {
									return window.location.reload();
								}, 500);
							case "checkout":
								return setTimeout(function () {
									return (window.location.href =
										_this.routes.root_url + "checkout");
								}, 500);
							case "message":
								_this.showToast(messageAddedCart);
								break;
							case "link":
								if (href) {
									return setTimeout(function () {
										if (target === "_blank") {
											return window.open(href);
										} else {
											return (window.location.href = href);
										}
									}, 500);
								}
							default:
								_this.ajaxCartSuccess(response, event.target);
								break;
						}
					})
					.catch((e) => {
						window.alert(e.message);
						console.error(e);
						if (submitButton) {
							submitButton.style.cursor = "pointer";
							submitButton.style.pointerEvents = "auto";
							submitButton.classList.remove(
								"ecom-ajax-loading",
								"ecom-loading"
							);
						}
						_this.ajaxCartError(e, event.target);
					});
			};
			window.EComposer.ajaxCartSuccess = function (data, form) {
				const selectors$n = {
					cartWrapper: ".quick-cart__wrapper",
					innerContainer: ".quick-cart__container",
					overlay: ".quick-cart__overlay",
					closeButton: ".quick-cart__close-icon",
					footer: ".quick-cart__footer",
					items: ".quick-cart__items",
					cartError: ".quick-cart__item-error",
					form: ".quick-cart__form",
					cartCount: ".quick-cart__heading sup",
					subtotal: ".quick-cart__footer-subtotal span",
					quantityInput: ".quick-cart .quantity-input__input",
					quantityItem: "[data-input-item]",
					discounts: ".quick-cart__item-discounts"
				};
				let url = "".concat(theme.routes.cart.base, "?section_id=quick-cart"),
					cartCounts = document.querySelectorAll('[data-js-cart-count]');
				function updateInnerHTML(selector, doc) {
					var updatedItem = n$2(selector, doc);
					var oldItem = n$2(selector);
				  
					if (updatedItem && oldItem) {
					  oldItem.innerHTML = updatedItem.innerHTML;
					}
				}
				function adjustItemPadding() {
					var items = n$2(selectors$n.items, this.container);
					if (!items) return; // Ensure cart items accounts for the height of cart footer
				
					var footer = n$2(selectors$n.footer, this.container);
					items.style.paddingBottom = "".concat(footer.clientHeight, "px");
				}
				let delayOffset = (function (node, items) {
					let offsetStart = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
					var delayOffset = offsetStart;
					items.forEach(function (selector) {
					  var items = t$2(selector, node);
					  items.forEach(function (item) {
						item.style.setProperty("--delay-offset-multiplier", delayOffset);
						delayOffset++;
					  });
					});
				});
				let selectors$15 = {
					animationItem: ".animation--quick-cart-items > *, .animation--quick-cart-footer"
				};
				function n$2(n,t){return void 0===t&&(t=document),t.querySelector(n)}function t$2(n,t){return void 0===t&&(t=document),[].slice.call(t.querySelectorAll(n))}function c$1(n,t){return Array.isArray(n)?n.forEach(t):t(n)}function r$2(n){return function(t,r,e){return c$1(t,function(t){return t[n+"EventListener"](r,e)})}}function e$2(n,t,c){return r$2("add")(n,t,c),function(){return r$2("remove")(n,t,c)}}function o$2(n){return function(t){var r=arguments;return c$1(t,function(t){var c;return (c=t.classList)[n].apply(c,[].slice.call(r,1))})}}function u$1(n){o$2("add").apply(void 0,[n].concat([].slice.call(arguments,1)));}function i$1(n){o$2("remove").apply(void 0,[n].concat([].slice.call(arguments,1)));}function l(n){o$2("toggle").apply(void 0,[n].concat([].slice.call(arguments,1)));}function a$1(n,t){return n.classList.contains(t)}
				fetch(url)
				  .then((response => response.text()))
				  .then((response) => {
					var container = document.createElement("div");
					container.innerHTML = response;
					var responseInnerContainer = n$2(selectors$n.innerContainer, container);
					var cartHasItems = Boolean(n$2(selectors$n.items, cart.parentNode));
					var responseHasItems = Boolean(n$2(selectors$n.items, container)); // Cart has items and needs to update them
					if (responseHasItems && cartHasItems) {

						// Render cart items
						updateInnerHTML("".concat(selectors$n.cartWrapper, " ").concat(selectors$n.items), container);

						adjustItemPadding(); // Render cart count


						updateInnerHTML("".concat(selectors$n.cartWrapper, " ").concat(selectors$n.cartCount), container); // Render subtotal

						updateInnerHTML("".concat(selectors$n.cartWrapper, " ").concat(selectors$n.subtotal), container); // Render promotions

						updateInnerHTML("".concat(selectors$n.cartWrapper, " ").concat(selectors$n.discounts), container); // Handle form scroll state

						var form = n$2(selectors$n.form, cart.parentNode);
						var previousScrollPosition = form.scrollTop || 0;
						form.scrollTop = previousScrollPosition;
						delayOffset(cart.parentNode, [selectors$15.animationItem]);
					}
					else {
						let innerContainer = n$2(selectors$n.innerContainer, cart.parentNode);
						innerContainer.innerHTML = responseInnerContainer.innerHTML;
					}
					fetch('/cart.js')
					.then(res => res.json())
					.then(res => {
						cartCounts.forEach(cartCount => {
							cartCount.innerHTML = res.item_count;
						})
					});
					document.documentElement.classList.add('prefers-reduced-motion');
					cart.classList.add('active')
				})
				.catch((e) => {
					console.error(e);
				});
			};
		}
	}, 2000);
});

11. With the Basel theme

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('.main-header .basel-cart-icon a:not(.clicked)');
    console.log(cart);
    if(cart) {
      cart.click();
      cart.classList.add('clicked');
         
      window.location.hash='';
       
    }
      
  },1000);
 
}
})

12. With the Uminex theme

document.addEventListener('DOMContentLoaded', function() {
    setTimeout(function() {
        if(window.EComposer) {
            window.EComposer.ajaxCartSuccess = function(data, form) {
                console.log('XXX add');
                $('body').trigger('update:miniCart');
                $('.push_side[data-id="#js_cart_popup"]').trigger('click');
            }
        }
    }, 1000);
})

12. With the Focal theme

You can download the Focal theme here

document.addEventListener("DOMContentLoaded",function() {
    setTimeout(function() {
        if(window.EComposer) {
            window.EComposer.ajaxCartSuccess = function(data, form) {
                document.documentElement.dispatchEvent(new CustomEvent('cart:refresh', {
                    bubbles: true
                }));
                document.getElementById('mini-cart').open = true;
                fetch('/cart.json').then(res => res.json()).then(cart => {
                    document.querySelector('cart-count').innerText = cart.item_count
                })
            }
        }
    }, 1000);
})

13. With the Symmetry theme

You can download the theme here

document.addEventListener("DOMContentLoaded", function () {
  setTimeout(function() {
    if(window.EComposer){
        EComposer.ajaxCartSuccess = function(data,f){
        document.documentElement.dispatchEvent(
      new CustomEvent('theme:cartchanged', { bubbles: true, cancelable: false, detail: { openDrawer: true } }));
    }
    }
  }, 2000)
})

The below code is for Symmetry 7.x versions:

document.addEventListener("DOMContentLoaded", function () {
  setTimeout(function() {
    const cart = document.querySelector('cart-drawer');
    const header = document.querySelector('page-header');
    const headerSection = header.dataset.sectionId
    const cartSection = cart.dataset.sectionId;
    if(window.EComposer){
        EComposer.ajaxCartSuccess = function(data,f){
            fetch(`/?sections=${cartSection},${headerSection}`)
            .then((res) => res.text())
            .then((res) => {
                const sections = JSON.parse(res);
                cart.querySelector('cart-form').refreshFromHtml(sections[cartSection]);
                const template = document.createElement('template');
                const selectorForUpdate = '.logo-area__right'
                template.innerHTML = sections[headerSection];
                header.querySelector(selectorForUpdate).innerHTML = template.content.querySelector(selectorForUpdate).innerHTML;;
                document.querySelector('.js-cart-drawer').open();
            })
        }
    }
  }, 1000)
})

14. With the Be Yours theme

document.addEventListener("DOMContentLoaded", function () {
    
  setTimeout(function() {

    if(window.EComposer){
        const sticky = document.querySelector('.ecom-sticky__atc.ecom-sticky-show');
        EComposer.ajaxCartSuccess = function(data,f){
            fetch('/?sections=mini-cart,cart-icon-bubble,mobile-cart-icon-bubble')

            .then((response) => response.json())

            .then((res) => {

                const minicart  = document.querySelector('mini-cart');
                data.sections = res
                
                minicart.renderContents(data);

            })

            .catch((e) => {

                console.error(e);

            })
            .finally(function() {
                if(sticky) {
                    sticky.style.display = 'none';
                }
            })


        }

    }

  }, 2000)

})

15. With the Refresh – Spotlight theme

document.addEventListener("DOMContentLoaded", function () {

  setTimeout(function () {

    if (window.EComposer) {

      window.EComposer.ajaxCartSuccess = function (data, form) {

        const cart = document.querySelector("cart-notification") || document.querySelector("cart-drawer");

        if (cart) {
            fetch('/?sections=cart-notification-product,cart-notification-button,cart-icon-bubble,cart-drawer')
            .then((res) => res.json())
            .then((res) => {
                console.log(res);
                data.sections = res;
                cart.renderContents(data);
                cart.classList.remove('is-empty');
            })
        }

      };
    }

  }, 1000);

});

16. With the Ecomus theme of The4

document.addEventListener("DOMContentLoaded", function () {
  setTimeout(function () {
    if (window.EComposer) {
      window.EComposer.ajaxCartSuccess = function (data, form) {
        document.getElementById('CartDrawer')?.openDialog();
        document.documentElement.dispatchEvent(new CustomEvent('cart:refresh', {
            bubbles: true
        }));
      };
    }
  }, 1500);
});

17. With the Impulse theme

You can download the Impulse theme here

/* Impulse */
document.addEventListener("DOMContentLoaded", function () {
  setTimeout(function () {
    if (window.EComposer) {
      window.EComposer.ajaxCartSuccess = function (data, form) {
        document.dispatchEvent(new CustomEvent("ajaxProduct:added"));
      };
    }
  }, 1000);
});

With the impulse version 2-5-2

/* Impulse */
document.addEventListener("DOMContentLoaded", function () {
  setTimeout(function () {
    if (window.EComposer) {
        console.log('ggggggg');
      window.EComposer.ajaxCartSuccess = function (data, form) {
        const cart = new window.theme.CartDrawer();
        window.theme.cart.getCart().then(function(data) {
            cart.buildCart(data, true);
        })
      };
    }
  }, 1000);
});

18. With the Prestige theme

document.addEventListener("DOMContentLoaded", function () {
  setTimeout(function () {
    if (window.EComposer) {
      window.EComposer.ajaxCartSuccess = function (data, form) {
        console.log('%cECOM DEBUG - VAR: data', 'color: #6dec6d', data)
        document.dispatchEvent(new CustomEvent("product:added", {
          bubbles: !0,
          detail: {
            variant: data.variant_id,
            quantity: 1
          }
        }));
      };
    }
  }, 1500);
});

Or the below code:

document.addEventListener("DOMContentLoaded", function () {

      setTimeout(function () {

        if (window.EComposer) {

          window.EComposer.ajaxCartSuccess = async function (data, form) {

              let sectionsToBundle = [];

              document.documentElement.dispatchEvent(new CustomEvent("cart:prepare-bundled-sections", { bubbles: true, detail: { sections: sectionsToBundle } }));

              const response = fetch(/?sections=${sectionsToBundle.join(',')})

              .then(res => res.json())

              .then(async (res) => {

                console.log('res', res)

                const cartContent = await (await fetch(${Shopify.routes.root}cart.js)).json();

                cartContent["sections"] = res;

                console.log('cartContent', cartContent);

                document.documentElement.dispatchEvent(new CustomEvent("cart:change", {

                    bubbles: true,

                    detail: {

                      baseEvent: "variant:add",

                      onSuccessDo: null,

                      cart: cartContent

                    }

                }));

              })

        };

        }

      }, 1500);

    });

19. With the Minimog theme

document.addEventListener("DOMContentLoaded", function () {
  setTimeout(function () {
    if (window.EComposer) {
      EComposer.ajaxCartSuccess = function (data, f) {
        const cart = document.querySelector('m-cart-drawer');
        if(cart) {
            cart.renderContents(data)
            cart.open();
            cart.getCart().then((t=>{
                    cart.classList.toggle("m-cart--empty", 0 === t.item_count),
                    cart.updateCartCount(t.item_count)
                }
            ))
        }
      }
    }
  }, 1000)
});

20. With the Norman theme

You can buy this theme here

document.addEventListener("DOMContentLoaded", function () {

  setTimeout(function () {

    if (window.EComposer) {

      window.EComposer.ajaxCartSuccess = function (data, form) {
        window.theme.miniCart.updateElements()
        window.theme.miniCart.generateCart();
      };

    }

  }, 1000);

});

21. With the Reformation theme

document.addEventListener("DOMContentLoaded", function () {

  setTimeout(function () {

    if (window.EComposer) {

      window.EComposer.ajaxCartSuccess = function (data, form) {
        function getSectionsToRender() {
            return [{
                id: 'Cart',
                section: 'main-cart',
                selector: '.thb-cart-form'
            },
            {
                id: 'Cart-Drawer',
                section: 'cart-drawer',
                selector: '.cart-drawer'
            },
            {
                id: 'cart-drawer-toggle',
                section: 'cart-bubble',
                selector: '.thb-item-count'
            }];
        }
        function getSectionInnerHTML(html, selector = '.shopify-section') {
            return new DOMParser()
                .parseFromString(html, 'text/html')
                .querySelector(selector).innerHTML;
        }
        function renderContents(parsedState) {
          getSectionsToRender().forEach((section => {
            if (!document.getElementById(section.id)) {
              return;
            }
            const elementToReplace = document.getElementById(section.id).querySelector(section.selector) || document.getElementById(section.id);
            elementToReplace.innerHTML = getSectionInnerHTML(parsedState.sections[section.section], section.selector);
            if (typeof CartDrawer !== 'undefined') {
              new CartDrawer();
            }
            if (typeof Cart !== 'undefined') {
              new Cart().renderContents(parsedState);
            }
          }));
    
    
          if (document.getElementById('Cart-Drawer')) {
            document.getElementById('Cart-Drawer').classList.add('active');
            document.body.classList.add('open-cart');
            document.body.classList.add('open-cc');
            if (document.getElementById('Cart-Drawer').querySelector('.product-recommendations--full')) {
              document.getElementById('Cart-Drawer').querySelector('.product-recommendations--full').classList.add('active');
            }
            dispatchCustomEvent('cart-drawer:open');
          }
        }
        fetch('/?sections=cart-bubble,cart-drawer,main-cart')
        .then((res) => res.json())
        .then((res) => {
            console.log(res);
            data.sections = res;
            renderContents(data);
        })

      };
    }

  }, 1000);

});

22. With the Ella theme

document.addEventListener("DOMContentLoaded", function () {
  setTimeout(function () {
    if (window.EComposer) {
      window.EComposer.ajaxCartSuccess = function (data, form) {
        window.halo.initSidebarCart()
        fetch('/cart.json')
        .then(res => res.json())
        .then((res) => {
            window.halo.updateSidebarCart(res);
            window.halo.updateCart(res);
            document.querySelector('body').classList.add('cart-sidebar-show')
        })
       
      };
    }
  }, 1500);
});

Then open the Theme.js file and add this code to: window.halo = halo;

23. With the Flow theme

document.addEventListener("DOMContentLoaded", function () {

    setTimeout(function () {

      if (window.EComposer) {

        window.EComposer.ajaxCartSuccess = async function (data, form) {

            const i = await window.fetch(/cart?view=compare);

              if (!i.ok) return !1;

              const o = await i.json();

              wetheme.toggleRightDrawer("cart", !0, { cart: o })

        };

      }

    }, 1000);

  });

24. With the Yuva theme

document.addEventListener("DOMContentLoaded", function () {

    setTimeout(function () {

      if (window.EComposer) {

        window.EComposer.ajaxCartSuccess = async function (data, form) {

            $("body").find("[data-side-drawer]").attr("class", "yv_side_drawer_wrapper");

            $("body").find("[data-drawer-title]").html(cartTitleLabel);

            $("body").find("[data-side-drawer]").attr("id", "mini__cart");

            $("body").find("[data-side-drawer]").addClass("mini_cart");

            $("body").removeClass("quickview-open");

            $("body").addClass("side_Drawer_open");

            jQuery.getJSON(cartUrl, function (a, e) {

              buildCart(a, !0);

            });

            

        };

      }

    }, 1000);

  });

25. With the Taiga theme

document.addEventListener("DOMContentLoaded", function () {

  setTimeout(function () {

    if (window.EComposer) {

      window.EComposer.ajaxCartSuccess = function (data, form) {

        const cartItems = document.querySelector("cart-items");
        if(cartItems) {
          cartItems.renderAndShowItems()
        }
      };

    }

  }, 500);

});

26. With the Elessi theme of The4 Company

document.addEventListener("DOMContentLoaded", function () {
    var _cart_upsell = $('[data-cart-upsell-js]'),
        _cart_upsell_length = _cart_upsell.length;
    function miniCartUpsell(id) {

        if (id == 19041994) {
            // id = localStorage.getItem('nt_cartt4id') || _cart_upsell.data('id')
            id = _cart_upsell.data('id')
        }
        //console.log(id.length)
        if (_cart_upsell_length == 0 || id.length == 0) return;

        var limit = _cart_upsell.data('limit'),
            baseUrl = _cart_upsell.data('baseurl'),
            url = baseUrl + '?section_id=mini_cart_upsell&product_id=' + id + '&limit=' + limit;

        fetch(url).then(function (response) {
            return response.text();
        }).then(function (section) {
            //console.log('section',section);
            var recommendationsMarkup = $(section).html();
            if (recommendationsMarkup.trim() === '') {
                return;
            }
            _cart_upsell.html(recommendationsMarkup);
            body.trigger('refresh_currency');
            var _el = _cart_upsell.find('[data-flickity]');
            if (_el.length == 0) return;
            geckoShopify.refresh_flickity(_el);
            setTimeout(function () { _el.flickity('reloadCells') }, 250);
            setTimeout(function () { _el.flickity('reloadCells') }, 500);
            //localStorage.setItem('nt_cartt4id', id);

        });
    };
    setTimeout(function () {
        if (window.EComposer) {
            window.EComposer.ajaxCartSuccess = function (data, form) {
                var id = 19041994;
                if (data.product_id != undefined) {
                    id = data.product_id;
                } else if (data.items != undefined) {
                    id = data.items[0].product_id;
                }
                geckoShopify.onCartUpdate(1, 1, id);
                miniCartUpsell(id);
                if (id != '19041994') {
                    var el = $('.nt_stock_page[data-prid="' + id + '"]'),
                        qty = data.quantity;
                    geckoShopify.progressbarUpdateATC(el, qty);
                }
                $('body').trigger('CartUpdateSuccess');
            };
        }
    }, 1500);
});

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

This is the code for those themes:

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

Note: The red one (.button#CartButton) 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.

28. With the Upcart app

document.addEventListener("DOMContentLoaded", function () {
  setTimeout(function () {
    if (window.EComposer) {
      window.EComposer.ajaxCartSuccess = function (data, form) {
       return true;
      };
    }
  }, 1500);
});

29. With the Canopy theme

document.addEventListener("DOMContentLoaded", function () {

  setTimeout(function () {
    if (window.EComposer) {
      EComposer.ajaxCartSuccess = function (data, f) {
        const cart = document.querySelector('cart-drawer');
        const section = cart.closest('.shopify-section');
        const idSection = section.id.match(/\d+/gm)
        if(idSection) {
            fetch(`?sections=sections--${idSection[0]}__cart-drawer,cart-icon-bubble`)
            .then((response) => response.text())

            .then((responseText) => {

                data.sections = JSON.parse(responseText);
                cart.renderContents(data);
            })
        }
      }
    }
  }, 2000);
  document.addEventListener('ecom:quickview:init', function (e) {
    window.EComposer.ajaxCart();
  })
})

30. With the Warehouse theme


document.addEventListener('DOMContentLoaded', function () {
  setTimeout(function () {
    if (window.EComposer) {
      window.EComposer.ajaxCartSuccess = function (data, form) {
        if (window.ECGetCart) {
          window.ECGetCart._onCartRefresh().then(function () {
            if (window.theme.pageType !== 'cart') {
              // If we don't have the sticky header enabled, we scroll to top to make sure it is visible
              if (window.theme.cartType === 'drawer' && !_window.ECGetCart.options['useStickyHeader']) {
                window.scrollTo({
                  top: 0,
                  behavior: 'smooth'
                });
              }
              if (window.theme.pageType !== 'cart' && window.theme.cartType === 'drawer') {
                window.ECGetCart._openMiniCart();
              }
            }
          });
        }
      }
    }
  }, 1000)
})

31. With the Woodstock theme


document.addEventListener("DOMContentLoaded", function () {
  setTimeout(function() {
    if(window.EComposer){
        const cart = document.querySelector('cart-drawer');
        if(cart.classList.contains('is-empty')) cart.classList.remove('is-empty')
        EComposer.ajaxCartSuccess = function(data,f){
            cart.renderContents(data);
        }
    }
  }, 1000)
})

32. With the Impact theme

document.addEventListener("DOMContentLoaded", function () {
  setTimeout(function () {
    if (window.EComposer) {
        const cart = document.querySelector('cart-drawer')
      window.EComposer.ajaxCartSuccess = function (data, form) {
         document.dispatchEvent(new CustomEvent("cart:refresh"));
         if(cart) {
            cart.show();
         }
      };
    }
  }, 1500);
});

33. With the Label theme

document.addEventListener("DOMContentLoaded", function () {
  setTimeout(function() {
    if(window.EComposer){
        EComposer.ajaxCartSuccess = function(data,f){
            fetch('/cart.js')
            .then(res => res.json())
            .then(res => {
                document.body.dispatchEvent(new CustomEvent('label:modalcart:itemcountupdate', {
                    detail: {
                        count: res.item_count
                    }
                }));
                document.body.dispatchEvent(new CustomEvent("label:modalcart:afteradditem"))
                ThemeModule_CartDrawer()._getState(function () {
                    Spruce.store('drawer').cartDrawerOpen = true;
                });
            });
            
        }
    }
  }, 2000)
})

Leave a Comment

Enjoy a free 3-day trial. Then get your first month for $1. Try Now.