The Condition Layout app allows a component to be rendered in your store if predefined conditions are met.

In your theme's manifest.json, add the Condition Layout app as a dependency:

  "dependencies": {
+   "vtex.condition-layout": "2.x"
  }

You are now able to use all blocks that are exported by the condition-layout app. Check out the full list below:

In the product theme template, add the condition-layout.product block as a children. For example:

{
  "store.product": {
    "children": ["condition-layout.product"]
  },

Or the condition-layout.binding block, for example:

{
  "store.product": {
    "children": ["condition-layout.binding"]
  }
}

Or the condition-layout.category block, for example:

{
  "store.search#my-category-page": {
    "children": ["condition-layout.category"]
  }
}

Never use condition-layout directly. Make sure to always use it with the context variant, such as condition-layout.product.

Now it is time to configure the condition-layout.product block!

Use the block's props to define your layout condition. You can also declare as the children the condition-layout.product's children some blocks of your choosing to be rendered if the condition is met.

For example:

{
  "store.product": {
    "children": ["condition-layout.product#cond1"]
  },
  "condition-layout.product#cond1": {
+   "props": {
+     "conditions": [
+       {
+         "subject": "productId",
+         "arguments": {
+           "id": "12"
+         }
+       }
+     ]
+     "Then": "flex-layout.row#custom-pdp-layout-12",
+     "Else": "flex-layout.row#default"
+   }
+ }

Or for condition-layout.binding:

{
  "store.product": {
    "children": ["condition-layout.binding#cond42"]
  },
  "condition-layout.binding#cond42": {
+   "props": {
+     "conditions": [
+       {
+         "subject": "bindingId",
+         "arguments": {
+           "id": "13fb71d0-binding-code-here-87h9c28h9013"
+         }
+       }
+     ]
+     "Then": "flex-layout.row#just-for-this-binding",
+     "Else": "flex-layout.row#for-other-bindings"
+   }
+ }

Or for condition-layout.category:

{
  "store.product": {
    "children": ["condition-layout.category#cond42"]
  },
  "condition-layout.category#cond42": {
+   "props": {
+     "conditions": [
+       {
+         "subject": "department",
+         "arguments": {
+           "ids": ["1", "42"]
+         }
+       }
+       {
+         "subject": "category",
+         "arguments": {
+           "ids": ["301", "304"]
+         }
+       }
+     ]
+     "matchType": "any",
+     "Then": "flex-layout.row#just-for-this-category-or-department",
+     "Else": "flex-layout.row#for-other-category-or-department"
+   }
+ }

Or for condition-layout.telemarketing:

{
  "store.product": {
    "children": ["condition-layout.telemarketing#show-block"]
  },
  "condition-layout.telemarketing#show-block": {
+   "props": {
+     "conditions": [
+       {
+         "subject": "impersonable",
+         "arguments": {
+           "value": true
+         }
+       }
+     ]
+     "Then": "flex-layout.row#just-for-telemarketers",
+     "Else": "flex-layout.row#for-other-user-roles"
+   }
+ }

According to the example above, whenever users interact with a product whose ID is equal to 12, the block flex-layout.row#custom-pdp-layout-12 is rendered. If users interact with a product whose ID is not equal to 12, the rendered block is the flex-layout.row#default.

• conditions object:

Possible values for the condition-layout.product's subject prop:

Possible values for thecondition-layout.binding's subject prop:

Possible values for the condition-layout.category's subject prop:

Possible values for thecondition-layout.telemarketing's subject prop:

The condition-layout.product mainly uses the matchType and conditions props to set, respectively, the criteria and the conditions that blocks must meet to be rendered or not.

The conditions prop, in turn, does not rely on any automatic grammar to define the desired conditions. Instead, it relies on its two props, namely subject and arguments, that together define which condition must be met by using an underlying data validation method (with specific arguments) according to the UI behavior.

Lastly, the matchType prop has the responsibility for deciding the necessary number of valid conditions for the layout rendering to actually occur.

The Condition Layout merely establishes a logic to render other blocks. Therefore, the app doesn't have CSS Handles for its specific customization.

Instead, you should use its child block's Handles.