Varianten Wenn Dann Funktion

[KarinaJs]

Hey zusammen,

Ich biete in meinem Shop Armbänder an in 4 verschiedenen Größen.

Nun kann der Kunde als erste Option auswählen, ob er ein Armband oder zwei Armbänder im Doppelpack bestellen möchte. Nach dieser Auswahl wird der Kunde aufgefordert seine Größe anzugeben.

Gibt es eine Funktion, die es mir ermöglicht, dass der Kunde beim Doppelpack 2 verschiedene Größen auswählen kann? Hier ein Beispiel:

Auswahl: Einzelnes Armband > Auswahl: Größe S

Auswahl: Doppelpack > Auswahl 1: Größe S, Auswahl 2: Größe M

Ich benötige sozusagen ein 2. Auswahlfenster, wenn der Kunde, dass Doppelpack ausgewählt hat.

[Gabe · Accepted solution]

Hey @KarinaJs 

Danke für den Sachverhalt und das klingt wie ein spannender Use-Case den du im Shop implementieren möchtest! 😉

Es gibt in der tat verschiedene Wege, wie du solch ein Auswahlverhalten im Shop implementieren kannst. Du kannst es beispielsweise vielleicht über die Varianten selber lösen - erstelle für jedes mögliche Doppelpack eine separate Produktvariante. Zum Beispiel: 

• S/M, M/L, L/XL usw. 

Es kann jedoch schnell unübersichtlich werden über diesen Weg, wenn du viele verschiedene Größen hast, und die beste UX für deine Kunden wird es auch nicht unbedingt sein.

Es gibt auch zahlreiche Apps im Shopify App Store, die zusätzliche Optionen oder Produktanpassungen ermöglichen wie "Infinite Options", "Bold Product Options" oder "Advanced Product Options", um das gewünschte Auswahlsystem zu erstellen. Klicke in jeder App einfach in die Demos und kontaktiere auch die App Entwickler denn die können dir beim Einrichten und tweaken der App helfen.

Wenn du einen benutzerdefinierten Ansatz bevorzugst, könntest du auch überlegen, einen Shopify-Entwickler zu beauftragen, der eine solche Funktion speziell für den Shop programmieren kann. Hier ein einfacher Weg, wie so eine benutzerdefinierte Lösung mit Shopify's Liquid-Sprache aussehen könnte:

1. Erstelle ein neues Produkt für das Doppelpack.
2. Füge dem Doppelpack-Produkt zwei Dropdown-Auswahllisten hinzu, indem du den Quellcode des entsprechenden Produkts bearbeitest und eine FOR-Loop wie die folgende hinzufügst:

{% if product.title == "Doppelpack" %}
   <label for="size-1">Größe 1:</label>
   <select id="size-1" name="properties[Größe 1]">
       <option value="S">S</option>
       <option value="M">M</option>
       <option value="L">L</option>
       <option value="XL">XL</option>
   </select>

   <label for="size-2">Größe 2:</label>
   <select id="size-2" name="properties[Größe 2]">
       <option value="S">S</option>
       <option value="M">M</option>
       <option value="L">L</option>
       <option value="XL">XL</option>
   </select>
{% endif %}

 Wenn der Kunde das Doppelpack-Produkt auswählt und zur Kasse geht, sollten die ausgewählten Größen in den Bestelldetails angezeigt werden.

Bitte beachte, dass dies nur ein einfaches Beispiel ist und möglicherweise nicht alle Anforderungen erfüllt. Es wäre ratsam, einen professionellen Shopify-Entwickler zu konsultieren, wenn du dir unsicher bist.

---
Hast du weitere Fragen zum Shop? Gebe einfach ein Suchbegriff oben in der Suchleiste der Community Landingpage ein, denn das Thema haben wir sehr wahrscheinlich schon besprochen. Halte bitte Ausschau in deiner E-Mail auf Notifications zu Antworten auf deine Fragen in der Community.

[KarinaJs]

Vielen Dank @Gabe 

Sehr ausführlich und verständlich geschrieben 🙂
Kannst du mir vielleicht noch sagen wo der Code eingefügt werden muss? 
Danke dir!

[Gabe]

Gerne geschehen, @KarinaJs! 

Mein Code ist ein Beispiel für benutzerdefinierte Dropdown-Auswahllisten, die man in das Produktformular einfügen kann, um dem Kunden die Auswahl von zwei Größen im Doppelpack zu ermöglichen.

Im "Dawn" Theme von Shopify ist die Einbindung etwas anders als bei älteren Themes, aber gerne gebe ich ein paar Tipps ab, zu wie man das im Code einbauen kann. Ganz einfach wird das aber nicht und ich empfehle das zuerst in einer Testumgebung wie eine Theme Kopie zu machen. Noch dazu wirst du wahrscheinlich einen Experten zu Rate ziehen müssen der oder die direkt in deinem Shop eingreifen kann um das zu testen. Das können wir hier in der Community leider nicht wie du hoffentlich verstehen kannst.

Klicke neben dem Dawn-Theme auf "Aktionen" und dann auf "Code bearbeiten". Im Code-Editor suche nach der Datei sections/main-product.liquid. Scrolle in dieser Datei nach unten, bis zum Abschnitt, der das Produktformular behandelt. Es sollte ein HTML-Tag <form> mit der Klasse product-form oder etwas Ähnlichem geben. Innerhalb dieses Formulars (aber vor dem Abschlusstag </form>) füge die zuvor bereitgestellte IF-Statement ein und speichere das in der Testumgebung:

{% if product.title == "Doppelpack" %}
   <label for="size-1">Größe 1:</label>
   <select id="size-1" name="properties[Größe 1]">
       <option value="S">S</option>
       <option value="M">M</option>
       <option value="L">L</option>
       <option value="XL">XL</option>
   </select>

   <label for="size-2">Größe 2:</label>
   <select id="size-2" name="properties[Größe 2]">
       <option value="S">S</option>
       <option value="M">M</option>
       <option value="L">L</option>
       <option value="XL">XL</option>
   </select>
{% endif %}

Jetzt, wenn du zu einem Produkt gehst, das den Titel "Doppelpack" hat, sollten zwei Dropdown-Auswahllisten zu sehen sein, mit denen der Kunde die gewünschten Größen auswählen kann.

Bitte beachte, dass die Anpassung des Codes immer mit Vorsicht durchgeführt werden sollte und in der Testumgebung. Es könnte ratsam sein, vor jeder größeren Änderung eine Sicherungskopie des aktuellen Themes zu erstellen, damit du bei Bedarf problemlos zu einer funktionierenden Version zurückkehren kannst.