Hola de nuevo,
Hemos recibido mucho feedback en los foros en inglés de wordpress.org y getshop.org de gente que nos pregunta como se ha desarrollado algunas partes del proyecto.
Una de las preguntas que se ha resuelto era cómo habíamos programado el carrito de la compra con un efecto lightbox. Lo compartiré tambien aquí por si alguien lo necesita para algún proyecto.
En este caso os recuerdo que estamos trabajando con el plugin wp e-commerce, pero puede servir para otras funcionalidades.
La idea:
Cuando la gente añade un producto en su carrito de la compra, aparece una capa en overlay simulando que aparece de dentro del botón del carrito. El propio botón del carrito también tiene ese efecto sobre si mismo.
El Ejemplo:
Si entramos en la página de un jersey:
http://www.modatak.com/productos/punto/jersey-verde-oliva-cuello-pico-con-coderas
Primero hacéis clic en el botón del carrito (icono azul superior) y veréis como aparece la capa. Podéis cerrar la capa.
Ahora si escogéis una talla i hacéis clic en agregar (boton añadir al carro), veréis como aparece otra vez la capa flotante con el jersey añadido.
El código:
El widget de reservas se encuentra en el archivo «wpsc-cart_widget.php».
Añadimos el siguiente código:
<a id="cart-button" class="cart checkout-tab shopping-cart-basket bluegradient" href="#shopping-cart">
<strong>SHOPPING CART</strong></a>
<!-- the button -->
<div style="display:none"><div id="shopping-cart"><div class="shopping-cart-basket-icon"></div><?php echo nzshpcrt_shopping_basket(); ?></div></div>
<!-- the cart-->
El botón es un simple link con el href #shopping-cart que es el id de la capa del carrito que por defecto no mostramos.
Para hacer la animación usamos Fancybox con el efecto ‘Elastic’, apuntando al id del botón. #cart-button.
jQuery("a#cart-button").fancybox({
'hideOnContentClick': true,
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'speedIn' : 400,
'speedOut' : 400,
'overlayShow' : false,
'padding' : 0,
'centerOnScroll': true
});
Espero que os ayude en vuestros proyectos. Si alguien tiene alguna duda o pregunta, estaremos encantados de resolverlos.
Un saludo.
tak.