Combining Linklists

Solved

Combining Linklists

PartPurple
Shopify Partner
19 1 0

Hey y'all!

 

I'm working on a tweak to our theme and I need to combine the main nav menu Linklist with another menu Linklist, depending on if the customer is logged in or not. Basically:

  • home
  • shop
    • collection 1
    • collection 2
  • login
    • login
    • create account

or 

  • home
  • shop
    • collection 1
    • collection 2
  • account
    • orders
    • wishlist
    • logout

 

Combining them into a single Linklist would solve an awful lot of headaches as far as the rest of the logic and menu-building goes. Is there any way to do this? I can successfully generate a conditional list of handles, but I'm stuck on this one bit. TIA

Accepted Solution (1)

Tal19
Shopify Partner
116 19 18

This is an accepted solution.

Find the file where your main navigation is coded, usually located in Sections/header.liquid or Snippets/navigation.liquid.
This is some idea, you can customize it for your needs.

{% assign main_menu = linklists['main-menu'] %}
{% assign logged = linklists['logged'] %}
{% assign guest = linklists['guest'] %}

<nav class="main-nav">
  <ul>
    <!-- Loop through main menu items -->
    {% for link in main_menu.links %}
      <li><a href="{{ link.url }}">{{ link.title }}</a></li>
    {% endfor %}

    <!-- Check if the customer is logged in -->
    {% if customer %}
      <!-- Loop through extra menu items if customer is logged in -->
      {% for link in logged.links %}
        <li><a href="{{ link.url }}">{{ link.title }}</a></li>
      {% endfor %}
    {% else %}
      <!-- Loop through guest menu items if customer is not logged in -->
      {% for link in guest.links %}
        <li><a href="{{ link.url }}">{{ link.title }}</a></li>
      {% endfor %}
    {% endif %}

  </ul>
</nav>

 

Need Shopify Development, Customization, or POS Support? PM Me!

View solution in original post

Replies 3 (3)

Tal19
Shopify Partner
116 19 18

This is an accepted solution.

Find the file where your main navigation is coded, usually located in Sections/header.liquid or Snippets/navigation.liquid.
This is some idea, you can customize it for your needs.

{% assign main_menu = linklists['main-menu'] %}
{% assign logged = linklists['logged'] %}
{% assign guest = linklists['guest'] %}

<nav class="main-nav">
  <ul>
    <!-- Loop through main menu items -->
    {% for link in main_menu.links %}
      <li><a href="{{ link.url }}">{{ link.title }}</a></li>
    {% endfor %}

    <!-- Check if the customer is logged in -->
    {% if customer %}
      <!-- Loop through extra menu items if customer is logged in -->
      {% for link in logged.links %}
        <li><a href="{{ link.url }}">{{ link.title }}</a></li>
      {% endfor %}
    {% else %}
      <!-- Loop through guest menu items if customer is not logged in -->
      {% for link in guest.links %}
        <li><a href="{{ link.url }}">{{ link.title }}</a></li>
      {% endfor %}
    {% endif %}

  </ul>
</nav>

 

Need Shopify Development, Customization, or POS Support? PM Me!
PartPurple
Shopify Partner
19 1 0

Thanks!!

 

I'm actually doing exactly that on portions of the code already, but the theme I'm working with (Pursuit from Mile High Themes) has many, many  expansive "for" statements in header.liquid to build various versions of the menus. To duplicate that logic with every statement will balloon the size of the file (not to mention being a major PITA), so I'm hoping for a way to combine the menus into a single Linklist before the rest of the page renders.

PartPurple
Shopify Partner
19 1 0

I was able to apply the above code without too much fuss -- I saw all the instances of a Linklist variable in the code and balked, but in reality it wasn't painful at all. I appreciate your help, @Tal19 !