在Vue.js中永久从购物车中删除商品，并使用AJAX进行Shopify [英] Remove item from cart permanently in Vue.js and Shopify using AJAX

问题描述

在shopify主题中使用Vue.js从MiniCart中删除产品时寻求帮助.在下面可以看到minicart.liquid文件，在下面可以看到购物车数据存储在datat属性中.删除功能确实删除了该站点，但是，当刷新浏览器ID时，该产品会重新出现并且不会保存.寻找解决此问题的指导.

Looking for some help with removing a product from a MiniCart using Vue.js in a shopify theme. Below you can see the minicart.liquid file and below that the cart data being stored in the datat property. The remove function does remove the ite, however when the browser id refreshed the product reappears and is not saved. Looking for some guidence on solving this issue.

我也尝试过- this.cart.items.splice(this.cart.items.indexOf(found)，1); 对象被删除，但是当页面刷新时产品再次显示在购物车中.

I have also tryied this - this.cart.items.splice(this.cart.items.indexOf(found), 1); the object is delted, but when the page is refreshed the products shows in the cart again.

  <template v-if="cart">
      <li class="media" v-for="(item, index) in cart.items">
          <template v-if="item.image">
              <a :href="item.url">
                <img class="img-fluid mr-4 mb-2" width="150" :src="item.image" alt="">
              </a>
          </template>
          <div class="media-body">

              <h5 class="title"><a :href="item.url">${ item.product_title }</a></h5>

              <template v-if="!item.product_has_only_default_variant">
                <p>${ item.variant_title }</p>
              </template>

              <div class="price">
                <template v-if="item.original_line_price != item.line_price">

                  <span class="visually-hidden">{{ 'cart.label.discounted_price' | t }}</span>
                    ${ item.price | money }
                  <span class="visually-hidden">{{ 'cart.label.original_price' | t }}</span>
                  <span>${ item.original_price | money }</span>

                </template>

                <template v-else>
                    ${ item.price | money }
                </template>
              </div>

              <!-- this is the function not working correctly -->
              <span @click="remove(item)">${ item.original_price | money }</span>


              <div class="input-group quantity mt-3">

                  <div class="input-group-prepend">
                    <!-- we add a click event listener to call the decrement function and pass item which refers to
                    the product variant as the parameter as this is what we want to remove -->
                    <span class="input-group-text" @click="decrement(item)">-</span>
                  </div>

                  <input type="text" v-model="item.quantity" class="form-control w-25" aria-label="Product quantity">

                  <div class="input-group-append">
                    <!-- we add a click event listener to call the increment function and pass item which refers to
                    the product variant as the parameter as this is what we want to add -->
                    <span class="input-group-text" @click="increment(item)">+</span>
                  </div>

              </div>

          </div>
      </li>

    data(){
      return {
        //This data is stored in cartData.js
        cartData: store.state.cartData,
      }
    },

    methods: {
      //remove item from the Minicart
      remove(item){
        //this.cart.items refers to the data stored in our cartData object and used in the cart-template.liquid
        // i.e. <template v-for="(item, index) in cart.items">
        let found = this.cart.items.find(product => product.variant_id == item.variant_id);

        if(found) {
          //$delete is a vue function and can remove an item from an object
          //Now we want to remove the position/index of the variant item found above
          //We are saying if the product data fetched from Shopify matches our item product data, remove it
          this.$delete(this.cart.items, this.cart.items.indexOf(found))
          
        }
      },

我还尝试创建此函数以获取variant_id和数量并将其传递给shopify/cart/update.js API，然后删除productInfo，但不会成功.

I have also tried creating this function to get the variant_id and quantity and pass it to the shopify /cart/update.js API thene delete the productInfo without success.

      removeFromCart(){
        let productInfo = this.cart.items.reduce(
          (accumulator, target) => ({ ...accumulator, [target.variant_id]: target.quantity}),
        {});
        console.log(productInfo);
        //In order to update, we need to post an updates object with the key value pairs store in results
        axios.post('/cart/update.js', {updates: productInfo})
        .then((res) => {
          this.$delete(productInfo)
        })
        .catch((error) => {
          new Noty({
            type: 'error',
            timeout: 3000,
            layout: 'topRight',
            text: 'Cart not updated'
        }).show();
        })
      },

当我用console.log记录productInfo时，我得到的ID相当多，只是不确定如何取消此onClick.

When I console.log the productInfo i get the ID an quanity, just not sure how to delte this onClick.

推荐答案

应该< span @ click =" remove(item)"
不是< span @ click =" remove($ {item})"> 吗?

这篇关于在Vue.js中永久从购物车中删除商品，并使用AJAX进行Shopify的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！