DanteCervantes.com

Canasta de compras con Javascript

Publicado por : Dante | 27 febrero, 2016 | 6:54 am

 

En este tutorial, veremos cómo crear una canasta de compras con javascript, con tan solo 10 métodos (funciones).

VER DEMO

Haremos uso de las siguientes dependencias (cdn)

  • jQuery
  • lodash
  • Ladda
  • Ionicons
  • Fundation

Creamos un archivo index.html con la siguiente estructura

Después crearemos un archivo llamado canasta.js con el siguiente contenido.

Explicación de cada método

init() : Es la función principal, se encarga de verificar que hayan productos en la canasta de compra

createProducts() : Se encarga de crear un registro en el navegador con la información de cada producto (localStorage)

addtoCart() : Añade un producto a la canasta de compra

searchProd() : Busca un producto dentro de la canasta y verifica las cantidades para no sobrepasar las existentes en stock.

getProducts() : Es la encargada de actualizar la canasta de compra, cada vez que se agrega, edita o elimina un registro de la canasta.

updateItem() : Se encarga de actualizar la infomación de un producto en específico de la canasta.

delete() : Función encargada de eliminar un producto definitivamente de la canasta (recibe un parámetro boleano, para que no salte la ventana de confirmación)

deleteProd() : Nos permite eliminar un producto de manera definitiva de la canasta

updatePayForm() : Actualiza el formulario de pago de Paypal, con cantidades y totales.

business_paypal : Aquí va el correo electrónico de la cuenta vinculada a Paypal

VER DEMO

Como podemos ver, podemos crear un carrito de compras de manera muy sencilla con Javascript, sin necesidad de plugins en muy poco tiempo y con integración de pagos con Paypal.

 

Recibe los mejores desarrollos y tutoriales

* campos requeridos

redes sociales