Auswahl eines Varianten-Options-Wert auf Produktseite durch Eingabefelder

[kreations]

Guten Abend,

benutzt wird Dawn v9.

Bin hier ein wenig am verzweifeln, weil ich mich mit javascript nicht auskenne.

Habe 2x line-item-property Eingabefelder auf einer Produktseite hinzugefügt und möchte, dass aufgrund der Eingabe in diese zwei Felder ein bestimmter Varianten-Options-Wert automatisch ausgewählt wird.

Die Varianten-Options-Wert-Auswahl für option z soll verborgen sein. Andere Optionen sollen weiterhin frei wählbar sein. Dies müsste ja durch css möglich sein.

Doch womit ich zurzeit erstmal kämpfe ist die automatische Auswahl des Varianten-Options-Wert durch Eingabe in die Felder. Wie kriege ich das am besten gebacken?

Das habe ich bei "buy-buttons-custom.liquid" hinzugefügt:

<p class="line-item-property__field">
  <label for="length">length</label><br>
  <input required class="required" id="length" type="text" onblur="changeoptionvalue()" name="properties[length]">
</p>
<p class="line-item-property__field">
  <label for="width">width</label><br>
  <input required class="required" id="width" type="text" onblur="changeoptionvalue()" name="properties[width]">
</p>

Und das bei "global.js":

  function changeoptionvalue(){
    var length = +(document.getElementById("length").value);
    var width = +(document.getElementById("width").value);
    var total = length + width;
    
    if (total<20) {
      selector.selectVariant("44380039577868", selector); //not working
       //here i want to select option value x of option z 
    } else {
      //here i want to select option value y of option z 
    } 
}

Vielen Dank

[Finer]

@kreations ich denke ein Ansatz wäre es, die URL der Variante als Weiterleitung anzugeben. Dadurch würde zwar die Seite neu laden, aber man hätte die gewünschte Variante ausgewählt.

Falls die Eingabe des Nutzers zu einer Produktempfehlung (bzw. Variantenempfehlung) führen soll, würde ich sogar die Ausgabe der Information, welche Variante infrage kommt, nur anzeigen, aber nicht direkt auswählen.

Man kennt ähnliches aus der Bekleidungsbranche, wo die Angabe von bestimmten Informationen eine Größenempfehlung ausgeben. Zudem könntest du dann das Script so umbauen, dass du es für verschiedene Produkte anwenden kannst.

Könntest du uns ggf. den Use-Case erläutern? Vielleicht gibt es ja alternativen, um das gleiche Ergebnis zu erhalten.

[Gabe]

Hey @kreations 

Wie @Finer sagt. Wie wäre es mit einem "addEventListener" anstelle von "onblur" für die Input-Felder? Ändere die "changeoptionvalue()" Funktion, um die gewünschte Option basierend auf der Eingabe auszuwählen:

HTML & Javascript Beispiele:

<p class="line-item-property__field">
 <label for="length">length</label><br>
 <input required class="required" id="length" type="text" name="properties[length]">
</p>
<p class="line-item-property__field">
 <label for="width">width</label><br>
 <input required class="required" id="width" type="text" name="properties[width]">
</p>

document.getElementById("length").addEventListener("blur", changeoptionvalue);
document.getElementById("width").addEventListener("blur", changeoptionvalue);

function changeoptionvalue() {
 var length = +(document.getElementById("length").value);
 var width = +(document.getElementById("width").value);
 var total = length + width;

 // Get the option z select element
 var optionZSelect = document.querySelector("select[name='option-z-name']");

 if (optionZSelect) {
   if (total < 20) {
     optionZSelect.value = "option-z-value-x"; // Replace with the correct value for option x of option z
   } else {
     optionZSelect.value = "option-z-value-y"; // Replace with the correct value for option y of option z
   }

   // Trigger change event to update the selected variant
   var event = new Event("change", { bubbles: true, cancelable: true });
   optionZSelect.dispatchEvent(event);
 }
}

Ersetze "option-z-name", "option-z-value-x" und "option-z-value-y" durch die tatsächlichen Werte der Varianten-Optionen. Um die Option z Auswahl zu verbergen, füge die folgenden CSS-Regeln zum CSS hinzu:

/* Replace ".option-z-selector" with the actual selector for option z */
.option-z-selector {
 display: none;
}

Wenn du möchtest, dass die Eingabe des Nutzers zu einer Variantenempfehlung führt, anstatt direkt die Option auszuwählen, kannst du die "changeoptionvalue()" Funktion entsprechend ändern, um die Empfehlung anzuzeigen:

