Crea tu carrito de compras con JavaScript | ES6

Contenido

• Introducción 🌟
• Construyendo el carrito de compras 🛒
• Descarga del archivo de inicio 📥
• Renderizando los productos 🛍️
  • Seleccionando el elemento de productos
  • Creando la función para renderizar los productos
  • Actualizando la interfaz de usuario con los productos
• Añadiendo productos al carrito 🆕
  • Selección del botón "Añadir al carrito"
  • Creando la función para añadir productos al carrito
  • Actualizando la interfaz de usuario con los productos añadidos
• Cambiando la cantidad de unidades 🔄
  • Selección de los botones de incrementar y decrementar
  • Creando la función para cambiar la cantidad de unidades
  • Actualizando la interfaz de usuario con la cantidad de unidades
• Eliminando productos del carrito ❌
  • Selección del botón de eliminar
  • Creando la función para eliminar productos del carrito
  • Actualizando la interfaz de usuario tras eliminar un producto
• Calculando el subtotal 💲
  • Creando la función para renderizar el subtotal
  • Calculando el número total de elementos
  • Calculando el precio total
  • Actualizando la interfaz de usuario con el subtotal
• Guardando el carrito en el almacenamiento local 💾
  • Guardando el carrito en el almacenamiento local
  • Recuperando el carrito del almacenamiento local
• Conclusiones 🏁

Introducción 🌟

En este tutorial, aprenderemos a construir un carrito de compras utilizando JavaScript. Utilizaremos elementos HTML, CSS y funciones de JavaScript para crear una experiencia de usuario intuitiva. Comenzaremos descargando el archivo de inicio, luego renderizaremos los productos en la página y añadiremos funcionalidad para añadir, modificar y eliminar productos del carrito. También calcularemos el subtotal y guardaremos el carrito en el almacenamiento local para que los usuarios puedan mantener sus productos incluso después de volver a cargar la página.

Construyendo el carrito de compras 🛒

El carrito de compras es una característica común en las tiendas en línea. Permite a los usuarios seleccionar y comprar varios productos en un solo lugar. En este tutorial, construiremos un carrito de compras utilizando JavaScript. Usaremos el lenguaje de programación JavaScript para renderizar los productos, añadir productos al carrito, modificar la cantidad de unidades y eliminar productos del carrito. También implementaremos funcionalidad para calcular el subtotal de los productos en el carrito y guardar el carrito en el almacenamiento local. ¡Empecemos!

Descarga del archivo de inicio 📥

Antes de comenzar, asegúrate de descargar el archivo de inicio necesario para la construcción del carrito de compras. Puedes descargarlo desde el siguiente enlace: Descargar archivo de inicio. Una vez que hayas descargado el archivo, descomprímelo en tu directorio de trabajo. El archivo de inicio contendrá todos los archivos necesarios para iniciar el proyecto del carrito de compras.

Renderizando los productos 🛍️

El primer paso para construir nuestro carrito de compras es renderizar los productos en la página. Utilizaremos JavaScript para seleccionar el elemento de productos y luego lo actualizaremos con los productos desde nuestro archivo de datos. Sigue los pasos a continuación para renderizar los productos:

1. Seleccionando el elemento de productos

   • Usa el método document.querySelector() para seleccionar el elemento de productos. Este elemento es donde renderizaremos los productos en la página.
   • Almacena el elemento seleccionado en una variable llamada elementoProductos.

2. Creando la función para renderizar los productos

   • Crea una función llamada renderizarProductos() que acepte un array de productos como parámetro.
   • Utiliza el método .forEach() para iterar sobre cada producto en el array.
   • Dentro del bucle, actualiza el contenido del elemento elementoProductos utilizando el método .innerHTML. Para cada producto, crea el HTML necesario para mostrar la imagen, nombre, precio y botones de agregar al carrito.
   • Asegúrate de utilizar las propiedades del objeto de producto para mostrar la información correcta.

3. Actualizando la interfaz de usuario con los productos

   • Llama a la función renderizarProductos() y pásale el array de productos como argumento.
   • Guarda los cambios y abre el archivo HTML en tu navegador para ver los productos renderizados en la página.

¡Genial! Ahora hemos terminado de renderizar los productos en la página. En la siguiente sección, agregaremos funcionalidad para añadir productos al carrito. 🛒

Añadiendo productos al carrito 🆕

La siguiente funcionalidad que agregaremos es la capacidad de añadir productos al carrito cuando el usuario hace clic en el botón "Añadir al carrito". Sigue los pasos a continuación para añadir productos al carrito:

1. Selección del botón "Añadir al carrito"

   • Utiliza el método document.querySelectorAll() para seleccionar todos los botones "Añadir al carrito".
   • Almacena los botones seleccionados en una variable llamada botonesAgregar.

2. Creando la función para añadir productos al carrito

   • Crea una función llamada añadirAlCarrito() que acepte un ID de producto como parámetro.
   • Dentro de la función, recorre el array de productos y encuentra el producto correspondiente al ID dado.
   • Si el producto ya existe en el carrito, muestra un mensaje de que el producto ya está en el carrito. Si no, agrega el producto al carrito.

