Ein Vue.js-Einkaufswagen bauen

Einführung

In diesem Projekt lernst du, wie du eine Einkaufswagenfunktionalität mit Vue.js 2.x aufbaust. Der Einkaufswagen ist ein essentieller Bestandteil von E-Commerce-Websites und ermöglicht es Benutzern, die gewählten Produkte vor dem Kauf zu verwalten.

👀 Vorschau

🎯 Aufgaben

In diesem Projekt wirst du lernen:

• Wie du die addToCart-Methode modifizierst, um Produkte in den Einkaufswagen hinzuzufügen
• Wie du die removeGoods-Methode verbesserst, um Produkte aus dem Einkaufswagen zu entfernen
• Wie du die gesamte Einkaufswagenfunktionalität testest

🏆 Errungenschaften

Nach Abschluss dieses Projekts wirst du in der Lage sein:

• Den Zustand eines Einkaufswagens in einer Vue.js-Anwendung zu verwalten
• Die Hinzufügung und Entfernung von Produkten im Einkaufswagen zu behandeln
• Die Benutzeroberfläche basierend auf den Änderungen im Einkaufswagen zu aktualisieren

Projektstruktur einrichten

In diesem Schritt wirst du die Projekt-Dateien und -struktur einrichten. Folge den untenstehenden Schritten, um diesen Schritt abzuschließen:

Öffne den Projektordner. Die Verzeichnisstruktur sieht wie folgt aus:

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

Dabei gilt:

• css/index.css ist die Styledatei.
• images ist der Bilderordner.
• js/goods.js ist die Daten-Datei.
• js/vue.js ist die Vue 2.x-Datei.
• index.html beinhaltet die Seitenlayout- und -logik.

Klicke auf die Schaltfläche Go Live in der unteren rechten Ecke von WebIDE, um das Projekt auszuführen.

Als Nächstes öffne "Web 8080" oben im VM und aktualisiere es manuell, um die Seite zu sehen.

Die derzeit auftretenden Probleme sind wie folgt:

• Wenn man im "Produktliste" N-mal auf die Schaltfläche "In den Warenkorb legen" klickt, erscheint das Produkt N-mal in der Warenkorb-Liste mit einer Anfangsmenge von 1.
• Wenn man auf die Plus-("+")-Schaltfläche neben dem Produkt im Warenkorb klickt, wird das Produkt in der Warenkorb-Liste mit einer Anfangsmenge von 1 wiederholt.
• Wenn man auf die Minus-("-")-Schaltfläche neben dem Produkt im Warenkorb klickt, wird das Produkt nicht aus dem Warenkorb entfernt.

addToCart-Methode ändern

In diesem Schritt wirst du lernen, wie du die addToCart-Methode ändern, um Produkte in den Einkaufswagen hinzuzufügen.

1. Öffne die Datei index.html.
2. Locate die addToCart-Methode in der Vue-Instanz.
3. Ändere die addToCart-Methode, um die folgenden Anforderungen zu erfüllen:
   • Wenn das Produkt nicht im Einkaufswagen vorhanden ist, füge es am Ende des Warenkorbs hinzu und initialisiere die Menge mit 1.
   • Wenn das Produkt bereits im Einkaufswagen vorhanden ist, erhöhe einfach die Menge um 1.

Die geänderte addToCart-Methode sollte so aussehen:

addToCart(goods) {
  // TODO: Ändere die aktuelle Funktion, um die Anforderungen für das Hinzufügen von Produkten zum Einkaufswagen zu realisieren

  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. Speichere die Datei index.html.

removeGoods-Methode verbessern

In diesem Schritt wirst du lernen, wie du die removeGoods-Methode verbessern, um Produkte aus dem Einkaufswagen zu entfernen.

1. Öffne die Datei index.html.
2. Locate die removeGoods-Methode in der Vue-Instanz.
3. Verbessere die removeGoods-Methode, um die folgenden Anforderungen zu erfüllen:
   • Wenn man auf die Minus-("-")-Schaltfläche neben dem Produkt im Einkaufswagen klickt, verringere die Menge um 1.
   • Wenn die resultierende Menge 0 ist, entferne das Produkt aus dem Einkaufswagen.

Die removeGoods-Methode sollte so aussehen:

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. Speichere die Datei index.html.

Teste die Einkaufswagenfunktionalität

1. Aktualisiere die Seite in deinem Browser.

2. Verifiziere, dass die Schaltfläche "In den Warenkorb legen" korrekt funktioniert:

   • Wenn das Produkt nicht im Einkaufswagen vorhanden ist, sollte es mit einer Menge von 1 hinzugefügt werden.
   • Wenn das Produkt bereits im Einkaufswagen vorhanden ist, sollte die Menge um 1 erhöht werden.

3. Verifiziere, dass die "+"- und "-"-Schaltflächen im Einkaufswagen korrekt funktionieren:

   • Beim Klicken auf die "+"-Schaltfläche sollte die Menge des Produkts um 1 erhöht werden.
   • Beim Klicken auf die "-"-Schaltfläche sollte die Menge des Produkts um 1 verringert werden.
   • Wenn die Menge auf 0 fällt, sollte das Produkt aus dem Einkaufswagen entfernt werden.

Die endgültige Implementierung sieht wie folgt aus:

Herzlichen Glückwunsch! Du hast das Einkaufswagen-Projekt erfolgreich abgeschlossen.

Zusammenfassung

Herzlichen Glückwunsch! Du hast dieses Projekt abgeschlossen. Du kannst in LabEx weitere Übungen absolvieren, um deine Fähigkeiten zu verbessern.