I am attempting to have a for loop in my template to loop through each letter of the alphabet, and if the first letter of the alphabet is found, print out that data.
I cannot find a way to do this, i know how to do this in PHP, but cannot get it to work in liquid.
{% for range('a','z') as $i %}
{% if first_letter == $i %}
{% unless first_letter == current %}
<li class="test"><h2 id='{{ first_letter }}'>{{ first_letter }}</h2> </li>
{% endunless %}
<ul><li class="test"> {{ product_vendor | link_to_vendor }} </li> </ul>
{% assign current = first_letter %}
{% endif %}
{% endfor %}
The top two lines is what is not working here, i know the syntax is incorrect, but i cannot figure out how to get this to work.
The syntax for ranges in liquid for loops is here in the Shopify docs:
{% assign num = 4 %}
{% for i in (1..num) %}
{{ i }}
{% endfor %}
{% for i in (3..5) %}
{{ i }}
{% endfor %}
However, you can only use numbers in the range, not strings.
Have you seen this article? Maybe that approach would work in your situation.
Edit: Updated link for above article.
We are talking about liquid here, so you don't have many options. This will work fine, but make sure you complete alphabet.
{% assign letters = "a b c d e f g h i j" | split: ' ' %}
{% for letter in letters %}
{% if letter == 'g' %}
<!-- Letter {{ letter }} match! -->
{% endif %}
{% endfor %}
Related
I am looping through an array and would like to add a class if it is the first item.
I have tried
{% if field|first %}
{% if field.first %}
{% if field.first() %}
{% if loop|first %}
{% if loop.first %}
{% if loop.first() %}
none work, please help. (the reason I don't use css pseudo first is that this is a grid layout and I have am doing responsive layout things with it)
{% for field in row.fields %}
<div class="c-product-table__item {% if field|first %}{{ first_item }}{% endif %} ">
<span class="c-product-table__text">{{ field.text }}</span>
</div>
{% endfor %}
I don't know why twig filters are not working, I solved it another way. I set a var and made it blank after first loop
{% set thiscount = 'first_item' %}
{% for field in row.fields %}
<div class="c-product-table__item {{ thiscount }}">
<span class="c-product-table__text">{{ field.text }}</span>
</div>
{% set thiscount = '' %}
{% endfor %}
I have an editor with a set of buttons, and I want to display only a set of buttons based on twig::render variables.
If I include all I want it to display are buttons available, if I include individual button keys I want to display only that ones.
echo TwigLoader::render('#ui/editor.html.twig'['toolbar'=>['all']]);
echo TwigLoader::render('#ui/editor.html.twig'['toolbar'=>['font','size']]);
For the template I'm using the following code:
{% set toolbar_tools = [
{'font':'<select class="ql-font"></select>'},
{'size':'<select class="ql-size"></select>'}]
%}
<div id="button-container">
<span class="ql-formats">
{% for tool, key in toolbar_tools %}
{{ tool.key|raw}}
{% endfor %}
</span>
</div>
I'm getting an empty container.
Is this a good strategy or there are better ways?
Seems you`re looking for something like this:
{% set toolbar_tools = {
'font':'<select class="ql-font"></select>',
'size':'<select class="ql-size"></select>'
}
%}
<div id="button-container">
<span class="ql-formats">
{% if toolbar|length > 0 %}
{% for t in toolbar %}
{% if t == 'all' %}
{# show all options #}
{% for tool in toolbar_tools %}
{{ tool|raw }}
{% endfor %}
{% else %}
{# show defined options #}
{{ attribute(toolbar_tools, t)|raw }}
{% endif %}
<br />
{% endfor %}
{% endif %}
</span>
</div>
Hope you will be fine with that.
I have this loop displaying six links from left to right. I would like to add a break after the fourth link but I'm new at Twig and I don't know how to add it in. Do I need another loop inside the For loop?
{% if contactLinks|length <= 6 %}
{% for link in contactLinks %}
{{ link|raw }}
{% endfor %}
{% elseif contactLinks|length >= 6 %}
{% for link in contactLinks %}
{{ link|raw }}
{% endfor %}
{% endif %}
Twig has a special loop variable that you'll need to use. See here:
http://twig.sensiolabs.org/doc/tags/for.html#the-loop-variable
{% for link in contactLinks %}
{{ link|raw }}
{% if loop.index == 4 %}
<br/>
{% endif %}
{% endfor %}
http://twig.sensiolabs.org/doc/tags/for.html#the-loop-variable
I am making a site using twig php template.
I want to display the articles published in November.
So far I have this:
{% if date(article.published) == date('november') %}
{% for article in articles %}
<li> {{ article.title }} </li>
{% endfor %}
{% endif %}
(Thanks in advance)
You should use IF clause inside of the loop, not outside of it:
{% for article in articles %}
{% if date(article.published) == date('november') %}
<li> {{ article.title }} </li>
{% endif %}
{% endfor %}
You are looking for:
{%
if article.published|date('U') > '2014-11-01'|date('U')
and article.published|date('U') < '2014-12-01'|date('U')
%}
The date('U') filter will convert dates to the timestamp format (number of secs since 1970-01-01), so we can do some dates comparisons from here and filter all dates between 2014-11-01 and 2014-11-31 23:59:59.
And as #Giedrius pointed out, you should put the if inside the loop.
This becomes:
{% for article in articles %}
{%
if article.published|date('U') > '2014-11-01'|date('U')
and article.published|date('U') < '2014-12-01'|date('U')
%}
<li> {{ article.title }} </li>
{% endif %}
{% endfor %}
I am trying to list a load of products, and insert an image between the second last and the last item. At the moment I have this code on my index:
<ul class="clearfix">
{% for product in collections.drinks.products %}
{% include 'snippet-product-item' with 'four' %}
{% endfor %}
</ul>
This in my product-item:
{% if snippet-product-item == '' %}{% assign snippet-product-item = 'four' %}{% endif %}
<li class="{{ snippet-product-item }}-per-row clearfix">
<div class="coll-image-wrap{% unless product.available %} sold-out{% endunless %}">
{% if product.available == false %}
{% assign ratio = settings.product_img_w_to_h_ratio | times: 1.0 %}
<a href="{{ product.url | within: collection }}">
<img src="{{ product.featured_image.src | product_img_url: 'large' }}" alt="{{ product.featured_image.alt | escape }}" />
</a>
</div><!-- .coll-image-wrap -->
</li>
So I'm guessing I need to put some code in my index block to work out how many items there are in the collection, and then for the last one add an extra image in before it. Can anyone help me figure out how that might be done please?
This is my useless attempt:
{% assign num = 0 %}
{% for product in collections.drinks.products %}
//Do something like this to work out number of items in collection
{% assign num = temp %}
// Then minus one and insert the image so it appears between second to last and last items
{% endfor %}
I would try something like this:
{% for product in collections.drinks.products %}
{% if forloop.last %}
// Insert image...
{% endif %}
{% include 'snippet-product-item' with 'four' %}
{% endfor %}