3. Actualizando la interfaz de usuario con los productos añadidos

   • Llama a la función añadirAlCarrito() cuando se hace clic en uno de los botones "Añadir al carrito".
   • Pasa el ID del producto como argumento a la función.
   • Después de añadir el producto al carrito, actualiza la interfaz de usuario para reflejar los cambios.

¡Excelente trabajo! Ahora puedes añadir productos al carrito haciendo clic en el botón "Añadir al carrito". En la siguiente sección, aprenderemos a cambiar la cantidad de unidades de un producto en el carrito. 🔄

Cambiando la cantidad de unidades 🔄

Ahora, vamos a añadir la funcionalidad para cambiar la cantidad de unidades de un producto en el carrito. Esto nos permitirá incrementar o decrementar la cantidad de unidades de un producto con los botones correspondientes. Sigue los pasos a continuación para cambiar la cantidad de unidades:

1. Selección de los botones de incrementar y decrementar

   • Utiliza el método document.querySelectorAll() para seleccionar todos los botones de incrementar y decrementar.
   • Almacena los botones seleccionados en una variable llamada botonesCambiar.

2. Creando la función para cambiar la cantidad de unidades

   • Crea una función llamada cambiarCantidadUnidades() que acepte dos parámetros: accion (que puede ser "incrementar" o "decrementar") y id (que es el ID del producto).
   • Dentro de la función, busca el producto correspondiente al ID dado en el carrito.
   • Si la acción es "incrementar" y el número de unidades es menor que el número de unidades en stock, incrementa el número de unidades del producto en el carrito.
   • Si la acción es "decrementar" y el número de unidades es mayor que 1, decrementa el número de unidades del producto en el carrito.

3. Actualizando la interfaz de usuario con la cantidad de unidades

   • Llama a la función cambiarCantidadUnidades() cuando se hace clic en uno de los botones de incrementar o decrementar.
   • Pasa la acción y el ID del producto como argumentos a la función.
   • Después de cambiar la cantidad de unidades, actualiza la interfaz de usuario para reflejar los cambios.

¡Muy bien! Ahora puedes cambiar la cantidad de unidades de un producto en el carrito usando los botones de incrementar y decrementar. En la siguiente sección, veremos cómo eliminar productos del carrito. ❌

Eliminando productos del carrito ❌

Ahora, vamos a añadir la funcionalidad para eliminar productos del carrito cuando el usuario haga clic en el botón "Eliminar". Sigue los pasos a continuación para eliminar productos del carrito:

1. Selección del botón "Eliminar"

   • Utiliza el método document.querySelectorAll() para seleccionar todos los botones "Eliminar".
   • Almacena los botones seleccionados en una variable llamada botonesEliminar.

2. Creando la función para eliminar productos del carrito

   • Crea una función llamada eliminarProductoDelCarrito() que acepte un ID de producto como parámetro.
   • En la función, utiliza el método .filter() en el array del carrito para devolver un nuevo array que excluya el producto con el ID dado.
   • Actualiza el array del carrito con el nuevo array filtrado.

3. Actualizando la interfaz de usuario tras eliminar un producto

   • Llama a la función eliminarProductoDelCarrito() cuando se hace clic en uno de los botones "Eliminar".
   • Pasa el ID del producto como argumento a la función.
   • Después de eliminar el producto del carrito, actualiza la interfaz de usuario para reflejar los cambios.

¡Excelente trabajo! Ahora puedes eliminar productos del carrito haciendo clic en el botón "Eliminar". En la siguiente sección, aprenderemos a calcular el subtotal. 💲

Calculando el subtotal 💲

El próximo paso es calcular el subtotal de los productos en el carrito. Esto nos permitirá mostrar a los usuarios el número total de unidades y el precio total de los productos en el carrito. Sigue los pasos a continuación para calcular el subtotal:

1. Creando la función para renderizar el subtotal

   • Crea una función llamada renderizarSubtotal() sin parámetros.
   • Dentro de la función, utiliza el método document.querySelector() para seleccionar el elemento del subtotal.
   • Almacena el elemento seleccionado en una variable llamada elementoSubtotal.

2. Calculando el número total de elementos

   • Declara una variable llamada totalItems y asígnale el valor de 0.
   • Utiliza el método .forEach() en el array del carrito para iterar sobre cada producto y sumar el número de unidades de cada producto al totalItems.
   • Actualiza el contenido del elemento elementoTotalItems utilizando el método .innerHTML.

3. Calculando el precio total

   • Declara una variable llamada totalPrice y asígnale el valor de 0.
   • Utiliza el método .forEach() en el array del carrito para iterar sobre cada producto y sumar el precio del producto multiplicado por el número de unidades al totalPrice.
   • Actualiza el contenido del elemento elementoTotalPrice utilizando el método .innerHTML.

