Product page

[github-learning-lab[bot]]

Página de produto

:sparkles: Branch: pdp

Introdução

Terminada a página inicial da nossa loja, começamos um novo template da loja: a página de produto. Páginas de produto são provavelmente o template que mais possuem blocos diferentes, o que as torna extremamente customizáveis e flexíveis.

MVP

Vamos então construir uma página de produto mínima, em que tenhamos somente o essencial:

• imagens;
• preço;
• nome;
• botão de comprar

Blocos de produto

A maioria dos blocos de produto, diferentemente dos de conteúdo, possuem um contexto ao qual estão inseridos. Tudo isso faz com que esses blocos sejam um pouco "plug-n-play": colocar um product-images na página de produto, automaticamente redenrizará as imagens do produto da página, da mesma forma se faz com o preço e o nome.

Nada disso quer dizer, no entanto, que esses blocos são pouco customizáveis, conforme veremos adiante.

Atividade

Construa uma página de produto usando os blocos product-images, product-price, product-name e buy-button no arquivo product.jsonc declarado dentro da pasta store/blocks. Esperamos que na estrutura tenhamos:

1. Uma linha na store.product;

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

2. Dentro da linha devem haver duas colunas;

   "flex-layout.row#main": { 
     "props": { 
       "marginTop": 6
     },
     "children": [
       "flex-layout.col#left",
       "flex-layout.col#right"
     ]
   }

3. Dentro da coluna da esquerda deve haver um product-images;

   "flex-layout.col#left": {
     "children": [
       "product-images"
     ]
   }

4. Dentro da coluna da direita deve haver o product-name, product-price e o buy-button;

Além disso, queremos que:

1. A coluna da direita esteja verticalmente alinhada ao centro (veja as props verticalAlign e preventVerticalStretch na documentação de Flex Layout Column)
2. O product-price mostre o total de economia e o preço de listagem (showSavings e showListPrice)

:information_source: Lembre-se de acessar a documentação do product-images, product-price, product-name e buy-button caso tenha alguma dúvida durante a atividade.

---

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

[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::white_check_mark::white_check_mark::x::x:

Tests

:white_check_mark: Getting the file :white_check_mark: Code compilation :white_check_mark: Crete a product template page :white_check_mark: Create a main row inside the product page :white_check_mark: Define two columns inside the main row :white_check_mark: Define product-images on the left column :white_check_mark: Define product-name, product-price and buy-button on the right column :x: You didn't use the props preventVerticalStretch and verticalAlign :x: You didn't define product-price or defined the expected props

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

Tests

:white_check_mark: Getting the file :white_check_mark: Code compilation :white_check_mark: Crete a product template page :white_check_mark: Create a main row inside the product page :white_check_mark: Define two columns inside the main row :white_check_mark: Define product-images on the left column :white_check_mark: Define product-name, product-price and buy-button on the right column :white_check_mark: Control stretch and alignment of right column :x: You didn't define product-price or defined the expected props

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

Tests

:white_check_mark: Getting the file :white_check_mark: Code compilation :white_check_mark: Crete a product template page :white_check_mark: Create a main row inside the product page :white_check_mark: Define two columns inside the main row :white_check_mark: Define product-images on the left column :white_check_mark: Define product-name, product-price and buy-button on the right column :white_check_mark: Control stretch and alignment of right column :white_check_mark: Define product-price with props

[github-learning-lab[bot]]

Você terminou este passo com sucesso!

Vá para o próximo passo