Open github-learning-lab[bot] opened 4 years ago
:white_check_mark::white_check_mark::white_check_mark::white_check_mark::x::white_check_mark:
:white_check_mark: Code compilation
:white_check_mark: Define related products shelf
:white_check_mark: Use and define a stack-layout
on the left column
:white_check_mark: Use product images and product brand within the stack layout
:x: You didn't define the props correctly on product-brand
:white_check_mark: Define correct props on sku-selector
:white_check_mark::white_check_mark::white_check_mark::white_check_mark::x::white_check_mark:
:white_check_mark: Code compilation
:white_check_mark: Define related products shelf
:white_check_mark: Use and define a stack-layout
on the left column
:white_check_mark: Use product images and product brand within the stack layout
:x: You didn't define the props correctly on product-brand
:white_check_mark: Define correct props on sku-selector
:white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark:
:white_check_mark: Code compilation
:white_check_mark: Define related products shelf
:white_check_mark: Use and define a stack-layout
on the left column
:white_check_mark: Use product images and product brand within the stack layout
:white_check_mark: Define correct props on product-brand
:white_check_mark: Define correct props on sku-selector
Finalizando sua pdp
:sparkles: 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 umrich-text
e umaimage
).(Na imagem, uma shelf empilhada sobre um carrossel :point_up_2:)
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
:shelf.relatedProducts
abaixo da linha principal de produto:warning: Lembre-se, esta prateleira de produtos aparece somente no produto
/3-colors-retro-stand-mixer/p
.product-images
na coluna da esquerda por uma declaração destack-layout
;stack-layout
e coloque como filhos oproduct-images
eproduct-brand
;Consulte a documentação para mudar a forma que o
product-brand
é exibido. Você deve fazer o logo aparecer com altura de 30.Consulte a documentação para fazer com que o
sku-selector
::information_source: Lembre-se de acessar a documentação do Stack Layout caso tenha alguma dúvida durante a atividade.
:information_source: Lembre-se de utilizar o produto
/3-colors-retro-stand-mixer/p
para testar este passo.: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.