Melhorando a navegação

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.

Introdução

O navigation.json tem uma série de funcionalidades que podem melhorar a relevância e navegação da sua aplicação, neste passo aprenderemos como definir uma mensagem de título e criar keywords.

Atividade

No passo anterior usamos o titleId: admin-example.navigation.label, para atribuir um valor textual a essa chave, precisamos na pasta messages, nos três arquivos de idioma, escrever o valor correspondente:

/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}

Feito isso, conseguimos agora ver uma mensagem traduzível para o menu que criamos:

{"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"}}

Adicione keywords para tornar mais simples a busca pela sua aplicação:

/admin/navigation.json


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

Analogamente, crie as mensagens para as keywords, separadas por vírgulas:

/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}