Seeking assistance with implementing a feature to remove a product from a MiniCart using Vue.js in a Shopify theme. Below is the code snippet for minicart.liquid file along with the cart data stored in the 'data' property. Although the remove function successfully deletes the item, it reappears when the page is refreshed and the changes are not saved. Any guidance on resolving this issue would be appreciated.
I also attempted the following -
this.cart.items.splice(this.cart.items.indexOf(found), 1);<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>
<!-- Problematic function -->
<span @click="remove(item)">${ item.original_price | money }</span>
<div class="input-group quantity mt-3">
<div class="input-group-prepend">
<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">
<span class="input-group-text" @click="increment(item)">+</span>
</div>
</div>
</div>
</li>
data(){
return {
//The cart data stored in cartData.js
cartData: store.state.cartData,
}
},
methods: {
//Remove item from the Minicart
remove(item){
let found = this.cart.items.find(product => product.variant_id == item.variant_id);
if(found) {
this.$delete(this.cart.items, this.cart.items.indexOf(found))
}
},
In an attempt to resolve the issue, I created a function to retrieve the variant_id and quantity, then pass it to the Shopify /cart/update.js API and delete the productInfo, but have been unsuccessful so far.
removeFromCart(){
let productInfo = this.cart.items.reduce(
(accumulator, target) => ({ ...accumulator, [target.variant_id]: target.quantity}),
{});
console.log(productInfo);
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();
})
},
Upon logging the productInfo, I can see the ID and quantity, but am unsure how to delete this onClick event.