Open github-learning-lab[bot] opened 3 years ago
:white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::x:
:white_check_mark: Getting the files
:white_check_mark: Code compilation
:white_check_mark: Use a breadcrumb
:white_check_mark: Used a product identifier
:white_check_mark: Create a row inside the right col with quantity and sku selectors
:x: There isn't a shipping-simulator
on the right column
:white_check_mark::white_check_mark::white_check_mark::white_check_mark::x::x:
:white_check_mark: Getting the files
:white_check_mark: Code compilation
:white_check_mark: Use a breadcrumb
:white_check_mark: Used a product identifier
:x: You didn't use and define a flex-layout.row
in the right col with sku-selector
and product-quantity
:x: There isn't a shipping-simulator
on the right column
:white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::x:
:white_check_mark: Getting the files
:white_check_mark: Code compilation
:white_check_mark: Use a breadcrumb
:white_check_mark: Used a product identifier
:white_check_mark: Create a row inside the right col with quantity and sku selectors
:x: There isn't a shipping-simulator
on the right column
:white_check_mark::white_check_mark::white_check_mark::white_check_mark::x::x:
:white_check_mark: Getting the files
:white_check_mark: Code compilation
:white_check_mark: Use a breadcrumb
:white_check_mark: Used a product identifier
:x: You didn't use and define a flex-layout.row
in the right col with sku-selector
and product-quantity
:x: There isn't a shipping-simulator
on the right column
:white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark:
:white_check_mark: Getting the files :white_check_mark: Code compilation :white_check_mark: Use a breadcrumb :white_check_mark: Used a product identifier :white_check_mark: Create a row inside the right col with quantity and sku selectors :white_check_mark: Define a shipping simulator in the right column
Evolving your product page (pdp)
:sparkles: Branch: pdp2
Introduction
During the last step we learned how to create a simple product page with a minimum amount of products, but we know that the result is far from an ideal product page, so we'll add other elements that frequently appear on product pages from various stores.
Over 30 product blocks
Our documentation contains more than 30 product-related blocks. At the beginning of the course we looked at the Shelf and its related blocks, in addition to the 4 blocks we looked at during our last session. We'll explore 4 more in this step:
It's important that by the end of the course you take some time to fully explore our components, in addition to the customization possibilities that accompany each component.
Activity
Develop the product page by adding the 4 blocks listed above to
product.jsonc
as follows:Define a
breadcrumb
right before the product's main line;Define the
product-identifier.product
right under theproduct-name
;Create a line right under the price, having
sku-selector
andproduct-quantity
as children;Define
shipping-simulator
right under the line containing the SKU Selector and Product Quantity:information_source: Remember to access the Breadcrumb, Product Identifier, Product Quantity and SKU Selector documentation if you have any questions during the activity.
:no_entry_sign: Are you lost?
Is there any problem with this step? What about sending us a feedback? :pray:
Submit feedback
If you're still unsure as to how to send your answers, click here.