Quick View

Quick View

Introduction

We will follow the concepts learned in the previous step and go a little deeper to learn how to build the behavior of Quick View on a product shelf.

Activity

  1. Add a shelf to your home page:
{
  "store.home": {
    "blocks": [
      ...
+     "list-context.product-list"
    ]
  },
+ "list-context.product-list": {
+   "blocks": ["product-summary.shelf"],
+   "children": ["slider-layout"]
+ },
+ "product-summary.shelf": {
+   "children": [
+     "product-summary-name",
+     "product-selling-price"
+   ]
+ }
}
  1. In the product-summary add a trigger for the modal:
{
  ...
 "product-summary.shelf": {
   "children": [
+    "modal-trigger#quickview",
     "product-summary-name",
     "product-selling-price"
   ]
 }
}
  1. So, let's make the trigger for the modal the product image and define that we will use a layout:
{
  ...
  "product-summary.shelf": {
    "children": [
      "modal-trigger#quickview",
      "product-summary-name",
      "product-selling-price"
    ]
  },
+ "modal-trigger#quickview": {
+   "children": ["product-summary-image", "modal-layout#quickview"]
+ }
}
  1. To close, let's define a simple modal with some product options:
{
  ...
+ "modal-layout#quickview": {
+   "children": [
+     "product-summary-name",
+     "product-images",
+     "product-summary-sku-selector",
+     "product-summary-quantity",
+     "add-to-cart-button"
+   ]
+ }
}

The result, then, should be:

modallayoutmodallayout

Any questions?

See the answersheet for this step or join us on our office hours


Help us make this content better!

VTEX IO courses are open source. If you see something wrong, you can open a pull request!

Make a contribution

or open an issue


Next step