Produktvariantenauswahl anhand von User Input

[LauridsW]

Hallo zusammen,

ich baue zurzeit einen Shop, der ein Produkt anbietet, das zwei Varianten umfasst. Da es sich um ein komplementäres Produkt handelt, ist die Auswahl der Varianten abhängig von den Produkten, die der User bereits besitzt. Daher hätte ich gerne auf der Produktseite die Möglichkeit, dass der User angeben kann, welches Produkt er bereits sein Eigen nennt und aufgrund dessen automatisch die passende Variante in den Warenkorb gelegt wird. Die Herausforderung besteht darin, dass ich für die erste Variante des Produkts 5 komplementäre Produkte angeben möchte und für die zweite Variante nur 2. 

Ich habe schon einige Product Options App ausprobiert, allerdings fehlte mir stets die Funktion, dass die Variante auf Basis des User Inputs ausgewählt wird.

Stand bereits jemand vor dieser Herausforderung oder hat jemand eine elegante Lösung hierfür?

Ich nutze zurzeit das Dawn Theme (vielleicht hilft die Angabe).

Danke euch & viele Grüße

Laurids

[Gabe]

Hey @LauridsW 

Danke für die Beschreibung und die Implementierung einer solchen Funktion erfordert wahrscheinlich eine individuelle Anpassung des Codes, da die Standard-Shopify-Apps anscheinend nicht den gewünschten Funktionsumfang bieten.

Da du das Dawn Theme nutzt, kannst du im Liquid mit JavaScript arbeiten. Wenn du es selber auf der PDP (product details page) programmieren möchtest dann bitte immer in einer Themekopie/Testumgebung zuerst testen und zusammen mit einem Experten/Programmierer. Du kannst ein Backup deines Themes erstellen, bevor man den Code bearbeitet, oder den Code wiederherstellen, falls dies nötig sein sollte. Du könntest auch einen unserer Experten engagieren indem du denen eine E-Mail rüberschießt. Unsere Experten antworten meist sehr schnell.

Ä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!

Füge also ein Dropdown-Menü oder eine Auswahlmöglichkeit hinzu, in der der Kunde sein bereits vorhandenes Produkt auswählen kann. Du könntest auf der Produktseite direkt unterhalb des Titels oder an einer anderen prominenten Stelle ein Dropdown-Menü oder eine Auswahlmöglichkeit hinzu, in der der Kunde sein bereits vorhandenes Produkt auswählen kann. Dann verknüpfe die Auswahl mit den Varianten deines Produkts mit einer JavaScript-Funktion, die auf die Auswahl reagiert. Diese könnte dann die Variante des Produkts entsprechend auswählen und automatisch in den Warenkorb legen. Richte das Script so ein, dass es die Anzahl der komplementären Produkte berücksichtigt, wie z. B. für Variante 1 könntest du 5 Produkte, für Variante 2 dann nur 2 Produkte zur Auswahl anbieten.

Hier ist ein einfaches Beispiel für den Code, den du in deinem Produkttemplate hinzufügen könntest:

<select id="existing-product">
  <option value="variante1-produkt1">Variante 1, Produkt 1</option>
  <option value="variante1-produkt2">Variante 1, Produkt 2</option>
  <!-- Weitere Optionen für Variante 1 -->
  <option value="variante2-produkt1">Variante 2, Produkt 1</option>
  <option value="variante2-produkt2">Variante 2, Produkt 2</option>
</select>

<script>
  document.getElementById('existing-product').addEventListener('change', function() {
    var selectedProduct = this.value;
    
    // Logik, um die passende Variante auszuwählen
    if (selectedProduct.startsWith('variante1')) {
      // Code, um die erste Variante auszuwählen und in den Warenkorb zu legen
    } else if (selectedProduct.startsWith('variante2')) {
      // Code, um die zweite Variante auszuwählen und in den Warenkorb zu legen
    }
  });
</script>

Beachte, dass der oben stehende Code nur ein Beispiel ist und auf die genaue Struktur deines Themes und deiner Produktvarianten angepasst werden muss. Wenn du Unterstützung beim Anpassen des Codes benötigst oder spezifische Fragen dazu hast, kann ich, wie gesagt, gerne Experten empfehlen die das für dich einbauen können!