Sub Menu Loop

Shopify Expert
158 0 39

Hi all,

I am making an unusual type of submenu that features submenus with more than one link-list. I am finding that something about referencing the link-lists is not working, and I can't figure out why.

The liquid in question goes like this:

{% for link in linklists.main-menu.links %}
    {% if linklists[link.handle].links.size > 0 %}

        <ul class="submenu-list" id="{{ link.title }}">      

            <li>
                <div>
                    {% for link in linklists[link.handle].links %}
                        <span class="{% if forloop.first %} first{% elsif forloop.last %} last{% endif %}{% if l.active %} active{% endif %}">{{ link.title | link_to: link.url }}</span>
                    {% endfor %}
                </div>
            </li>
            
            <li>
                <div>
                    {% for link in linklists[link.handle]-2.links %}
                        <span class="{% if forloop.first %} first{% elsif forloop.last %} last{% endif %}{% if l.active %} active{% endif %}">{{ link.title | link_to: link.url }}</span>
                    {% endfor %}
                </div>
            </li>

        </ul>
    {% endif %}
{% endfor %}

 

The issue is that the second menu does not show up unless it remove the list formatting. I realise it's a bit of a sideways use of liquid to append '-2' to the end of 'linklists[link.handle]', but it works for this purpose. Or at least it did in testing, but now not when I have the list structure in place.

Any help is greatly appreciated.

Kindest regards,
Cam

Head fox at Elkfox | App and web, design and development | Digital commerce experts | https://elkfox.com
0 Likes
Shopify Expert
9779 86 1527

That actually works? I'll have to try that!

{% for link in linklists[link.handle]-2.links %}

Are you also sure you're not creating conflicts with the link object by nesting them and referring to each one with the same name (link)?

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
0 Likes
Shopify Expert
158 0 39

Yeah it does seem to work without the list structure. It's an odd one.

I'm going to write a blog post about it once I have it working properly. Good for some lateral uses.

 

PS. I tried to cycle it so that you could have infinite submenus in columns, but my head exploded :p

Head fox at Elkfox | App and web, design and development | Digital commerce experts | https://elkfox.com
0 Likes
Shopify Partner
371 0 52

Cam,

I don't think something like

{% for link in linklists[link.handle]-2.links %}

Would ever work as its not how you access an array. However you can accomplish what you want with the below

    {% for link in linklists.main-menu.links %}
    {% if linklists[link.handle].links.size > 0 %}
        <ul class="submenu-list" id="{{ link.title }}">      

            <li>
                <div>
                    {% for link in linklists[link.handle].links %}
                        <span class="{% if forloop.first %} first{% elsif forloop.last %} last{% endif %}{% if l.active %} active{% endif %}">{{ link.title | link_to: link.url }}</span>
                    {% endfor %}
                </div>
            </li>
            
            <li>
                <div>
                  {% assign link2 = link.handle|append:'-2' %}
                    {% for link in linklists[link2].links %}
                        <span class="{% if forloop.first %} first{% elsif forloop.last %} last{% endif %}{% if l.active %} active{% endif %}">{{ link.title | link_to: link.url }}</span>
                    {% endfor %}
                </div>
            </li>

        </ul>
    {% endif %}
{% endfor %}

Thanks,

Ryan

Want an app but can't find what you need? Let us know we custom build apps for Free
1 Like
Shopify Expert
158 0 39

Hi Ryan,

You're totally right about the correct way to do it. Thanks for that. Very helpful :)

Interestingly it did work, but only with a very specific arrangement that I haven't been able to reproduce. I think I essentially just happened upon a quirk.

Thanks again.

Cam

Head fox at Elkfox | App and web, design and development | Digital commerce experts | https://elkfox.com
0 Likes
Shopify Expert
158 0 39

Hi Ryan,

Your code looks right to me, and the append function should surely work. But for some reason it does not. I can't for the life of me figure out why. If you manage to spot anything wrong with it, please do let me know.

--------------

EDIT:

It works perfectly! Thank you very much. I will share the link here when I do a write up about what I have used it for.

Thank you :)

Cam

Head fox at Elkfox | App and web, design and development | Digital commerce experts | https://elkfox.com
0 Likes
Shopify Partner
371 0 52

Hey Cam,

