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.
Configurer 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
imagesfournit les images des produits nécessaires à la page. index.cssest le fichier de style.index.htmlest la page principale.js/vue.min.jsetjs/http-vue-loader.jssont des fichiers liés à la bibliothèque Vue.trolley.vueest 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émenter 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.
- Ouvrez le fichier
trolley.vue. - Dans la fonction
data(), vous pouvez voir le tableaugoods, qui contient les informations sur les produits. Ces données seront utilisées pour afficher les produits dans la section "Liste de biens". - 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
dragstartest appelée lorsque l'utilisateur commence à faire glisser un produit. Elle définit le nom et le prix du produit dans l'objetdataTransfer, qui peut être consulté plus tard dans la méthodedrop. - La méthode
dragoverest 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énementdropfonctionne. - La méthode
dropest 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'objetdataTransferet ajoute le produit au tableaubought.
- 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
totalPricecalcule le prix total des produits dans le panier d'achat. - La propriété calculée
goodsDetailgé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.
- Dans la section
templatedu fichiertrolley.vue, localisez l'élément<div class="good-list">. - 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>
- Localisez l'élément
<div class="trolley" id="trolley">. - 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>
Tester le panier d'achat en ligne
- Enregistrez le fichier
trolley.vue. - Raffraîchissez la page pour voir l'état initial du panier d'achat en ligne.
- Essayez de glisser-déposer les images des produits dans le panier d'achat.
- Observez les modifications dans le panier d'achat, y compris le nombre de produits, les détails des produits et le prix total.
- 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.
Résumé
Félicitations! Vous avez terminé ce projet. Vous pouvez pratiquer plus de laboratoires dans LabEx pour améliorer vos compétences.
