刷新购物车界面

当自定义脚本修改了购物车，并且需要刷新 Ascent 页面上的购物车显示时，可以参考本页。

通常需要刷新的位置

Ascent 的购物车界面由多个 section 组成。自定义脚本通常会刷新以下一个或多个区域：

• cart-icon-bubble：页眉中的购物车数量。

• Cart-Drawer：购物车抽屉内容。

• Main-Cart：购物车页面内容。

修改购物车后刷新

如果你的脚本通过 Shopify Ajax 接口修改购物车，可以在请求中带上需要刷新的 sections，然后把返回的 HTML 交给 Ascent 的 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
  });
}

不修改购物车，只刷新界面

如果购物车内容由其它应用修改，而你的脚本只需要重绘 Ascent 的购物车界面，可以先获取当前购物车数据，再获取对应 section 的 HTML。

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
  });
}

刷新后打开购物车抽屉

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

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

注意事项

• 购物车请求成功后再刷新 section。

• 如果购物车数量可能变化，请始终刷新 cart-icon-bubble。

• 不要在购物车页面强制打开抽屉；Ascent 会通过 data-status-silence 静默购物车抽屉。

• 如果你的脚本还需要添加产品到购物车，请参考开发者目录中的自定义加购文档。