SimpleCart JS change color of cart according to quantity

Question

I'm having trouble trying to use the simpleCart JS events to produce an effect that changes color of the shopping cart according of quantity.

Essentially I am trying to achieve a function like this: http://shop.hotelcostes.com/en/music/26-hotel-costes-1.html

By using simpleCart js: http://simplecartjs.org/documentation

I have two scripts so far that work but are not ideal

simpleCart.bind( "afterAdd" , function( item ){
    if(simpleCart.quantity() > 0){
        simpleCart.$("#cart").attr( "style" , "color:red" );
}
});


simpleCart.bind( "ready" , function( item ){
    if(simpleCart.quantity() > 0){
        simpleCart.$("#cart").attr( "style" , "color:red" );
}
});

The problems:

1. The script with the 'afterAdd' function changes color of the cart normally but when I add the .hide() and .fadeIn() effects the add function continues to work however the hide, fadeIn, or add color effects don't work.

2. SimpleCart only provides an event called 'beforeRemove' but what I really need is some sort of function 'afterRemove' event that recognizes when the quantity reaches 0 and changes the color of the cart accordingly.

Any help would be appreciated. Thank you.

Answer 1

You can bind to afterAdd and use simpleCart.quantity() to get the quantity . Here is a snippet

//assuming you div that displays cartinfo has a class "cartInfo"
simpleCart.bind( "afterAdd" , function( item ){
   if(simpleCart.quantity() == 2){
     simpleCart.$(".cart").attr( "style" , "color:red" );
   }else{
     simpleCart.$(".cart").attr( "style" , "color:balck" );
   }
});
simpleCart.bind( "beforeRemove" , function( item ){ 
   if(simpleCart.quantity() > 0 && simpleCart.quantity()-1 == 0){ 
        simpleCart.$("#cart").attr( "style" , "color:black" );   
   }
   return true;
});