Prateleira de produtos

[github-learning-lab[bot]]

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

1. Declare um componente shelf no template store.home;
2. Dentro da pasta blocks, crie um arquivo shelf.jsonc;
3. No arquivo shelf.jsonc, defina o bloco shelf com todas as props propostas no exemplo acima;
4. Altere o número máximo de itens exibidos para 8;
5. 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:

---

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

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

[github-learning-lab[bot]]

Você terminou este passo com sucesso!

Vá para o próximo passo:

Carrossel de blocos