I had an idea about looping this so you don't need to hard code if you have 4 link lists that you need to join together. It turns out my idea works so here is what I ended up with

    {% for link in linklists.main-menu.links %}
    {% if linklists[link.handle].links.size > 0 %}
        <ul class="submenu-list" id="{{ link.title }}">      

            <li>
                <div>
                    {% for link in linklists[link.handle].links %}
                        <span class="{% if forloop.first %} first{% elsif forloop.last %} last{% endif %}{% if l.active %} active{% endif %}">{{ link.title | link_to: link.url }}</span>
                    {% endfor %}
                </div>
            </li>
          {% include 'additional-linklists' with 2 %}

        </ul>
    {% endif %}
{% endfor %}

And then you need to make a snippet called "additional-linklists.liquid" which contains

{% assign link2 = link.handle | append:'-' | append:additional-linklists %}
{% if linklists[link2].links.size > 0 %}
            <li>
                <div>
                    {% for link in linklists[link2].links %}
                        <span class="{% if forloop.first %} first{% elsif forloop.last %} last{% endif %}{% if l.active %} active{% endif %}">{{ link.title | link_to: link.url }}</span>
                    {% endfor %}
                </div>
            </li>
{% assign next = additional-linklists | plus: 1 %}
{% include 'additional-linklists' with next %}
{% endif %}

If you used consistent naming such as make the first section being called Home 1 rather than Home you could replace the first instance as well.

Want an app but can't find what you need? Let us know we custom build apps for Free
0 Likes
Shopify Expert
158 0 39

Hi Ryan,

Cool idea!

What I had done was create an if statement to allow up to 4 submenus in one:

{% for link in linklists.main-menu.links %}
	{% if linklists[link.handle].links.size > 0 %}

		<ul id="{{ link.title }}">
		
			<div class="submenu-list">
				<div class="row">

					<div class="large-3 columns">

						{% for link in linklists[link.handle].links %}
							<span class="{% if forloop.first %} first{% elsif forloop.last %} last{% endif %}{% if l.active %} active{% endif %}">{{ link.title | link_to: link.url }}</span>
						{% endfor %}

					</div>

					{% assign link2 = link.title | append: '-2' %}
					{% if linklists[link2].links.size > 0 %}
						<div class="large-3 columns">

								{% for link in linklists[link2].links %}
									<span class="{% if forloop.first %} first{% elsif forloop.last %} last{% endif %}{% if l.active %} active{% endif %}">{{ link.title | link_to: link.url }}</span>
								{% endfor %}

						</div>
					{% endif %}
					
					{% assign link3 = link.title | append: '-3' %}
					{% if linklists[link3].links.size > 0 %}
						<div class="large-3 columns">

								{% for link in linklists[link3].links %}
									<span class="{% if forloop.first %} first{% elsif forloop.last %} last{% endif %}{% if l.active %} active{% endif %}">{{ link.title | link_to: link.url }}</span>
								{% endfor %}

						</div>
					{% endif %}
					
					{% assign link4 = link.title | append: '-4' %}
					{% if linklists[link4].links.size > 0 %}
						<div class="large-3 columns">

								{% for link in linklists[link4].links %}
									<span class="{% if forloop.first %} first{% elsif forloop.last %} last{% endif %}{% if l.active %} active{% endif %}">{{ link.title | link_to: link.url }}</span>
								{% endfor %}

						</div>
					{% endif %}
				
				</div>
			</div>

		</ul>
		
	{% endif %}
{% endfor %}

Which works perfectly. But obviously adding the snippet to allow more options is an excellent addition.

You can see what I did with it on our demo/testing site at http://elkfox.myshopify.com

I think what we have here is pretty cool, and very useful for unwieldy large menus :)

Cheers,
Cam

Head fox at Elkfox | App and web, design and development | Digital commerce experts | https://elkfox.com
0 Likes
Shopify Partner
371 0 52

In the past I've always tackled this problem with JS but I do always prefer a hardcoded solution especially when it comes to an element that visitors can be impatient for. A good thing would be to stick a class on each group the same as the link.handle such as "submenu-home-1" and that way you can be creative with the css styling on a per column basis.

Want an app but can't find what you need? Let us know we custom build apps for Free
0 Likes
Shopify Expert
158 0 39

Very true! ...like adding a :before with content if there is a need for a column title :)

Head fox at Elkfox | App and web, design and development | Digital commerce experts | https://elkfox.com
0 Likes