Open github-learning-lab[bot] opened 4 years ago
:white_check_mark::white_check_mark::white_check_mark::x::x::x::x::x::x:
:white_check_mark: Getting the file
:white_check_mark: Code compilation
:white_check_mark: Crete a product template page
:x: You didn't use nor defined a flex-layout.row
in your product page
:x: Cannot destructure property children
of 'undefined' or 'null'.
:x: Cannot read property 'children' of undefined
:x: Cannot read property 'children' of undefined
:x: Cannot destructure property props
of 'undefined' or 'null'.
:x: You didn't define product-price
or defined the expected props
Product page
:sparkles: Branch: pdp
Introduction
Once the store's homepage is done, we can start working on a new store template: the product page. Product pages are probably the templates with the most blocks, which makes them extremely flexible and customizable.
MVP
Let's build a minimal product page, with only the bare essentials:
Product blocks
Most product blocks, unlike content blocks, are inserted into a certain context, making them a little bit "plug-n-play": placing
product-images
on the product page will automatically lead to images being rendered on that page, the same being valid for price and name.This doesn't mean that these blocks are less customizable, quite the opposite actually, as we'll soon see.
Activity
Build a product page using the following blocks in
product.jsonc
and declare it in thestore/blocks
folder:product-images
,product-price
,product-name
andbuy-button
. We expect the structure to contain the following:store.product
;product-images
;product-name
,product-price
andbuy-button
;In addition, we want:
verticalAlign
andpreventVerticalStretch
props in the Flex Layout Column documentation)product-price
to show the total savings and list price (showSavings
andshowListPrice
):information_source: Remember to access the
product-images
,product-price
,product-name
ebuy-button
documentation in case you have any questions during your activity.If you're still unsure as to how to send your answers, click here.