Finalizando sua 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.

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

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

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

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.

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.

---

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

[vtex-course-hub[bot]]

Oopsie, something went wrong :crying_cat_face:

Results

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

[github-learning-lab[bot]]

Você terminou este passo com sucesso!

Vá para o próximo passo:

Página de busca