Customer Header for Different Pages with Selectors

[akin2]

Hi,

I'm trying to add 3 different customer headers when on a specific page which I have successfully implemented, but as soon as I click any any links on the navigation of the specific header, it will reset back to the index default header.

I want it so the header and navigation remains the same until they select out to another selector or if they click home button/logo where it will go back to the default.

This is the code for the actual selectors:

<!-- In header.liquid -->
{% if template != 'index' %}
<div class="menu-container">
{% assign current_url = request.path %}
<ul class="menu">
<li class="{% if current_url == '/pages/women' %}active{% endif %}">
<a href="/pages/women">WOMEN</a>
</li>
<li class="separator">|</li>
<li class="{% if current_url == '/pages/men' %}active{% endif %}">
<a href="/pages/men">MEN</a>
</li>
<li class="separator">|</li>
<li class="{% if current_url == '/pages/brand1' %}active{% endif %}">
<a href="/pages/brand1">BRAND</a>
</li>
</ul>
</div>
{% endif %}

This code is to switch to the customer header-groups I created:

{%- if request.page_type != 'password' -%}
{%- if request.path == "/" -%}
<!-- Loading header-group-home -->
{% sections 'header-group-home' %}
{%- elsif request.path contains "/pages/women" -%}
<!-- Loading header-group-women -->
{% sections 'header-group-women' %}
{%- elsif request.path contains "/pages/brand1" -%}
<!-- Loading header-group-dg -->
{% sections 'header-group-dg' %}
{%- else -%}
<!-- Loading default header-group -->
{% sections 'header-group' %}
{%- endif -%}
{%- sections 'overlay-group' -%}
{%- endif -%}

What do I need to add/change so once on any of these headers from the three selectors: Women, Men, BRAND where the navigation of that header will stay as long as the user selects anything from THAT menu navigation of that header and stop it from resetting back to default unless user clicks to switch on any of the available selectors or unless they click home.

Thanks!

[deservefirst]

Hi,

Since you can't access cookies/sessions directly in Liquid, it's not possible to achieve this using Liquid code alone. However, you can render the header section through an API based on user activity.

You can store cookies, based on the user's selection and then request the appropriate header using the API.

let headerType = 'default-header';

if (user.cookie.val === 'women') {
    headerType = 'women-header';
}

if (user.cookie.val === 'men') {
    headerType = 'men-header';
}

function handleResponse() {
    JSON.parse(this.responseText);
}

const request = new XMLHttpRequest();

request.addEventListener('load', handleResponse);
request.open('GET', '/?sections=' + headerType, true);
request.send();

For more info: https://shopify.dev/docs/api/ajax/section-rendering#:~:text=You%20can%20use%20the%20Section,dynamica....

[akin2]

Thank you.

Is this how thahab.com have acheived it? Since they use same theme (Prestige) as well.