Introdução
Em alguns momentos, quando desenvolvendo uma loja, precisamos criar layouts condicionais que seriam aplicados somente a um contexto específico. Já vimos que na utilização de dispositivos diferentes, é possível condicionar o layout através do Responsive Layout, mas e se quiséssemos, por exemplo, ter uma página de produto diferente para produtos específicos? Para isso serve o Conditional Layout.
Setup opcional
Para criar um layout condicional de página de produto é necessário, inicialmente, ter uma página de produto. Se você já não tiver definido um template de produto para sua loja, copie o disponível abaixo:
_70//product.jsonc_70{_70 "store.product": {_70 "children": [_70 "flex-layout.row#product-breadcrumb",_70 "flex-layout.row#product-main"_70 ]_70 },_70 "flex-layout.row#product-breadcrumb": {_70 "props": {_70 "marginTop": 20_70 },_70 "children": ["breadcrumb"]_70 },_70 "flex-layout.row#product-main": {_70 "props": {_70 "colGap": 9,_70 "rowGap": 7,_70 "marginTop": 4,_70 "marginBottom": 7,_70 "paddingTop": 7,_70 "paddingBottom": 7,_70 "blockClass": "product-main"_70 },_70 "children": ["product-images", "flex-layout.col#right-col"]_70 },_70 "product-images": {_70 "props": {_70 "displayThumbnailsArrows": true,_70 "thumbnailsOrientation": "vertical"_70 }_70 },_70 "flex-layout.col#right-col": {_70 "props": {_70 "preventVerticalStretch": true,_70 "rowGap": 0_70 },_70 "children": [_70 "product-name",_70 "product-price#product-details",_70 "sku-selector",_70 "flex-layout.row#buy-button",_70 "shipping-simulator",_70 "share#default"_70 ]_70 },_70 "product-price#product-details": {_70 "props": {_70 "showInstallments": true,_70 "showSavings": true_70 }_70 },_70 "flex-layout.row#buy-button": {_70 "props": {_70 "marginTop": 4,_70 "marginBottom": 7_70 },_70 "children": ["buy-button"]_70 },_70 "share#default": {_70 "props": {_70 "social": {_70 "Facebook": true,_70 "WhatsApp": true,_70 "Twitter": false,_70 "Pinterest": true_70 }_70 }_70 }_70}
Fazendo isso, teremos uma página de produto como a mostrada abaixo:
Atividade
- Vamos criar um banner exclusivo para a geladeira Geladeira Retrô, para isso, use como primeiro filho da
store.productumcondition-layout.product:
_10//product.jsonc_10{_10 "store.product": {_10 "children": [_10+ "condition-layout.product"_10 ..._10 ]_10 }_10 ..._10}
- Defina, então, o
condition-layout.product, com uma condição específica para a Batedeira Retrô:
_10//product.jsonc_10{_10 ..._10+ "condition-layout.product": {_10+ "children": [_10+ "condition.product#retro-mixer"_10+ ]_10+ }_10}
- Agora, precisamos definir a condição para a batedeira.
O condition.product requer a prop conditions para definir em quais condições deve ser aplicada (veja a documentação), uma condição é dividida em três partes:
- subject: é o dado que vai ser usado para fins de comparação, no nosso caso usaremos
productId, na documentação é possível ver todas as opções disponíveis; - verb: é o método comparativo, usaremos o
ispara validar se oproductIdé de um produto específico, mas poderíamos usar:is,is-not,containsoudoes-not-contain; - object: é o valor com que queremos comparar, no nosso caso, usaremos o productId
20.
Sendo assim, o objeto formado é:
_16//product.jsonc_16{_16 ..._16+ "condition.product#retro-mixer": {_16+ "props": {_16+ "conditions": [_16+ {_16+ "subject": "productId",_16+ "verb": "is",_16+ "object": "20"_16+ }_16+ ]_16+ },_16+ "children": ["image#retro-mixer-banner"]_16+ }_16}
NOTA: Se você estiver fazendo o curso na sua própria loja, identifique o productId do produto que deseja customizar e coloque o valor no campo object. Você descobrir o valor atualizando a página, abrindo o console do seu navegador e digitando __RUNTIME__.route.params.id:
- Para finalizar, vamos definir o banner retrô:
_12//product.jsonc_12{_12 ..._12+ "image#retro-mixer-banner": {_12+ "props": {_12+ "src": "https://appliancetheme.vtexassets.com/assets/app/src/retroimage___92a8271aac7c51d2059193bdbe019016.jpg",_12+ "width": "100%",_12+ "height": "200px",_12+ "blockClass": "cover"_12+ }_12+ }_12}
Visite a página do produto testado para ver o layout funcionando, se tiver usando a appliancetheme e o produto for a batedeira retro, a url será:
https://{{seuworkspace}}--appliancetheme.myvtex.com/3-colors-retro-stand-mixer/p:
Para garantir que o layout condicional de fato funciona, visite qualquer outra página de produto, e verifique que o banner não é aplicado:
