github-learning-lab[bot] commented 4 years ago

Prateleira de produtos

:sparkles: 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.

:information_source: 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.

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

vtex-course-hub[bot] commented 4 years ago

You did great! :grin:

Results

:white_check_mark::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: Add a shelf to store.home blocks :white_check_mark: Create a shelf.jsonc file :white_check_mark: Add the declarations found at this module's text to shelf.jsonc :white_check_mark: Update maximum number of products displayed by the Shelf to 8 :white_check_mark: Update number of products per page to 4