Quick View
View in EnglishThis 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.
Introdução
Seguiremos os conceitos aprendidos no passo anterior e vamos aprofundar um pouco mais para aprender como construir o comportamento de Quick View em uma prateleira de produtos.
Atividade
- Adicione uma prateleira na sua página inicial:
_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}
- No
product-summaryadicione um trigger para o modal:
_10{_10 ..._10 "product-summary.shelf": {_10 "children": [_10+ "modal-trigger#quickview",_10 "product-summary-name",_10 "product-selling-price"_10 ]_10 }_10}
- Vamos, então, fazer com que o trigger para o modal seja a imagem do produto e definir que usaremos um 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}
- Para fechar vamos definir um simples modal com algumas opções de produto:
_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}
O resultado, então, deve ser:
