Cambiar color del carrito cuando está lleno.

[froz]

Hola, he estado buscando pero no he encontrado por el foro ningún tema que me solucione otro pequeño problema que tengo que es el siguiente:

 

He cambiado la imagen que trae por defecto el carrito de compra a una que ha diseñado un amigo. Mi idea es que cuando el carrito esté vacío, éste se muestre blanco y cuando el usuario añada algún producto, cambie de color instantáneamente. ¿Cómo podría conseguirlo?

 

Muchas gracias de antemano.

[LyL Desarrollo]

Hola Froz, puedes hacerlo agregando un poco de css al tpl del carrito

{if $cart_qties > 1}
<style>
css para el carrito lleno
</style>
{else}
<style>
css para el carrito vacio
</style>

{/if}>

Espero ayudarte

[ventura]

lo mas indicado seria hacerlo con js

[froz]

Gracias por las respuestas.
 
La primera no me soluciona gran cosa, ya que la gracia de esto es que sea dinámico el cambio.
 
Entiendo que para hacerlo dinámico tendré que tirar de .js pero la verdad que no estoy muy puesto... A ver si me puedes echar una mano ventura (o cualquier otro jeje) porque estoy bastante desesperado.
 

Por lo que tengo entendido, esta es la zona del codigo del ajax-cart.js que actualiza la información del carro cuando se llena o vacía ¿no? Yo había pensado en declarar dos funciones que cambian la src de la imagen del carrito (una coloreada y otra no) y llamarlas en esa zona pero debo de hacer algo bastante mal porque no pasa nada.

 

Mi nivel de js es básico tirando a nulo jajaja así que a ver si alguien se apiada y me modifica esta solución o me indica otra forma mejor de hacerlo. Gracias de nuevo.

 

 

Mis funciones:

 

function cambiar (){

document.getElementById('carrito').src = "rutaB";

}

 

function volver (){

document.getElementById('carrito').src = "rutaA";

}

 

Mi llamada en el código:

 

//update general cart informations everywhere in the page
updateCartEverywhere : function(jsonData) {
$('.ajax_cart_total').text($.trim(jsonData.productTotal));
 
if (parseFloat(jsonData.shippingCostFloat) > 0 || jsonData.nbTotalProducts < 1)
$('.ajax_cart_shipping_cost').text(jsonData.shippingCost);
else if (typeof(freeShippingTranslation) != 'undefined')
$('.ajax_cart_shipping_cost').html(freeShippingTranslation);
$('.ajax_cart_tax_cost').text(jsonData.taxCost);
$('.cart_block_wrapping_cost').text(jsonData.wrappingCost);
$('.ajax_block_cart_total').text(jsonData.total);
 
this.nb_total_products = jsonData.nbTotalProducts;
 
if (parseInt(jsonData.nbTotalProducts) > 0)
{
cambiar();
$('.ajax_cart_no_product').hide();
$('.ajax_cart_quantity').text(jsonData.nbTotalProducts);
$('.ajax_cart_quantity').fadeIn('slow');
$('.ajax_cart_total').fadeIn('slow');
 
if (parseInt(jsonData.nbTotalProducts) > 1)
{
$('.ajax_cart_product_txt').each( function () {
$(this).hide();
});
 
$('.ajax_cart_product_txt_s').each( function () {
$(this).show();
});
}
else
{
$('.ajax_cart_product_txt').each( function () {
$(this).show();
});
 
$('.ajax_cart_product_txt_s').each( function () {
$(this).hide();
});
}
}
else
{
$('.ajax_cart_quantity, .ajax_cart_product_txt_s, .ajax_cart_product_txt, .ajax_cart_total').each(function(){
$(this).hide();
});
$('.ajax_cart_no_product').show('slow');
volver();
}
}
};

 

Edited October 28, 2015 by froz (see edit history)