edsonbruno415 / store-framework Goto Github PK

View Code? Open in Web Editor NEW

0.0 1.0 0.0 18 KB

Home Page: https://lab.github.com/vtex-trainings/store-framework

store-framework's Introduction

store-framework-template

The template repository for the Store Framework course on Learning Lab.

store-framework's People

Contributors

Watchers

store-framework's Issues

Search page

Página de busca

✨ Branch: search

Introdução

Terminamos de implementar nossa página de produto e seguiremos para a página de busca. Ambas são muito similares no aspecto de terem blocos que são únicos desse contexto. Exploraremos esse bloco de forma desordenada nesse step, somente para entender seus comportamentos e seguiremos para melhorar o layout no próximo passo.

Search Layout

A store.search, como os outros templates, também pode ser flexível. Para construir um layout único, é preciso usar um bloco chamado search-result-layout.

{
 "store.search": {
    "blocks": ["search-result-layout"]
 }
}

O search-result-layout, por sua vez, deve receber três outros blocos:

search-result-layout.desktop
search-result-layout.mobile
search-not-found-layout

Como você já deve ter percebido, os dois primeiros definem qual layout será exibido no desktop e no mobile, respectivamente, e o terceiro define o layout da página de resultados não encontrados.

{
 "store.search": {
    "blocks": ["search-result-layout"]
 },
 "search-result-layout": {
    "blocks": [
       "search-result-layout.desktop",
       "search-result-layout.mobile",
       "search-not-found-layout"
    ]
 }
}

No curso, focaremos na implementação do layout de desktop

Blocos de search

A documentação de Search Result oferece uma boa referência dos blocos que podem ser usados no contexto de busca. Nesse step focaremos em tentar exibir os principais:

Breadcrumb da search (breadcrumb.search);
Título de busca (search-title.v2);
Total de produtos encontrados (total-products.v2);
Ordenação de produtos (order-by.v2);
Botão de buscar mais abaixo (search-fetch-more);
Botão de buscar mais acima (search-fetch-previous);
Filtro de navegação (filter-navigator.v3);
Resultados de busca (search-content)

Apesar de serem muitos, todos esses blocos são relativamente simples e funcionam muito bem sem muita necessidade de configurar suas props.

Atividade

Copie o código acima no arquivo search.jsonc e defina uma search-result-layout.desktop que tenha como filhos, nesta ordem:

breadcrumb.search;
search-title.v2;
total-products.v2;
order-by.v2;
search-fetch-previous;
search-content;
filter-navigator.v3;
search-fetch-more.

ℹ️ Lembre-se de acessar a documentação de Search Result caso tenha alguma dúvida durante a atividade.

🚫 Perdido?

Há algum problema com esse passo? Que tal nos enviar um feedback? 🙏

Criar feedback

Se ainda tiver dúvida sobre como enviar sua resposta, você pode rever aqui.

Info Card: Store Framework's call to action

Info Card: o call to action do Store Framework

✨ Branch: infocard

Introdução

Uma loja precisa de uma boa home page para manter a atenção do usuário, aumentando o tempo de sessão e, portanto, aumentando as chances de conversão. Para que isso seja possível, vários elementos podem ser usados, como: banners promocionais, prateleiras de destaque, conteúdos institucionais.

Criaremos o próximo bloco na home page usando um Call to Action. No Store Framework, temos um bloco que serve para esse propósito chamado Info Card.

Info Card

Com o Info Card, é possível criar imagens com links e botões (no topo ou na lateral do bloco) que direcionem o fluxo do usuário (Call to Action).

Olhando a documentação é possível ver que:

isFullModeStyle define se o Call to Action (CTA) deve estar acima do banner;
textPosition definirá a posição do texto;
textAlignment definirá o alinhamento do texto;
imageUrl definirá qual imagem será usada como banner;
headline determinará qual o texto que será usado de título;
callToActionMode possibilitará a escolha do CTA como sendo um link ou um botão;
callToActionText definirá o texto do CTA;
callToActionUrl determinará o link ao qual será redirecionado;

Ficamos, assim, com as seguintes props:

  {
    "store.home": {
      "blocks": [
        "rich-text",
        "info-card"
      ]
    },
    "rich-text": {
      "props": {
        "text": "*Hello, World!*",
        "textPosition": "RIGHT"
      }
    },
    "info-card": {
      "props": {
      "isFullModeStyle": false,
      "textPosition": "right",
      "imageUrl": "https://appliancetheme.vteximg.com.br/arquivos/cozinha-rosa-min.png",
      "headline": "Vintage Pink",
      "subhead": "Give your kitchen a boho style adding vintage apparels.<br>Available until January 2020.",
      "callToActionMode": "button",
      "callToActionText": "Explore",
      "callToActionUrl": "/sale/d",
      "textAlignment": "center"
      }
    }
  }

Instanciando blocos

Pode ser que você tenha se perguntado:

"E se eu quiser ter dois Info Cards com aparências diferentes?"

Isso é possível através da instanciação de blocos.

Todos os blocos têm nomes preestabelecidos, mas você pode criar instâncias deles e definir aparências diferentes para um mesmo tipo de bloco. Para fazer isso, basta colocar um # com um nome arbitrário e que faça sentido depois da definição de cada bloco, por exemplo:

  {
    "store.home": {
      "blocks": [
        "rich-text",
        "info-card#button-right"
      ]
    },
    ...
    "info-card#button-right": {
      "props": {
        "isFullModeStyle": false,
        "textPosition": "right",
        "imageUrl": "https://appliancetheme.vteximg.com.br/arquivos/cozinha-rosa-min.png",
        "headline": "Vintage Pink",
        "subhead": "Give your kitchen a boho style adding vintage apparels.<br>Available until January 2020.",
        "callToActionMode": "button",
        "callToActionText": "Explore",
        "callToActionUrl": "/sale/d",
        "textAlignment": "center"
      }
    }
  }

ATENÇÃO: Durante o curso serão vistos vários ..., essa parte não deve ser copiada e representa o progresso de steps anteriores

Atividade

A partir do código acima, no arquivo home.jsonc, crie o info-card#button-left logo abaixo do infocard info-card#button-right. Este novo infocard deve possuir:

