Product page

[github-learning-lab[bot]]

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:

• images;
• prices;
• names;
• buy button

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

Click on a product to go to the product page. Build the page using the following blocks in product.jsonc and declare it in the store/blocks folder: product-images, product-price, product-name and buy-button. We expect the structure to contain the following:

1. A line in store.product;

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

2. That line should have two columns;

   "flex-layout.row#main": { 
     "props": { 
       "marginTop": 6
     },
     "children": [
       "flex-layout.col#left",
       "flex-layout.col#right"
     ]
   }

3. The left column must contain a product-images;

   "flex-layout.col#left": {
     "children": [
       "product-images"
     ]
   }

4. The right column must contain the product-name, product-price and buy-button;

In addition, we want:

1. the right column to be vertically aligned to the center (see the verticalAlign and preventVerticalStretch props in the Flex Layout Column documentation)
2. the product-price to show the total savings and list price (showSavings and showListPrice)

:information_source: Remember to access the product-images, product-price, product-name e buy-button documentation in case you have any questions during your 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::white_check_mark::white_check_mark::white_check_mark::x::white_check_mark:

Tests

:white_check_mark: Getting the file :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 :white_check_mark: Define product-price with props

Try again :grin:

[vtex-course-hub[bot]]

Oopsie, something went wrong :crying_cat_face:

Results

: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:

Tests

:white_check_mark: Getting the file :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 :white_check_mark: Define product-price with props

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::white_check_mark::white_check_mark::white_check_mark:

Tests

:white_check_mark: Getting the file :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

[github-learning-lab[bot]]

You have successfully completed this step!

Go to the next step!