Enhancing Navigation

This content was migrated from the VTEX Learning Center and is no longer being actively maintained. For the most accurate and up-to-date information, please check the official documentation.

Introduction

Navigation.json has a series of features that can improve the relevance and navigation of your application, in this step we will learn how to define a title message and create keywords.

Activity

In the previous step we used titleId: ʻadmin-example.navigation.label`. To assign a textual value to this key, we need to write the corresponding value in the messages folder, in the three language files:

/messages/pt.json


_10{
_10  "admin-example.navigation.label": "Treinamento de IO"
_10}

/messages/en.json


_10{
_10  "admin-example.navigation.label": "IO Training"
_10}

/messages/es.json


_10{
_10  "admin-example.navigation.label": "Entrenamiento de IO"
_10}

That done, we can now see a translatable message for the menu we created:

{"base64":" ","img":{"width":510,"height":331,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":20464,"url":"https://user-images.githubusercontent.com/18701182/92776306-85d0d380-f375-11ea-84b1-da5321b89538.png"}}

Add keywords to make your application search easier:

/admin/navigation.json


_10{
_10  ...
_10+ "searchKeyWordsHelpers": "admin-example.navigation.search.kws"
_10}

Similarly, create the messages for the keywords, separated by commas:

/messages/pt.json


_10{
_10  "admin-example.navigation.label": "Treinamento de IO",
_10+ "admin-example.navigation.search.kws": "mock, test, treinamento, io"
_10}

/messages/en.json


_10{
_10  "admin-example.navigation.label": "IO Training",
_10+ "admin-example.navigation.search.kws": "mock, test, training, io"
_10}

/messages/es.json


_10{
_10  "admin-example.navigation.label": "Entrenamiento de IO",
_10+ "admin-example.navigation.search.kws": "mock, test, entrenamiento, io"
_10}

Answer sheet

See answer sheet for en.json

en.json


_10{
_10  "admin-example.navigation.label": "IO Training",
_10  "admin-example.navigation.search.kws": "mock, test, training, io"
_10}

See answer sheet for es.json

es.json


_10{
_10  "admin-example.navigation.label": "Entrenamiento de IO",
_10  "admin-example.navigation.search.kws": "mock, test, entrenamiento, io"
_10}

See answer sheet for navigation.json

navigation.json


_10{
_10  "section": "orders",
_10  "titleId": "admin-example.navigation.label",
_10  "path": "/admin/iotraining",
_10  "searchKeyWordsHelpers": "admin-example.navigation.search.kws"
_10}

See answer sheet for pt.json

pt.json


_10{
_10  "admin-example.navigation.label": "Treinamento de IO",
_10  "admin-example.navigation.search.kws": "mock, test, treinamento, io"
_10}