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

Davit_Azizyan
Tourist
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="">
              </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();            
    },
0 Likes
hassain
Shopify Staff (Retired)
Shopify Staff (Retired)
624 103 136

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 

0 Likes