Quick View
View in PortugueseThis 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
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
- Add a shelf to your home page:
_18{_18 "store.home": {_18 "blocks": [_18 ..._18+ "list-context.product-list"_18 ]_18 },_18+ "list-context.product-list": {_18+ "blocks": ["product-summary.shelf"],_18+ "children": ["slider-layout"]_18+ },_18+ "product-summary.shelf": {_18+ "children": [_18+ "product-summary-name",_18+ "product-selling-price"_18+ ]_18+ }_18}
- In the
product-summaryadd a trigger for the modal:
_10{_10 ..._10 "product-summary.shelf": {_10 "children": [_10+ "modal-trigger#quickview",_10 "product-summary-name",_10 "product-selling-price"_10 ]_10 }_10}
- So, let's make the trigger for the modal the product image and define that we will use a layout:
_13{_13 ..._13 "product-summary.shelf": {_13 "children": [_13 "modal-trigger#quickview",_13 "product-summary-name",_13 "product-selling-price"_13 ]_13 },_13+ "modal-trigger#quickview": {_13+ "children": ["product-summary-image", "modal-layout#quickview"]_13+ }_13}
- To close, let's define a simple modal with some product options:
_12{_12 ..._12+ "modal-layout#quickview": {_12+ "children": [_12+ "product-summary-name",_12+ "product-images",_12+ "product-summary-sku-selector",_12+ "product-summary-quantity",_12+ "add-to-cart-button"_12+ ]_12+ }_12}
The result, then, should be:
