Evoluindo sua página de produto
Evoluindo sua página de produto
Introdução
Durante a última etapa, aprendemos como criar uma página de produto simples com uma quantidade mínima de conteúdo sobre produtos, mas sabemos que o resultado está longe de ser uma página de produto ideal, por isso adicionaremos outros elementos que aparecem com frequência nas páginas de produtos de várias lojas.
Mais de 30 blocos de produtos
Nossa documentação contém mais de 30 blocos relacionados ao produto. Exploraremos mais 4 nesta etapa:
É importante que ao final do curso você reserve um tempo para explorar totalmente nossos componentes, além das possibilidades de customização que acompanham cada um.
Atividade
Desenvolva a página do produto adicionando os 4 blocos listados acima aoproduct.jsonc
da seguinte forma:
-
Defina a
breadcrumb
logo antes da row;"store.product": { "children": [ "breadcrumb", "flex-layout.row#main" ] }
-
Defina o
product-identifier.product
logo depois deproduct-name
;}, "children": [ "product-name", + "product-identifier.product", ... ] },
-
Crie uma row logo abaixo do preço, contendo o
sku-selector
eproduct-quantity
como filhos;{ ... "children": [ "product-price", "flex-layout.row#qty-sku" ] }, "flex-layout.row#qty-sku": { "children": [ "sku-selector", "product-quantity" ] }, ... }
-
Defina o
shipping-simulator
logo abaixo da linha definindo oSKU Selector
e oProduct Quantity
:
"children": [
...
+ "shipping-simulator",
"buy-button"
]
Note: Lembre-se de acessar a documentação do Breadcrumb, Product Identifier, Product Quantity e SKU Selector se tiver qualquer dúvida durante a atividade.
Está com dúvidas?
Veja o gabarito para esta etapa ou acompanhe nosso [office hours] no canal VTEX Developers(https://www.youtube.com/c/VTEXDevelopers)
Ajude-nos a fazer este conteúdo melhor!
Os cursos do VTEX IO são de código aberto. Se você perceber algum problema, pode abrir um pull request!
Faça uma contribuiçãoUpdated 9 months ago