Construir un carrito de compras con Vue.js

Introducción

En este proyecto, aprenderás a construir una funcionalidad de carrito de compras utilizando Vue.js 2.x. El carrito de compras es una característica esencial en los sitios web de comercio electrónico, que permite a los usuarios gestionar los productos seleccionados antes de realizar una compra.

👀 Vista previa

🎯 Tareas

En este proyecto, aprenderás:

• Cómo modificar el método addToCart para agregar productos al carrito de compras
• Cómo mejorar el método removeGoods para eliminar productos del carrito de compras
• Cómo probar la funcionalidad general del carrito de compras

🏆 Logros

Después de completar este proyecto, podrás:

• Gestionar el estado de un carrito de compras en una aplicación Vue.js
• Manejar la adición y eliminación de productos en el carrito de compras
• Actualizar la interfaz de usuario en función de los cambios en el carrito de compras

Configurar la estructura del proyecto

En este paso, configurarás los archivos y la estructura del proyecto. Sigue los pasos siguientes para completar este paso:

Abre la carpeta del proyecto. La estructura de directorios es la siguiente:

├── css
│   └── index.css
├── images
│   ├── 1.png
│   └── 2.png
├── js
│   ├── goods.js
│   └── vue.js
└── index.html

Donde:

• css/index.css es el archivo de estilo.
• images es la carpeta de imágenes.
• js/goods.js es el archivo de datos.
• js/vue.js es el archivo de Vue 2.x.
• index.html es la disposición y la lógica de la página.

Haz clic en el botón Go Live en la esquina inferior derecha de WebIDE, para ejecutar el proyecto.

Luego, abre "Web 8080" en la parte superior de la VM y actualízala manualmente para ver la página.

Los problemas actuales que surgen se detallan a continuación:

• Al hacer clic N veces en el botón "Agregar al carrito" en la "Lista de productos", el producto aparecerá N veces en la lista del carrito de compras con una cantidad inicial de 1.
• Al hacer clic en el botón más ("+") junto al producto en el carrito de compras, el producto se repetirá en la lista del carrito de compras con una cantidad inicial de 1.
• Al hacer clic en el botón menos ("-") junto al producto en el carrito de compras, el producto no se elimina del carrito.

Modificar el método addToCart

En este paso, aprenderás a modificar el método addToCart para agregar productos al carrito de compras.

1. Abre el archivo index.html.
2. Localiza el método addToCart en la instancia de Vue.
3. Modifica el método addToCart para cumplir con los siguientes requisitos:
   • Si el producto no existe en el carrito de compras, agrégalo al final del carrito e inicializa la cantidad a 1.
   • Si el producto ya existe en el carrito de compras, simplemente incrementa la cantidad en 1.

El método addToCart modificado debería verse así:

addToCart(goods) {
  // TODO: Modify the current function to realize the shopping cart to add the product requirements

  let exit = 0;
  this.cartList.forEach(item => {
    if (goods.id == item.id) {
      item.num++
      exit = 1
    }
  });
  if (!exit) {
    goods.num = 1;
    this.cartList.push(goods);
    this.cartList = JSON.parse(JSON.stringify(this.cartList));
  }
},

4. Guarda el archivo index.html.

Mejora el método removeGoods

En este paso, aprenderás a mejorar el método removeGoods para eliminar productos del carrito de compras.

1. Abre el archivo index.html.
2. Localiza el método removeGoods en la instancia de Vue.
3. Mejora el método removeGoods para cumplir con los siguientes requisitos:
   • Al hacer clic en el botón menos ("-") junto al producto en el carrito de compras, disminuye la cantidad en 1.
   • Si la cantidad resultante es 0, elimina el producto del carrito de compras.

El método removeGoods debería verse así:

removeGoods(goods) {
  // TODO
  this.cartList.forEach((item, index, arr) => {
    if (goods.id == item.id) {
      item.num--
    }
    if (item.num == 0) {
      arr.splice(index, 1)
    }
  });
}

4. Guarda el archivo index.html.

Probar la funcionalidad del carrito de compras

1. Actualiza la página en tu navegador.

2. Verifica que el botón "Agregar al carrito" funcione correctamente:

   • Si el producto no existe en el carrito de compras, debería agregarse con una cantidad de 1.
   • Si el producto ya existe en el carrito de compras, la cantidad debería aumentar en 1.

3. Verifica que los botones "+" y "-" en el carrito de compras funcionen correctamente:

   • Hacer clic en el botón "+" debería aumentar la cantidad del producto en 1.
   • Hacer clic en el botón "-" debería disminuir la cantidad del producto en 1.
   • Si la cantidad llega a 0, el producto debería eliminarse del carrito de compras.

El efecto de la implementación final es el siguiente:

¡Felicitaciones! Has completado con éxito el proyecto del carrito de compras.

Resumen

¡Felicitaciones! Has completado este proyecto. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.