If product tags contains - in shopify

Question

So i'm basically trying to use the logic of shopify to show an image if the tags of the product contains the words "related"

(there is a json query that picks up the tags containing 'related-x' where x is the name of the product and it uses this to show the related products.)

Preceding the Json query is an image that says "related products" basically. what i would like to do is to only display this when there are "related" tags present.

I have tried this:

{% if product.tags contains 'related' %}              
          <img src="{{ 'complete-this-look.gif' | asset_url }}" alt="" align="left;" style="vertical-align:top; margin-right:8px; padding-top:0px;" width="130" height="175"/>
{% endif %}

Which doesnt display anything. I also tried:

{% for t in product.tags %}
{% if t contains 'related-' %}
<img src="{{ 'complete-this-look.gif' | asset_url }}" alt="" align="left;" style="vertical-align:top; margin-right:8px; padding-top:0px;" width="130" height="175"/>
{% endif %}
{% endfor %}

However this will display the image every time a related product is returned by the query.

What im after is for it to go (Image) (Query Results) - and if there is no query results then it displays nothing.

Any ideas?

Solution

The reason your first piece of code is not working is because contains is looking for a tag called 'related', not a tag containing the substring 'related'.

See the Shopify Wiki for contains where it states:

It can check for the presence of a string in another string, or it can check for the presence of a string in an array of simple strings.

In your instance, contains is checking for a string in an array of simple strings (and is looking for the whole string, not a string containing the specified string as a substring).

See also the Shopify wiki for product.tags:

Returns a list of the product's tags (represented by simple strings).

You can use the contains keyword with an array of simple strings, so you can use this with a product's tags:

{% if product.tags contains 'custom to order' %}
<!-- Output custom to order form HTML here -->
{% endif %}

So, Gerard Westerhof's suggestion to use Join in the comment above is a good one. If you first join the product.tags array, then contains will search for the 'related' string inside the string of tags returned by join.

Try this:

{% if product.tags | join: ' ' contains 'related' %}
    <img src="{{ 'complete-this-look.gif' | asset_url }}" alt="" align="left;" style="vertical-align:top; margin-right:8px; padding-top:0px;" width="130" height="175"/>
{% endif %}

EDIT:

Try this instead:

{% assign product_tags_string = product.tags | join: ' ' %}
{% if product_tags_string contains 'related' %}
    <img src="{{ 'complete-this-look.gif' | asset_url }}" alt="" align="left;" style="vertical-align:top; margin-right:8px; padding-top:0px;" width="130" height="175"/>
{% endif %}

Comments

[user2782857]

Thanks for that steph. I tried that and now it always display the gif regardless of there is a 'related' tag or not. maybe its necessary to do the negative of this? so - if product.tags doesnt contain related then nothing > else show the gif? what do you think?

[Steph Sharp]

@user2782857 Hmm, that's strange. Seems like {% if product.tags | join ' ' contains 'related' %} is not being evaluated in the order you would expect. Adding parentheses around product.tags | join ' ' doesn't have any affect either, but assigning it to a variable before using contains works for me. See my edit above.

[user2782857]

Holy fking st Steph you are a god amongst mere mortals. I owe you about 200 beers or something <3

[Hujjat Nazari]

for those who copied the code. use | join:' ' with a colon.