FROM CACHE - de_header

Varianten bei Produkten - Alle Varianten werden ausgewählt

franz-messner
Shopify Partner
75 3 17

Hallo! 

Ich habe folgendes Problem:

Bei einem Produkt habe ich die Variante "Anzahl" und dann davon abhängig die Pakete gemacht.

Beispiel:
Variante 1: Anzahl 5
Variante 2: Anzahl 10

und dann gibt es zu jeder Variante unterschiedliche "Größe".

Das Problem was ich damit habe ist, dass egal welche Variante (Anzahl) ich auswähle immer alle Pakete dargestellt werden. 
Es sollte ja aufgrund der ersten Auswahl "der Anzahl" die richtigen Values der Größe dargestellt werden.

Gibt es eine Möglichkeit über die Selectoren die Produktvarianten auszublenden, die nicht gewünscht sind? 

Danke für Eure Hilfe 
Franz


4 ANTWORTEN 4

Gabe
Shopify Staff
16357 2587 3853

Hi Franz! @franz-messner 

Danke für die Angaben und beim verbergen der "Thumbnails" oder über den Selektoren die Produktvarianten ausblenden, müssen einige komplexe Code Skripte laufen die über verschiedene liquid Dateien agieren und auch im CSS sieht es ziemlich kompliziert aus.

Vielleicht können diese zwei Developer Anleitungen etwas Licht auf die ganze "Mechanik" werfen, wie z. B. Nr. 5 & 6:

  1. Find a variant ID
  2. Get customers to choose an option
  3. Hide sold-out variants
  4. Localize your product prices for search engines
  5. Show featured image until a variant is selected
  6. Select variants by clicking their images
  7. Use products with multiple options
  8. Add pickup availability to product pages

Hier wäre z. B. interessant zu wissen, ob du ein Shopify Theme oder ein drittanbieter Theme aus unserem Theme Store verwendest, und somit lass uns mal hier weiter nach Lösungen suchen. Die 60-Min Shopify Design Time sind derzeit für unsere Free Themes erhältlich und nicht vergessen, wenn du deine Shop URL hier postest kann ich gerne mal ein Blick reinwerfen und Tipps abgeben.

Mit dem Design Time kann unser Team z. B. so was wie den folgenden Checkbox zum Theme Editor für die Product Page hinzufügen:

image.png

Wie oben dargestellt kann man im Produktseiten-Abschnitt des Editors so ein Feature einbauen. Das kann auch ein Experte für dich gerne machen. Ein typischer Code hier wäre etwas wie:

Spoiler
{% comment %}
    Get first variant in stock, or deep linked one
  {% endcomment %}
  {% assign current_variant = product.selected_or_first_available_variant %}
  {%- assign featured_image = current_variant.featured_image | default: product.featured_image -%}

  <div class="grid product-single">

    <div class="grid__item medium-up--one-half">
      {% for image in product.images %}
        {% capture img_id %}ProductImage-{{ image.id }}{% endcapture %}
        {% capture wrapper_id %}ProductImageWrapper-{{ image.id }}{% endcapture %}
        {%- assign img_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}

        {% include 'image-style' with image: image, width: 720, height: 600, small_style: true, wrapper_id: wrapper_id, img_id: img_id %}

        <div id="{{ wrapper_id }}" class="product-single__featured-image-wrapper supports-js{% unless featured_image == image %} hidden{% endunless %}" data-image-id="{{ image.id }}">
          <div class="product-single__photos" data-image-id="{{ image.id }}" style="padding-top:{{ 1 | divided_by: image.aspect_ratio | times: 100}}%;">
            <img id="{{ img_id }}"
                 class="product-single__photo lazyload{% unless featured_image == image %} lazypreload{% endunless %}{% if section.settings.product_image_zoom_type == 'lightbox' %} lightbox{% endif %}"
                 {% if section.settings.product_image_zoom_type == 'zoom-in' %} data-zoom="{{ image | img_url: '1024x1024' }}"{% endif %}
                 src="{{ image | img_url: '200x200' }}"
                 data-src="{{ img_url }}"
                 data-widths="[180, 360, 470, 600, 750, 940, 1080, 1296, 1512, 1728, 2048]"
                 data-aspectratio="{{ image.aspect_ratio }}"
                 data-sizes="auto"
                 alt="{{ image.alt | escape }}">
          </div>
          {% if product.compare_at_price_max > product.price %}
            <span class="badge badge--sale"><span>{{ 'products.product.on_sale' | t }}</span></span>
          {% endif %}
        </div>
      {% endfor %}

