Shopify 購物車更新不適用於 axios

Question

我試圖從我的購物車中永久刪除產品項目，但我創建的 function 僅從 DOM 中刪除數據，並且在瀏覽器重新刷新時重新出現。 這是我到目前為止所做的。

HTML 用JS點擊cart.liquid文件中的function

<a @click="removeFromCart(item)" class="product-remove">remove</a>

removeFromCart function 在我的 CartForm.js 文件中

      removeFromCart(item){
        let productInfo = this.cart.items.reduce(
          (accumulator, target) => ({ ...accumulator, [target.variant_id]: target.quantity}),
        {});

        const myJSON = JSON.stringify(productInfo);

        axios.post('/cart/update.js', { updates: productInfo })
        .then((res) => {
          this.cart.items.splice(this.cart.items.indexOf(productInfo), 1);
        })
        .catch((error) => {
          new Noty({
            type: 'error',
            timeout: 3000,
            layout: 'topRight',
            text: 'Cart not updated'
        }).show();
        })
      },

任何建議都會很棒。 謝謝

Answer 1

Shopify 的 Ajax API 參考可能有助於闡明為什么這對您不起作用。

如果您需要一個有效的代碼片段來讓事情動起來，這對我有用：

function removeCartItem(variantId) {
  let update = {};
  update[variantId] = quantity;

  axios({
    method: 'post',
    url: '/cart/update.js',
    data: { updates: update }
  })
  .then( (response) => {
    // The response should confirm the removal of the item from cart.items
   // Then you probably want to update your state so cart items gets re-rendered
  })
  .catch( (error) => {
    console.error('Error:', error);
  });
}