FROM CACHE - de_header
Gelöst

Size Swatches auf der Kategorieseite

Hoodboyz
Neues Mitglied
4 0 0

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

 

Unser Ziel:

Die vorhandenen Farben UND Größen anzeigen

Bildschirmfoto 2021-05-16 um 11.57.30.png

 

Ich hoffe uns kann jemand weiterhelfen!

Store: hoodboyzrheine.myshopify.com

Passwort: hoodboyz!

  

1 AKZEPTIERTE LÖSUNG
Gabe
Shopify Staff
16357 2587 3853

Erfolg.

@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:

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

Lösung in ursprünglichem Beitrag anzeigen

4 ANTWORTEN 4

Gabe
Shopify Staff
16357 2587 3853

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:

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

Hoodboyz
Neues Mitglied
4 0 0

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

Hoodboyz
Neues Mitglied
4 0 0

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

Bildschirmfoto 2021-05-17 um 18.05.52.png

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 -- */
<span style="display:block; margin-top:5px">
{% 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 %}
            <span class="size-values {% unless variant_avialable %}soldout{% endunless %} text-center">{{ value | escape }}</span>
          {% endfor %}      
        {% endif %}
    {% endfor %}
  {% endunless %}      
{% endunless %} 
</span>

 

 

Gabe
Shopify Staff
16357 2587 3853

Erfolg.

@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:

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