Como hacer un carrito de compras fácilmente con simpleCart.js

simpleCart.js es un javascript totalmente gratuito y open source que nos permite crear fácilmente nuestro propio carrito de compras sin base de datos y sin la necesidad de programar. De esta manera podemos adaptar nuestra página y convertirla en un E-commerce en minutos.

CARACTERÍSTICAS

Sin la necesidad de una base de datos, este script nos permite con solamente tener conocimientos básicos de HTML o simplemente copiar y pegar unas líneas de códigos tener nuestro propio “shopping cart” funcionando sin problemas.

simpleCart.js se adapta totalmente a tu diseño, lo único que tienes que hacer es agregar ciertas clases a determinados elementos y todo quedará andando.

Por el momento cuenta con 3 métodos de pagos funcionando que son paypal, google checkout y amazon payments, pero tienen pensado agregar a su lista “email checkout”, authorize.net y más.

Al ser sumamente liviano (8kb) los usuarios no perderán tiempo en tu sitio y según ciertos estudios, pierdes el 7% de tus compras por cada segundo que demora en cargar la página.

Instalar y configurar simpleCart.js

simpleCart.js precisa para funcionar jQuery, Mootools o Prototype, así que si no tenemos ninguna de estas librerías dentro de nuestras etiquetas <head> será mejor que la agreguemos.

EL SCRIPT

Copiamos y pegamos el código dentro de las etiquetas <head>

<script src="simpleCart.js"></script>
<script>
 simpleCart({
 checkout: {
 type: "PayPal",
 email: "tu@correo.com"
 }
 });
</script>

Como podemos ver, el script básico cuenta con dos campos que debemos modificar, el primero es type que es donde escribiremos el método de pago que usaremos en nuestro sitio, en este ejemplo se encuentra PayPal. El siguiente campo es email en el que escribiremos el correo asociado a la cuenta de PayPal en la que queremos recibir el dinero.

IDENTIFICANDO LOS PRODUCTOS

Para que el script reconozca cuales son los productos, debemos respetar ciertas clases.

<div class="simpleCart_shelfItem">
 <h2 class="item_name"> Remera "The Walking Dead" </h2>
<p> <input type="text" value="1" class="item_Quantity"><br>
 <span class="item_price">$35.99</span><br>
 <a class="item_add" href="javascript:;"> Agregar al carrito </a></p>
</div>

Nuestro producto debe estar dentro de la clase simpleCart_shelfItem que será la div contenedora del mismo. Como ven en el ejemplo en el H2 agregamos la clase item_name que será la que contenga el nombre del ítem. El input text con la clase item_Quantity es el encargado de decirle al script la cantidad de artículos del mismo producto que queremos comprar y el span class item_price es donde tendremos el precio del producto. Al final tendremos un enlace con la clase item_add que será la que se encargue de agregar los items que seleccionamos al carrito de compras.

EL CHECKOUT

Unas pocas líneas para nuestro checkout

<span class="simpleCart_quantity"></span> items - <span class="simpleCart_total"></span>
<a href="javascript:;" class="simpleCart_checkout">Checkout</a>

Como ven, el checkout es fácil de realizar, en la span class simpleCart_quantity indicará la cantidad de artículos hemos guardado en el carrito y la span class simpleCart_total el costo total de nuestra compra. Apretando el enlace Checkout nos llevará directamente al método de pagos.

Si desean personalizar más su script pueden entrar en el apartado “Documentación” en la página de simpleCart.js

Scroll to top