CODEWITHSUNDEEP
collectionsshopifyproductliquid
Daniel Corona
Daniel Corona

Reputation: 1222

Shopify / Liquid: Separate a group of tags, then placing them on a select component

I have a large set of tags, and I want to be able to sepparate them. For example, I have the Green, Blue, Red, Black, Colorless and White tags (as well as some other tags that aren't colors, so I won't put them here) and I want to place them in an array. I tried with something like this:

{% assign colors = "" | split: '' %}
{% for tag in collection.all_tags %}
    {% if tag == 'Black' or tag == 'Blue' or tag == 'Colorless' or tag == 'Red' or tag == 'White' %}
        {% assign comma = "," %}
        {% assign color = tag | split: '_' %}
        {% assign colors = colors | concat: color %}
        {% assign colors = colors | concat: comma %}
    {% endif %}
{% endfor %}

However, that returns me BlackBlueGreenRedColorlessWhite, without any spaces whatsoever. Also, is there a way I can place those selected tags in a <select> component so I can filter my products by the selected tag? Like in the example provided in this page but using a <select> instead of a <ul>.

Upvotes: 0

Views: 951

Answers (1)

Charles C.
Charles C.

Reputation: 3913

first, categorizes your tag by having a label;

i.e: color-blue, color-red, color-green, etc.

why? You will not need to add more if-else statement;

then, with code below, you will get an array of color;

{% assign color = "" %}
{% for tag in collections.all_tags %}
    {% if tag contains 'color-' %}
        {% assign trimmed = tag | split: "-" | last %}
        {% assign color = color | append: trimmed | append: ", " %}
    {% endif %}
{% endfor %}

{% assign color = color | split: ", " %}

<select name="color" id="color">
    {% for x in color %}
        <option value="{{x}}">{{x}}</option>
    {% endfor %}
</select>

Upvotes: 1

Related Questions