Currently the Global Navigation of the website is hard coded.

In the exercise you will be using the Squiz CMS Menu Navigation output area and Server Side Javascript (SSJS) to implement a simple Bootstrap Navigation.

Using the Squiz CMS Menu Navigation output area.

In the website 'design file' we have configured the menu navigation output area for you. The data from the output area is made available in a variable called 'navigationData'.

Viewing the 'design file' within the CMS

Log into the Squiz CMS and navigate to the following location:

Right click on the Website Design asset, and from the option menu, click 'Edit Parse File'

Previewing executed SSJS

If you have write access to an asset, you can append ?SQ_VIEW_SERVER_JS to the URL when previewing it on the frontend to see a complete output of the JavaScript code that was sent to the JavaScript engine in the Squiz CMS.

View the SSJS for the current page.

Creating the Global Navigation code

Open the following code snippet, and copy all of the code.

In the CMS navigate to the following location:

DXP Site Design > Design Includes > Functions

• Create a new 'Standard Page' asset in this location named 'Global Navigation'.

• Click 'Edit' from the the Create Asset Wizard

• In the Asset Tree, make a note of the numerical value (CMS Asset ID) after the newly created asset named 'Global Navigation'
• Click on the 'Content' tab in the Squiz CMS interface

• Click on the 'settings' icon of the default WYSIWYG component

• From the 'Properties' menu that opens, open the 'Component type' menu and select 'Code' from the list.

• Save your changes
• Inside the newly formed 'Code' component, paste the navigation code from the snippet you opened earlier
• Save your changes

Updating the Header

• Navigate to the following location:
  DXP Site Design > Design Includes > Header
• Right Click on the asset 'Header', select 'Content' from the menu

• Click on 'Edit' at the top right of the Squiz CMS interface
• Copy the following code

• Delete and replace lines 12-44 of the Header asset with the code copied above
• Replace ASSETID with the numerical asset id from your newly created Global Navigation asset (created previously)
• Save  your changes
• Refresh to the front end of the Evaluation website

The Global Navigation is now being served by the SSJS code created.

• Change the name of the Staff landing page to Our Staff
• Save changes
• Refresh the Evaluation website to see the name change reflected