Why is my HTML layout breaking when duplicating code for link list menus?

Store Design
1

Hello, I’m trying dividing the link lists into two if there are more than 8 links in the menu. Here’s my code


      ##### {{ section.settings.shop_workwear_title }}
      
        {% for link in section.settings.shop_workwear_menu.links %}
            {% cycle 'section-group-start': '
', '', '', '', '', '', '', '' %}
              {{ link.title }}
            {% cycle 'section-group-end': '', '', '', '', '', '', '', '
' %}
        {% endfor %}

I’m getting the result, but I think something is not closing right. When I duplicate that code again for another menu like copy paste that code just beneath it, the layout turns to be so wrong. Can anyone please explain why? I’m fairly new to Liquid and Shopify Theme dev..

My desired output would be something like this


      ##### Title
      
        

           1
           2
           3
           4
           5
           6
           7
           8
        

        

           9
           10
           11
           12
           
           ...
1 Like
2

@stressedowner

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community! :blush:
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

3

Hi, KetanKumar!

I’m afraid I can’t show the link, but I edited my question and put the desired output of the HTML using for loop with cycle.

1 Like
4

Check this https://shopify.dev/api/liquid/tags/iteration-tags?shpxid=bafa13c8-8ECA-4195-DA15-D91A08048FA8#cycle-group-names and the following example.

So it works for your first linklist, but then, for your second linklilst if just continues the cycle where it finished in the first one.

I also do not quite see how your approach should work if, say your first linklist has 10 links

The second element, which houses links 9 and 10 will not be closed.

Below I tried to reproduce the output from your code, where italic part comes from first cycle and underlined comes from the second cycle.

**<div class="footer-menu-container flex">**
 *<div class="flex flex-col">* <a href="#">1<a>  nil
                         *nil* <a href="#">2<a>  nil
                         *nil* <a href="#">3<a>  nil
                         *nil* <a href="#">4<a>  nil
                         *nil* <a href="#">5<a>  nil
                         *nil* <a href="#">6<a>  nil
                         *nil* <a href="#">7<a>  nil
                         *nil* <a href="#">8<a>  </div>
 *<div class="flex flex-col">* <a href="#">9<a>  nil
 *nil*  <a href="#">10<a> nil
**</div>** <!-- from footer-menu-container, flex-col not closed -->

Do not look at “inspect element”, check the “view source” as browsers tend to tolerate things like this and will supply closing to fix it themselves, but you never know how intelligent the browser is.

5

I’d use one of those two codes instead – similar to yours:


    {% for link in section.settings.shop_workwear_menu.links %}
        {% assign r = forloop.index0 | modulo: 8  %}
        {% if r == 0  %}
            

        {% endif %}
           {{ link.title }}
        {% if r == 7 or forloop.last %}
            
 
        {% endif %}
    {% endfor %}

or a bit different:


    
  
      {% for link in section.settings.shop_workwear_menu.links %}
        {% assign r = forloop.index0 | modulo: 8  %}
            {{ link.title }}
        {% if r == 7 and forloop.last == false %}
        
 
          
        {% endif %}
      {% endfor %}
1 Like
6

@stressedowner

can you try this Way

7

Thank you so much, Tim! This works and thanks for the tips!