Re: Customer Header for Different Pages with Selectors

Customer Header for Different Pages with Selectors

akin2
Shopify Partner
2 0 0

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!

Replies 2 (2)

deservefirst
Shopify Partner
16 4 9

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 infohttps://shopify.dev/docs/api/ajax/section-rendering#:~:text=You%20can%20use%20the%20Section,dynamica....




DeserveFirst | DeserveFirst.com

If my post is helpful, consider liking it -- it will help others with a similar problem to find a solution.

Stack: Shopify Plus | Shopify | NodeJs | ReactJs | NextJs | PHP | Magento | Laravel | WordPress | BigCommerce | Prestashop

Expertise: Shopify Plus | Headless CMS | PWA | App Development | Shopify Scripts | Shopify Functions & Extensions | Theme Development & Customization | New Feature Implementation
akin2
Shopify Partner
2 0 0

Thank you.

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