Reputation: 61
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?
Upvotes: 6
Views: 29914
Reputation: 11682
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 %}
Upvotes: 9