Search code examples
htmlshopifyliquidnav

How to ad different navigation menus to shopify Debut theme?


So I am trying to create different navigation menus for different customer. So when I give a customer a specific tag in shopify (e.g. wholesale) he will see another menu bar than other visitors. Thsi will only happen after he logs into his account.

Now I tried to find the following snippet: {% for link in linklists.main-menu.links %}

to replace it with the following code:

{% assign menu_handle = 'main-menu' %}
{% if customer %} 
{% if customer.tags contains 'wholesale' %} 
{% assign menu_handle = 'main-menu-wholesale' %} 
{% endif %} 
{% endif %} 
{% for link in linklists[menu_handle].links %}

But I couldn't find that snippet in the debut code that looks like this:

{% comment %}
Renders a list of menu items
Accepts:
- linklist: {Object} Linklist Liquid object (required)
- wrapper_class: {String} CSS wrapper class for the navigation (optional)

Usage:
{% include 'site-nav', linklist: section.settings.main_linklist, wrapper_class: 'site-nav--centered' %}
{% endcomment %}
<ul class="site-nav list--inline{% if wrapper_class != blank %} {{ wrapper_class }}{% endif %}" id="SiteNav">
{% for link in linklists[linklist].links %}
{%- assign child_list_handle = link.title | handleize -%}

{% comment %}
  Check if third-level nav exists on each parent link.
{% endcomment %}
{%- assign three_level_nav = false -%}
{% if link.links != blank %}
  {% if link.levels == 2 %}
    {%- assign three_level_nav = true -%}
  {% endif %}
{% endif %}

{% if link.links != blank %}
  <li class="site-nav--has-dropdown{% if three_level_nav %} site-nav--has-centered-dropdown{% endif %}{% if link.active %} site-nav--active{% endif %}" data-has-dropdowns>
    <button class="site-nav__link site-nav__link--main site-nav__link--button{% if link.child_active %} site-nav__link--active{% endif %}" type="button" aria-expanded="false" aria-controls="SiteNavLabel-{{ child_list_handle }}">
      <span class="site-nav__label">{{ link.title | escape }}</span>{% include 'icon-chevron-down' %}
    </button>

    <div class="site-nav__dropdown{% if three_level_nav %} site-nav__dropdown--centered{% endif %} critical-hidden" id="SiteNavLabel-{{ child_list_handle }}">
      {% if three_level_nav %}
        <div class="site-nav__childlist">
          <ul class="site-nav__childlist-grid">
            {% if link.links != blank %}
              {% for childlink in link.links %}
                <li class="site-nav__childlist-item">
                  <a href="{{ childlink.url }}"
                    class="site-nav__link site-nav__child-link site-nav__child-link--parent"
                    {% if childlink.current %} aria-current="page"{% endif %}
                  >
                    <span class="site-nav__label">{{ childlink.title | escape }}</span>
                  </a>

                  {% if childlink.links != blank %}
                    <ul>
                    {% for grandchildlink in childlink.links %}
                      <li>
                        <a href="{{ grandchildlink.url }}"
                        class="site-nav__link site-nav__child-link"
                        {% if grandchildlink.current %} aria-current="page"{% endif %}
                      >
                          <span class="site-nav__label">{{ grandchildlink.title | escape }}</span>
                        </a>
                      </li>
                    {% endfor %}
                    </ul>
                  {% endif %}

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

      {% else %}
        <ul>
          {% for childlink in link.links %}
            <li>
              <a href="{{ childlink.url }}"
              class="site-nav__link site-nav__child-link{% if forloop.last %} site-nav__link--last{% endif %}"
              {% if childlink.current %} aria-current="page"{% endif %}
            >
                <span class="site-nav__label">{{ childlink.title | escape }}</span>
              </a>
            </li>
          {% endfor %}
        </ul>
      {% endif %}
    </div>
  </li>
{% else %}
  <li {% if link.active %} class="site-nav--active"{% endif %}>
    <a href="{{ link.url }}"
      class="site-nav__link site-nav__link--main{% if link.active %} site-nav__link--active{% endif %}"
      {% if link.current %} aria-current="page"{% endif %}
    >
      <span class="site-nav__label">{{ link.title | escape }}</span>
    </a>
  </li>
{% endif %}
{% endfor %}
</ul>

Is there another way to add this code snippet into the debut code? How would that code look like?

Every hint is appreciated!


Solution

  • I think you need to find the code this one {% include 'site-nav', linklist: section.settings.main_linklist, wrapper_class: 'site-nav--centered' %}

    and after the changes, your code looks like

    {% assign menu_handle = 'main-menu' %}
    {% if customer %} 
      {% if customer.tags contains 'wholesale' %} 
        {% assign menu_handle = 'main-menu-wholesale' %} 
      {% endif %} 
    {% endif %} 
    
    {% include 'site-nav', linklist: menu_handle, wrapper_class: 'site-nav--centered' %}
    

    Update: Here I am changing the menu listing over debut theme latest versions.

    1. in the header.liquid file I have made an update and add the snippets that check for customer and customer tags if the customer is login and tags contain wholesale. enter image description here

    2. Register as a new user and from the admin, backend assign tag wholesale to the new user account. enter image description here

    3. Here is the frontend of the non-login users and log in as a wholesale tagged customer. enter image description here

    enter image description here