Is there a way to rerender aportion of liquid code when cart object gets changed?

7 1 0

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="">
          <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>

              <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 v-else>
                      ${item.price | money }

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

                  <div class="input-group-prepend">
                    <span class="input-group-text" @click="decrement(item)">-</span>

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


          {%- assign cart_items_count = cart.items | size -%}
                  {%- for item in cart.items -%}
                 <input type="hidden" id= "{{ }}" value= "{{ item.variant.inventory_quantity }}">                    
                    {%- endfor -%}

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



User can add new items to the cart, also user can remove items from cart so minicart is interactive (this is my website: 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({
    delimiters: ['${', '}'],

            cart: store.state.cartData,

        if(store.state.cartData===null || store.state.cartData===undefined )            
Reply 1 (1)
Shopify Staff (Retired)
Shopify Staff (Retired)
624 104 171

Hi @Davit_Azizyan ,


Questions about Liquid are better off at the "Technical Q&A" and "Shopify Design" board of this forums.


This board is for questions related to Shopify Storefront API, and the Buy SDKs that use it

Hassain | Developer Support Specialist @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Click Accept as Solution