O título Shining chrome
Um call to action do tipo link com o texto Go to Collection no lugar do botao
A imagem https://appliancetheme.vteximg.com.br/arquivos/cozinha-cinza-min.png
O subtítulo Give your kitchen a cool style adding warm metallic finishes.<br>Available until January 2020.
O texto posicionado à esquerda da imagem (textPosition).

O resultado esperado é semelhante ao apresentado na imagem abaixo:

ℹ️ Lembre-se de acessar a documentação do Info Card caso tenha alguma dúvida durante a atividade.

🚫 Perdido?

Há algum problema com esse passo? Que tal nos enviar um feedback? 🙏

Criar feedback

Se ainda tiver dúvida sobre como enviar sua resposta, você pode rever aqui.

Evolving your product page (pdp)

Evoluindo sua página de produto (pdp)

✨ Branch: pdp2

Introdução

No último passo aprendemos como fazer uma página de produto simples com seus itens mínimos, mas sabemos que o que fizemos está longe de ser uma página de produto ideal, colocaremos outros elementos que vemos com frequência nas páginas de produto de várias lojas.

Mais de 30 blocos de produto

Na nossa documentação é possível encontrar mais 30 blocos relacionados a produto. No começo do curso falamos sobre Shelf e seus blocos relacionados, além de na última seção termos visto outros 4 blocos. Neste passo veremos mais 4:

É importante que ao fim do curso, você tome um tempo para explorar nossos componentes, bem como as possibilidades de customização que se tem com estes.

Atividade

Evolua a página de produto adicionando os outros 4 blocos listados acima da seguinte forma no arquivo product.jsonc:

Defina um breadcrumb logo no início antes da linha principal do produto;

"store.product": {
  "children": [
    "breadcrumb",
    "flex-layout.row#main"
  ]
}

Defina o product-identifier.product logo abaixo do product-name;

Crie uma linha logo abaixo do preço com o sku-selector e o product-quantity como children;

{
  ...
    "children": [ 
      "product-price",
      "flex-layout.row#qty-sku"
    ]
  },
  "flex-layout.row#qty-sku": {
    "children": [
      "sku-selector",
      "product-quantity"
    ]
  },
  ...
}

Defina shipping-simulator logo abaixo da linha com o SKU Selector e o Product Quantity

ℹ️ Lembre-se de acessar a documentação do Breadcrumb, Product Identifier, Product Quantity e SKU Selector caso tenha alguma dúvida durante a atividade.

🚫 Perdido?

Há algum problema com esse passo? Que tal nos enviar um feedback? 🙏

Criar feedback

Se ainda tiver dúvida sobre como enviar sua resposta, você pode rever aqui.

Making your content responsive

Tornando seu conteúdo responsivo

✨ Branch: responsive

Introdução

A página inicial de um e-commerce é sempre o primeiro contato do cliente com a marca. Por isso, é comum que o lojista queira estabelecer uma comunicação direta com os seus usuários nesse momento estratégico da navegação.

No Store Framework, existem alguns componentes que atendem a esse cenário, como o Info Card visto nos passos anteriores e o Rich Text.

Como vimos no terceiro passo, o Rich Text é responsável por transformar textos em elementos HTML, com a grande vantagem de ler em Markdown. Isso dá ao componente a flexibilidade de aceitar diferentes estruturas de texto, permitindo ao lojista construir sua comunicação de forma mais clara e direta.

Configurando o Rich Text

Assim como a sua funcionalidade, a configuração do Rich Text também é simples.

Da mesma forma que o "Hello, world!" foi feito, podemos montar um exemplo de implementação do bloco usando texto escrito em markdown. Por exemplo:

"rich-text": {
  "props": {
    "text": "# Your Coffee, Your Way \n ### New Coffee Makers Collection",
    "textPosition": "CENTER",
    "textAlignment": "CENTER"
  }
},

Como falado anteriormente, o uso de Markdown permite flexibilidade ao componente. Mas, por outro lado, também pode fazer com que a sua renderização sofra alterações de acordo com o dispositivo usado pelo usuário.

