Create a menu and setup a route in Sitecore JSS

8/09/2022 01:08:00 AM

Create a menu and setup a route in Sitecore JSS

Although the Sitecore JSS javascript toolkit is just to setup a demo instance and not perfect to start real-time development, it is a good playground in my opinion. In this blog post, I use my Docker-based Sitecore JSS instance, make a simple change of adding a menu and then ensure that the menu reaches a route. The App route is nothing but a location where your actual page will reside.

Template inheritance for JSS menu item:

Add an App Route

Add an app route in Sitecore, save and publish:

The best part is, the connected application is able to pick this page through the concept of JSS Route:

Concept of Route in Sitecore JSS

- App Route inherits from Route: /sitecore/templates/Foundation/JavaScript Services/Route

- The ordercloud item in turn inherits from App Route

- The hostname is mapped to home item

- Home item inherits from App Route

- Other pages are picked relative to the home item/route

More details here

The useI18n module

Now, in order to add the OrderCloud menu to the top of the page, I make the change to Navigation.tsx under C:\jss\scnextjs\src\rendering\src:

The best part of NextJS development is automatic browser reload as the changes are made in the file system but in this case, the desired changes were not to be seen in the menu:

Since the "a href" text is what is not picked, I analysed the code and luckily found this block:

I also could find some proof over the web that i18next is used for translation purposes:

npm package: next-localization

next-localization translation modules:

next-localization translation features:

With the background, I then jumped over to the Sitecore content tree to see dictionary entries:

I added an entry for OrderCloud ensuring that the key exactly matches as in my navigation.tsx code:

Published the entry:

Checking the page provided me the desired result of displaying the OrderCloud menu:

CD Instance:

Ever-raging confusion: CM vs CD Instance

Note that the content for the rendering will be served only if it is in web database. To prove this, create an app route named dummy, just save it to make it available only in Master DB and access it from:

CD instance: