Open github-learning-lab[bot] opened 4 years ago
:white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::x::x:
: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
:x: You didn't use the props preventVerticalStretch
and verticalAlign
:x: You didn't define product-price
or defined the expected props
:white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::x:
: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
:x: You didn't define product-price
or defined the expected props
: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: 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
Página de produto
:sparkles: Branch: pdp1
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:
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
ebuy-button
no arquivoproduct.jsonc
declarado dentro da pastastore/blocks
. Esperamos que na estrutura tenhamos:store.product
;product-images
;product-name
,product-price
e obuy-button
;Além disso, queremos que:
verticalAlign
epreventVerticalStrech
na documentação de Flex Layout Column)product-price
mostre o total de economia e o preço de listagem (showSavings
eshowListPrice
):information_source: Lembre-se de acessar a documentação do
product-images
,product-price
,product-name
ebuy-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.