Panier d'achat Vue.js avec glisser-déposer

Introduction

Dans ce projet, vous allez apprendre à implémenter un panier d'achat en ligne avec une fonctionnalité de glisser-déposer. Ce projet vise à vous aider à comprendre et à appliquer les concepts de Vue.js et des API de glisser-déposer fournies par les navigateurs web.

👀 Aperçu

🎯 Tâches

Dans ce projet, vous allez apprendre :

• Comment configurer le projet et vous familiariser avec les fichiers et la structure fournis.
• Comment implémenter la fonctionnalité de glisser-déposer pour le panier d'achat en ligne, permettant aux utilisateurs d'ajouter des produits au panier.
• Comment afficher les informations du panier d'achat, y compris le nombre de produits, les détails des produits et le prix total.
• Comment tester le panier d'achat en ligne et vous assurer que la fonctionnalité fonctionne comme prévu.

🏆 Réalisations

Après avoir terminé ce projet, vous serez capable de :

• Utiliser Vue.js pour construire une application web.
• Implémenter une fonctionnalité de glisser-déposer à l'aide des API intégrées du navigateur web.
• Afficher des données dynamiques et mettre à jour l'interface utilisateur en fonction des interactions de l'utilisateur.
• Écrire un code propre et maintenable en organisant votre application en composants.

Skills Graph

Configure la structure du projet

Dans cette étape, vous allez configurer les fichiers et la structure du projet. Suivez les étapes ci-dessous pour terminer cette étape :

Ouvrez le dossier du projet. La structure de répertoire est la suivante :

├── 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

Dans cette structure :

• Le dossier images fournit les images des produits nécessaires à la page.
• index.css est le fichier de style.
• index.html est la page principale.
• js/vue.min.js et js/http-vue-loader.js sont des fichiers liés à la bibliothèque Vue.
• trolley.vue est le fichier de composant qui doit être complété.

Cliquez sur le bouton Go Live dans le coin inférieur droit de WebIDE pour exécuter le projet.

Ensuite, ouvrez "Web 8080" en haut de la machine virtuelle et rafraîchissez-la manuellement, vous verrez la page.

Implémentez la fonctionnalité de glisser-déposer

Dans cette étape, vous allez implémenter la fonctionnalité de glisser-déposer pour le panier d'achat en ligne.

1. Ouvrez le fichier trolley.vue.
2. Dans la fonction data(), vous pouvez voir le tableau goods, qui contient les informations sur les produits. Ces données seront utilisées pour afficher les produits dans la section "Liste de biens".
3. Ajoutez le code suivant dans la section 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) });
  }
}

Explication :

• La méthode dragstart est appelée lorsque l'utilisateur commence à faire glisser un produit. Elle définit le nom et le prix du produit dans l'objet dataTransfer, qui peut être consulté plus tard dans la méthode drop.
• La méthode dragover est appelée lorsque l'élément glissé est au-dessus du panier d'achat. Elle empêche le comportement par défaut du navigateur, ce qui est nécessaire pour que l'événement drop fonctionne.
• La méthode drop est appelée lorsque l'utilisateur dépose l'élément glissé dans le panier d'achat. Elle récupère le nom et le prix du produit à partir de l'objet dataTransfer et ajoute le produit au tableau bought.

4. Dans la section computed, ajoutez le code suivant :

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(" ");
  }
},

Explication :

• La propriété calculée totalPrice calcule le prix total des produits dans le panier d'achat.
• La propriété calculée goodsDetail génère les détails des produits dans le panier d'achat, en affichant le nom et la quantité du produit.

Lier les événements de glisser-déposer à HTML

Dans cette étape, nous devons lier l'événement de glisser-déposer à la balise div.

1. Dans la section template du fichier trolley.vue, localisez l'élément <div class="good-list">.
2. Dans l'élément <div class="good-list">, modifiez-le en utilisant le code suivant :

<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. Localisez l'élément <div class="trolley" id="trolley">.
4. Modifiez l'élément <div class="trolley" id="trolley"> en utilisant le code suivant :

<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>

Testez le panier d'achat en ligne

1. Enregistrez le fichier trolley.vue.
2. Raffraîchissez la page pour voir l'état initial du panier d'achat en ligne.
3. Essayez de glisser-déposer les images des produits dans le panier d'achat.
4. Observez les modifications dans le panier d'achat, y compris le nombre de produits, les détails des produits et le prix total.
5. Assurez-vous que la fonctionnalité fonctionne comme prévu.

L'effet de l'implémentation finale est le suivant :

Félicitations! Vous avez réussi à implémenter le panier d'achat en ligne à l'aide du projet de base fourni et de la fonctionnalité de glisser-déposer.

Sommaire

Félicitations! Vous avez terminé ce projet. Vous pouvez pratiquer plus de laboratoires dans LabEx pour améliorer vos compétences.