How to remove Header block for a specific page

3 replies
440 views
Translate

Is there any way to remove Header block for a specific page in EDS, currently it's being loaded on page load across all EDS pages

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

R

RaphaelWeAccepted solution

Employee

Sure, you can modify scripts.js to fit your needs, e.g. add logic that skips loading the header on line 106: https://github.com/adobe/aem-boilerplate/blob/main/scripts/scripts.js#L106

A common pattern is to use metadata properties(global or page level) to toggle certain features. getMetadata() makes it quick and easy to extract metadata values.

J

Jitender_RawatGu

New Participant

and you will show different header and footer in different page using sheet

Translate

sarav_prakash

New Participant

Correct as Raphael points, header is loaded from scripts.js.loadHeader().

In our project, we hide based of page template. Like we have condition

if (!isCheckoutPage()) {
    loadHeader(doc.querySelector('header'));
  }

Another ootb flag is window.hlx.suppressLoadHeaderFooter. Refer here https://github.com/dylandepass/rosalind-boilerplate/blob/89d0d7ce8c03881287f5a1377c7957e53009d3ef/scripts/scripts.js#L254

if (!window.hlx.suppressLoadHeaderFooter) {
    loadHeader(doc.querySelector('header'));
    loadFooter(doc.querySelector('footer'));
  } else {
    document.querySelector('header').remove();
    document.querySelector('footer').remove();
  }

With this ootb flag, we can configure required pages to suppress header/footer.

Overall, asking to conditionally load header/footer. Condition can be configured in different ways, whichever is convenient to maintain.

Translate

R

RaphaelWeAccepted solution

Employee

Sure, you can modify scripts.js to fit your needs, e.g. add logic that skips loading the header on line 106: https://github.com/adobe/aem-boilerplate/blob/main/scripts/scripts.js#L106

A common pattern is to use metadata properties(global or page level) to toggle certain features. getMetadata() makes it quick and easy to extract metadata values.

Translate

Sign up

Login with SSO

Login to the community

Login with SSO