Refresh cart UI

Use this guide when a custom script changes the cart and you need Ascent to refresh the visible cart UI.

What usually needs refreshing

Ascent cart UI is split into sections. A custom script usually refreshes one or more of these areas:

• cart-icon-bubble: the cart icon count in the header.

• Cart-Drawer: the shopping cart drawer content.

• Main-Cart: the cart page content.

Refresh after a cart change

When your script changes the cart through Shopify Ajax endpoints, request the sections you want to refresh, then pass the returned HTML to Ascent's SectionDynamicUpdate.updateSections.

async function updateCartQuantity(line, quantity) {
  const cartDrawer = document.getElementById("Cart-Drawer");
  const mainCart = document.getElementById("Main-Cart");
  const sectionsToRender = [
    {
      id: "Cart-Icon-Bubble",
      section: "cart-icon-bubble",
      selector: ".shopify-section"
    }
  ];

  if (cartDrawer && !cartDrawer.hasAttribute("data-status-silence")) {
    sectionsToRender.push({
      id: "Cart-Drawer",
      section: cartDrawer.dataset.section,
      selector: "#Cart-Drawer-Details"
    });
  }

  if (mainCart?.dataset.section) {
    sectionsToRender.push({
      id: "Main-Cart",
      section: mainCart.dataset.section,
      selector: "#Main-Cart-Details"
    });
  }

  const response = await fetch(window.routes.cart_change_url, {
    ...webvista.fetchConfig(),
    body: JSON.stringify({
      line,
      quantity,
      sections: sectionsToRender.map((section) => section.section),
      sections_url: window.location.pathname
    })
  });

  const cartData = await response.json();

  if (cartData.errors) {
    console.error(cartData.errors);
    return;
  }

  SectionDynamicUpdate.updateSections(sectionsToRender, cartData.sections);

  webvista.publish(PUB_SUB_EVENTS.cartUpdate, {
    source: "custom-cart-refresh",
    cartData
  });
}

Refresh without changing cart contents

If another app changes the cart and your script only needs to redraw Ascent's cart UI, fetch the current cart first, then fetch the rendered sections.

async function refreshCartUI() {
  const cartDrawer = document.getElementById("Cart-Drawer");
  const sectionsToRender = [
    {
      id: "Cart-Icon-Bubble",
      section: "cart-icon-bubble",
      selector: ".shopify-section"
    }
  ];

  if (cartDrawer && !cartDrawer.hasAttribute("data-status-silence")) {
    sectionsToRender.push({
      id: "Cart-Drawer",
      section: cartDrawer.dataset.section,
      selector: "#Cart-Drawer-Details"
    });
  }

  const cartData = await fetch(window.routes.cart_url + ".js").then((response) => response.json());
  const sectionParams = sectionsToRender.map((section) => section.section).join(",");
  const sectionHTML = await fetch(
    `${window.location.pathname}?sections=${encodeURIComponent(sectionParams)}`
  ).then((response) => response.json());

  SectionDynamicUpdate.updateSections(sectionsToRender, sectionHTML);

  webvista.publish(PUB_SUB_EVENTS.cartUpdate, {
    source: "custom-cart-refresh",
    cartData
  });
}

Open the cart drawer after refreshing

const cartDrawer = document.getElementById("Cart-Drawer");

if (cartDrawer && !cartDrawer.hasAttribute("data-status-silence")) {
  cartDrawer.show();
}

Notes

• Refresh sections after the cart request succeeds.

• Always include cart-icon-bubble when the cart item count may have changed.

• Do not force the drawer open on the cart page; Ascent marks it with data-status-silence.

• If your script also adds a product, see the custom add-to-cart guide in this Developer section.