4. Actualizando la interfaz de usuario con el subtotal

   • Llama a la función renderizarSubtotal() después de cada modificación del carrito, como añadir o eliminar productos.
   • Actualiza la interfaz de usuario para mostrar el número total de elementos y el precio total.

¡Genial! Ahora puedes calcular el subtotal de los productos en el carrito y mostrar el número total de elementos y el precio total en la interfaz de usuario. En la siguiente sección, aprenderemos a guardar el carrito en el almacenamiento local. 💾

Guardando el carrito en el almacenamiento local 💾

Para asegurarnos de que los usuarios no pierdan los productos en su carrito después de un refresco de la página, vamos a guardar el carrito en el almacenamiento local. Sigue los pasos a continuación para guardar el carrito en el almacenamiento local:

1. Guardando el carrito en el almacenamiento local

   • Utiliza el objeto localStorage y el método setItem() para guardar el carrito en el almacenamiento local.
   • Elige una clave como "carrito" y pasa el carrito como valor utilizando el método JSON.stringify() para convertirlo en una cadena JSON válida.

2. Recuperando el carrito del almacenamiento local

   • Utiliza el objeto localStorage y el método getItem() para recuperar el carrito del almacenamiento local.
   • Convierte la cadena JSON en un objeto utilizando el método JSON.parse().

3. Actualizando el carrito con el valor recuperado

   • Si hay un carrito almacenado en el almacenamiento local, actualiza el carrito con el valor recuperado.
   • Llama a la función actualizarCarrito() para asegurarte de que la interfaz de usuario refleje el carrito guardado.

¡Muy bien! Ahora puedes guardar el carrito en el almacenamiento local para que los usuarios puedan mantener sus productos incluso después de volver a cargar la página. En la siguiente sección, concluiremos el tutorial. 🏁

Conclusiones 🏁

En este tutorial, aprendimos a construir un carrito de compras utilizando JavaScript. Pasamos por los pasos de renderizar los productos en la página, añadir productos al carrito, cambiar la cantidad de unidades, eliminar productos del carrito, calcular el subtotal y guardar el carrito en el almacenamiento local. Ahora tienes el conocimiento necesario para construir un carrito de compras completamente funcional. ¡Espero que hayas disfrutado y aprendido mucho! No olvides suscribirte y darle like al video para recibir más contenido como este. ¡Hasta la próxima!

✨🛍️✨

FAQ

1. ¿Cómo puedo descargar el archivo de inicio para construir el carrito de compras?

Puedes descargar el archivo de inicio desde este enlace: Descargar archivo de inicio. Una vez descargado, descomprime el archivo en tu directorio de trabajo.

2. ¿Cómo puedo ver los productos en la página?

Después de descargar el archivo de inicio y abrir el archivo HTML en tu navegador, los productos se renderizarán automáticamente en la página.

3. ¿Cómo añado productos al carrito?

Puedes añadir productos al carrito haciendo clic en el botón "Añadir al carrito" junto al producto deseado. El producto se añadirá automáticamente al carrito.

4. ¿Cómo cambio la cantidad de unidades de un producto en el carrito?

Puedes cambiar la cantidad de unidades de un producto en el carrito utilizando los botones de incrementar y decrementar junto al producto. Haz clic en el botón "+" para incrementar la cantidad de unidades y en el botón "-" para decrementarla.

5. ¿Cómo elimino productos del carrito?

Puedes eliminar productos del carrito haciendo clic en el botón "Eliminar" junto al producto deseado. El producto se eliminará automáticamente del carrito.

6. ¿Cómo calculo el subtotal de los productos en el carrito?

El subtotal se calcula automáticamente y se muestra en la interfaz de usuario. Incluye el número total de elementos y el precio total de los productos en el carrito.

7. ¿Cómo guardo el carrito en el almacenamiento local?

El carrito se guarda automáticamente en el almacenamiento local para que los usuarios puedan mantener sus productos incluso después de volver a cargar la página.

8. ¿Cómo recupero el carrito del almacenamiento local?

El carrito se recupera automáticamente del almacenamiento local al cargar la página. Los productos del carrito se cargarán y se mostrarán en la interfaz de usuario.

9. ¿Puedo añadir nuevos productos al carrito después de guardarlos en el almacenamiento local?

Sí, puedes añadir nuevos productos al carrito en cualquier momento. Los nuevos productos se añadirán al carrito y se guardarán en el almacenamiento local automáticamente.

10. ¿Cómo actualizo el carrito después de realizar cambios?

El carrito se actualiza automáticamente después de realizar cambios como añadir, modificar o eliminar productos. Los cambios se reflejarán en la interfaz de usuario y se guardarán en el almacenamiento local.

Si tienes alguna otra pregunta, no dudes en dejar un comentario y te responderemos lo antes posible. ¡Disfruta construyendo tu carrito de compras! 🛒

Recursos

• Enlace de descarga del archivo de inicio
• Documentación de localStorage (en inglés)