CODEWITHSUNDEEP
shopifyliquid
I AM mw
I AM mw

Reputation: 15

Shopify Liquid tag nested in liquid tag - any workaround?

I'm new to Shopify and Liquid. I know that you can't nest a liquid tag within another liquid tag ie:

{% something {{ something_else }} %}

I was wondering if there is a workaround for this kind of scenario? Possibly involving 'capture' or clever use of 'raw'?

I'm building a site that uses product tags to denote which chocolates go in which products (collection of chocolates). On the product page I can easily return the tags as a list:

<ul class="chocolates-menu">
  {% for tag in product.tags %}
    <li><a href="/collections/all/{{ tag | handleize }}">{{ tag }}</a></li>
  {% endfor %}
</ul>

However, I'd like to render snippets with file names to match the names of the tags (these will contain an image, chocolate name and chocolate description) ie:

<li><a href="/collections/all/{{ tag | handleize }}">{% render '{{ tag }}' %}</a></li>

The closest I've got is:

{% for tag in product.tags %}
  {% capture chocolate_tag %}
    {% raw %}{% render{% endraw %} {% raw %}'{% endraw %}{{ tag }}{% raw %}' %}{% endraw %}
  {% endcapture %}
  <li><a href="/collections/all/{{ tag | handleize }}">{{ chocolate_tag }}</a></li>
{% endfor %}

This will output the correct code but as text on the page (rather than parsing it). ie: {% render 'Tag Name Here' %} simply as the text of the list item. Any help from brighter folk, is much appreciated. Thanks.

Upvotes: 0

Views: 1647

Answers (1)

Rado
Rado

Reputation: 739

I would suggest creating a snippet for all your chocolates and using the tag as a variable to output what is needed.

Here is a visual representation of what I mean and is kinda clearer from your discussion with @Fabio Filippi

snippets/chocolate.liquid

{% assign tag_image = tag | append: '.png' %}

{% case tag %}
  {% when 'diet' %}
    <img src="{{ tag_image | file_img_url: '100x' }}" class="responsive" />

  {% when 'dark' %}
    <div>My dark chocolate HTML</div>

  {% when 'white' %}
    <div>My white chocolate HTML</div>

{% endcase %}

and how to use:

{% render 'chocolate', tag: tag %}

Upvotes: 0

Related Questions