Introduction
At times, when developing a store, we need to create conditional layouts that would apply only to a specific context. We have already seen that when using different devices, it is possible to condition layout using Responsive Layout, but what if we wanted, for example, to have a different product page for specific products? This is what the Conditional Layout is for.
Optional setup
To create a conditional product page layout it is necessary, initially, to have a product page. If you have not already defined a product template for your store, copy the one below:
_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}
By doing this, we will have a product page like the one shown below:
Activity
- We are going to create an exclusive banner for the Refrigerator Retro refrigerator, for this, use as a first child of the
store.productacondition-layout.product:
_10//product.jsonc_10{_10 "store.product": {_10 "children": [_10+ "condition-layout.product"_10 ..._10 ]_10 }_10 ..._10}
- Then define the
condition-layout.product, with a specific condition for the Retro Mixer:
_10//product.jsonc_10{_10 ..._10+ "condition-layout.product": {_10+ "children": [_10+ "condition.product#retro-mixer"_10+ ]_10+ }_10}
- Now, we need to define the condition for the mixer.
Condition.product requires prop conditions to define which conditions should be applied (see documentation), a condition is divided into three parts:
- subject: is the data that will be used for comparison purposes, in our case we will use
productId, in the documentation it is possible to see all the available options; - verb: is the comparative method, we will use
isto validate ifproductIdis for a specific product, but we could use:is,is-not,containsordoes -not-contain; - object: is the value we want to compare, in our case, we will use productId
20.
Thus, the object formed is:
_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}
NOTE: If you are taking the course in your own store, identify the productId of the product you want to customize and enter the value in the object field. You find out the value by refreshing the page, opening your browser's console and typing __RUNTIME __. Route.params.id:
- Finally, let's define the retro banner:
_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}
Visit the tested product page to see the layout working, if you are using ʻappliancetheme` and the product is a retro mixer, the url will be:
https://{{seuworkspace}}--appliancetheme.myvtex.com/3-colors-retro-stand-mixer/p:
To ensure that the conditional layout actually works, visit any other product page, and verify that banner is not applied:
