Evoluindo sua página de produto

This content was migrated from the VTEX Learning Center and is no longer being actively maintained. For the most accurate and up-to-date information, please check the official documentation.

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.

{"base64":" ","img":{"width":3178,"height":1238,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":387161,"url":"https://user-images.githubusercontent.com/18701182/69391258-002e4b00-0cb1-11ea-901f-f69d9c0b3062.png"}}

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;

_10"store.product": { _10 "children": [ _10 "breadcrumb", _10 "flex-layout.row#main" _10 ] _10}
Defina o product-identifier.product logo depois de product-name;

_10 }, _10 "children": [ _10 "product-name", _10+ "product-identifier.product", _10 ... _10 ] _10 },
Crie uma row logo abaixo do preço, contendo o sku-selector e product-quantity como filhos;

_15{ _15 ... _15 "children": [ _15 "product-price", _15 "flex-layout.row#qty-sku" _15 ] _15 }, _15 "flex-layout.row#qty-sku": { _15 "children": [ _15 "sku-selector", _15 "product-quantity" _15 ] _15 }, _15 ... _15}
Defina o shipping-simulator logo abaixo da linha definindo o SKU Selector e o Product Quantity:


_10    "children": [
_10      ...
_10+      "shipping-simulator",
_10      "buy-button"
_10    ]

Answer sheet

See answer sheet for product.jsonc

product.jsonc


_31// store/blocks/product.jsonc
_31{
_31  "store.product": {
_31    "children": ["breadcrumb", "flex-layout.row#main"]
_31  },
_31  //...,
_31  "flex-layout.col#right": {
_31    "props": {
_31      "verticalAlign": "middle",
_31      "preventVerticalStretch": true
_31    },
_31    "children": [
_31      "product-name",
_31      "product-identifier.product",
_31      "product-price",
_31      "flex-layout.row#qty-sku",
_31      "shipping-simulator",
_31      "buy-button"
_31    ]
_31  },
_31  //...,
_31  "flex-layout.row#qty-sku": {
_31    "children": ["sku-selector", "product-quantity"]
_31  },
_31  "product-price": {
_31    "props": {
_31      "showSavings": true,
_31      "showListPrice": true
_31    }
_31  }
_31}

Introdução

Mais de 30 blocos de produtos

Atividade

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.

Answer sheet