How to remove Header block for a specific page

Question

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

RaphaelWe · Accepted Answer

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.

sarav_prakash · Answer

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.

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded