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

Build a product 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.

[github-learning-lab[bot]]

You have successfully completed this step!

Go to the next step!

[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::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: Make the third and fifth element, of your search result desktop layout, rows :white_check_mark: Top row should have total-products.v2 and order-by.v2 :white_check_mark: Use two columns inside the results row :white_check_mark: Define the left column of the results row :white_check_mark: Define the right column of the results row :white_check_mark: Use the filter navigator on the left column of the results row :white_check_mark: Use the search content on the right column of the results row :white_check_mark: Set the width of the left column of the results row :white_check_mark: Use gallery and not-found blocks on the search content :white_check_mark: Use shelf's product summary in the search gallery :white_check_mark: Include SKU Selector in all shelves