Creating custom templates

[github-learning-lab[bot]]

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:

1. Criar um novo template no tema sua loja
2. Criar o novo path para acessar este template

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,

{
 "store.custom#{templatename}": {
     "blocks": [
     ]
  }
}

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:

{
 "store.custom#{templatename}": {
   "blocks": [
     "flex-layout.row#about-us"
   ]
 },
 "flex-layout.row#about-us": {
   "children": [
     "image#about-us",
     "flex-layout.col#text-about-us"
   ]
 },
 "flex-layout.col#text-about-us": {
   "children": [
     "rich-text#about-title",
     "rich-text#about-content"
   ],
       "props": {
     "preventVerticalStretch": true
   }
 },
"rich-text#about-title": {
   "props": {
     "text":
     "# Sobre a FlatFlat"
   }
 },
 "rich-text#about-content": {
   "props": {
     "text":
     " FlatFlat é uma loja de eletro eletrônicos com muita tradição na fabricação de itens modernos e vintage. Nosso objetivo é criar eletrodomésticos que tornem as casas dos nossos clientes interessantes, independente do estilo. Com apenas 2 meses de história, já somos a loja com os produtos mais bonitos de toda a VTEX. Estamos construindo o nosso site nesse momento com o intuito de dar ao nosso cliente uma experiência memorável com a nossa marca!"
   }
 },
 "image#about-us": {
   "props": {
     "src": "https://appliancetheme.vteximg.com.br/arquivos/cozinha-about-us.png",
     "maxHeight": "600px"
   }
 }
}

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 pasta store do seu tema. Após isto, insira o código abaixo,

{
  "store.custom#about-us": {
    "path": "/{URL}"
  }
}

onde {URL} é o nome do caminho desejado

Atividade

Vamos criar uma página com informações sobre a sua loja conforme o exemplo abaixo:

1. Na pasta blocks, crie um arquivo about-us.jsonc;
2. Declare um template store.custom#about-us neste arquivo;
3. Inclua um block "flex-layout.row#about-us" neste template;
4. Após declarar o flex-layout.row, utilize o código do exemplo dado acima para completar o layout da página;
5. Na pasta store, crie um arquivo routes.json;
6. Neste arquivo, declare um path /about-us;
7. Com o código linkado, acesse {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.

[github-learning-lab[bot]]

Você terminou este passo com sucesso!

Vá para o próximo passo

[vtex-course-hub[bot]]

You did great! :grin:

Results

:white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark:

Tests

: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 :)