Open github-learning-lab[bot] opened 4 years ago
:x::white_check_mark::white_check_mark::white_check_mark::white_check_mark:
:x: Could not find a shelf listed as a block in store.home :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
:white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark:
: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
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
oucollection
, 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 tipoproduct-summary
faça parte da sua composição. Veja a documentação do bloco product-summary para entender mais sobre seu funcionamentoAbaixo, temos o exemplo da implementação de uma Shelf:
Atividade
home.jsonc
, declare um componenteshelf
no templatestore.home
shelf.jsonc
shelf.jsonc
, defina o blocoshelf
com todas as props propostas no exemplo acima8
4
Obs.: É importante notar que o bloco
product-summary.shelf
já está declarado dentro do arquivodefault.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](https://user-images.githubusercontent.com/12139385/70187041-1209e800-16cc-11ea-85b8-80162239ce1d.png)
: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.