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