Evolving your product page (pdp)

[github-learning-lab[bot]]

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:

• Breadcrumb
• Product Identifier
• Product Quantity
• SKU Selector

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 toproduct.jsonc as follows:

1. Define a breadcrumb right before the product's main line;

   "store.product": {
     "children": [
       "breadcrumb",
       "flex-layout.row#main"
     ]
   }

2. Define the product-identifier.product right under the product-name;

3. Create a line right under the price, having sku-selector and product-quantity as children;

   {
     ...
       "children": [ 
         "product-price",
         "flex-layout.row#qty-sku"
       ]
     },
     "flex-layout.row#qty-sku": {
       "children": [
         "sku-selector",
         "product-quantity"
       ]
     },
     ...
   }

4. 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.

[vtex-course-hub[bot]]

Oopsie, something went wrong :crying_cat_face:

Results

:white_check_mark::white_check_mark::white_check_mark::white_check_mark::x::x:

Tests

: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

Try again :grin:

[vtex-course-hub[bot]]

Oopsie, something went wrong :crying_cat_face:

Results

:white_check_mark::x::x::x::x::x:

Tests

:white_check_mark: Getting the files :x: There's something wrong with your product.jsonc file :x: You didn't declare a breadcrumb :x: You didn't use a product-identifier.product :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

Try again :grin:

[vtex-course-hub[bot]]

You did great! :grin:

Results

:white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark:

Tests

: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

[github-learning-lab[bot]]

You have successfully completed this step!

Go to the next step!