Bei ändern der Produktvariante auf Standartfarbe springen

[Drachenlicht]

Hallo,

ich nutze das Theme NewDawn.
Ich biete Tierfiguren an, jedoch teilweise auch mit anderen Farben.

Wie kann ich es bewerkstelligen, dass wenn man ein Tier auswählt, dieser auf eine Standartfarbe springt, bzw. auf eine Farbe welche auch verfügbar ist.

Beispiel:

ich wähle Hai in Hellblau aus und und klicke dann auf Elefant(nur in Grau erhältlich), dann wird der Elefant nicht angezeigt, sondern nur wenn ich dann in der Farbauswahl auch Grau auswähle.

Gibt es eine Möglichkeit, dass er automatisch auf die verfügbare farbe springt?

[Gabe]

Hey @Drachenlicht 

Ich muss zugeben, das ist das erste mal dass ich vom Theme NewDawn höre... oder meinst du die neueste Version unseres Free Shopify Theme - Dawn?

Du hast deinen Use-Case auch ganz gut erklärt aber ein Beispiel mit einem Link wäre noch besser um deinen Use-Case genauer verstehen zu können. Wichtig ist dass du die UX auf deiner PDP nicht komplexer machst als notwendig denn User-Verwirrung ist der größte Conversion Killer wie wir alle ja wissen. Somit musst du dich fragen, ob so eine Änderung wirklich wertvoll wäre aus einer UX Perspektive. Nicht vergessen, was wir als Shopinhaber als eine tolle UX sehen, ist noch lange nicht das, was deine Kunden als tolle UX empfinden! Das kann auch nach hinten losgehen...

Was ich dir anbieten ist unser neuer Produkt Taxonomie Feature, der wie folgt aussieht:

Siehe mehr dazu in unseren Hilfeseiten hier:

• Kategorie-Metafelder - die in der Taxonomie als Produktattribute bezeichnet werden, helfen dir, die richtigen Informationen zu deinen Produkten hinzuzufügen ...
• Standard-Produkttaxonomie von Shopify - die Standardkategorie eines Produkts aus der Standard-Produkttaxonomie von Shopify. Alle deine Produkte sollten einer bestimmten ... werden und jeder Produktkategorie zugeordnet sind. Deine Produkte in Shopify besser zu verwalten, z. B. als Bedingung für eine ...
• Farbfelder mithilfe von Kategorie-Metafeldern hinzufügen - die in der Taxonomie als Produktattribute bezeichnet werden, helfen dir, die richtigen Informationen zu deinen Produkten hinzuzufügen ... Kategorie-Metafelder direkt über deinen Shopify-Adminbereich zu deinen Produkten hinzufügen. Um alle Schritte abzuschließen, benötigst du ...

Wenn das nicht ausreicht, wird es eine Coding Lösung verlangen, oder eine Frontend App. Wenn du es selber auf deiner PDP 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 negativ 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!

Du könntest das main-product.liquid bearbeiten und einen JavaScript für automatische Farbauswahl hinzufügen - scrolle nach unten, bis ans Ende der Datei, und füge vor dem schließenden </script>-Tag (falls vorhanden) oder am Ende des Dokuments einen JS wieh den folgenden ein:

<script>
document.addEventListener('DOMContentLoaded', function () {
    const productForm = document.querySelector('form.product-form');
    if (!productForm) return;

    const selectElements = productForm.querySelectorAll('select');

    selectElements.forEach(select => {
        select.addEventListener('change', function () {
            const currentOptionIndex = [...select.options].findIndex(option => option.selected);
            const variantId = select.options[currentOptionIndex].dataset.variantId;

            // Prüfen, ob die gewählte Variante verfügbar ist
            const isAvailable = variantId && select.options[currentOptionIndex].dataset.available === 'true';

            if (!isAvailable) {
                // Springe zur ersten verfügbaren Variante
                const availableOption = [...select.options].find(option => option.dataset.available === 'true');
                if (availableOption) {
                    availableOption.selected = true;
                    select.dispatchEvent(new Event('change')); // Trigger the change event again
                }
            }
        });
    });
});
</script>

Der Code sorgt dafür, dass wenn eine Variante (z.B. ein Tier) gewählt wird, die Farbe automatisch auf die erste verfügbare Variante springt. Stelle auch sicher, dass die Verfügbarkeit jeder Variante im Dropdown der Farbwahl als data-attribute gesetzt ist. Dies sollte im product-form.liquid oder einem ähnlichen Template gecodet werden. Beispiel:

<select id="ProductSelect">
  {% for option in product.options %}
    <option value="{{ option }}" data-variant-id="{{ option.id }}" data-available="{{ option.available | json }}">{{ option }}</option>
  {% endfor %}
</select>

Bei weiteren Fragen dazu kann ich gerne einen Experten/Programmierer empfehlen der das für dich einbauen kann.

Hoffe das hilft dir weiter - lass wissen falls nicht! 😉

---
Warum nicht etwas Gamification in das Shop einbauen, um deinen Kunden etwas Fun im Shop anzubieten? Gerne kann ich bei Interesse Tipps dazu geben!

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.

[Drachenlicht]

ich will ungern am code rumhantieren.
ich hab mich jetzt dazu entschlossen die Produkfarben aufzuteilen in extra Produktkategorien, da ich auch an die Variantengrenze von 100 komme.

[Kai]

Prima @Drachenlicht, so geht das natürlich auch!