Por exemplo: a frase acima ( # Your Coffee, Your Way \n ### New Coffee Makers Collection ) pode usar um markdown adequado para desktop, mas não necessariamente para mobile (cujo tamanho de tela é menor).

Para resolver esse cenário e tornar o componente mais adaptável a outros dispositivos, devemos usar o Responsive Layout.

Primeiramente devemos delcarar os blocos dentro do template store.home:

"responsive-layout.desktop#desktop", "responsive-layout.mobile#mobile"

Em seguida devemos declarar esses blocos da seguinte forma:

...

"responsive-layout.desktop#desktop": {
  "children": ["rich-text#desktop"]
},

"responsive-layout.mobile#mobile": {
  "children": ["rich-text#mobile"]
},

"rich-text#desktop": {
  "props": {
    "text": "# Your Coffee, Your Way \n ### New Coffee Makers Collection",
    "textPosition": "CENTER",
    "textAlignment": "CENTER"
  }
},

"rich-text#mobile": {
  "props": {
    "text": "# Your Coffee, Your Way \n ### New Coffee Makers Collection",
    "textPosition": "CENTER",
    "textAlignment": "CENTER"
  }
}

Ao interpretar o código acima, perceba como duas configurações de Rich Text são construídas a partir do uso de responsive-layout.desktop#desktop e responsive-layout.mobile#mobile.

Atividade

Nessa atividade, vamos brincar um pouco com o markdown do Rich Text e aprender a usá-lo com o componente Image. Tudo isso usando o Responsive Layout, é claro!

Desktop:

Mobile:

Adicione o código proposto acima no arquivo home.jsonc e declare os blocos de responsive-layout no template store.home;
No rich-text#mobile, altere o markdown da primeira frase para h3 e da segunda para h4;

Se você não se lembra da sintaxe de Markdown, é possível consultá-la em Markdown Documentation.
Adicione image#desktop como children de responsive-layout.desktop#desktop. Faça o mesmo com image#mobile em responsive-layout.mobile#mobile;

Declare os seguintes blocos de Image:

"image#desktop": {
  "props": {
    "src": "https://appliancetheme.vteximg.com.br/arquivos/Responsive-Image-Desktop.jpg?q=1",
    "link": {
      "url": "/small-appliances/coffee-makers"
    } ,
    "alt": "Coffee Makers Collection"
  }
},

"image#mobile": {
  "props": {
    "src": "https://appliancetheme.vteximg.com.br/arquivos/Responsive-Image-Mobile.jpg?q=1",
    "link": {
      "url": "/small-appliances/coffee-makers"
    } ,
    "alt": "Coffee Makers Collection"
  }
},

Analisando as props do componente Image, defina a largura máxima das duas imagens como 100%.

ℹ️ Lembre-se de acessar a documentação do Responsive Layout caso tenha alguma dúvida durante a atividade.

🚫 Perdido?

Há algum problema com esse passo? Que tal nos enviar um feedback? 🙏

Criar feedback

Se ainda tiver dúvida sobre como enviar sua resposta, você pode rever aqui.

Flex Layout: create layouts using the power of Flexbox

Flex Layout: crie layouts utilizando o poder do Flexbox

✨ Branch: flexlayout

Introdução

O Flex Layout é um paradigma de estruturação de layout criado no Store Framework para permitir a construção de layouts complexos. Esse paradigma usa o conceito de linhas e colunas para definir a estrutura e o posicionamento desejados dos blocos em uma determinada página.

Existem dois blocos de construção básicos de cada Flex Layout:

flex-layout.row
flex-layout.col

Se você já está familiarizado com o Flexbox utilizado no CSS, o Flex Layout deve ser simples de entender, já que o Flexbox está sendo utilizar "por debaixo dos panos" pelo flex-layout.row e flex-layout.col.

Flex Layout

Com o Flex Layout é possível criar layouts personalizados, utilizando a estrutura de linhas e colunas do Flexbox.

Analisando a documentação do bloco, vemos que você pode utilizar qualquer array de blocos como children do Flex Layout. Além disso, você deve sempre usar flex-layout.row e flex-layout.col, NUNCA flex-layout de forma isolada.

Abaixo, temos um exemplo de flex layout composto de um flex-layout.row com dois children: um info-card e um rich-text:

  "flex-layout.row":{
    "children": [
      "info-card#rethink",
      "rich-text#deletar"
    ]
  },
  
 "info-card#rethink": {
    "props": {
      "imageUrl": "https://appliancetheme.vteximg.com.br/arquivos/utensilios-cozinha-min.png",
      "isFullModeStyle": true,
      "headline": "Time to rethink your kitchen",
      "callToActionText": "Discover",
      "textPosition": "center"
    }
  },
  
  "rich-text#deletar": {
    "props": {
      "text": "I'll be deleted soon"
    }
  }

Atividade

Declare o flex-layout.row dentro dos blocks do template de store.home e declare os blocos propostos acima no seu arquivo home.jsonc
Altere as children do flex-layout.row, substituindo o bloco rich-text por uma coluna flex-layout.col.
Delete o bloco de rich-text proposto acima do seu tema.
Declare o bloco flex-layout.col no seu arquivo home.jsonc com dois componentes de imagem como children: image#electronics e image#major-appliance, nesta ordem.

Defina os blocos image com as seguintes props:

...
"image#electronics": {
  "props": {
    "src": "https://appliancetheme.vteximg.com.br/assets/vtex.file-manager-graphql/images/electronics_banner___25d69b49f8224b369375e68513b4d593.png",
    "maxWidth": "100%"
  }
},
"image#major-appliance": {
  "props": {
    "src": "https://appliancetheme.vteximg.com.br/assets/vtex.file-manager-graphql/images/major_appliance_banner___bb10093866a127345ddfbcca3efa5022.png",
    "maxWidth": "100%"
  }
}

O resultado obtido deve ser semelhante a este:

ℹ️ Lembre-se de acessar a documentação do Flex Layout caso tenha alguma dúvida durante a atividade.

🚫 Perdido?

Há algum problema com esse passo? Que tal nos enviar um feedback? 🙏

Criar feedback

Se ainda tiver dúvida sobre como enviar sua resposta, você pode rever aqui.

Hello, World!

✨ Branch: helloworld

Introdução

Começamos nossa jornada pelo clássico "Hello, World!". Para criar algo do tipo, precisamos conhecer os blocos do Store Framework e usar um que nos possibilite a criação de textos. Este bloco se chama Rich Text.

Rich Text

O Rich Text é somente um das dezenas de blocos disponíveis no Store Framework. É um bloco que parece simples, mas que possibilita uma série de customizações para criar textos. Para começar, todo texto escrito no Rich Text suporta linguagem Markdown, isso faz com que a estilização do texto seja muito mais fácil.

Olhando a documentação do bloco é possível encontrar a especificação técnica. Uma das seções presentes é a de Blocks API nela é vista toda a lista de propriedades (props) que o Rich Text possui. As propriedades são o principal ponto de customização de um bloco, são elas que garantem que um mesmo bloco possa ter visual e comportamento completamente diferente, dependendo de como for configurado.

Começando

Vamos então começar a personalizar a home page. No seu tema é possível encontrar um arquivo chamado home.jsonc na pasta /store/blocks. Neste arquivo é determinada a organização dos blocos que se deseja usar. A linguagem para composição do layout é simples e baseada em JSON.

No home.jsonc se ver um bloco que é padrão em todos os temas: store.home. Este bloco determina os blocos filhos que estarão expostos na home page.

{
  "store.home": {
    "blocks": []
  }
  ...
}

Vamos então usar o Rich Text em seu corpo:

{
  "store.home": {
    "blocks": [
      "rich-text"
    ]
  }
  ...
}

Dessa forma, o store.home agora sabe que precisará renderizar um Rich Text. Todavia, ainda não especificamos qual o visual desse Rich Text. Para isso, precisamos fazer uma definição de bloco.

Definição de blocos

A definição de blocos deve ser sempre feita fora de qualquer outro bloco, no nível da raiz do arquivo JSON.

{
  "store.home": {
    "blocks": [
      "rich-text" <----- Aqui o bloco está sendo usado dentro de outro
    ]
  },
  "rich-text": { <----- Aqui está na raiz
  }
}

Na definição é possível determinar o comportamento e visual de um bloco. Para tal devem ser usados pontos de customização, começaremos usando as props do Rich Text:

{
  "store.home": {
    "blocks": [
      "rich-text"
    ]
  },
  "rich-text": {
    "props": {

    }
  }
}

Observe novamente a documentação do Rich Text e vamos, então, definir as props que usaremos para customizá-lo.

Queremos fazer um simples "Hello, World!", olhando nas props vemos uma que se chama: text (Text written in markdown language to be displayed). Essa é, então, a prop que determinará qual o texto que será exibido.

Incluindo essa prop temos, então:

{
  "store.home": {
    "blocks": [
      "rich-text"
    ]
  },
  "rich-text": {
    "props": {
      "text": "Hello, World!"
    }
  }
}

Olhando a documentação do Markdown vemos que para deixar itálico basta colocar * antes e depois do texto:

{
  "store.home": {
    "blocks": [
      "rich-text"
    ]
  },
  "rich-text": {
    "props": {
      "text": "*Hello, World!*"
    }
  }
}

Para posicioná-lo ao centro, podemos adicionar a prop textPosition e atribuir a ela o valor CENTER:

{
  "store.home": {
    "blocks": [
      "rich-text"
    ]
  },
  "rich-text": {
    "props": {
      "text": "*Hello, World!*",
      "textPosition": "CENTER"
    }
  }
}

Atividade

Defina um Rich Text na sua home e crie um texto "Hello, World!" em negrito e posicionado à direita.

ℹ️ Lembre-se de acessar a documentação do Rich Text caso tenha alguma dúvida durante a atividade.

🚫 Perdido?

Há algum problema com esse passo? Que tal nos enviar um feedback? 🙏

Criar feedback

Se ainda tiver dúvida sobre como enviar sua resposta, você pode rever aqui.

Product page

Página de produto

✨ Branch: pdp

Introdução

Terminada a página inicial da nossa loja, começamos um novo template da loja: a página de produto. Páginas de produto são provavelmente o template que mais possuem blocos diferentes, o que as torna extremamente customizáveis e flexíveis.

MVP

Vamos então construir uma página de produto mínima, em que tenhamos somente o essencial:

imagens;
preço;
nome;
botão de comprar

Blocos de produto

A maioria dos blocos de produto, diferentemente dos de conteúdo, possuem um contexto ao qual estão inseridos. Tudo isso faz com que esses blocos sejam um pouco "plug-n-play": colocar um product-images na página de produto, automaticamente redenrizará as imagens do produto da página, da mesma forma se faz com o preço e o nome.

Nada disso quer dizer, no entanto, que esses blocos são pouco customizáveis, conforme veremos adiante.

Atividade

Construa uma página de produto usando os blocos product-images, product-price, product-name e buy-button no arquivo product.jsonc declarado dentro da pasta store/blocks. Esperamos que na estrutura tenhamos:

Uma linha na store.product;

{
"store.product": {
    "children": [
      "flex-layout.row#main"
    ]
  }
}

Dentro da linha devem haver duas colunas;

"flex-layout.row#main": { 
  "props": { 
    "marginTop": 6
  },
  "children": [
    "flex-layout.col#left",
    "flex-layout.col#right"
  ]
}

Dentro da coluna da esquerda deve haver um product-images;

"flex-layout.col#left": {
  "children": [
    "product-images"
  ]
}

Dentro da coluna da direita deve haver o product-name, product-price e o buy-button;

Além disso, queremos que:

A coluna da direita esteja verticalmente alinhada ao centro (veja as props verticalAlign e preventVerticalStretch na documentação de Flex Layout Column)
O product-price mostre o total de economia e o preço de listagem (showSavings e showListPrice)

ℹ️ Lembre-se de acessar a documentação do product-images, product-price, product-name e buy-button caso tenha alguma dúvida durante a atividade.

🚫 Perdido?

Há algum problema com esse passo? Que tal nos enviar um feedback? 🙏

Criar feedback

Se ainda tiver dúvida sobre como enviar sua resposta, você pode rever aqui.

Store Framework 101

Antes de começarmos a colocar as mãos na massa vamos passar por alguns conceitos importantes que serão recorrentemente referenciados daqui pra frente.

Introdução

O Store Framework é uma ferramenta commerce low-code de construção de frentes de loja únicas e customizadas.

O fluxo de construção se dá pela customização de um tema, que pode ser trabalhado em diferentes workspaces sem que o ambiente de produção seja impactado.

Tema

Um tema é, essencialmente, um arranjo de blocos e suas posições. Nele são definidas todas as customizações, posições e estilos de cada um dos blocos que o compõem. Também é possível declarar novas páginas em um tema que, futuramente, podem representar páginas institucionais ou landing pages promocionais (dia das mães, black friday, cyber monday). O resultado final de um tema e o conteúdo que o compõe é a frente de uma loja.

Blocos

Os blocos são a abstração mínima no Store Framework. Eles declaram pequenas peças que compõem o layout de uma loja. Por mais que pareçam simples, os blocos tem alto poder de customização, fazendo com que design complexos sejam possíveis de ser alcançados. Há quatro níveis de customização para blocos:

estilo semântico (styles);
propriedades (props);
classes css (handles);
filhos (children)

Workspaces

Ambientes de trabalho protegidos que representam uma cópia bem próxima do está montado em produção, possibilitando a evolução de temas sem que nada na loja seja afetado.

🚫 Perdido?

Há algum problema com esse passo? Que tal nos enviar um feedback? 🙏

Criar feedback

Para continuar clique em Close issue

CSS Handles and the power of customizing blocks

CSS Handles e o poder da customização de blocos

✨ Branch: csshandles

Introdução

Dando uma rápida olhada na sua loja atual, você conseguirá perceber que todos os componentes possuem estilos parecidos, mesmo que nenhuma customização tenha sido feita por você.

Todos eles, incluindo o Info Card recém configurado, compartilham valores pré-estabelecidos para fonte, cor de fundo, cor principal, formato dos botões, etc.

Isso se deve ao style.json, arquivo responsável por declarar valores genéricos de customização para toda loja do Store Framework.

Para criar uma identidade própria para os componentes da sua loja, você pode sobrescrever esses valores por meio de customizações de CSS.

Analisando a recipe para customizações de loja por CSS, percebemos que alguns passos serão necessários para aplicar o estilo próprio desejado por você, como:

Criar um novo arquivo dentro da pasta CSS com o nome vtex.{AppName}.css
Usar o CSS Handle do componente que será customizado dentro deste arquivo seguindo o formato abaixo:
```
.{CSSHandle} {
    {PropriedadeDeCSS}: {ValorDesejado};
    {PropriedadeDeCSS}: {ValorDesejado};
}
```
Na falta de CSS Handles, aplicar CSS Selectors permitidos, como é o caso do :global(vtex-{componentName}).
Para aplicar CSS em um bloco específico e não a todos os blocos daquele tipo, usa-se o recurso de blockClass, que aparece ao lado dos handles de css ao inspecionar seu código. As blockClass devem ser declaradas como uma prop no bloco em questão, e então referenciado no arquivo de estilo como mostrado abaixo:
```
.{CSSHandle}--{blockClass} {
    {PropriedadeDeCSS}: {ValorDesejado};
    {PropriedadeDeCSS}: {ValorDesejado};
}
```

Customizando o Info Card

Para descobrir os CSS Handles de um componente, como o Info Card, basta acessar a sessão Customization da sua documentação.

De acordo com a descrição dos CSS Handles e com a recipe customizações de loja por CSS, conseguimos implementar um exemplo de Info Card customizado, alterando seu título e as configurações do botão call to action ao adicionar o código a seguir no arquivo vtex.store-components.css dentro de /styles/css:

.infoCardHeadline {
    font-family: serif;
    font-size: 2.25rem;
    font-weight: normal;
    color: gray;
    border: 2px solid black;
    padding: 24px;
}

.infoCardCallActionContainer :global(.vtex-button) {
    color: white;
    background-color: gray;
    border: transparent;
}

.infoCardCallActionContainer :global(.vtex-button):hover {
    color: gray;
    background-color: blue;
    border: transparent;
}

Você pode conferir o efeito das mudanças feitas por você executando o comando vtex link.

Em seguida, vamos adicionar um estilo específico para o infocard Vintage. Para começar, adicione a prop blockClass no info-card#button-right como mostrado abaixo:

"info-card#button-right": {
  "props": {
    "isFullModeStyle": false,
    "textPosition": "right",
    "imageUrl": "https://appliancetheme.vteximg.com.br/arquivos/cozinha-rosa-min.png",
    "headline": "Vintage Pink",
    "subhead": "Give your kitchen a boho style adding vintage apparels.<br>Available until January 2020.",
    "callToActionMode": "button",
    "callToActionText": "Explore",
    "callToActionUrl": "/sale/d",
    "textAlignment": "center",
    "blockClass": "vintage"     //  <------------
  }
}

E então declare uma background-color para este infocard específico no seu arquivo de css:

.infoCardContainer--vintage {
  background-color: #edcfd1
}

Observe o efeito atingido linkando sua app.

Atividade

No arquivo vtex.store-components.css, copie o código acima para usá-lo no arquivo CSS do seu tema, seguindo a recipe sobre customizações de loja por CSS;
Com base nos Handles do Info Card, defina a largura máxima (max-width) de de todos os infocards para 1260px, a margin para 0 auto e o padding para 0.
Mude a cor do título do componente para black;
Coloque o título em negrito (bold);
Mude a cor de fundo do botão durante o hover para white.
Paralelamente ao blockClass vintage, aplique um novo block class chamado metal no infocard info-card#button-left e aplique a cor de fundo #e1e1e1nele.

🚫 Perdido?

Há algum problema com esse passo? Que tal nos enviar um feedback? 🙏

Criar feedback

Se ainda tiver dúvida sobre como enviar sua resposta, você pode rever aqui.

Creating custom templates

Criando templates customizados

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

Criar um novo template no tema sua loja
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:

Na pasta blocks, crie um arquivo about-us.jsonc;
Declare um template store.custom#about-us neste arquivo;
Inclua um block "flex-layout.row#about-us" neste template;
Após declarar o flex-layout.row, utilize o código do exemplo dado acima para completar o layout da página;
Na pasta store, crie um arquivo routes.json;
Neste arquivo, declare um path /about-us;
Com o código linkado, acesse {workspace}--appliancetheme.myvtex.com/about-us para ver sua nova landing page.

🚫 Perdido?

Há algum problema com esse passo? Que tal nos enviar um feedback? 🙏

Criar feedback

Se ainda tiver dúvida sobre como enviar sua resposta, você pode rever aqui.

Global styles

Estilos globais

✨ Branch: styles

Introdução

Além do css, que já foi aprendido anteriormente, o Store Framework oferece um outro tipo de customização de design, provida a partir do style.json.

Estilização semântica

Todos os blocos do Store Framework se alavancam das mesmas definições semânticas de estilo, definidas usando o Tachyons. Na prática, isso significa que ao invés de precisar mudar todos os fundos de botões para usar a cor que se interessa, é necessário apenas redefinir a cor que um background de uma action-primary tem.

Customizações através do style.json tendem a ter um impacto muito maior que através de css, pois, em geral, mantém a identidade visual da loja ao longo de todas as páginas sendo necessárias poucas mudanças. Por esse motivo, sempre que possível, essa ferramenta deve ser usada, evitando assim overhead de css desnecessário.

Investigando o `style.json`

Cores

O styles/configs/style.json pode ser confuso em primeiro momento, por conter todas as definições de estilo que todos os blocos visuais do Store Framework usam. No entanto, um bom fluxo para identificar que estilos mudar, é através da inspeção de elementos no browser.

Por exemplo, clique com o botão direito em cima de qualquer botão da loja aperte em inspecionar.

Observando a barra lateral no Chrome que abriu é possível ver uma série de definições, uma delas é a de cor do background do botão (#0f3e99):

Além dela, se você inspecionar no momento em que estiver somente passando o mouse em cima do botão, descobrirá a cor de hover (#072c75):

Se fizermos uma busca pelas ocorrências de ambas as cores no style.json, as cores que descobrimos são, respectivamente, as usadas para action-primary em hover-background e background, por exemplo. Isso nos dá uma ideia melhor de onde poderemos achar outras ocorrências dessa mesma definição.

Tipografia

Para descobrir definições semânticas de texto e quais campos são editáveis, o processo é o mesmo do anterior, podemos buscar atributos como tamanho da fonte, peso, família.

Em um cabeçalho nível 1, por exemplo, ao inspecionar descobrimos que seu tamanho foi definido como 3 rem.

Atividade

No arquivo style.json, substitua todas as ocorrências das cores que encontramos, trocando:

#072c75 por #45a6a3
#0F3E99 por #52BAB7

Mude o tamanho da fonte heading level 1 para que agora tenha 2.5 rem de altura

O resultado esperado pode ser visto abaixo:

🚫 Perdido?

Há algum problema com esse passo? Que tal nos enviar um feedback? 🙏

Criar feedback

Se ainda tiver dúvida sobre como enviar sua resposta, você pode rever aqui.

Blocks carousel

Carrossel de blocos

✨ Branch: slider

Introdução

O Slider Layout, como o Flex Layout, é uma forma flexível de criar um novo bloco a partir de outros blocos usando children. Ele permite que sejam criados sliders de outros blocos, como info-cards e até mesmo flex-layouts por exemplo.

Vamos utilizar o Slider Layout para tornar um conjunto de info-cards em um slider.

Slider Layout

Analisando a documentação, vemos que você pode utilizar qualquer array de blocos como children, assim como no Flex Layout.

Abaixo, segue um exemplo de implementação de um slider-layout com dois info-card:

  "slider-layout#home": {
    "children": ["info-card#1", "info-card#2"],
    "props": {
      "autoplay": {
        "timeout": 5000,
        "stopOnHover": false
      }
    }
  },
  
  "info-card#1": {
    "props": {
      "imageUrl": "https://images.unsplash.com/photo-1524185962737-ea7c028a12cd?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80",
      "isFullModeStyle": true,
      "headline": "Black Friday",
      "callToActionText": "Subscribe",
      "textPosition": "center"
    }
  },
  
  "info-card#2": {
    "props": {
      "imageUrl": "https://images.unsplash.com/photo-1524185962737-ea7c028a12cd?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80",
      "isFullModeStyle": true,
      "headline": "Black Friday",
      "callToActionText": "Subscribe",
      "textPosition": "center"
    }
  }

Atividade

Nesta atividade, vamos criar um slider de marcas para o nosso site:

No arquivo home.jsonc, declare o bloco slider-layout#home ao template store.home.
Crie um arquivo chamado slider-layout.jsonc dentro da pasta /store/blocks;
Neste arquivo, baseando-se no código acima, substitua os info-card declarados como children de slider-layout#home e adicione 6 componentes de imagem image como children. Utilize o formato image#brand1, image#brand2 (...) image#brand6 para declarar os componentes;
Declare uma prop src específica para cada image#brand definido. Utilize as URLs abaixo para cada uma delas:
1. https://appliancetheme.vteximg.com.br/arquivos/flatflat-brand-logo-square1.png
2. https://appliancetheme.vteximg.com.br/arquivos/flatflat-brand-logo-square2.png
3. https://appliancetheme.vteximg.com.br/arquivos/flatflat-brand-logo-square3.png
4. https://appliancetheme.vteximg.com.br/arquivos/flatflat-brand-logo-square4.png
5. https://appliancetheme.vteximg.com.br/arquivos/flatflat-brand-logo-square5.png
6. https://appliancetheme.vteximg.com.br/arquivos/flatflat-brand-logo-square6.png
Por fim, você deve utilizar a propriedade de autoplay no bloco slider-layout#home. Faça com que o slide aconteça automaticamente a cada 7 segundos e que ele pare quando o usuário passar o mouse em cima do slide.

ℹ️ Lembre-se de acessar a documentação do Slider Layout e Image caso tenha alguma dúvida durante a atividade.

Adjusting the search page's layout

Ajustando layout da página de busca

✨ Branch: search2

Introdução

No último step conhecemos a página de busca e seus principais componentes. Também aprendemos que o layout de search funciona como qualquer outro bloco tendo, portanto, toda a flexibilidade ao seu alcance. Nesse step criaremos algumas linhas e colunas para melhorar a aparência da busca criada.

Atividade

No arquivo search.jsonc, remova total-products.v2 e order-by.v2 do search-result-layout.desktop.

Substitua ambos acima por uma linha de topo que inclua os blocos removidos:

...
"flex-layout.row#top": {
  "children": [
    "total-products.v2",
    "order-by.v2"
  ]
}
...

Remova o search-content e o filter-navigator.v3 do search-result-layout.desktop e crie uma linha de resultados;

Na linha de resultado coloque outras duas colunas:

{
  ...
  "search-result-layout.desktop": {
    "children": [
      "breadcrumb.search",
      "search-title.v2",
      "flex-layout.row#top",
      "search-fetch-previous",
      "flex-layout.row#results",
      "search-fetch-more"
    ]
  },
  "flex-layout.row#results": {
    "children": [
      "flex-layout.col#filter",
      "flex-layout.col#search"
    ]
  },
  ...
}

Configure a prop width da coluna filter para 20%.
Na coluna da esquerda inclua o filter-navigator.v3 novamente e, na da direita, inclua o search-content

Para finalizar, vamos usar o mesmo Resumo de Produto(product-summary) que usamos na shelf para exibir os resultados de busca.

Defina seu search-content com os blocos gallery e not-found:

{
  ...
  "search-content": {
    "blocks": ["gallery", "not-found"]
  }
  ...
}

Use o product-summary.shelf nas props da Gallery:

{
  ...
  "search-content": {
    "blocks": ["gallery", "not-found"]
  },
  "gallery": {
    "blocks": ["product-summary.shelf"]
  }
  ...
}

No blocoproduct-summary.shelf que se encontra no arquivo default.jsonc, inclua product-summary-sku-selector acima de product-summary-buy-button.

ℹ️ Lembre-se de acessar a documentação do Flex Layout caso tenha alguma dúvida durante a atividade.

🚫 Perdido?

Há algum problema com esse passo? Que tal nos enviar um feedback? 🙏

Criar feedback

Se ainda tiver dúvida sobre como enviar sua resposta, você pode rever aqui.

Finishing your pdp

Finalizando sua pdp

✨ Branch: pdp3

Introdução

Neste passo vamos terminar de montar a nossa página de produto. Aprenderemos como empilhar blocos usando o Stack Layout, como sugerir produtos similares e como customizar melhor o SKU Selector para produtos com imagem de SKU.

Para testar este step, utilize a url do produto /3-colors-retro-stand-mixer/p.

Stack Layout

O stack-layout é um tipo layout que possibilita que blocos possam ser empilhados sobre outros. É muito útil quando se deseja colocar algum badge em cima de uma imagem ou produto. Também é útil para compor textos compostos sobre imagens (usando um rich-text e uma image).

(Na imagem, uma shelf empilhada sobre um carrossel 👆)

Neste passo, usaremos o stack-layout para colocar a marca sobre as imagens de produto.

Atividade

Evolua a página de produto adicionando os passos abaixo ao arquivo product.jsonc:

Declare um shelf.relatedProducts abaixo da linha principal de produto

"store.product": {
  "children": [
    "breadcrumb",
    "flex-layout.row#main",
    "shelf.relatedProducts"
  ]
}

⚠️ Lembre-se, esta prateleira de produtos aparece somente no produto /3-colors-retro-stand-mixer/p.

Troque product-images na coluna da esquerda por uma declaração de stack-layout;

"flex-layout.col#left": {
  "children": [
    "stack-layout#brand"
  ]
}

Defina o stack-layout e coloque como filhos o product-images e product-brand;

"stack-layout#brand": {
  "children": [
    "product-images",
    "product-brand"
  ]
}

Consulte a documentação para mudar a forma que o product-brand é exibido. Você deve fazer o logo aparecer com altura de 30 e incluir a prop displayMode: "logo".
Consulte a documentação para fazer com que o sku-selector:

comece sem nenhum SKU selecionado;
mostre o nome por variação de sku, utilizando o valor da propriedade como image, que consta na documentação mencionada anteriormente;
mostre erro se nenhuma variação de sku for selecionada.

ℹ️ Lembre-se de acessar a documentação do Stack Layout caso tenha alguma dúvida durante a atividade.

ℹ️ Lembre-se de utilizar o produto /3-colors-retro-stand-mixer/p para testar este passo.

🚫 Perdido?

Há algum problema com esse passo? Que tal nos enviar um feedback? 🙏

Criar feedback

Se ainda tiver dúvida sobre como enviar sua resposta, você pode rever aqui.

Course functioning

Funcionamento do curso

Objetivo

É importante estabelecer que este não é um curso expositivo. O seu objetivo é ensinar os participantes sobre o Store Framework do VTEX IO a partir de atividades práticas. Por isso, para que se consiga avançar, é preciso que um pouco do seu tempo e dedicação sejam investidos.

No começo do curso você recebeu um repositório com código mínimo e queremos que, ao completar todas as tarefas, você o tenha transformado em uma loja completa e funcional.

Introdução

O curso é divido em etapas. Ao começo de cada etapa, você receberá instruções iniciais, como você já recebeu nesse e no anterior. Você deve ler todo o conteúdo apresentado e receberá, ao fim, uma pequena atividade.

Para que suas respostas sejam enviadas, siga os seguintes passos:

Abra uma nova janela do VSCode
Execute Ctrl + Shift + P (Cmd + Shift + P)
Digite git clone

Digite o nome do repositório como https://github.com/edsonbruno415/store-framework
Confirme e selecione o lugar onde deseja baixar o repositório
Clique em Open na notificação que abre no canto inferior direito

Abra a página de instalação do nosso robô de testes e clique em Configure;
- ⚠️ Note que este bot é diferente do bot do GitHub Learning Lab. Ele é responsável por analisar a resposta de cada etapa do curso.
Selecione Only selected repositories, clique em Select repositories e digite store-framework;
Clique em edsonbruno415/store-framework e clique em Install.

Submetendo as suas respostas

Ao terminar de ler todo o conteúdo e fazer a atividade proposta, você deve enviar a sua resposta seguindo os passos abaixo:

Clique em Source Control, no menu lateral do VSCode;

Clique no + na seção de CHANGES;

Escreva alguma mensagem que represente sua mudança. Por exemplo:

Clique no ✓ (Commit);

Clique no canto inferior esquerdo;

Quando uma nova janela aparecer, coloque o nome da Branch que lhe foi dado no começo do texto e clique em + Create new branch...;

Para finalizar, clique na nuvem no canto inferior esquerdo:

Quando terminar de fazer todo o fluxo, nosso robô responderá se você conseguiu ou não acertar a resposta que esperávamos. Se sim, receberá uma resposta como:

Em seguida, você receberá uma outra resposta que indicará os próximos passos:

Se você é familiarizado com o git, todo esse fluxo equivale a criar uma branch com um nome predefinido, fazer commit das mudanças e dar push.

Tentando novamente

Ao longo do curso, é possível que você não consiga completar corretamente a atividade na primeira tentativa. Se isso acontecer, você receberá uma mensagem de feedback que indicará qual foi o por quê da falha:

Você pode submeter quantas respostas você quiser, basta refazer todo o processo explicado na seção anterior.
⚠️ No item 6 não será necessário refazer tudo, uma vez que a branch do step já foi criada. No item 7, ao invés de ver uma nuvem, você verá algumas setas, basta clicar nelas para reenviar:

Progresso do curso

A qualquer momento do curso você pode acompanhar o seu progresso voltando na página inicial. Nela, serão indicados todos os steps, quais você já completou e um botão para você voltar para o step de onde parou:

Não esqueça de linkar

A todo momento, abrindo o terminal do VSCode, você pode executar um vtex link e acompanhar a evolução do seu projeto em https://{workspace}--{conta}.myvtex.com. Certifique-se que visualmente a solução é equiparável com o que foi apresentado e que nenhum erro aconteceu no link.

⚠️ Cuidado ⚠️

Não crie issues e PRs durante o fluxo do curso, isso pode interferir no seu funcionament

🚫 Perdido?

Há algum problema com esse passo? Que tal nos enviar um feedback? 🙏

Criar feedback

Para continuar clique em Close issue

Basic configurations

Configurações básicas

Para o vídeo de setup do Mac, clique aqui

Introdução

Antes de começar a botar a mão na massa e aprender mais sobre o Store Framework do VTEX IO, algumas configurações básicas precisam ser feitas por você, como:

Instalar o Git;
Instalar o Toolbelt;
Fazer login em uma conta VTEX;
Criar um workspace de desenvolvimento;
Linkar seus arquivos locais com a plataforma.

Confira abaixo o passo a passo para cada uma dessas configurações:

Instalando o Git

Instale o Git no seu computador acessando o link abaixo e selecionando o software usado pelo seu computador (Windows, MAC ou Linux):

https://git-scm.com/downloads

Instalando o Toolbelt

O Toolbelt é a ferramenta de linha de comando do VTEX IO. É ele quem permite a realização de qualquer atividade na plataforma, como criar um novo workspace de desenvolvimento, fazer login em uma conta VTEX, desenvolver novas apps, gerenciar as já existentes, etc.

Uma vez que o Toolbelt é quem estabelece a comunicação entre o desenvolvedor e a plataforma, você precisará dele para conseguir realizar todas as atividades propostas durante o curso do Store Framework.

Instale o Node.js. Se o computador que você está usando é MAC, instale também o Yarn;
Execute o comando npm i -g vtex no seu terminal se você estiver trabalhando de um Windows e yarn global add vtex no MAC;

Você pode executar o comando vtex-v (Windows) ou vtex (MAC) para confirmar se a instalação do Toolbelt ocorreu como esperado.

Com a instalação concluída, o seu próximo passo deve ser logar em uma conta VTEX.

Fazendo login

Execute o comando vtex login contaVTEX no seu terminal, substituindo contaVTEX pelo nome real da conta em que você deseja trabalhar. Por exemplo, vtex login appliancetheme.
Uma vez logado, execute o comando vtex whoami para confirmar em qual conta e workspace você está.

Workspaces nada mais são do que espaços de trabalho. Na plataforma do VTEX IO, as contas possuem três tipos principais de workspaces: master, de produção e desenvolvimento.

O próximo passo irá fazer com que um workspace de desenvolvimento seja criado para você, permitindo que as configurações feitas nas atividades do curso não alterem a versão final pública da loja.

Criando um workspace de desenvolvimento

Execute vtex use nome-do-workspace, substituindo nome-do-workspace pelo nome desejado. Por exemplo, vtex use devworkspace.

Visualizando seu workspace

Depois que seu workspace foi criado, você conseguirá acessá-lo a partir do link https://{workspace}--{conta}.myvtex.com, substituindo {workspace} e {conta} pelo workspace criado anteriormente e pelo nome da conta, respectivamente. Por exemplo, https://devworkspace--appliancetheme.myvtex.com

🚫 Perdido?

Há algum problema com esse passo? Que tal nos enviar um feedback? 🙏

Criar feedback

Com todas as configurações básicas concluídas, você está pronto pra começar o curso!

Para continuar clique em Close Issue

Product shelf

Prateleira de produtos

✨ Branch: shelf

Introdução

O próximo bloco que vamos utilizar é a Shelf, a nossa prateleira para uma coleção de produtos. Nessa sessão vamos aprender a renderizar e configurar essa prateleira na home da nossa loja.

Shelf

Analisando a documentação da Shelf, vemos que é possível configurar qual coleção de produtos queremos mostrar através das props category, specificationFilters ou collection, de acordo com os produtos cadastrados no catálogo.

As demais props são para configuração na maneira com que os items são mostrados. É importante notar que o componente shelf sempre pede que block do tipo product-summary faça parte da sua composição. Veja a documentação do bloco product-summary para entender mais sobre seu funcionamento

Abaixo, temos o exemplo da implementação de uma Shelf:

{
  "store.home": {
    "blocks": [
      ...
      "shelf"
    ]
  },
  ...
  "shelf": {
    "blocks": ["product-summary.shelf"],
    "props": {
      "category": 1,
      "orderBy": "OrderByTopSaleDESC",
      "paginationDotsVisibility": "desktopOnly",
      "productList": {
        "maxItems": 10,
        "itemsPerPage": 5,
        "minItemsPerPage": 1,
        "scroll": "BY_PAGE",
        "arrows": true,
        "titleText": "Top sellers"
      }
    }
  },
  "product-summary.shelf": {
    "children": [
      "product-summary-image",
      "product-summary-add-to-list-button",
      "product-summary-name",
      "product-rating-inline",
      "product-summary-space",
      "product-summary-price",
      "product-identifier.summary",
      "product-summary-buy-button"
    ]
  }
}

Atividade

No arquivo home.jsonc, declare um componente shelf no template store.home
Dentro da pasta blocks, crie um arquivo shelf.jsonc
No arquivo shelf.jsonc, defina o bloco shelf com todas as props propostas no exemplo acima
Altere o número máximo de itens exibidos para 8
Altere o número de itens por página para 4

Obs.: É importante notar que o bloco product-summary.shelf já está declarado dentro do arquivo default.jsonc. Por este motivo, não foi necessário declará-lo nesta atividade.

ℹ️ Lembre-se de acessar a documentação da Shelf caso tenha alguma dúvida durante a atividade.

O resultado final esperado deve ser semelhante a este:

Observação

Caso esteja usando uma conta VTEX própria, verifique se a categoria 1 está ativa e funcional no ambiente que está usando.

🚫 Perdido?

Há algum problema com esse passo? Que tal nos enviar um feedback? 🙏

Criar feedback

Se ainda tiver dúvida sobre como enviar sua resposta, você pode rever aqui.