{"id":17785,"date":"2026-08-05T12:37:50","date_gmt":"2026-08-05T06:52:50","guid":{"rendered":"https:\/\/www.bay20.com\/de\/?p=17785"},"modified":"2026-08-05T13:11:04","modified_gmt":"2026-08-05T07:26:04","slug":"wie-laesst-sich-in-bigcommerce-eine-funktion-zum-hinzufuegen-mehrerer-varianten-auf-einmal-zum-warenkorb-erstellen","status":"publish","type":"post","link":"https:\/\/www.bay20.com\/de\/wie-laesst-sich-in-bigcommerce-eine-funktion-zum-hinzufuegen-mehrerer-varianten-auf-einmal-zum-warenkorb-erstellen\/","title":{"rendered":"Wie l\u00e4sst sich in BigCommerce eine Funktion zum Hinzuf\u00fcgen mehrerer Varianten auf einmal zum Warenkorb erstellen?"},"content":{"rendered":"\n<p>F\u00fcr viele B2B- und Gro\u00dfhandelsunternehmen reicht die Standard-Produktseite nicht immer aus. Kunden m\u00fcssen oft mehrere Produktvarianten gleichzeitig kaufen. Anstatt eine Variante auszuw\u00e4hlen, sie in den Warenkorb zu legen und den Vorgang zu wiederholen, w\u00fcnschen sie sich eine schnellere M\u00f6glichkeit, umfangreiche Bestellungen zusammenzustellen. Eine Funktion zum Hinzuf\u00fcgen mehrerer Varianten auf einmal in den Warenkorb l\u00f6st dieses Problem. Sie erm\u00f6glicht es Kunden, Mengen f\u00fcr mehrere Varianten auszuw\u00e4hlen und alles mit einem einzigen Klick in den Warenkorb zu legen.<\/p>\n\n\n\n<p>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.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Anwendungsf\u00e4lle<\/strong><\/h2>\n\n\n\n<p>Eine Oberfl\u00e4che zum Hinzuf\u00fcgen mehrerer Varianten auf einmal zum Warenkorb kann das Einkaufserlebnis f\u00fcr verschiedene Arten von Shops verbessern.<\/p>\n\n\n\n<p><strong>B2B- und Gro\u00dfhandelsgesch\u00e4fte<\/strong><\/p>\n\n\n\n<p>Gro\u00dfhandelskunden bestellen oft mehrere Gr\u00f6\u00dfen, Farben oder Konfigurationen in einem Kaufvorgang. Eine Tabelle f\u00fcr Sammelbestellungen erm\u00f6glicht es ihnen, gro\u00dfe Bestellungen schnell zusammenzustellen.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Lieferanten aus Industrie und Fertigung<\/strong><\/h3>\n\n\n\n<p>Kunden kaufen h\u00e4ufig mehrere Artikelnummern oder Produktvarianten gleichzeitig. Ein Workflow zum Hinzuf\u00fcgen mehrerer Varianten zum Warenkorb reduziert sich wiederholende Aktionen und spart den Kunden Zeit.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Bekleidungs- und Modegesch\u00e4fte<\/strong><\/h3>\n\n\n\n<p>K\u00e4ufer k\u00f6nnen Mengen f\u00fcr mehrere Gr\u00f6\u00dfen und Farben eingeben, ohne wiederholt durch die Variantenauswahl navigieren zu m\u00fcssen.<\/p>\n\n\n\n<p><strong>Elektronik- und Komponentengesch\u00e4fte<\/strong><\/p>\n\n\n\n<p>Kunden k\u00f6nnen verschiedene Spezifikationen, L\u00e4ngen oder Steckertypen von einer einzigen Produktseite aus bestellen.<\/p>\n\n\n\n<p><strong>Stammkunden<\/strong><\/p>\n\n\n\n<p>Stammkunden wissen in der Regel genau, was sie ben\u00f6tigen. Durch Sammelbestellungen k\u00f6nnen sie ihre Eink\u00e4ufe schneller abschlie\u00dfen.<\/p>\n\n\n\n<p><strong>Voraussetzungen<\/strong><\/p>\n\n\n\n<p>Bevor Sie die Funktion implementieren, stellen Sie bitte sicher, dass die folgenden Voraussetzungen erf\u00fcllt sind.<\/p>\n\n\n\n<p><strong>Zugriff auf den BigCommerce-Shop<\/strong><\/p>\n\n\n\n<p>Sie sollten Zugriff auf die Theme-Dateien haben und in der Lage sein, die Vorlagen f\u00fcr Produktseiten zu bearbeiten.<\/p>\n\n\n\n<p><strong>Produktvarianten<\/strong><\/p>\n\n\n\n<p>Die Funktion eignet sich am besten f\u00fcr Produkte, die mehrere Varianten enthalten, wie zum Beispiel:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Gr\u00f6\u00dfe<\/li>\n\n\n\n<li>Farbe<\/li>\n\n\n\n<li>Material<\/li>\n\n\n\n<li>L\u00e4nge<\/li>\n\n\n\n<li>Konfiguration<\/li>\n<\/ul>\n\n\n\n<p><strong>Kenntnisse in Storefront-JavaScript<\/strong><\/p>\n\n\n\n<p>Grundlegende Kenntnisse in JavaScript sind erforderlich, um:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Variantendaten auszulesen<\/li>\n\n\n\n<li>Mengenauswahlen zu erfassen<\/li>\n\n\n\n<li>Anfragen an den Warenkorb zu senden<\/li>\n<\/ul>\n\n\n\n<p><strong>BigCommerce-Warenkorb-API<\/strong><\/p>\n\n\n\n<p>Die Implementierung nutzt die Warenkorb-API, um mehrere Artikelpositionen in einer einzigen Anfrage hinzuzuf\u00fcgen.<\/p>\n\n\n\n<p><strong>Produktvariantendaten<\/strong><\/p>\n\n\n\n<p>Sie ben\u00f6tigen Zugriff auf Varianteninformationen wie:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Produkt-ID<\/li>\n\n\n\n<li>Varianten-ID<\/li>\n\n\n\n<li>SKU<\/li>\n\n\n\n<li>Optionswerte<\/li>\n\n\n\n<li>Lagerstatus<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>So erstellen Sie in BigCommerce eine Funktion zum Hinzuf\u00fcgen mehrerer Varianten zum Warenkorb im Massenverfahren:<\/strong><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Schritt 1: Anzeigen der Varianten in einer Tabelle f\u00fcr Massenbestellungen<\/strong><\/h3>\n\n\n\n<p>Anstelle eines standardm\u00e4\u00dfigen Varianten-Dropdown-Men\u00fcs zeigen Sie alle verf\u00fcgbaren Varianten in einer Tabelle an. Kunden k\u00f6nnen die Mengen direkt in die Tabelle eingeben. Dieser Ansatz macht alle verf\u00fcgbaren Optionen auf einen Blick sichtbar und reduziert unn\u00f6tige Klicks. Beispielspalten k\u00f6nnen sein:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"980\" height=\"112\" src=\"https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2026\/08\/image-1-980x112.png\" alt=\"\" class=\"wp-image-17788\" srcset=\"https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2026\/08\/image-1-980x112.png 980w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2026\/08\/image-1-300x34.png 300w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2026\/08\/image-1-768x88.png 768w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2026\/08\/image-1-1000x114.png 1000w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2026\/08\/image-1-800x91.png 800w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2026\/08\/image-1.png 1167w\" sizes=\"auto, (max-width: 980px) 100vw, 980px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Schritt 2: Erfassung der ausgew\u00e4hlten Mengen<\/strong><\/h3>\n\n\n\n<p>Verfolgen Sie mithilfe von Storefront-JavaScript \u00c4nderungen der Mengenangaben und erfassen Sie nur die Varianten mit Mengen gr\u00f6\u00dfer als Null. So entsteht eine \u00fcbersichtliche Liste der Varianten, die in den Warenkorb gelegt werden sollen. Beispiel f\u00fcr eine Datenstruktur:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&#91;\n  {\n    variantId: 101,\n    quantity: 5\n  },\n  {\n    variantId: 102,\n    quantity: 3\n  }\n]<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Schritt 3: Die Payload f\u00fcr die Warenkorb-API erstellen<\/strong><\/h3>\n\n\n\n<p>Konvertieren Sie die ausgew\u00e4hlten Varianten in das von der BigCommerce-Warenkorb-API erwartete Format. Jede Position steht f\u00fcr eine eindeutige Variante und Menge. Beispiel:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>{\n  lineItems: &#91;\n    {\n      quantity: 5,\n      productId: 123,\n      variantId: 101\n    },\n    {\n      quantity: 3,\n      productId: 123,\n      variantId: 102\n    }\n  ]\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Schritt 4: Eine einzige Warenkorb-Anfrage senden<\/strong><\/h3>\n\n\n\n<p>Wenn der Kunde auf die Schaltfl\u00e4che \u201eIn den Warenkorb hinzuf\u00fcgen\u201c klickt, senden Sie alle ausgew\u00e4hlten Varianten in einer einzigen API-Anfrage. Dies sorgt f\u00fcr ein schnelleres und effizienteres Erlebnis im Vergleich zum Senden separater Anfragen f\u00fcr jede einzelne Variante.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>fetch('\/api\/storefront\/carts', {\n  method: 'POST',\n  credentials: 'same-origin',\n  headers: {\n    'Content-Type': 'application\/json'\n  },\n  body: JSON.stringify(payload)\n});<\/code><\/pre>\n\n\n\n<p><strong>Schritt 5: Erfolgsmeldungen und Fehlermeldungen verarbeiten<\/strong><\/p>\n\n\n\n<p>Nachdem die API-Anfrage abgeschlossen ist:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Zeigen Sie eine Erfolgsmeldung an.<\/li>\n\n\n\n<li>Aktualisieren Sie die Menge im Warenkorb.<\/li>\n\n\n\n<li>Aktualisieren Sie gegebenenfalls den Mini-Warenkorb.<\/li>\n\n\n\n<li>Zeigen Sie Validierungsmeldungen f\u00fcr ung\u00fcltige Mengen an.<\/li>\n\n\n\n<li>Behandeln Sie lagerbezogene Fehler auf elegante Weise.<\/li>\n<\/ul>\n\n\n\n<p>Eine klare R\u00fcckmeldung hilft Kunden zu verstehen, ob ihre Produkte erfolgreich hinzugef\u00fcgt wurden.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Schritt 6: Die Benutzererfahrung verbessern<\/strong><\/h3>\n\n\n\n<p>Mehrere Verbesserungen k\u00f6nnen die Funktion noch n\u00fctzlicher machen.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Mengenvalidierung: Verhindern Sie negative Werte und ung\u00fcltige Eingaben, bevor die Anfrage gesendet wird.<\/li>\n\n\n\n<li>Bestands\u00fcberwachung: Deaktivieren Sie die Mengeneingabe f\u00fcr nicht vorr\u00e4tige Varianten.<\/li>\n\n\n\n<li>Suche und Filterung: Erm\u00f6glichen Sie es Kunden, bestimmte Varianten in gro\u00dfen Tabellen schnell zu finden.<\/li>\n\n\n\n<li>Feststehender \u201eIn den Warenkorb\u201c-Button: Halten Sie den Aktionsbutton sichtbar, w\u00e4hrend Kunden durch lange Variantenlisten scrollen.<\/li>\n\n\n\n<li>Mengenaktionen f\u00fcr mehrere Artikel: Bieten Sie Schnellfunktionen wie die folgenden an:<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Alle l\u00f6schen<\/li>\n\n\n\n<li>Alle ausw\u00e4hlen<\/li>\n\n\n\n<li>Menge auf mehrere Varianten anwenden<\/li>\n<\/ul>\n\n\n\n<p>Die Implementierung einer Funktion zum Hinzuf\u00fcgen mehrerer Varianten zum Warenkorb im Massenmodus bietet mehrere gesch\u00e4ftliche Vorteile:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Schnellerer Bestellvorgang<\/li>\n\n\n\n<li>Verbessertes Kundenerlebnis<\/li>\n\n\n\n<li>H\u00f6herer durchschnittlicher Bestellwert<\/li>\n\n\n\n<li>Weniger abgebrochene Warenk\u00f6rbe<\/li>\n\n\n\n<li>Bessere Unterst\u00fctzung f\u00fcr B2B-Einkaufsworkflows<\/li>\n\n\n\n<li>Weniger Klicks zum Abschluss gro\u00dfer Bestellungen<\/li>\n<\/ul>\n\n\n\n<p>F\u00fcr Shops, die auf Stammkunden oder Gro\u00dfhandelskunden angewiesen sind, k\u00f6nnen diese Verbesserungen einen messbaren Einfluss auf die Konversionsrate haben.<\/p>\n\n\n\n<p>Bitte kontaktieren Sie uns unter <strong>manish@bay20.com<\/strong> oder rufen Sie uns unter <strong>+91-9582784309 oder +91-8800519180<\/strong> an, wenn Sie Unterst\u00fctzung im Zusammenhang mit <strong><a href=\"https:\/\/www.bay20.com\/de\/digitales-marketing-unternehmen\/\" target=\"_blank\" rel=\"noopener\" title=\"\">Bigcommerce<\/a><\/strong> ben\u00f6tigen. Sie k\u00f6nnen auch unsere Website besuchen, um sich \u00fcber unsere Dienstleistungen zu informieren.<\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>F\u00fcr viele B2B- und Gro\u00dfhandelsunternehmen reicht die Standard-Produktseite nicht immer aus. Kunden m\u00fcssen oft mehrere Produktvarianten gleichzeitig kaufen. Anstatt eine Variante auszuw\u00e4hlen, sie in den Warenkorb zu legen und den Vorgang zu wiederholen, w\u00fcnschen sie sich eine schnellere M\u00f6glichkeit, umfangreiche Bestellungen zusammenzustellen. Eine Funktion zum Hinzuf\u00fcgen mehrerer Varianten auf einmal in den Warenkorb l\u00f6st dieses [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":17705,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[173,13],"tags":[],"class_list":["post-17785","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-b2b","category-bigcommerce"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/posts\/17785","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/comments?post=17785"}],"version-history":[{"count":2,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/posts\/17785\/revisions"}],"predecessor-version":[{"id":17789,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/posts\/17785\/revisions\/17789"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/media\/17705"}],"wp:attachment":[{"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/media?parent=17785"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/categories?post=17785"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/tags?post=17785"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}