Variantenauswahl nicht vorauswählen

[HackTack]

Hallo, 

ich möchte z.b. die Größen Varianten auf der PDP nicht vorausgewählt haben, sondern die Option "bitte auswählen". Außerdem soll, wenn unterschiedliche Preise vorhanden sind eine Preisspanne angezeigt werden, aber nur wenn "bitte auswählen" ausgewählt ist. Wie kann ich das lösen? Ohne js ist das nicht möglich oder? Ansonsten habe ich gedacht, den value wert der Variantenauswahl an das price snippet mitzugeben. Danke

[Gabe]

Hey @HackTack 

Danke für die Fragen und bei so einem Fall wäre ein befristeter Vorschaulink oder Link zu einem Beispiel sehr hilfreich das schneller zu analysieren.

Ich nehme aber mal du arbeitest mit unseren standard Dawn Theme. 

Viele haben das mit einer Variante die "Bitte Auswählen" heisst gelöst die dann ganz oben im Optionen Dropdown steht. Das ist aber keine elegante Lösung denn die Variante "Bitte auswählen" bekommt ja dann auch den eigenen Bestand im Backend Inventar.

Somit wird das nicht so einfach sein was du erreichen möchtest und du müsstest erwägen, das etwas eleganter zu lösen wie z. B. mit einer App oder mit einem unserer zertifizierten Shopify Partner und Programmierer.

Wenn du das aber trotzdem DIY mit den Varianten lösen möchtest

Um sicherzustellen, dass Varianten auf der PDP in Shopify nicht vorausgewählt sind und eine Preisspanne angezeigt wird, wenn "bitte auswählen" ausgewählt ist, musst du einige Anpassungen vornehmen. Dies erfordert das Hinzufügen von benutzerdefiniertem JavaScript sowie Anpassungen im Liquid-Code.

Füge eine zusätzliche Option "bitte auswählen" zu den Varianten hinzu und stelle sicher, dass diese standardmäßig ausgewählt ist. Dies verhindert, dass eine spezifische Variante vorausgewählt ist. Ändere das HTML für die Varianten-Auswahl wie folgt:

<variant-selects id="variant-selects-template--22571138220381__main" data-section="template--22571138220381__main" data-url="/de/products/didabear-brand-canvas-tote-bag-women-handbags-female-designer-large-capacity-leisure-shoulder-bags-big-travel-bags-bolsas">
  <fieldset class="js product-form__input product-form__input--pill">
    <legend class="form__label">Farbe</legend>
    <input type="radio" id="template--22571138220381__main-1-0" name="Farbe" value="" form="product-form-template--22571138220381__main" checked>
    <label for="template--22571138220381__main-1-0">Bitte auswählen</label>
    <input type="radio" id="template--22571138220381__main-1-1" name="Farbe" value="Schwarz" form="product-form-template--22571138220381__main">
    <label for="template--22571138220381__main-1-1">Schwarz<span class="visually-hidden label-unavailable">Variante ausverkauft oder nicht verfügbar</span></label>
    <input type="radio" id="template--22571138220381__main-1-2" name="Farbe" value="Braun" form="product-form-template--22571138220381__main">
    <label for="template--22571138220381__main-1-2">Braun<span class="visually-hidden label-unavailable">Variante ausverkauft oder nicht verfügbar</span></label>
    <!-- Weitere Optionen -->
  </fieldset>
  <!-- Weitere Fieldsets für Größe und Duft -->
</variant-selects>

Passe das Preis-Snippet an, sodass die Preisspanne angezeigt wird, wenn "bitte auswählen" aktiv ist. Dafür benötigst du JavaScript, um die Preisspanne dynamisch zu aktualisieren. Füge diesen JavaScript-Code in dein Theme ein, um die Preisspanne zu aktualisieren:

document.addEventListener('DOMContentLoaded', function() {
  const variantSelects = document.querySelector('#variant-selects-template--22571138220381__main');
  const priceElement = document.querySelector('.price-element'); // Passe den Selektor an dein Preis-Element an

  function updatePrice() {
    const selectedOptions = variantSelects.querySelectorAll('input[type="radio"]:checked');
    let selectedValues = Array.from(selectedOptions).map(input => input.value);

    if (selectedValues.includes('')) {
      // Wenn "bitte auswählen" aktiv ist, zeige Preisspanne an
      let prices = Array.from(variantSelects.querySelectorAll('input[type="radio"]'))
                        .map(input => input.dataset.price); // Passe an, um Preis-Daten zu bekommen
      let minPrice = Math.min(...prices);
      let maxPrice = Math.max(...prices);
      priceElement.textContent = `${minPrice} - ${maxPrice} EUR`;
    } else {
      // Zeige normalen Preis an
      let selectedVariant = getSelectedVariant(selectedValues);
      priceElement.textContent = `${selectedVariant.price} EUR`;
    }
  }

  function getSelectedVariant(selectedValues) {
    // Hier sollte die Logik zur Auswahl der korrekten Variante basierend auf den ausgewählten Werten sein
    // Dummy-Rückgabe für Beispielzwecke
    return { price: 2999 };
  }

  variantSelects.addEventListener('change', updatePrice);
  updatePrice(); // Initiale Aktualisierung beim Laden der Seite
});

