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

Solved
crusco
Tourist
7 0 1

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
2313 415 545

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.
 

◦ Slideshow images cutting off or looking bad? Try the Slideshow (PRO) section. No apps required.
◦ Replace apps with copy/paste code snippets & save money. Examples here.

View solution in original post

Replies 4 (4)
diego_ezfy
Shopify Partner
2313 415 545

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.
 

◦ Slideshow images cutting off or looking bad? Try the Slideshow (PRO) section. No apps required.
◦ Replace apps with copy/paste code snippets & save money. Examples here.

View solution in original post

crusco
Tourist
7 0 1

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

diego_ezfy
Shopify Partner
2313 415 545

Np, my pleasure! Wishing you a good week.

◦ Slideshow images cutting off or looking bad? Try the Slideshow (PRO) section. No apps required.
◦ Replace apps with copy/paste code snippets & save money. Examples here.
AvidBrio
Shopify Expert
232 12 18

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