Open github-learning-lab[bot] opened 3 years ago
:white_check_mark::white_check_mark::white_check_mark::white_check_mark::x:
:white_check_mark: Getting the file
:white_check_mark: Declare a store.custom#about-us
template in your about-us.jsonc file
:white_check_mark: Add a flex-layout.row#about-us
to your template
:white_check_mark: Use the sample code provided in the instructions for this step to complete the layout
:x: Could not find a /about-us
path declaration
:white_check_mark::white_check_mark::white_check_mark::white_check_mark::x:
:white_check_mark: Getting the file
:white_check_mark: Declare a store.custom#about-us
template in your about-us.jsonc file
:white_check_mark: Add a flex-layout.row#about-us
to your template
:white_check_mark: Use the sample code provided in the instructions for this step to complete the layout
:x: Could not find a /about-us
path declaration
:white_check_mark::white_check_mark::white_check_mark::white_check_mark::x:
:white_check_mark: Getting the file
:white_check_mark: Declare a store.custom#about-us
template in your about-us.jsonc file
:white_check_mark: Add a flex-layout.row#about-us
to your template
:white_check_mark: Use the sample code provided in the instructions for this step to complete the layout
:x: Could not find a /about-us
path declaration
:white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark:
:white_check_mark: Getting the file
:white_check_mark: Declare a store.custom#about-us
template in your about-us.jsonc file
:white_check_mark: Add a flex-layout.row#about-us
to your template
:white_check_mark: Use the sample code provided in the instructions for this step to complete the layout
:white_check_mark: Create a routes.jsonc file and declare a /about-us
path and check your workspace at {workspace}--appliancetheme.myvtex.com/about-us to see the new page :)
Criando templates customizados
:sparkles: Branch: custom-template
Introdução
Lojas são compostas por várias páginas diferentes, cada uma com layout e conteúdo específicos. Ao criar uma loja do zero no VTEX IO, algumas páginas padrão com URLs predefinidas já são disponibilizadas para você. Abaixo, vemos uma lista com algumas dessas páginas padrão:
store.home
(Home page)store.product
(Product page)store.search
(Search Results page)store.account
(Client Account page)store.login
(Login page)store.orderplaced
(Order Placed page)Mas é possível que você queira criar uma landing page customizada. Nesse caso, você deve criar uma nova URL e um conteúdo específico para exibir aos usuários que acessarem essa rota.
Criando uma Landing Page
São necessários poucos passos para se criar uma landing page customizada:
Template
Um template define o layout da página. Portanto, se você deseja criar uma página personalizada, também precisará criar um novo template no seu tema.
Vamos supor que você queira criar uma página simples com informações sobre a sua loja. Dentro da pasta
blocks
, você pode criar um arquivo que contenha o seguinte código, declarando um novo template para uma página customizada,onde
{templateName}
deve ser substituído pelo nome identificador do template.A seguir, você deve preencher o código com os componentes necessários para montar o layout. Abaixo, vemos um exemplo dessa implementação:
Path
Agora que um novo template com o layout da página foi definido no código do tema da loja, a próxima etapa é definir o caminho (path) da página que acessará este layout.
Devemos criar um arquivo
routes.json
dentro da pastastore
do seu tema. Após isto, insira o código abaixo,onde
{URL}
é o nome do caminho desejadoAtividade
Vamos criar uma página com informações sobre a sua loja conforme o exemplo abaixo:
blocks
, crie um arquivoabout-us.jsonc
;store.custom#about-us
neste arquivo;flex-layout.row
, utilize o código do exemplo dado acima para completar o layout da página;store
, crie um arquivoroutes.json
;/about-us
;{workspace}--appliancetheme.myvtex.com/about-us
para ver sua nova landing page.:no_entry_sign: Perdido?
Há algum problema com esse passo? Que tal nos enviar um feedback? :pray:
Criar feedback
Se ainda tiver dúvida sobre como enviar sua resposta, você pode rever aqui.