Wie lässt sich in BigCommerce eine Funktion zum Hinzufügen mehrerer Varianten auf einmal zum Warenkorb erstellen?

B2B, BigCommerce

Für viele B2B- und Großhandelsunternehmen reicht die Standard-Produktseite nicht immer aus. Kunden müssen oft mehrere Produktvarianten gleichzeitig kaufen. Anstatt eine Variante auszuwählen, sie in den Warenkorb zu legen und den Vorgang zu wiederholen, wünschen sie sich eine schnellere Möglichkeit, umfangreiche Bestellungen zusammenzustellen. Eine Funktion zum Hinzufügen mehrerer Varianten auf einmal in den Warenkorb löst dieses Problem. Sie ermöglicht es Kunden, Mengen für mehrere Varianten auszuwählen und alles mit einem einzigen Klick in den Warenkorb zu legen.

In diesem Artikel erfahren Sie, wie diese Funktion in BigCommerce mithilfe von Storefront-JavaScript und der Warenkorb-API funktioniert. Der Artikel behandelt die Vorteile, die technischen Voraussetzungen und den Implementierungsprozess.

Anwendungsfälle

Eine Oberfläche zum Hinzufügen mehrerer Varianten auf einmal zum Warenkorb kann das Einkaufserlebnis für verschiedene Arten von Shops verbessern.

B2B- und Großhandelsgeschäfte

Großhandelskunden bestellen oft mehrere Größen, Farben oder Konfigurationen in einem Kaufvorgang. Eine Tabelle für Sammelbestellungen ermöglicht es ihnen, große Bestellungen schnell zusammenzustellen.

Lieferanten aus Industrie und Fertigung

Kunden kaufen häufig mehrere Artikelnummern oder Produktvarianten gleichzeitig. Ein Workflow zum Hinzufügen mehrerer Varianten zum Warenkorb reduziert sich wiederholende Aktionen und spart den Kunden Zeit.

Bekleidungs- und Modegeschäfte

Käufer können Mengen für mehrere Größen und Farben eingeben, ohne wiederholt durch die Variantenauswahl navigieren zu müssen.

Elektronik- und Komponentengeschäfte

Kunden können verschiedene Spezifikationen, Längen oder Steckertypen von einer einzigen Produktseite aus bestellen.

Stammkunden

Stammkunden wissen in der Regel genau, was sie benötigen. Durch Sammelbestellungen können sie ihre Einkäufe schneller abschließen.

Voraussetzungen

Bevor Sie die Funktion implementieren, stellen Sie bitte sicher, dass die folgenden Voraussetzungen erfüllt sind.

Zugriff auf den BigCommerce-Shop

Sie sollten Zugriff auf die Theme-Dateien haben und in der Lage sein, die Vorlagen für Produktseiten zu bearbeiten.

Produktvarianten

Die Funktion eignet sich am besten für Produkte, die mehrere Varianten enthalten, wie zum Beispiel:

  • Größe
  • Farbe
  • Material
  • Länge
  • Konfiguration

Kenntnisse in Storefront-JavaScript

Grundlegende Kenntnisse in JavaScript sind erforderlich, um:

  • Variantendaten auszulesen
  • Mengenauswahlen zu erfassen
  • Anfragen an den Warenkorb zu senden

BigCommerce-Warenkorb-API

Die Implementierung nutzt die Warenkorb-API, um mehrere Artikelpositionen in einer einzigen Anfrage hinzuzufügen.

Produktvariantendaten

Sie benötigen Zugriff auf Varianteninformationen wie:

  • Produkt-ID
  • Varianten-ID
  • SKU
  • Optionswerte
  • Lagerstatus

So erstellen Sie in BigCommerce eine Funktion zum Hinzufügen mehrerer Varianten zum Warenkorb im Massenverfahren:

Schritt 1: Anzeigen der Varianten in einer Tabelle für Massenbestellungen

Anstelle eines standardmäßigen Varianten-Dropdown-Menüs zeigen Sie alle verfügbaren Varianten in einer Tabelle an. Kunden können die Mengen direkt in die Tabelle eingeben. Dieser Ansatz macht alle verfügbaren Optionen auf einen Blick sichtbar und reduziert unnötige Klicks. Beispielspalten können sein:

