GX Technology : Custom Header / Footer

 Overview

A few of the sites use a custom language dynamic header/footer, that was created by external developers. 

It will adjust the links in the header and the footer based on the selected language of the site.

Inside of the repo, there are two folders that matter:

• Licensing-header-footer
• Support-launch

Each of those folders contains all the necessary code to generate the new version of the header/footer for the corresponding site (folder names match the site).

It's within these folders that any modifications will need to be made before publishing a new version of the header. 

 Generating a Header 

Code Repo:

https://github.wdig.com/GXHelpSite/static-chrome-footer.git

After you checkout the project, follow the instructions in the "README.md" file to get the project installed using NPM.

You will use two commands to handle this project

• NPM install - will install the all the required node packages
• NPM run build - this has to be ran from within the support-launch or licensing-header-footer folders, and will compile all the code 
  
  

Compiled code will end up in the "dist" folder, the file you are looking for will be  "static-chrome.js" . 

 Adding a header to the site

 Adding the header to a site is relatively straight forward just follow the steps below:

1. Copy the "static-chrome.js" file from the "dist" folder into the assets folder of the zendesk project you're working on
2. In the "Header.hbs" of the zendesk project, making sure it's outside of the document.ready() function or the "$(function)", add the following lines of code

   1. "var lang = getLocale();

   2. "window.market = lang;"

3. In the "Footer.hbs" of the zendesk project, as the very first line in the template add the follow line
   1. "<div id="goc-footer"></div>"
4. In the "footer.hbs" of the zendesk project, as the very last line in the template add the following line

1. "<script src="{{asset 'static-chrome.js'}}"></script>"