Los chicos de TheWojoGroup acaban de liberar hace unos dias a simpleCart el cual es un carrito de compras flexible, ligero y fácil de usar sin muchos conocimientos de programación.

Esta escrito íntegramente en JavaScript y con la ayuda de cookies para realizar el seguimiento de las compras y con tan solo 10.5kb es una alternativa tentadora. La proeza de simpleCart es que no requiere base de datos ni un amplio conocimiento de programación, solo se necesita conocer Html básico. Sin embargo la flexibilidad que nos da nos puede permitir añadir funcionalidades extras o integrarlo con una base de datos.

Configuración de Paypal

Primero antes que todo debes tener una cuenta en paypal si no la tienes create una

Agregar simpleCart(js) en tus paginas

Después de descargado los archivos, sólo tiene que añadir este código en la parte superior de cualquier página que desee que el carro se ejecuta.

<script src="simpleCart.js" type="text/javascript"></script>
<script type="text/javascript"><!--
simpleCart = new cart("tu@email.com");
// --></script>

Tendrás que sustituir tu@email.com con la dirección de correo electrónico que utilizaste para registrarte en Paypal.

Agregando productos al carro

En la pagina donde este funcionando simpleCart (JS), se puede añadir productos de la siguiente manera.

<a onclick="simpleCart.add('name=[name]','price=[price]');return false;" href="#">Enlace del producto</a>

Es obligatorio añadir el nombre ([name]) y el precio ([price]) del producto. Sin embargo, se puede agregar otros campos también para que se muestren en la cesta. Si desea una imagen que se vincule al producto, la sintaxis seria la siguiente.

simpleCart.add('name=Shirt','price=6.00','image=images/myImage.png');

Existen algunos campos extras para los productos tales como cantidad, tamaño y color que se pueden añadir de la siguiente manera.

simpleCart.add('name=Shirt','price=6.00','image=images/myImage.png','quantity=5','size=XL','color=Blue');

Visualizar la Cesta

La cesta se actualizará automáticamente utilizando AJAX. Para mostrar los productos en la cesta, usted simplemente necesidad añadir un elemento con la clase simpleCart_items en la página. Este elemento será automáticamente rellenado con todos los productos que usted vaya agregando, el elemento podría ser de la siguiente forma.

<div class="simpleCart_items"></div>

Se puede usar cualquier elemento (div,a,span,p,etc.).

Mostrando totales

Se puede mostrar los totales de precios o cantidad utilizando cualquier elemento con la clase simpleCart_quantity o simpleCart_total de la siguiente manera.

<div class="simpleCart_total"></div>
<span class="simpleCart_quantity"></span> productos

Comprar y limpiar cesta

Se puede tener las opciones de comprar o limpiar la cesta en cualquier parte donde simpleCart (JS) este funcionando. Estas funcionalidades se añaden simplemente con establecer las clases de un elemento de simpleCart_checkout o simpleCart_empty de la siguiente forma.

<a class="simpleCart_checkout" href="#">Comprar</a>

<a class="simpleCart_empty" href="#">Limpiar Cesta</a>

Más Información

Descarga

Demo

Categorizado: Desarrollo Web | Marketing
Etiquetado: Carrito de Compra | E-commerce | JavaScript | Scripts