Schritt 2: Erfassung der ausgewählten Mengen

Verfolgen Sie mithilfe von Storefront-JavaScript Änderungen der Mengenangaben und erfassen Sie nur die Varianten mit Mengen größer als Null. So entsteht eine übersichtliche Liste der Varianten, die in den Warenkorb gelegt werden sollen. Beispiel für eine Datenstruktur:

[
  {
    variantId: 101,
    quantity: 5
  },
  {
    variantId: 102,
    quantity: 3
  }
]

Schritt 3: Die Payload für die Warenkorb-API erstellen

Konvertieren Sie die ausgewählten Varianten in das von der BigCommerce-Warenkorb-API erwartete Format. Jede Position steht für eine eindeutige Variante und Menge. Beispiel:

{
  lineItems: [
    {
      quantity: 5,
      productId: 123,
      variantId: 101
    },
    {
      quantity: 3,
      productId: 123,
      variantId: 102
    }
  ]
}

Schritt 4: Eine einzige Warenkorb-Anfrage senden

Wenn der Kunde auf die Schaltfläche „In den Warenkorb hinzufügen“ klickt, senden Sie alle ausgewählten Varianten in einer einzigen API-Anfrage. Dies sorgt für ein schnelleres und effizienteres Erlebnis im Vergleich zum Senden separater Anfragen für jede einzelne Variante.

fetch('/api/storefront/carts', {
  method: 'POST',
  credentials: 'same-origin',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(payload)
});

Schritt 5: Erfolgsmeldungen und Fehlermeldungen verarbeiten

Nachdem die API-Anfrage abgeschlossen ist:

  • Zeigen Sie eine Erfolgsmeldung an.
  • Aktualisieren Sie die Menge im Warenkorb.
  • Aktualisieren Sie gegebenenfalls den Mini-Warenkorb.
  • Zeigen Sie Validierungsmeldungen für ungültige Mengen an.
  • Behandeln Sie lagerbezogene Fehler auf elegante Weise.

Eine klare Rückmeldung hilft Kunden zu verstehen, ob ihre Produkte erfolgreich hinzugefügt wurden.

Schritt 6: Die Benutzererfahrung verbessern

Mehrere Verbesserungen können die Funktion noch nützlicher machen.

  • Mengenvalidierung: Verhindern Sie negative Werte und ungültige Eingaben, bevor die Anfrage gesendet wird.
  • Bestandsüberwachung: Deaktivieren Sie die Mengeneingabe für nicht vorrätige Varianten.
  • Suche und Filterung: Ermöglichen Sie es Kunden, bestimmte Varianten in großen Tabellen schnell zu finden.
  • Feststehender „In den Warenkorb“-Button: Halten Sie den Aktionsbutton sichtbar, während Kunden durch lange Variantenlisten scrollen.
  • Mengenaktionen für mehrere Artikel: Bieten Sie Schnellfunktionen wie die folgenden an:
  • Alle löschen
  • Alle auswählen
  • Menge auf mehrere Varianten anwenden

Die Implementierung einer Funktion zum Hinzufügen mehrerer Varianten zum Warenkorb im Massenmodus bietet mehrere geschäftliche Vorteile:

  • Schnellerer Bestellvorgang
  • Verbessertes Kundenerlebnis
  • Höherer durchschnittlicher Bestellwert
  • Weniger abgebrochene Warenkörbe
  • Bessere Unterstützung für B2B-Einkaufsworkflows
  • Weniger Klicks zum Abschluss großer Bestellungen

Für Shops, die auf Stammkunden oder Großhandelskunden angewiesen sind, können diese Verbesserungen einen messbaren Einfluss auf die Konversionsrate haben.

Bitte kontaktieren Sie uns unter manish@bay20.com oder rufen Sie uns unter +91-9582784309 oder +91-8800519180 an, wenn Sie Unterstützung im Zusammenhang mit Bigcommerce benötigen. Sie können auch unsere Website besuchen, um sich über unsere Dienstleistungen zu informieren.