Show a different navigation menu based on a condition - Focal Theme

[quarfie_op]

My theme (Focal) is currently set to use the navigation menu "main-menu" in the header of every page.

I want to replace this with "main-menu-wholesale" when a specific condition is true:

customer.tags contains 'wholesale'

I've tried to follow the instructions at https://www.envision.io/blogs/ecommerce-pulse/80312001-how-to-add-a-wholesale-area-to-your-shopify-s... but the theme is a lot more complicated.

I see in header.liquid that there is a {% schema %} section that includes the element:

{
  "type": "link_list",
  "id": "navigation_menu",
  "label": "Menu",
  "default": "main-menu"
}

I would like to know where I can insert the conditional logic to override this, and how it would be structured.

[Guleria]

Check where this if is used or something related to it

 {{ sectiion.setting.navigation_menu }}

Once wrap it with condition

{% if customer.tags contains 'wholesale'  %}
 // Pick the exisitng code and change the menu name theme
{% else %}
 // Use existing code here
{% endif %}

[quarfie_op]

So I found this line in header.liquid:

{%- assign menu = section.settings.navigation_menu -%}

Originally I tried adding this below it:

{%- if customer.tags contains 'wholesale' -%}
  {%- assign menu = "main-menu-wholesale" -%}
{%- endif  -%}

But that gave me no menu for wholesale.

So then I tried changing it to:

{%- if customer.tags contains 'wholesale' -%}
  {%- assign menu = section.settings.navigation_menu_wholesale -%}
{%- endif -%}

and added to the schema section:

{
  "type": "link_list",
  "id": "navigation_menu_wholesale",
  "label": "Menu Wholesale",
  "default": "main-menu-wholesale"
}

but it would not let me save the file

Invalid schema: setting with id="navigiation_menu_wholesale" default is invalid

So I'm obviously still missing something...

[Guleria]

{%- if customer.tags contains 'wholesale' -%}
  {%- assign menu = "main-menu-wholesale" -%}
{%- else -%}
  {%- assign menu = section.settings.navigation_menu -%}
{%- endif  -%}

[quarfie_op]

Thanks. I've tried that too. It just outputs nothing as soon as I assign the menu handle as a string.

To troubleshoot, I tried this...

{%- if customer.tags contains 'wholesale' -%}
  {%- assign menu = section.settings.navigation_menu -%}
{%- else -%}
  {%- assign menu = section.settings.navigation_menu -%}
{%- endif  -%}

... I get the regular main-menu in both cases, as expected.

But as soon as I change "section.settings.navigation_menu" to "main-menu-wholesale" or even "main-menu", the entire menu disappears completely for customers having the wholesale tag.

I've even output the variable using...

<p>~{{ section.settings.navigation_menu }}~</p>

...to confirm that I see ~main-menu~

Why would I get a different result for the same value depending on whether it's referenced through a variable vs passed as a string?

[quarfie_op · Accepted solution]

SOLVED!

Even though <p>~{{ section.settings.navigation_menu }}~</p> was outputting the menu handle as a string, it's actually an object.

Here's what I did to solve...

Towards the bottom of header.liquid I found

{
  "type": "link_list",
  "id": "navigation_menu",
  "label": "Menu",
  "default": "main-menu"
}

Earlier I tried duplicating this and changing the id, label & default, but it would not accept the new default. I realized that this doesn't matter because once I add the new object, I would be able to customize it in the theme editor. So this is what I added: 

{
  "type": "link_list",
  "id": "navigation_menu_wholesale",
  "label": "Menu Wholesale",
  "default": "main-menu"
}

Then over in the theme editor, I changed the value:

Then near the top of header.liquid where I found {%- assign menu = section.settings.navigation_menu -%} I replaced it with:

{%- if customer.tags contains 'wholesale' -%}
  {%- assign menu = section.settings.navigation_menu_wholesale -%}
{%- else -%}
  {%- assign menu = section.settings.navigation_menu -%}
{%- endif -%}

[acarlin]

Can you explain this fix for me? I'm stuck where you are, with it displaying the main menu regardless of if I'm logged in as wholesale or not, and like you it won't let me change the default to main-menu-wholesale.

[acarlin]

Nevermind - just figured it out. It's way too late for me to be working, ha.

Thanks for sharing your process in this post, it was super helpful!

[dustdrops]

I am trying to do this on Dawn theme but for a specific link_list in the footer menu.  Any advice?

[Smeelah]

I'm wondering if you got this working for the mobile menu? I have been using that tutorial you mentioned at www.envision.io/blogs/... but the switch doesn't happen on mobile. TIA:)