Evoluindo sua página de produto (pdp)

[github-learning-lab[bot]]

Evoluindo sua página de produto (pdp)

:sparkles: Branch: pdp2

Introdução

No último passo aprendemos como fazer uma página de produto simples com seus itens mínimos, mas sabemos que o que fizemos está longe de ser uma página de produto ideal, colocaremos outros elementos que vemos com frequência nas páginas de produto de várias lojas.

Mais de 30 blocos de produto

Na nossa documentação é possível encontrar mais 30 blocos relacionados a produto. No começo do curso falamos sobre Shelf e seus blocos relacionados, além de na última seção termos visto outros 4 blocos. Neste passo veremos mais 4:

• Breadcrumb
• Product Identifier
• Product Quantity
• SKU Selector

É importante que ao fim do curso, você tome um tempo para explorar nossos componentes, bem como as possibilidades de customização que se tem com estes.

Atividade

Evolua a página de produto adicionando os outros 4 blocos listados acima da seguinte forma no arquivo product.jsonc:

1. Defina um breadcrumb logo no início antes da linha principal do produto;

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

2. Defina o product-identifier.product logo abaixo do product-name;
3. Crie uma linha logo abaixo do preço com o sku-selector e o product-quantity como children;

{
  ...
    "children": [ 
      "product-price",
      "flex-layout.row#qty-sku"
    ]
  },
  "flex-layout.row#qty-sku": {
    "children": [
      "sku-selector",
      "product-quantity"
    ]
  },
  ...
}

4. Defina shipping-simulator logo abaixo da linha com o SKU Selector e o Product Quantity

:information_source: Lembre-se de acessar a documentação do Breadcrumb, Product Identifier, Product Quantity e SKU Selector 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.

[github-learning-lab[bot]]

Você terminou este passo com sucesso!

Vá para o próximo passo:

Finalizando sua pdp

[vtex-course-hub[bot]]

You did great! :grin:

Results

:white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark:

Tests

:white_check_mark: Code compilation :white_check_mark: Use a breadcrumb :white_check_mark: Used a product identifier :white_check_mark: Create a row inside the right col with quantity and sku selectors :white_check_mark: Define a shipping simulator in the right column