Size Swatches auf der Kategorieseite

Deutsch Diskussion Technische Fragen & Antworten
1

Hallo,

ich benötige Unterstützung bei der Einbindung von Size Swatches für meinen Online-Shop.

Wir benutzen das Theme “Streamline” und haben bereits Color Swatches aktiviert. Wir möchten jedoch ebenfalls Size Swatches in der Kategorieseite haben.

Zur Zeit sieht es so aus:

Das Ziel ist es, unter den Farben die vorhandenen Größen angezeigt zu bekommen.

Bildschirmfoto 2021-05-16 um 11.56.27.png
Bildschirmfoto 2021-05-16 um 11.56.27.png898×1168 73.6 KB

Unser Ziel:

Die vorhandenen Farben UND Größen anzeigen

Bildschirmfoto 2021-05-16 um 11.57.30.png
Bildschirmfoto 2021-05-16 um 11.57.30.png900×1108 72.2 KB

Ich hoffe uns kann jemand weiterhelfen!

Store: hoodboyzrheine.myshopify.com

Passwort: hoodboyz!

2

Hey @Hoodboyz

Du brauchst also Size Swatches und weitere Optionen auf der Produktseite anzeigen, ist das richtig? Das würde die Kundenerfahrung viel verbessern, da hast du recht, v. a. wenn hier auf Kleiderprodukte zu schließen ist, habe ich das richtig verstanden?

Native im System sind 3 Optionen maximal möglich aber die good News ist, dass das mit Apps möglich ist, deinen Kunden eine tolle Product Configurator Erfahrung anzubieten. Diese Apps demonstriere ich jetzt unten und du müßtest die App wählen die am besten zu deinen Produkten und deren Anforderungen passt:

3

Vielen Dank für die Antwort. Ich bin nicht auf der Suche nach einer Product Options APP.

Ich suche nur eine Möglichkeit, wie ich im Code (Liquid) Size Swatches bei der Kategorieseite einfügen kann, ohne eine App zu installieren.

Siehe Bild.

Bildschirmfoto 2021-05-17 um 17.22.05.png
Bildschirmfoto 2021-05-17 um 17.22.05.png578×958 179 KB

4

I have now edited it into the code and it works. It looks like this.

Bildschirmfoto 2021-05-17 um 18.05.52.png
Bildschirmfoto 2021-05-17 um 18.05.52.png594×900 127 KB

Now I would like to add a little circle behind the sizes. Could you help me how i can add it into the code?

Also “L” is not in stock, but it doesn’t get lower opacity to show that it is not available.

/* -- Collection size swatches -- */
span.size-values {
    background-color: $colorSplash;
    color: set-accent-text-color($colorSplash);
    padding: 4px 10px;
    margin-right: 2px;
}

span.size-values.soldout {background-color: lighten($colorSplash, 20%);}

@include at-query($max, $small) {
span.size-values {
    padding: 2px 4px;
    margin-right: 1px;
}
  span.size-values.soldout {
    opacity:0.3;
    display:none;
  }
}  
/* -- end size swatches -- */


{% unless sold_out %}      
  {% unless product.has_only_default_variant %}
    {% for option in product.options_with_values %}
      {% assign downcased_option = option.name | downcase %}
        {% if downcased_option contains 'Größe' or downcased_option contains 'größe' %}
          {% assign is_size = true %}
          {% for value in option.values %}
            {% assign variant_avialable = true %}
            {% if product.options.size == 1 %}
              {% unless product.variants[forloop.index0].available  %}
                {% assign variant_avialable = false %}
              {% endunless %}
            {% endif %}
            {{ value | escape }}
          {% endfor %}      
        {% endif %}
    {% endfor %}
  {% endunless %}      
{% endunless %}
5

@Hoodboyz

Hut ab, dass du es bis dahin gebracht hast! Machst du das im live Theme oder in in einer Testkopie zuerst? Und du möchtest sowas ähnliches wie das hier erreichen? Im Quellcode dieser Page siehst du wie das ungefähr aussehen soll.

Das Problem hier ist, dass das von vielen Faktoren abhängt und im Backend viele ständig bewegende Teile im Spiel sind, wie z. B. das Backend Bestand Modul (current_variant.inventory_quantity) oder wer den Bestand verwaltet (current_variant.inventory_management). Das wird mehrere Code Snippets geteilt über mehrere Liquid Dateien verlangen (abgesehen davon welches Theme das ist). Ich habe ein paar Entwickler Anleitungen und Leitfäden gefunden die dich ggf. in die richtige Wege leiten können und ich rate hier ggf. einen Experten zu konsultieren - wir haben hier einige die vielleicht verfügbar sind wenn nicht allzu ausgelastet. Und wenn das ein Shopify Theme dann kann unser Theme Team das ggf. anschauen basierend auf unserer Design Richtlinie.

Du kannst gerne schauen, ob du die notwendigen Code Snippets aus den folgenden Anleitung entnehmen kannst: