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.

---

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

:x::x::x::x::x::x::x::x::x:

Tests

:x: Request failed with status code 404 :x: Cannot read property 'length' of undefined :x: You didn't use a store.product :x: Cannot read property 'children' of undefined :x: Cannot destructure property children of 'undefined' or 'null'. :x: Cannot read property 'children' of undefined :x: Cannot destructure property children of 'undefined' or 'null'. :x: Cannot destructure property props of 'undefined' or 'null'. :x: You didn't define product-price or defined the expected props

Try again :grin:

[github-learning-lab[bot]]

You have successfully completed this step!

Go to the next step!