Skip to main content

Popular shopify themes refresh cart event

· 2 min read
Phạm Quyết Thắng
Phạm Quyết Thắng
Fullstack developer

Shopify Concept theme ( RoarTheme )​

Trigger cart drawer to update

document.dispatchEvent(new CustomEvent('cart:refresh', {
  bubbles: true, detail: { open: true }
}));

=> full doc

Symmetry theme, Enterprise theme ( Clean Canvas Ltd )​

document.dispatchEvent(new CustomEvent('dispatch:cart-drawer:refresh', {
    bubbles: true
}));

document.dispatchEvent(new CustomEvent('dispatch:cart-drawer:open'));

=> full doc

Shopify Impulse theme​

How can I refresh the cart drawer in the Impulse theme?

var cart = new theme.CartDrawer
cart.init()
cart.open();

Motion theme ( Archetype Themes )​

From v6.0.0:

document.dispatchEvent(new CustomEvent('cart:build'));

=> full doc

Maestrooo themes common​

document.documentElement.dispatchEvent(new CustomEvent('cart:refresh', {
  bubbles: true
}));

Shopify Focal theme ( Maestrooo themes )​

document
  .querySelector("cart-drawer")
  ._rerenderCart(
    new CustomEvent("cart:refresh", { bubbles: true, detail: {} }),
  );
document.querySelector("cart-drawer").open = true;

Shopify Prestige theme​

document.dispatchEvent(
  new CustomEvent("product:added", { bubbles: true, detail: { quantity: 1 } }),
);

Shopity Stiletto theme​

document.dispatchEvent(
    new CustomEvent("apps:product-added-to-cart", { bubbles: true }),
);

Any theme use Xboost Slider Cart App​

document.dispatchEvent(
    new CustomEvent("xboost-need-refresh-and-open-cart", { bubbles: true }),
);

Any theme use Upcart App​

document.dispatchEvent(
    new CustomEvent("apps:product-added-to-cart", { bubbles: true }),
);

Common free theme build by Shopify​

fetch("/?section_id=cart-drawer", {
      method: "GET",
      headers: {
        "Content-Type": "text/html",
      },
    })
      .then((response) => response.text())
      .then((cartHtml) => {
        const cartElement = document.createElement("div");
        cartElement.innerHTML = cartHtml;
        const cartDrawerContent = cartElement.querySelector("cart-drawer");
        if (cartDrawerContent?.outerHTML) {
          if (!cartIcon) {
            cartDrawerContent.classList.add("active");
            cartDrawerContent.classList.add("animated");
          }
          cartDrawer.outerHTML = cartDrawerContent.outerHTML;
        }
      })