Creating a 2nd (alternative) header on Shopify (2.0 Dawn theme)

Didijust3012404 0
Viewed 39

So what I’m trying to achieve is, to create a 2nd header that can be different to the global header.

So in my example I’ve already changed the code to be transparent and sticky. Also in my example the ‘About Page’ will have a a darker background image (which shows through the transparent header) so instead of using the red/black company logo it will be the red/white logo so it contrasts with the bg image. Also the main header will have black nav menu items and the 2nd header will be the lighter color. This is just selected from the drop down menu.

So what I did was I made an {% unless template == 'page.about-page' %} on the header.liquid and wrapped it all up in that. So on the About page…. The original header is just gone.

Okay so great. My about page is header free.

I duplicated the header.liquid and renamed it header-alternative.liquid.

Then I put elsewhere where it says on the header-alternative. liquid, where it said

{%- if request.page_type == 'index' -%}

I changed it to

{%- if request.page_type == 'index' or 'page.about-page' -%}

for the new template.

So it would work. Don’t know/remember why i still have ‘index’ there but anyway.

For the new template that was created for the about page. I added in the schema section to call it (unlike original which is called with the section tag {% section 'header' %} From the theme.liquid which is static and everywhere.)

So that’s basically it.

  • New template
  • Duplicated the header global section and renamed it and it became a regular dynamic section with the schema updated to the new template so it shows up.
  • Made sure any of those requests included the about-page and not just index.

So it all works except there is some kind of JS issue I think. If I:

  • Click the search icon, it crashes the header for a couple of seconds and everything goes opaque.
  • The sub-menu nav bar is not clickable enter image description here The inspector is throwing up these errors in the console:

about:769 Uncaught TypeError: Cannot read properties of null (reading 'addEventListener') at about:769:39 (anonymous) @ about:769 about:1 Unchecked runtime.lastError: A listener indicated an asynchronous response by returning true, but the message channel closed before a response was received about:1 Uncaught (in promise) Error: A listener indicated an asynchronous response by returning true, but the message channel closed before a response was received

If I show you one of the functions (for search) from the header-alternative.liquid (remember it’s 99%) identical to original.

document.getElementById("header-search").addEventListener('click',function () {
var search = document.getElementById('template-index');
var header = document.getElementById('site-header');
var main = document.getElementById('MainContent');
var height = document.getElementById('site-header').offsetHeight;
if ( window.pageYOffset < height ) {
if (search.classList.contains('overflow-hidden')) {
header.classList.remove('site-header-transparent');
main.classList.add('site-header-transition');
} else {
header.classList.add('site-header-transparent');
main.classList.remove('site-header-transition');
}
}
});

I can see getElementById as ‘template-index’ but that’s just a CSS class on the page anyway.

I’m not strong with JS and even less with the DOM so… I just want to know how to start figuring out these issues so I can have this unique header for the About Page.

a tale of 2 headers

liquid shopify javascript
1 Answers

this is wrong:

{%- if request.page_type == 'index' or 'page.about-page' -%}

this is correct:

{%- if request.page_type == 'index' or request.page_type == 'page.about-page' -%}

you can check example of using or operator on docs here https://shopify.github.io/liquid/basics/operators/

For the javascript function, it's built to select elements by id, assuming that you have an id called template-index & site-header & MainContent you can check on the old theme, where the function was working fine, what the HTML elements that have those ids are, and make sure they are still existing and not deleted.

You can also add new classes for those elements and select them by these new classes instead of ids using getElementsByClassName instead of getElementById

so instead of:

var search = document.getElementById('template-index');
var header = document.getElementById('site-header');
var main = document.getElementById('MainContent');
var height = document.getElementById('site-header').offsetHeight;

if will be:

var search = document.getElementsByClassName('new-class-for-template-index');
var header = document.getElementsByClassName('new-class-for-site-header');
var main = document.getElementsByClassName('new-class-for-MainContent');
var height = document.getElementsByClassName('new-class-for-site-header').offsetHeight;
Moataz Saber0
Related