Finishing your pdp

[github-learning-lab[bot]]

Finishing your pdp

:sparkles: Branch: pdp3

Introduction

In this step we'll finish setting up our product page. We've learned how to stack blocks using Stack Layout, and we've also learned how to suggest similar product and better customize the SKU Selector for products with SKU images.

Use the following product URL to test this step: /3-colors-retro-stand-mixer/p.

Stack Layout

stack-layout is a type of layout that allows blocks to stack on top of others. It comes in handy when you want to a badge on top of an image or product. It's also useful when placing rich text onto images (using a rich-text and an image).

(In the image, a shelf is stacked on top a carrossel :point_up_2:)

In this step, we'll use stack-layout to place the brand on top of product images.

Activity

Develop the product page by adding the step below to product.jsonc:

1. Declare a shelf.relatedProducts under the product's main line

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

:warning: Remember, this product shelf is only displayed for the /3-colors-retro-stand-mixer/p product.

2. From the left column, change product-images with a stack-layout declaration;

   "flex-layout.col#left": {
     "children": [
       "stack-layout#brand"
     ]
   }

3. Define stack-layout and set product-images and product-brand as children;

   "stack-layout#brand": {
     "children": [
       "product-images",
       "product-brand"
     ]
   }

4. Consult the documentation to change the way in which product-brand is displayed. You should make the logo appear with a height of 30 and include the displayMode: "logo" prop.

5. Review the documentation to make the sku-selector do the following:

   • start without any selected SKU;
   • show the name by SKU variation, using property value as image, as it's shown in the documentation mentioned before;
   • display an error message if no SKU variation was selected.

   :information_source: Remember to read through the Stack Layout documentation if you have any questions during the activity.

:information_source: Remember to use the /3-colors-retro-stand-mixer/p product to test this step.

---

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

Tests

:white_check_mark: Getting the file :white_check_mark: Code compilation :white_check_mark: Define related products shelf :white_check_mark: Use and define a stack-layout on the left column :white_check_mark: Use product images and product brand within the stack layout :white_check_mark: Define correct props on product-brand :x: You didn't define the props correctly on sku-selector

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

Tests

:white_check_mark: Getting the file :white_check_mark: Code compilation :white_check_mark: Define related products shelf :white_check_mark: Use and define a stack-layout on the left column :white_check_mark: Use product images and product brand within the stack layout :white_check_mark: Define correct props on product-brand :x: You didn't define the props correctly on sku-selector

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:

Tests

:white_check_mark: Getting the file :white_check_mark: Code compilation :white_check_mark: Define related products shelf :white_check_mark: Use and define a stack-layout on the left column :white_check_mark: Use product images and product brand within the stack layout :white_check_mark: Define correct props on product-brand :white_check_mark: Define correct props on sku-selector

[github-learning-lab[bot]]

You have successfully completed this step!

Go to the next step!