Carrito de compras de Vue.js con arrastrar y soltar

Introducción

En este proyecto, aprenderás a implementar un carrito de compras en línea con funcionalidad de arrastrar y soltar. Este proyecto tiene como objetivo ayudarte a entender y aplicar los conceptos de Vue.js y las API de arrastrar y soltar proporcionadas por los navegadores web.

👀 Vista previa

🎯 Tareas

En este proyecto, aprenderás:

• Cómo configurar el proyecto y familiarizarte con los archivos y la estructura proporcionados.
• Cómo implementar la funcionalidad de arrastrar y soltar para el carrito de compras en línea, permitiendo a los usuarios agregar productos al carrito.
• Cómo mostrar la información del carrito de compras, incluyendo la cantidad de productos, los detalles del producto y el precio total.
• Cómo probar el carrito de compras en línea y asegurarse de que la funcionalidad funcione como se espera.

🏆 Logros

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

• Utilizar Vue.js para construir una aplicación web.
• Implementar la funcionalidad de arrastrar y soltar utilizando las API integradas del navegador web.
• Mostrar datos dinámicos y actualizar la interfaz de usuario en función de las interacciones del usuario.
• Escribir código limpio y mantenible organizando tu aplicación en componentes.

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:

├── images
│   ├── book.jpeg
│   ├── box.jpeg
│   ├── paper.jpeg
│   ├── trolley.jpeg
│   └── tv.jpg
├── index.css
├── index.html
├── js
│   ├── http-vue-loader.js
│   └── vue.min.js
└── trolley.vue

Entre ellos:

• La carpeta images proporciona las imágenes de los productos necesarias para la página.
• index.css es el archivo de estilos.
• index.html es la página principal.
• js/vue.min.js y js/http-vue-loader.js son archivos relacionados con la biblioteca Vue.
• trolley.vue es el archivo de componente que se debe completar.

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

A continuación, abre "Web 8080" en la parte superior de la VM y actualízala manualmente y verás la página.

Implementar la funcionalidad de arrastrar y soltar

En este paso, implementarás la funcionalidad de arrastrar y soltar para el carrito de compras en línea.

1. Abre el archivo trolley.vue.
2. En la función data(), puedes ver el array goods, que contiene la información de los productos. Estos datos se utilizarán para mostrar los productos en la sección "Lista de productos".
3. Agrega el siguiente código en la sección methods:

methods: {
  dragstart(e, good) {
    e.dataTransfer.setData("name", good.name);
    e.dataTransfer.setData("price", good.price);
  },
  dragover(e) {
    e.preventDefault();
  },
  drop(e) {
    const { bought } = this;
    const name = e.dataTransfer.getData("name");
    const price = e.dataTransfer.getData("price");
    bought.push({ name, price: Number(price) });
  }
}

Explicación:

• El método dragstart se llama cuando el usuario comienza a arrastrar un producto. Establece el nombre y el precio del producto en el objeto dataTransfer, que se puede acceder más adelante en el método drop.
• El método dragover se llama cuando el elemento arrastrado está sobre el carrito de compras. Evita el comportamiento predeterminado del navegador, lo cual es necesario para que funcione el evento drop.
• El método drop se llama cuando el usuario suelta el elemento arrastrado en el carrito de compras. Recupera el nombre y el precio del producto del objeto dataTransfer y agrega el producto al array bought.

4. En la sección computed, agrega el siguiente código:

computed: {
  totalPrice() {
    const { bought } = this;
    var sum = 0;
    for (key in bought) {
      sum += bought[key].price;
    }
    return sum;
  },
  goodsDetail() {
    const { bought } = this;
    const names = [];
    const goods = [];
    for (key in bought) {
      names.push(bought[key].name);
    }
    function getRepeatNum() {
      return names.reduce(function (prev, next) {
        prev[next] = prev[next] + 1 || 1;
        return prev;
      }, {});
    }
    for (key in getRepeatNum()) {
      goods.push(`${key}*${getRepeatNum()[key]}`);
    }
    return goods.join(" ");
  }
},

Explicación:

• La propiedad computada totalPrice calcula el precio total de los productos en el carrito de compras.
• La propiedad computada goodsDetail genera los detalles de los productos en el carrito de compras, mostrando el nombre y la cantidad del producto.

Vincular eventos de arrastrar y soltar a HTML

En este paso, necesitamos vincular el evento de arrastrar y soltar a la etiqueta div.

1. En la sección template del archivo trolley.vue, localiza el elemento <div class="good-list">.
2. En el elemento <div class="good-list"> cambia el código a lo siguiente:

<div class="good-list">
  <div
    v-for="good in goods"
    :key="good.name"
    class="good"
    draggable="true"
    @dragstart="dragstart($event, good)"
  >
    <img :src="good.cover" draggable="false" />
    <span>{{ good.name }}</span>
    <span>$ {{ good.price }}</span>
  </div>
</div>

3. Localiza el elemento <div class="trolley" id="trolley">.
4. Cambia el elemento <div class="trolley" id="trolley"> al siguiente código:

<div id="trolley" class="trolley" @dragover="dragover" @drop="drop">
  <span id="bought" class="bought" v-if="bought.length!== 0"
    >{{ bought.length }}</span
  >
  <img src="./images/trolley.jpeg" />
</div>

Probar el carrito de compras en línea

1. Guarda el archivo trolley.vue.
2. Actualiza la página para ver el estado inicial del carrito de compras en línea.
3. Intenta arrastrar y soltar las imágenes de los productos en el carrito de compras.
4. Observa los cambios en el carrito de compras, incluyendo la cantidad de productos, los detalles del producto y el precio total.
5. Asegúrate de que la funcionalidad funcione como se espera.

El efecto de implementación final es el siguiente:

¡Felicidades! Has implementado con éxito el carrito de compras en línea utilizando el proyecto base proporcionado y la funcionalidad de arrastrar y soltar.

Resumen

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