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.

 

  • tccountertops

    Hola Dante. Esta muy bonita y excelente la canasta de compras. Solo tengo dos preguntas para hacerte y serian 1) Com hacer para que la desc aparesca. Si ves no aparece. 2) Es posible adicional el sign mas en la canasta para agregar cantidad del producto facilmente? Muchas gracias

    • Hola ejecafe, gracias por comentar, respondiendo a tu pregunta, si en ambos casos.

      1 .- para que aparezca la descripción, en el for loop debes añadir esta linea, dependiendo de tus necesidades en cuanto a diseño,

      “productos[i].desc” (sin comillas)

      2 .- si es posible añadir el botón, solo es cuestión de ligar el onclick con el evento que haga la sumatoria de las cantidades y listo.

Recibe los mejores desarrollos y tutoriales

* campos requeridos

redes sociales