Finishing your pdp

[github-learning-lab[bot]]

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 um rich-text e uma image).

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

1. Declare um shelf.relatedProducts abaixo da linha principal de produto

"store.product": {
  "children": [
    "breadcrumb",
    "flex-layout.row#main",
    "shelf.relatedProducts"
  ]
}

:warning: Lembre-se, esta prateleira de produtos aparece somente no produto /3-colors-retro-stand-mixer/p.

2. Troque product-images na coluna da esquerda por uma declaração de stack-layout;

"flex-layout.col#left": {
  "children": [
    "stack-layout#brand"
  ]
}

3. Defina o stack-layout e coloque como filhos o product-images e product-brand;

"stack-layout#brand": {
  "children": [
    "product-images",
    "product-brand"
  ]
}

4. Consulte a documentação para mudar a forma que o product-brand é exibido. Você deve fazer o logo aparecer com altura de 30 e incluir a prop displayMode: "logo".

5. Consulte a documentação para fazer com que o sku-selector:

   • comece sem nenhum SKU selecionado;
   • mostre o nome por variação de sku;
   • mostre erro se nenhuma variação de sku for selecionada.

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

[github-learning-lab[bot]]

Você terminou este passo com sucesso!

Vá para o próximo passo!

[vtex-course-hub[bot]]

Oopsie, something went wrong :crying_cat_face:

Results

:white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::x:

Tests

: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 :x: You didn't define the props correctly on sku-selector

Try again :grin:

[vtex-course-hub[bot]]

Oopsie, something went wrong :crying_cat_face:

Results

:white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::x:

Tests

: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 :x: You didn't define the props correctly on sku-selector

Try again :grin:

[vtex-course-hub[bot]]

Oopsie, something went wrong :crying_cat_face:

Results

:white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::x:

Tests

: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 :x: You didn't define the props correctly on sku-selector

Try again :grin:

[vtex-course-hub[bot]]

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