Shopify Dawn主题Ajax购物车更新异常：自定义按钮需刷新才显示商品

为自定义模板创建了新的Add to Cart按钮，商品可成功加入购物车，但必须刷新页面才能在Cart Drawer中显示内容。尝试调用cart.js里的onCartUpdate函数，却没有任何效果。

相关代码 #

onCartUpdate函数 #

onCartUpdate() {
    if (this.tagName === 'CART-DRAWER-ITEMS') {
      fetch(`?section_id=cart-drawer`).then((response) => response.text()).then((responseText) => {
        const html = new DOMParser().parseFromString(responseText, 'text/html');
        const selectors = ['cart-drawer-items', '.cart-drawer__footer'];
        for (const selector of selectors) {
          const targetElement = document.querySelector(selector);
          const sourceElement = html.querySelector(selector);
          if (targetElement && sourceElement) {
            targetElement.replaceWith(sourceElement);
          }
        }
      }).catch((e) => {
        console.error(e);
      });
    } else {
      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');
        this.innerHTML = sourceQty.innerHTML;
      }).catch((e) => {
        console.error(e);
      });
    }
  }

打印的response.text()结果 #

<div id="shopify-section-main-cart-items" class="shopify-section">
<cart-items class="gradient color-scheme-1 isolate section-main-cart-items-padding">
  <div class="page-width">
    <div class="title-wrapper-with-link">
      <h1 class="title title--primary">Dein Warenkorb</h1>
      <a href="/collections/all" class="underlined-link">Weiter shoppen</a>
    </div>
      <div class="cart__warnings">
      <h1 class="cart__empty-text">Dein Warenkorb ist leer</h1>
      <a href="/collections/all" class="button">
        Weiter shoppen
      </a></div>

    <form action="/cart" class="cart__contents critical-hidden" method="post" id="cart">
      <div class="cart__items" id="main-cart-items" data-id="main-cart-items">
        <div class="js-contents"><table class="cart-items">
              <caption class="visually-hidden">
                Dein Warenkorb
              </caption>
              <thead>
                <tr>
                  <th class="caption-with-letter-spacing" colspan="2" scope="col">
                    Produkt
                  </th>
                  <th class="medium-hide large-up-hide right caption-with-letter-spacing" colspan="1" scope="col">
                    Gesamtsumme
                  </th>
                  <th
                    class="cart-items__heading--wide cart-items__heading--quantity small-hide caption-with-letter-spacing"
                    colspan="1"
                    scope="col"
                  >
                    Anzahl
                  </th>
                  <th class="small-hide right caption-with-letter-spacing" colspan="1" scope="col">
                    Gesamtsumme
                  </th>
                </tr>
              </thead>.....

问题根源 #

调用onCartUpdate时，函数内部的this指向并非CART-DRAWER-ITEMS元素，导致代码进入else分支，请求的是购物车页面的main-cart-items内容，而非侧边栏购物抽屉的更新内容，因此无法刷新Cart Drawer。

修复方案 #

直接编写独立的Cart Drawer更新函数，在商品成功加入购物车后调用即可：

function updateCartDrawer() {
  fetch(`?section_id=cart-drawer`)
    .then(response => response.text())
    .then(responseText => {
      const html = new DOMParser().parseFromString(responseText, 'text/html');
      const selectors = ['cart-drawer-items', '.cart-drawer__footer'];
      selectors.forEach(selector => {
        const target = document.querySelector(selector);
        const source = html.querySelector(selector);
        if (target && source) {
          target.replaceWith(source);
        }
      });
      // 若购物抽屉默认隐藏，可在此添加显示逻辑
      // document.querySelector('.cart-drawer').classList.add('active');
    })
    .catch(err => console.error('更新购物抽屉失败:', err));
}

使用方式 #

在Add to Cart的成功回调中调用该函数：

// 加入购物车逻辑完成后执行
addToCartSuccessCallback() {
  updateCartDrawer();
}

额外检查点 #

• 确认cart-drawer是主题中正确的section ID，与对应section文件名一致
• 验证cart-drawer-items和.cart-drawer__footer选择器能正确定位到DOM元素
• 确保在加入购物车的异步请求成功完成后再调用更新函数

内容的提问来源于stack exchange，提问作者Jun Kuan