function changeoptionvalue() {
 // ... (rest of the code)

 var recommendationText = "";

 if (total < 20) {
   recommendationText = "Wir empfehlen Variante X"; // Replace with the correct text for option x of option z
 } else {
   recommendationText = "Wir empfehlen Variante Y"; // Replace with the correct text for option y of option z
 }

 var recommendationElement = document.getElementById("recommendation");
 if (recommendationElement) {
   recommendationElement.textContent = recommendationText;
 }
}

Füge dann einen Platzhalter für die Empfehlung zur HTML-Datei hinzu:

<p id="recommendation"></p>

Um das Skript für verschiedene Produkte anwendbar zu machen, die Funktion modularer gestalten und für jedes Produkt individuell konfigurieren.

[kreations]

@Gabe Angenommen ich habe folgende Varianten:

Wie würde dann 

---

@Gabe  schrieb:

document.getElementById("length").addEventListener("blur", changeoptionvalue);
document.getElementById("width").addEventListener("blur", changeoptionvalue);

function changeoptionvalue() {
 var length = +(document.getElementById("length").value);
 var width = +(document.getElementById("width").value);
 var total = length + width;

 // Get the option z select element
 var optionZSelect = document.querySelector("select[name='option-z-name']");

 if (optionZSelect) {
   if (total < 20) {
     optionZSelect.value = "option-z-value-x"; // Replace with the correct value for option x of option z
   } else {
     optionZSelect.value = "option-z-value-y"; // Replace with the correct value for option y of option z
   }

   // Trigger change event to update the selected variant
   var event = new Event("change", { bubbles: true, cancelable: true });
   optionZSelect.dispatchEvent(event);
 }
}

Ersetze "option-z-name", "option-z-value-x" und "option-z-value-y" durch die tatsächlichen Werte der Varianten-Optionen.

---

aussehen?

Bei mir funktionierts nicht. Egal was ich in die length und width text felder einsetze, die Variante wird nicht gewechselt. 

Setze ich anstatt 'option-z-name': "Groesse" ? Wie finde ich das "option z select element"?

Es geht nichtmal in den

if (OptionsZSelect).

Also denke ich das mein

var optionZSelect = document.querySelector("select[name='option-z-name']");

falsch ist.

Setze ich anstatt "option-z-value-x": "Klein" oder die Zahl, die in der Adresszeile, bei ausgewählter Variante, nach "/products/test?variant=" kommt? Für "Klein" gibt es allerdings zwei Zahlen, da es noch eine Option mit den Werten Schwarz und Grün gibt.

Setze ich anstatt "option-z-value-x": "Mittel" oder die Zahl, die in der Adresszeile bei ausgewählter variante  nach "/products/test?variant=" kommt? Für "Mittel" gibt es allerdings zwei Zahlen, da es noch eine Option mit den Werten Schwarz und Grün gibt.

Wie finde ich "correct value for option x of option z"  bzw "correct value for option y of option z"?

@Finer 

Ich möchte tatsächlich keine Varianten-Empfehlung abgeben.

Der Benutzer kann Wunschlänge und Wunschbreite angeben und aufgrund dessen wird der Preis berechnet. Ich möchte sozusagen mehrere Preis-Etappen haben, die jeweils nach Gesamtlänge automatisch durch Variantenwechsel ausgewählt werden.

Am besten wäre es, wenn zzgl. zu den 2 Eingabefeldern auch 2 Slider stehen, um die Eingabe zu vereinfachen.

[Gift-o-the-Jab]

@kreations 

Den Wert, den du für "option-z-name" einsetzts, müsste der Name der Option sein, die du ändern möchtest wie "Groesse". Mit den zwei Optionen "Groesse" und "Farbe", wird es etwas komplizierter da du alle möglichen Varianten-Kombinationen berücksichtigen musst. Somit verwende vielleicht die Varianten-ID anstelle des Optionswertes selbst, wie folgendes Beispiel:

document.getElementById("length").addEventListener("blur", changeoptionvalue);
document.getElementById("width").addEventListener("blur", changeoptionvalue);

function changeoptionvalue() {
  var length = +(document.getElementById("length").value);
  var width = +(document.getElementById("width").value);
  var total = length + width;

  // Ziehe die Auswahlelemente für beide Optionen
  var grosseSelect = document.querySelector("select[name='Groesse']");
  var farbeSelect = document.querySelector("select[name='Farbe']");

  if (grosseSelect && farbeSelect) {
    var selectedGrosse;
    var selectedFarbe = farbeSelect.value;

    if (total < 20) {
      selectedGrosse = "Klein";
    } else {
      selectedGrosse = "Mittel";
    }

    // Finde die Varianten-ID, die mit der ausgewählten "Grosse" und "Farbe" übereinstimmt
    var matchingVariant = window.product.variants.find(function (variant) {
      return variant.option1 === selectedGrosse && variant.option2 === selectedFarbe;
    });

    if (matchingVariant) {
      // Setze die ausgewählte "Groesse" und aktualisiere die ausgewählte Variante
      grosseSelect.value = selectedGrosse;
      var event = new Event("change", { bubbles: true, cancelable: true });
      grosseSelect.dispatchEvent(event);

      // Aktualisiere die ausgewählte Variante in der URL
      history.replaceState(null, "", "/products/test?variant=" + matchingVariant.id);
    }
  }
}

