Création d'un panier d'achat avec Vue.js

Introduction

Dans ce projet, vous allez apprendre à construire une fonctionnalité de panier d'achat à l'aide de Vue.js 2.x. Le panier d'achat est une fonctionnalité essentielle sur les sites e-commerce, permettant aux utilisateurs de gérer les produits sélectionnés avant de passer commande.

👀 Aperçu

🎯 Tâches

Dans ce projet, vous allez apprendre :

• Comment modifier la méthode addToCart pour ajouter des produits au panier d'achat
• Comment améliorer la méthode removeGoods pour supprimer des produits du panier d'achat
• Comment tester la fonctionnalité globale du panier d'achat

🏆 Réalisations

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

• Gérer l'état d'un panier d'achat dans une application Vue.js
• Gérer l'ajout et la suppression de produits dans le panier d'achat
• Mettre à jour l'interface utilisateur en fonction des changements dans le panier d'achat

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épertoires est la suivante :

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

Où :

• css/index.css est le fichier de style.
• images est le dossier d'images.
• js/goods.js est le fichier de données.
• js/vue.js est le fichier Vue 2.x.
• index.html est la mise en page et la logique de la page.

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 manuellement pour voir la page.

Les problèmes actuels sont les suivants :

• Lorsque l'on clique N fois sur le bouton "Ajouter au panier" dans la "Liste de produits", le produit apparaîtra N fois dans la liste du panier d'achat avec une quantité initiale de 1.
• Lorsque l'on clique sur le bouton plus ("+") à côté du produit dans le panier d'achat, le produit sera répété dans la liste du panier d'achat avec une quantité initiale de 1.
• Lorsque l'on clique sur le bouton moins ("-") à côté du produit dans le panier d'achat, le produit n'est pas supprimé du panier.

Modifier la méthode addToCart

Dans cette étape, vous allez apprendre à modifier la méthode addToCart pour ajouter des produits au panier d'achat.

1. Ouvrez le fichier index.html.
2. Localisez la méthode addToCart dans l'instance Vue.
3. Modifiez la méthode addToCart pour répondre aux exigences suivantes :
   • Si le produit n'existe pas dans le panier d'achat, ajoutez-le à la fin du panier et initialisez la quantité à 1.
   • Si le produit existe déjà dans le panier d'achat, augmentez simplement la quantité de 1.

La méthode addToCart modifiée devrait ressembler à ceci :

addToCart(goods) {
  // TODO: Modifier la fonction actuelle pour réaliser les exigences d'ajout de produit au panier

  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. Enregistrez le fichier index.html.

Améliorer la méthode removeGoods

Dans cette étape, vous allez apprendre à améliorer la méthode removeGoods pour supprimer des produits du panier d'achat.

1. Ouvrez le fichier index.html.
2. Localisez la méthode removeGoods dans l'instance Vue.
3. Améliorez la méthode removeGoods pour répondre aux exigences suivantes :
   • Lorsque l'on clique sur le bouton moins ("-") à côté du produit dans le panier d'achat, diminuer la quantité de 1.
   • Si la quantité résultante est 0, supprimer le produit du panier d'achat.

La méthode removeGoods devrait ressembler à ceci :

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. Enregistrez le fichier index.html.

Tester la fonctionnalité du panier d'achat

1. Rafraîchissez la page dans votre navigateur.

2. Vérifiez que le bouton "Ajouter au panier" fonctionne correctement :

   • Si le produit n'existe pas dans le panier d'achat, il devrait être ajouté avec une quantité de 1.
   • Si le produit existe déjà dans le panier d'achat, la quantité devrait être augmentée de 1.

3. Vérifiez que les boutons "+" et "-" dans le panier d'achat fonctionnent correctement :

   • Cliquez sur le bouton "+" pour augmenter la quantité du produit de 1.
   • Cliquez sur le bouton "-" pour diminuer la quantité du produit de 1.
   • Si la quantité atteint 0, le produit devrait être supprimé du panier d'achat.

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

Félicitations! Vous avez réussi à terminer le projet du panier d'achat.

Résumé

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