Evolving your product page

This content was migrated from the VTEX Learning Center and is no longer being actively maintained. For the most accurate and up-to-date information, please check the official documentation.

Introduction

In the last step, we learned how to create a simple product page with a minimum number of products. However, we know that the result is far from ideal, so we'll add other elements that frequently appear on product pages from various stores.

{"base64":" ","img":{"width":3178,"height":1238,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":387161,"url":"https://user-images.githubusercontent.com/18701182/69391258-002e4b00-0cb1-11ea-901f-f69d9c0b3062.png"}}

Over 30 product blocks

Our documentation contains more than 30 product-related blocks. We'll explore 4 more in this step:

It's important that you take some time to fully explore our components and the customization possibilities that accompany each component by the end of the course.

Activity

Develop the product page by adding the 4 blocks listed above to product.jsonc as follows:

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

_10"store.product": { _10 "children": [ _10 "breadcrumb", _10 "flex-layout.row#main" _10 ] _10}
Define the product-identifier.product right under the product-name;

_10 }, _10 "children": [ _10 "product-name", _10+ "product-identifier.product", _10 ... _10 ] _10 },
Create a row right under the price, having sku-selector and product-quantity as children;

_15{ _15 ... _15 "children": [ _15 "product-price", _15 "flex-layout.row#qty-sku" _15 ] _15 }, _15 "flex-layout.row#qty-sku": { _15 "children": [ _15 "sku-selector", _15 "product-quantity" _15 ] _15 }, _15 ... _15}
Define shipping-simulator right under the line containing the SKU Selector and Product Quantity:


_10    "children": [
_10      ...
_10+      "shipping-simulator",
_10      "buy-button"
_10    ]

Answer sheet

See answer sheet for product.jsonc

product.jsonc


_31// store/blocks/product.jsonc
_31{
_31  "store.product": {
_31    "children": ["breadcrumb", "flex-layout.row#main"]
_31  },
_31  //...,
_31  "flex-layout.col#right": {
_31    "props": {
_31      "verticalAlign": "middle",
_31      "preventVerticalStretch": true
_31    },
_31    "children": [
_31      "product-name",
_31      "product-identifier.product",
_31      "product-price",
_31      "flex-layout.row#qty-sku",
_31      "shipping-simulator",
_31      "buy-button"
_31    ]
_31  },
_31  //...,
_31  "flex-layout.row#qty-sku": {
_31    "children": ["sku-selector", "product-quantity"]
_31  },
_31  "product-price": {
_31    "props": {
_31      "showSavings": true,
_31      "showListPrice": true
_31    }
_31  }
_31}

Introduction

Over 30 product blocks

Activity

Note: Remember to access the Breadcrumb, Product Identifier, Product Quantity and SKU Selector documentation if you have any questions during the activity.

Answer sheet