Dann ist hier die IF Statement die verwendet werden kann:

Spoiler
{% if product.images.size > 1 and section.settings.show_thumbnails %}
        <ul class="product-single__thumbnails grid grid--uniform" id="ProductThumbs">

          {% case product.images.size %}
            {% when 2 %}
              {% assign thumbnail_width = 'small--one-half medium-up--push-one-sixth medium-up--one-third' %}
            {% when 4 %}
              {% assign thumbnail_width = 'small--one-half medium-up--one-quarter' %}
            {% else %}
              {% assign thumbnail_width = 'small--one-third medium-up--one-third' %}
          {% endcase %}

          {% for image in product.images %}
            <li class="grid__item {{ thumbnail_width }}">
              <a href="{{ image.src | img_url: 'grande' }}" class="product-single__thumbnail" data-image-id="{{ image.id }}">
                <img src="{{ image.src | img_url: 'compact' }}" alt="{{ image.alt | escape }}">
              </a>
            </li>
          {% endfor %}

Als zusätzliche Anmerkung: Das primäre Bild wird immer noch auf das relevante Bild aktualisiert, wenn eine Variante aus dem Dropdown ausgewählt wird!

Dann habe ich eine App gefunden (für ca. €6/Monat) die u. a. da folgende ermöglicht und sehr gute Bewertungen bekommt:

image.png

Wäre das ein Ansatz? Dann habe ich ein paar Code-Beispiele gefunden die vielleicht etwas getweakt werden sollten für dein drittanbieter Theme. Der Folgende Code im theme.scss kann die Varianten Bilder verstecken:

.product-single__thumbnails {   display: none;}

 Dann kann man die Variable image.attached_to_variant verwenden. Das Code kann man im product-template.liquid ggf. finden und dann die Bedingung in der Variantenschleife prüfen.

{% unless image.attached_to_variant? %}
//your thumb image code goes here 
{% endunless %}

Suche einfach nach{% for image in product.images %}

Gabe | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog

franz-messner
Shopify Partner
75 3 17

Hallo Gabe! 

Danke für deine ausführliche Antwort! 

Ich arbeite mit dem Theme Prestige. 

Was für mich verwunderlich ist, dass beim Produkt anlegen die Varianten eingestellt werden können jedoch dann die Abhängigkeit verloren geht oder gar nicht gegeben ist.

Denn die erste Variante (Auszahl) sollte ja nur noch in der zweiten Variante diejenigen Datensätze anzeigen die mit dieser Auswahl vorhanden sind. Jedoch werden egal welche Auswahl ich treffe die gesamten Datensätze im zweiten Dropdown angezeigt. 

Danke für deine Rückmeldung
LG Franz

Gabe
Shopify Staff
16357 2587 3853

@franz-messner 

Verstehe. Hast du auf Varianten Ebene im Produktstamm die Varianten Bilder eingepflegt oder nur auf Kopfebene?

image.png

Das Prestige Theme ist eines der besten aber mit dem Varianten Drop-down bedarf es ggf. etwas Javascript o. ä. um das einzubauen. Haben die Prestige Hilfeseiten helfen können oder hast du mit den Theme Entwickler sprechen können? Die sind da oft sehr hilfreich.

Gabe | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog

franz-messner
Shopify Partner
75 3 17

Hallo Gabe! 

Es geht mir in erster Linie noch gar nicht um die Bilder. 

Beispiel

Anzahl    Bezeichnung
100            Lolipops
100            Schnitten
100            Fruchtgummi
200            Lolipops
200            Schnitten

Jetzt ist es so, wenn ich im ersten Schritt bei den Radiobuttons 100 auswähle, dass in der Bezeichnungs "Dropbox" alle Datensätze drinnen sind. (also Lolipops, Schnitten,Fruchtgummi, Lolipops und Schnitten). Es sollte aber nur die zu 100 dazugehörigen drinnen sein. Das gleiche bei Auswahl der Anzahl 200.

Wie bringt man diese Abhängigkeit der Daten hin?


Danke für deine Bemühungen
LG Franz