Finishing your pdp

[github-learning-lab]

Finalizando sua pdp

✨ 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 👆)

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"
     ]
   }

⚠️ 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, utilizando o valor da propriedade como image, que consta na documentação mencionada anteriormente;
• mostre erro se nenhuma variação de sku for selecionada.

ℹ️ Lembre-se de acessar a documentação do Stack Layout caso tenha alguma dúvida durante a atividade.

ℹ️ Lembre-se de utilizar o produto /3-colors-retro-stand-mixer/p para testar este passo.

---

🚫 Perdido?

Há algum problema com esse passo? Que tal nos enviar um feedback? 🙏

Criar feedback

---

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

[vtex-course-hub]

You did great! 😁

Results

✅✅✅✅✅✅✅

Tests

✅ Getting the file
✅ Code compilation
✅ Define related products shelf
✅ Use and define a stack-layout on the left column
✅ Use product images and product brand within the stack layout
✅ Define correct props on product-brand
✅ Define correct props on sku-selector

[github-learning-lab]

Você terminou este passo com sucesso!

Vá para o próximo passo