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?

Answer 1

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 %}