Página de produto

[github-learning-lab[bot]]

Página de produto

:sparkles: Branch: pdp1

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

:x::x::x::x::x::x::x::x:

Tests

:x: There's something wrong with your product.jsonc file :x: You didn't use a store.product :x: You didn't use and define a flex-layout.row in your product page :x: There aren't two flex-layout.col inside your flex-layout.row :x: You didn't define product-images on the left column :x: You didn't 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::x::white_check_mark:

Tests

: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 :white_check_mark: Define product-price with 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:

Tests

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

Evoluindo sua página de produto (pdp)