Stelle sicher, dass die Variablennamen option1 und option2 in variant.option1 === selectedGroesse && variant.option2 === selectedFarbe korrekt sind.

Das kannst du überprüfen - gehe in das -> Produkt -> Variante und die Reihenfolge der Optionen überprüfen. Wenn "Groesse" die erste Option und "Farbe" die zweite Option ist, sollte der Code korrekt funktionieren.

Wenn der User Werte für "length" und "width" eingibt, wird die "Groesse" automatisch auf "Klein" oder "Mittel" gesetzt, je nachdem, ob die Summe von "length" und "width" kleiner als 20 ist oder nicht. Die ausgewählte Variante sollte dann basierend auf den ausgewählten Werten für "Groesse" und "Farbe" aktualisiert werden.

[kreations]

---

@Gift-o-the-Jab  schrieb:

@kreations 

Den Wert, den du für "option-z-name" einsetzts, müsste der Name der Option sein, die du ändern möchtest wie "Groesse". Mit den zwei Optionen "Groesse" und "Farbe", wird es etwas komplizierter da du alle möglichen Varianten-Kombinationen berücksichtigen musst. Somit verwende vielleicht die Varianten-ID anstelle des Optionswertes selbst, wie folgendes Beispiel:

document.getElementById("length").addEventListener("blur", changeoptionvalue);
document.getElementById("width").addEventListener("blur", changeoptionvalue);

function changeoptionvalue() {
  var length = +(document.getElementById("length").value);
  var width = +(document.getElementById("width").value);
  var total = length + width;

  // Ziehe die Auswahlelemente für beide Optionen
  var grosseSelect = document.querySelector("select[name='Groesse']");
  var farbeSelect = document.querySelector("select[name='Farbe']");

  if (grosseSelect && farbeSelect) {
    var selectedGrosse;
    var selectedFarbe = farbeSelect.value;

    if (total < 20) {
      selectedGrosse = "Klein";
    } else {
      selectedGrosse = "Mittel";
    }

    // Finde die Varianten-ID, die mit der ausgewählten "Grosse" und "Farbe" übereinstimmt
    var matchingVariant = window.product.variants.find(function (variant) {
      return variant.option1 === selectedGrosse && variant.option2 === selectedFarbe;
    });

    if (matchingVariant) {
      // Setze die ausgewählte "Groesse" und aktualisiere die ausgewählte Variante
      grosseSelect.value = selectedGrosse;
      var event = new Event("change", { bubbles: true, cancelable: true });
      grosseSelect.dispatchEvent(event);

      // Aktualisiere die ausgewählte Variante in der URL
      history.replaceState(null, "", "/products/test?variant=" + matchingVariant.id);
    }
  }
}

Stelle sicher, dass die Variablennamen option1 und option2 in variant.option1 === selectedGroesse && variant.option2 === selectedFarbe korrekt sind.

Das kannst du überprüfen - gehe in das -> Produkt -> Variante und die Reihenfolge der Optionen überprüfen. Wenn "Groesse" die erste Option und "Farbe" die zweite Option ist, sollte der Code korrekt funktionieren.

Wenn der User Werte für "length" und "width" eingibt, wird die "Groesse" automatisch auf "Klein" oder "Mittel" gesetzt, je nachdem, ob die Summe von "length" und "width" kleiner als 20 ist oder nicht. Die ausgewählte Variante sollte dann basierend auf den ausgewählten Werten für "Groesse" und "Farbe" aktualisiert werden.

---

Funktioniert bei mir leider immer noch nicht. Habe es 1-zu-1 übernommen. Die Optionen sind auch in der richtigen Reihenfolge. Muss ich im Code noch etwas ändern?

Evtl. liegt es bei mir an den document.querySelector.

Oder auch daran, dass ich global.js und buy-buttons-custom.liquid benutze.

Ich habe keinen Plan. Vielleicht bin ich einfach nur blöde im Kopp

[Gabe]

Hey @kreations 

An dieser Stelle empfehle ich einen Experten. In unserer privaten FB Gruppe gibt es einige die sich bei dir melden werden wenn du da deine Frage stellst. 

Dann hat sich auch ein Experte hier gemeldet der angeboten hat, deinen Fall anzuschauen. 

Hoffe das hilft! 😉