> For the complete documentation index, see [llms.txt](https://ascent.webvista.studio/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ascent.webvista.studio/webvista-studio-docs/kai-fa-zhe/yong-javascript-shua-xin-gou-wu-che.md).

# 刷新购物车界面

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

## 通常需要刷新的位置

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

* `cart-icon-bubble`：页眉中的购物车数量。
* `Cart-Drawer`：购物车抽屉内容。
* `Main-Cart`：购物车页面内容。

## 修改购物车后刷新

如果你的脚本通过 Shopify Ajax 接口修改购物车，可以在请求中带上需要刷新的 sections，然后把返回的 HTML 交给 Ascent 的 `SectionDynamicUpdate.updateSections`。

```js
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。

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

## 刷新后打开购物车抽屉

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

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

## 注意事项

* 购物车请求成功后再刷新 section。
* 如果购物车数量可能变化，请始终刷新 `cart-icon-bubble`。
* 不要在购物车页面强制打开抽屉；Ascent 会通过 `data-status-silence` 静默购物车抽屉。
* 如果你的脚本还需要添加产品到购物车，请参考开发者目录中的自定义加购文档。