Hi, i am developing a shopify theme, for minicart page i am using vuejs to control mini cart (shoping cart) data. this is vue js instance and html for it:
<ul class="list-unstyled">
<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">
<h6 class="title" style="margin:0;padding:0;"><a style="margin:0;padding:0;" :href="item.url">${ item.product_title }</a></h5>
<template v-if="!item.product_has_only_default_variant">
<p style="margin:0;padding:0;">${ item.variant_title }</p>
</template>
<div class="price" style="margin:1;padding:0;">
<template v-if="item.original_line_price != item.line_price">
<span class="visually-hidden">{{ 'cart.label.discounted_price' | t }}</span>
${ item.price }
<span class="visually-hidden">{{ 'cart.label.original_price' | t }}</span>
<s>${ item.original_price }</s>
</template>
<template v-else>
${item.price | money }
</template>
</div>
<div class="input-group quantity mt-3" id="insidedropdown">
<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>
<div>
{%- assign cart_items_count = cart.items | size -%}
{%- for item in cart.items -%}
<input type="hidden" id= "{{ item.variant.id }}" value= "{{ item.variant.inventory_quantity }}">
{%- endfor -%}
};
</div>
</template>
<li class="media my-4">
<div class="d-flex justify-content-between">
<a href="/cart" class="btn btn-primary mr-3">Cart</a>
<a href="/checkout" class="btn btn-success">Checkout</a>
</div>
</li>
</ul>
User can add new items to the cart, also user can remove items from cart so minicart is interactive (this is my website: https://codeinspire-dev2.myshopify.com/). I am storing carts inventory_quantity's in html for using it to control if product is out of stock but that is not right way because cart items are changing it is interactive, is there a solution for that how can i fetch inventory quantities, or maybe can i force to reerender that portion of html when cart object is changing. (As Vladimir says i have two options but neither is not working add.js allowed me to add more items then are in the stock checking for inventory quantity in mini cart page Shopify)
MiniCart = new Vue({
el:".mini-cart",
delimiters: ['${', '}'],
data(){
return{
cart: store.state.cartData,
}
},
created(){
if(store.state.cartData===null || store.state.cartData===undefined )
this.getCart();
},
