Theme Update - Header Files (Fall '20 Release)

Product/Library Releases & New Features SDK/Theme Updates
,
1

We’ve added the necessary hooks for someone to create a more advanced header/footer using the theme!

1. New classes

We’ve added new css classes YxtHeader, YxtPage and YxtFooter to the header.hbs, html.hbs and footer.hbs, respectively:

header.hbs

{{!-- <div class="YxtHeader"></div> --}}

html.hbs

<html class="YxtPage-doc">
<head> //… // </head>
<body>
//.. other divs as normal here
  <div class="YxtPage-wrapper">
  {{> layouts/header }}
    <div class="YxtPage-content">
      {{> @partial-block }}
    </div>
    {{> layouts/footer }}
  </div>
//.. other divs as normal here
</body>
</html>

footer.hbs

{{!-- <footer class="YxtFooter"></footer> --}}

2. SCSS Fles

We’ve added separate scss files for the above mentioned classes. If you’re upgrading your site, you can override static/scss/header.scss, static/scss/page.scss and static/scss/footer.scss. If you’re creating a new site, these scss files will be included by default.

3. Script Placeholders

The theme includes three script placeholders. This release we added on-document-load.js:

  1. on-document-load.js: Runs when the DOMContentLoaded event occurs. (You can see this occurring in html.hbs).
  2. on-ready.js: Exists in older versions of the theme, runs in the SDK’s onReady() function. (You can see this occurring in core.hbs.)
  3. after-init.js: Exists in older versions of the theme, runs after the SDK’s ANSWERS.init. (You can see this occurring in core.hbs.)

To use these, you’ll need to override the theme (since they provide more advanced functionality, they’re not included by default).

4. JS File for Custom Modules

We’ve added custom-modules.js placeholder, which allows for custom code to be added to entry.js. Code exported here using ES6 module syntax will be available under HitchhikerJS.CustomModules. For example, you can add the following export to custom-modules.js and it will be available under HitchhikerJS.CustomModules.Header:
export class Header {};