The purpose of this document is to describe how to create a javascript based header and footer solution for working with storefronts. The goal of using javascript is so that the resources are always served from the e-commerce platform and always up to date. Let’s get started.

Several items are required as part of the code bundle that needs to be included for the TVPage storefronts.

  1. CSS (main stylesheet(s) from the e-commerce site)

  2. JS Loader (a JS bundle that loads additional assets and injects HTML content into the page)

  3. HTML DOM elements to target for inclusion of the:

Note that the JS loader can load any or all of the linked assets as needed, be sure to check that there are no CORS errors and that the proper CORS headers are set when serving these assets.

The semantic HTML markup used for website headers and footers is <header> and <footer>, respectively. We recommend using these as a best practice.

A basic example of the code that needs to be provided to TVPage:

HTML:

<header></header>

<footer></footer>

CSS:

<link rel=”stylesheet” href=”//cdn.yourstore.com/assets/header-footer-bundle.css” />

JS:

<script type=”application/javascript” src=”//cdn.yourstore.com/assets/header-footer-bundle.js” async />

In the above example, all of the elements to load and render the header and footer dynamically are present. As header or footer changes are made on the e-commerce website, these assets would be updated automatically, since they are being referenced from the e-commerce website.

The HTML elements would be used to inject the header and footer HTML respectively.

The CSS would style that injected HTML appropriately.

The JS would load any additional libraries or dependencies needed to make the header and footer fully functional.

A simple way to test that the header and footer work as intended would be to implement them on an empty webpage, located on a separate domain. If everything is operating correctly, you should see the header and footer from the e-commerce website, and an empty body area.

This code can be provided to your client success representative for testing and integration into the TVPage storefronts.

Did this answer your question?