github-learning-lab[bot] commented 3 years ago

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:

Uma linha na store.product;

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

Dentro da linha devem haver duas colunas;

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

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

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

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

Além disso, queremos que:

A coluna da direita esteja verticalmente alinhada ao centro (veja as props verticalAlign e preventVerticalStretch na documentação de Flex Layout Column)
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] commented 3 years ago

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