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)
624 104 187

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

To learn more visit the Shopify Help Center or the Community Blog.