Stelle sicher, dass die Preis-Daten für die Varianten im HTML enthalten sind. Das könnte durch das Hinzufügen von data-price-Attributen zu den Input-Elementen geschehen:

<input type="radio" id="template--22571138220381__main-1-1" name="Farbe" value="Schwarz" form="product-form-template--22571138220381__main" data-price="2999">
<label for="template--22571138220381__main-1-1">Schwarz<span class="visually-hidden label-unavailable">Variante ausverkauft oder nicht verfügbar</span></label>

Mit diesen Anpassungen solltest du in der Lage sein, die Varianten-Auswahl ohne Vorauswahl zu ermöglichen und die Preisspanne anzuzeigen, wenn keine spezifische Variante ausgewählt ist. 

Wenn du es, wie gesagt, 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 obige ist Theme-abhängig, ohne Gewähr und dient lediglich dazu dich in die richtige Richtung zu weisen!

Empfohlene Shopify Apps um den Aufwand zu reduzieren - bitte in jeder App in die Demo klicken:

1. EZ Product Options & Variants

   • Funktionen: Diese App ermöglicht es dir, unbegrenzt viele Produktoptionen hinzuzufügen, darunter Dropdowns mit Text und Bild, Radio-Buttons, Checkboxen und vieles mehr. Sie unterstützt auch bedingte Logik, was bedeutet, dass du komplexe Regelungen für die Anzeige von Optionen erstellen kannst.
   • Preis: Kostenloser Plan für ein Produkt, dann $9.95/Monat für unbegrenzte Produkte, und $14.95/Monat für den Pro-Plan mit zusätzlichen Funktionen wie bedingter Logik.
   • Bewertung: 4.8 von 5 Sternen basierend auf 225 Bewertungen​ (Shopify App Store)​.

2. Variant Option Product Options

   • Funktionen: Diese App bietet unbegrenzte Produktvarianten und Anpassungsmöglichkeiten. Sie unterstützt verschiedene Optionstypen wie Farb- und Bild-Swatches, Texteingabefelder und mehr. Bedingte Logik und Preisaufschläge sind ebenfalls verfügbar.
   • Preis: Basisplan für $9.99/Monat mit einer 14-tägigen kostenlosen Testphase, erweiterter Plan für $19.99/Monat.
   • Bewertung: 4.6 von 5 Sternen basierend auf 1,010 Bewertungen​ (Shopify App Store)​.

3. GLO Color Swatch, Variant Image

   • Funktionen: Diese App ermöglicht das Gruppieren von Produkten als Varianten und die Anzeige von Farb-Swatches auf der Kategorieseite. Sie bietet unbegrenzte Produktoptionen und ist sehr flexibel in der Darstellung und Handhabung.
   • Preis: Kostenloser Plan verfügbar.
   • Bewertung: 4.9 von 5 Sternen basierend auf 903 Bewertungen​ (Shopify App Store)​.

4. Kickflip - Customize Products

   • Funktionen: Kickflip bietet umfassende Personalisierungsoptionen mit Echtzeitvorschau. Es ermöglicht den Kunden, Produkte vollständig anzupassen und Komponenten hinzuzufügen oder zu entfernen.
   • Preis: Kostenlos bis zum Verkauf des ersten personalisierten Produkts, danach $49/Monat oder 2.19% des Verkaufspreises.
   • Bewertung: 4.7 von 5 Sternen basierend auf 117 Bewertungen​ (TinyIMG)​.

Umsetzung ohne "Bitte auswählen"-Variante

Durch die Verwendung einer dieser Apps kannst du die Vorauswahl einer Variante vermeiden, indem du eine Option hinzufügst, die standardmäßig ausgewählt ist und den Benutzer auffordert, eine tatsächliche Variante auszuwählen. Du kannst auch bedingte Logik verwenden, um Preisspannen anzuzeigen, wenn die Option "Bitte auswählen" aktiv ist.

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.