How to track qty changes in cart?

This is not CMS or software specific. Can be used for shopify, magento, wordpress or any other cart page

Assumption:
All the cart items have an input field for quantity in case they want to change qty for any item

Assumption:
All those input fields can be selected using queryselector. Either they have common name attribute or a common class.

Purpose:
We want to change class of update button to show that he has to press update button because quantities have been altered.

So lets get started:

js code:

$(document).ready(function($){
//please change query selector for qty inputs in line 3 and 5
    var ini_values = $("input[name='updates[]']").map(function(){return $(this).val();}).get();
    $(".quantity input").change(function(){
      let new_values = $("input[name='updates[]']").map(function(){return $(this).val();}).get();
      if(JSON.stringify(ini_values)!=JSON.stringify(new_values)) 
      { //change selector for update button
           $("#update-cart").addClass("pressme"); }
    else {
    $("#update-cart").removeClass("pressme");}
    });
  });

css code if needed

.pressme{background: white !important;
    border-color: #109ff6 !important;
  color: black !important;
  animation: blink 1s linear infinite;}
@keyframes blink{
0%{opacity: 0;}
50%{opacity: .5;}
100%{opacity: 1;}
}

Reference:

https://stackoverflow.com/a/24503913/2229148

How to track qty changes in cart?

Reference:

Comments

Leave a Reply Cancel reply