Wenn du meine vorherigen Tutorials verfolgt hast, willst du wahrscheinlich auch wissen, wie du Farbfelder (Color Swatch) auf deiner Kategorienseite erstellen kannst! Mit der folgenden einfachen Kurzanleitung kannst du deine Kategorienseite, um die nötigen Funktionen erweitern.
Info: Du musst das Tutorial zu den Farbfeldern (Color Swatch) für die Produktseite abgeschlossen haben, denn es enthält einen Abschnitt darüber, wie man Farbfelder hinzufügt, die wir für die Kategorienseite benötigen.
Step 1: Card-Product.Liquid ändern
Wenn du diesen Code änderst, wird das Element zu allen Produktkarten hinzugefügt, die diesen Code verwenden. Das gilt auch für den Abschnitt "Das könnte dir auch gefallen" und andere Abschnitte. Gehe zu Code bearbeiten, gehe zum Ordner Snippet und suche card-product.liquid. Wenn du ihn gefunden hast, scrolle nach unten, bis du den folgenden Code findest
{% render 'price', product: card_product, price_class: '' %}
Step 2: Füge direkt unter dem obigen Code den folgenden ein
{% assign keys = "Color,color,Colour,colour" | split: ',' %}
{% for key in keys %}
{% if card_product.options contains key %}
<div class="product_tile_color_holder">
{% for color_option in card_product.options_by_name[key].values %}
{% for variant in card_product.variants %}
{% if variant.options contains color_option %}
{% if variant.image %}
{% assign background_style = color_option %}
{% endif %}
{% if variant.metafields.color.swatch %}
{% assign background_style = variant.metafields.color.swatch %}
{% endif %}
{% if variant.metafields.image.swatch %}
{% assign background_style = "url(" | append: variant.metafields.image.swatch | append: ")" %}
{% endif %}
{% endif %}
{% endfor %}
<!--- Coded by jotting.com --->
<input
type="radio"
name="{{ card_product.id }}_card_color"
id="{{ card_product.id }}_color_{{ forloop.index }}"
style="background: {{ background_style }}; background-size: cover;">
{% endfor %}
</div>
{% endif %}
{% endfor %}
Step 3: Code Base.css hinzufügen
Gehe jetzt in den Asset-Ordner, suche die Datei base.css und füge den folgenden Code am Ende der Datei ein
input[type=radio][name$=_card_color]{
width: 20px;
height: 20px;
border-radius: 50%;
appearance: none;
background-size: 9px 9px;
background-image: repeating-linear-gradient(45deg, #000 0, #000 1px, #ebebeb 0, #ebebeb 50%);
}
Das war's! Du hast jetzt eine fantastische Kollektion von Color Swatch zu deinem Dawn-Theme.
Soll nur ein Absatz von den beiden verwendet werden? Oder kommen beide rein? Ein davon müsste geändert werden.
