Página do 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

Assim que a página inicial da loja estiver pronta, podemos começar a trabalhar em um novo modelo de loja: a página do produto. As páginas de produtos são provavelmente os modelos com mais blocos, o que as torna extremamente flexíveis e personalizáveis.

Página do produto

Vamos construir uma página de produto mínima, com apenas o essencial:

imagens;
preços;
nomes;
botão de compra

{"base64":" ","img":{"width":3054,"height":1226,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":367608,"url":"https://user-images.githubusercontent.com/18701182/69375575-6b632780-0c87-11ea-85d2-41e1e858a33e.png"}}

Blocos de produto

A maioria dos blocos de produto, ao contrário dos blocos de conteúdo, são inseridos em um determinado contexto, tornando-os um pouco "plug-n-play": colocar product-images na página do produto levará automaticamente a imagens sendo renderizadas nessa página, o mesmo sendo válido para preço e nome.

Isso não significa que esses blocos sejam menos personalizáveis, muito pelo contrário, como veremos em breve.

Atividade

Construa uma página de produto usando os seguintes blocos em product.jsonc e declare-a na pasta store/blocks: product-images, product-price, product-name and buy-button. Esperamos que a estrutura contenha o seguinte:

Uma row em store.product;

_10{ _10 "store.product": { _10 "children": ["flex-layout.row#main"] _10 } _10}
Essa row deve conter duas columns;

_10"flex-layout.row#main": { _10 "props": { _10 "marginTop": 6 _10 }, _10 "children": [ _10 "flex-layout.col#left", _10 "flex-layout.col#right" _10 ] _10}
A coluna da esquerda deve conter product-images;

_10"flex-layout.col#left": { _10 "children": [ _10 "product-images" _10 ] _10}
A coluna da direita deve conter product-name, product-price e buy-button:

_10 "flex-layout.col#right": { _10 "children": [ _10 "product-name", _10 "product-price", _10 "buy-button" _10 ] _10 },

Ainda queremos:

A coluna da direita alinhada ao centro (veja as props verticalAlign e preventVerticalStretch na documentação do Flex Layout Column):

_10 "flex-layout.col#right": { _10 "props": { _10 "preventVerticalStretch": true, _10 "verticalAlign": "middle" _10 }, _10 "children": [ _10 ... _10 ] _10 },
O product-price mostrando economias totais e lista de preços (showSavings e showListPrice):

_10 "product-price": { _10 "props": { _10 "showSavings": true, _10 "showListPrice": true _10 } _10 }

Após terminados os passos anteriores, você pode procurar por um produto na barra de busca, no canto superior direito da página.

{"base64":" ","img":{"width":516,"height":71,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":3893,"url":"https://user-images.githubusercontent.com/19495917/90903507-682ad280-e3a4-11ea-9781-77a9b111218b.png"}}

Se você estiver na conta appliancetheme, tente buscar por uma máquina de café, por exemplo:

{"base64":" ","img":{"width":401,"height":527,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":48853,"url":"https://user-images.githubusercontent.com/19495917/90903699-b049f500-e3a4-11ea-9e3e-6ad5f6a41333.png"}}

Ao clicar na segunda, a Red Retro Coffee Machine, você irá para a sua página de produto, ou pdp, e verá os blocos que a compõem.

{"base64":" ","img":{"width":1637,"height":647,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":461739,"url":"https://user-images.githubusercontent.com/19495917/90905481-9f9a7e80-e3a6-11ea-99c4-6a546e0000a3.png"}}

Nota: Alguns dos produtos não terão savings, dado que não há descontos baseados no preço de catálogo, ou list price.

Note: Lembre de acessar as documentações de `product-images`, `product-price`, `product-name` e `buy-button` em caso de dúvidas durante a atividade.

Answer sheet

See answer sheet for product.jsonc

product.jsonc


_28// store/blocks/product.jsonc
_28{
_28  "store.product": {
_28    "children": ["flex-layout.row#main"]
_28  },
_28  "flex-layout.row#main": {
_28    "props": {
_28      "marginTop": 6
_28    },
_28    "children": ["flex-layout.col#left", "flex-layout.col#right"]
_28  },
_28  "flex-layout.col#left": {
_28    "children": ["product-images"]
_28  },
_28  "flex-layout.col#right": {
_28    "props": {
_28      "preventVerticalStretch": true,
_28      "verticalAlign": "middle"
_28    },
_28    "children": ["product-name", "product-price", "buy-button"]
_28  },
_28  "product-price": {
_28    "props": {
_28      "showSavings": true,
_28      "showListPrice": true
_28    }
_28  }
_28}

Introdução