Shopify Dawn 主题 - 使用 Ajax 更新购物车功能问题

Question

我为自定义模板创建了一个新的“添加到购物车”按钮，它可以将产品添加到购物车，但我必须刷新页面才能将其显示在我的购物车抽屉中。我使用 cart.js 文件中的脚本并在添加购物车后调用此函数，但没有任何反应。

这是 updateCart 函数：

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>.....

Answer 1

成功获取后，您需要直接在 DOM 中追加新项目：

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

       if(response.ok) {
        var item = `<div><p>${item.name}</p><p>${item.price}</p></div>`
        $('.cart').append(item)
       }

      }).catch((e) => {
        console.error(e);
      });