Produkt nur in Kombination mit anderem käuflich

[JH6]

Hallo,

in unserem Shop bieten wir das Produktset A an, bei dem der Kunde zwischen momentan 90 Varianten wählen kann (diese ergeben sich drei Produktmerkmalen, bei denen jeweils mehrere Auswahlmöglichkeiten vorhanden sind). 

Unsere Problem: Wir haben auch noch das Produkt B, das der Kunde eigentlich nicht bestellen können soll, ohne auch Produkt A zu kaufen. Die perfekte Lösung wäre hier sicherlich das Produkt B mit seinen möglichen Optionen als viertes Produktmerkmal unter den Varianten von Produktset A aufzuführen. Das war ursprünglich auch der Plan, jedoch kamen wir dann über die zugelassenen 100 Varianten. Das war somit nicht möglich.

Nun habe ich schon von Apps gelesen, mit denen man die zulässige maximale Anzahl von 100 Varianten umgehen kann. Gut, dass es diese Möglichkeit gibt, da ich jedoch bereits für die 90 Varianten (und das bei allen Produktsets A-L) die Variantenpreise eingetragen habe, wäre die Einrichtung einer entsprechenden App aufwendig. 

Gibt es eine andere, einfachere Möglichkeit, ein Produkt nur in Kombination mit einem anderen Produkt als anzubieten?

Vielen Dank.

[Gabe]

Hey @JH6 

Danke für diese Frage und eine andere Möglichkeit, um sicherzustellen, dass Kunden Produkt B nur zusammen mit Produkt A kaufen können, ist die Verwendung von benutzerdefiniertem Code im Theme, um die Verfügbarkeit von Produkt B im Warenkorb zu überprüfen und den Kauf nur zuzulassen, wenn beide Produkte im Warenkorb sind.

Wenn du es selber programmieren möchtest dann bitte immer in einer Themekopie/Testumgebung zuerst testen und zusammen mit einem Experten/Programmierer. 

Änderungen zu deinem Theme Code können auch 1) die Page Loading Speeds negative beeinflussen und 2) dein Theme aus den Theme Updates ausschließen. Das folgende ist Theme-abhängig, ohne Gewähr und dient lediglich dazu dich in die richtige Richtung zu weisen!

Gehe zum Theme Code -> "cart.liquid" Datei (oder eine ähnlich benannte Datei, die für den Warenkorb verantwortlich ist) im Ordner "Sections" oder "Templates".

Füge den folgenden HTML-Code hinzu, um eine Fehlermeldung anzuzeigen, wenn Produkt B ohne Produkt A im Warenkorb ist:

<div class="cart-error-message" style="display:none;">
  <p>Produkt B kann nur in Kombination mit Produkt A gekauft werden.</p>
</div>

Gehe zur "theme.js" Datei (oder eine ähnlich benannte Datei) im Ordner "Assets" und füge den folgenden JavaScript-Code hinzu, um die Verfügbarkeit von Produkt A und Produkt B im Warenkorb zu überprüfen:

function checkCartItems() {
  const cartItems = document.querySelectorAll('.cart-item');
  let productAExists = false;
  let productBExists = false;
  const productAHandle = 'handle-for-product-a';
  const productBHandle = 'handle-for-product-b';
  const errorMessage = document.querySelector('.cart-error-message');
  const checkoutButton = document.querySelector('button[name="checkout"]');

  cartItems.forEach((item) => {
    const itemHandle = item.getAttribute('data-product-handle');
    if (itemHandle === productAHandle) {
      productAExists = true;
    }
    if (itemHandle === productBHandle) {
      productBExists = true;
    }
  });

  if (productBExists && !productAExists) {
    errorMessage.style.display = 'block';
    if (checkoutButton) {
      checkoutButton.disabled = true;
    }
  } else {
    errorMessage.style.display = 'none';
    if (checkoutButton) {
      checkoutButton.disabled = false;
    }
  }
}

document.addEventListener('DOMContentLoaded', function () {
  checkCartItems();
});

Vergesse nicht, die Platzhalter 'handle-for-product-a' und 'handle-for-product-b' durch die tatsächlichen Handles von Produkt A und Produkt B in Ihrem Shop zu ersetzen.

Mit dieser Methode wird eine Fehlermeldung im Warenkorb angezeigt und der Checkout-Button deaktiviert, wenn Produkt B im Warenkorb ist, aber Produkt A nicht. Beachte auch, dass dieser Code je nach Theme unterschiedlich sein kann und möglicherweise Anpassungen erfordert.

Wenn du Schwierigkeiten damit hast bitte die Hilfe eines Shopify-Experten oder Entwicklers bei weiteren Fragen in Anspruch nehmen.