nathanprestes / store-framework

https://lab.github.com/vtex-trainings/store-framework
0 stars 0 forks source link

Prateleira de produtos #8

Open github-learning-lab[bot] opened 4 years ago

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

  1. No arquivo home.jsonc, 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: image


: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] commented 4 years ago

Você terminou este passo com sucesso!

Vá para o próximo passo:

Carrossel de blocos

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:

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