FROM CACHE - en_header

Limit menu entries to 4 per column with {% for %}

Solved
crusco
Tourist
10 0 2

I'm trying to achieve this in my menu:

I've a menu with unknown number of entries... I need every 4th entry to break and go in a new column.

Screenshot 2020-08-02 at 13.13.11.png

I've tried with {% cycle %} but it doesn't work like expected.

 

{% for link in linklists.footer.links %}
{% cycle '<c><ul class="no-style">','','','','' %}
<li><a href="{{ link.url }}" {% if link.active %}aria-current="page"{% endif %} class="no-style">{{ link.title }}</a></li>
{% cycle '','','','','</ul></c>' %} 
{% endfor %}

 

{% cycle %} code above OUTPUTS:

 

<grid>
<c><ul class="no-style">
	<li><a href="/pages/contact"  class="no-style">Contact</a></li>
	<li><a href="/pages/faq"  class="no-style">FAQ</a></li>
	<li><a href="/pages/shipping"  class="no-style">Shipping</a></li>
	<li><a href="/pages/returns"  class="no-style">Returns</a></li>
</ul></c> 
<c><ul class="no-style">
	<li><a href="/pages/about"  class="no-style">Our story</a></li>
	<li><a href="/blogs/news"  class="no-style">Press</a></li> <!-- Last link in menu -->
<!-- HERE it lacks the closing tag: </ul></c> -->

 

 

I've also tried with forloop.index, and it didn't work either.

 

{% for link in linklists.footer.links %}
{% if forloop.index == 5 %}
<c><ul class="no-style">
{% endif %}
<li><a href="{{ link.url }}" {% if link.active %}aria-current="page"{% endif %} class="no-style">{{ link.title }}</a></li>
{% if forloop.index == 5 %}
</ul></c>
{% endif %}
{% endfor %}

 

NOTE: I've css grid already set up... I need it set up thru liquid

Accepted Solution (1)

Accepted Solutions
diego_ezfy
Shopify Partner
2809 531 744

This is an accepted solution.

Hey,

Use modulo, aka mod in Javascript and other programming languages. If you're not sure what it is here is further information.

Basically it is the remainder or signed remainder after a division, So, for example:

2/2 the mod is 0.
3/2 the mod is 1.
And so on and so forth. 


Here is a sample:

 

 

    {% assign words = "cheddar, swiss, gouda, havarti, string, cookie, llama, loop" | split: ','%}
    <ul>
      {% for word in words %}
      {% assign mod = forloop.index | modulo: 4 %}
      <small> Current mod: {{mod}}</small>
      {% if mod == 0 %}
      <li>new column here.</li>
      {% else %}
      <li>{{word}}</li>
      {% endif %}

      {% endfor %}
    </ul>

 

 


What this code does is divide the current loop index by 4 since you want to add logic to the 4th entry. 

Let me know whether it works for you.
 

View solution in original post

Replies 4 (4)
diego_ezfy
Shopify Partner
2809 531 744

This is an accepted solution.

Hey,

Use modulo, aka mod in Javascript and other programming languages. If you're not sure what it is here is further information.

Basically it is the remainder or signed remainder after a division, So, for example:

2/2 the mod is 0.
3/2 the mod is 1.
And so on and so forth. 


Here is a sample:

 

 

    {% assign words = "cheddar, swiss, gouda, havarti, string, cookie, llama, loop" | split: ','%}
    <ul>
      {% for word in words %}
      {% assign mod = forloop.index | modulo: 4 %}
      <small> Current mod: {{mod}}</small>
      {% if mod == 0 %}
      <li>new column here.</li>
      {% else %}
      <li>{{word}}</li>
      {% endif %}

      {% endfor %}
    </ul>

 

 


What this code does is divide the current loop index by 4 since you want to add logic to the 4th entry. 

Let me know whether it works for you.
 

crusco
Tourist
10 0 2

Awesome, thanks bro. Didn't know the modulo thing existed in liquid as well. It works 🤟

AvidBrio
Shopify Expert
293 17 23

you can also  use limit:4

 

 

{% for link in linklists.footer.links limit:4 %}
{% cycle '<c><ul class="no-style">','','','','' %}
<li><a href="{{ link.url }}" {% if link.active %}aria-current="page"{% endif %} class="no-style">{{ link.title }}</a></li>
{% cycle '','','','','</ul></c>' %} 
{% endfor %}

 

If you find our comment helpful, hit the like button and accept it as a solution.
Want us to implement custom changes in your store? Contact us
Email me directly - jim@avidbrio.com