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
