# Conditional Functions

## if/else Function

The `#if` helper function is used to verify whether a value of a user or event attribute exists or is true. Upon message dispatch, if the verified  attribute's value is equal to `false`, `undefined`, `null`, `""`, `0`, or `[]`, CrossEngage will not render the block.

The syntax of this helper function is:

```jsx
{{#if [attribute]}}
   ...
{{/if}}
```

| Property    | Description                                                                                                         |
| ----------- | ------------------------------------------------------------------------------------------------------------------- |
| `attribute` | The user or event attribute that is used for the verification. e.g. `user.[traits.birthday]`,  `[properties.price]` |

### Use Cases

#### Display content only if it exists

For this example, we only display the user's first name if it exists.

```jsx
{{#if user.[traits.firstName]}}
    <h1>Hi {{user.[traits.firstName]}}!</h1>
{{else}}
    <h1>Hi there!</h1>
{{/if}}
```

Once the function is evaluated, it displays either:

```markup
<!--Assuming the user's first name would be John.-->
<h1>Hi John!</h1>
```

or

```markup
<!--Whenever the first name attribute does not exist for a user.-->
<h1>Hi there!</h1>
```

## cif/else Function

CrossEngage offers a more advanced version of the `#if` helper function that allows you to perform additional operations and only display content if a certain criteria is met.&#x20;

The syntax of this helper function is:

```jsx
{{#cif '{
    "property": "attribute", 
    "operator": "operator", 
    "value": "value"
}'}}
    ...
{{else}}
    ...
{{/cif}}
```

{% hint style="info" %}
For a list of operators that can be used for comparison, please check the [Operators ](https://documentation.crossengage.io/data-and-engagement-platform/messages/personalization/operators)page.
{% endhint %}

{% hint style="info" %}
Optionally, you may use the `{{else}}` block that will display other content if the condition is not met. The `{{else}}` block should be placed within the `{{#cif}}{{/cif}}` tags for the function to be correctly processed.&#x20;
{% endhint %}

| Property    | Description                                                                                                                                                                                                                                                     |
| ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `attribute` | <p>The user or event attribute that is used for the verification. e.g. <code>user.\[traits.birthday]</code>,  <code>\[properties.price]</code></p><p>Please note that journey steps helper with array attribute e.g. cart is not supported for advanced If.</p> |
| `operator`  | The operator that will be used to asses whether the criteria is met or not. e.g. `==`. `<=`. See the list of all available operators and their compatibility below.                                                                                             |
| `value`     | The value the `attribute` property will be compared against. e.g `male`, `0`                                                                                                                                                                                    |

### Use Cases <a href="#operators" id="operators"></a>

#### Gender Based Salutation

For this example, we output the salutation of a client according to their gender.&#x20;

```jsx
Dear {{#cif '{
    "property": "user.[traits.gender]", 
    "operator": "==", 
    "value": "male"
}'}}
    Mr. {{user.[traits.lastName]}}
{{else}}
    {{#cif '{
        "property": "user.[traits.gender]", 
        "operator": "==", 
        "value": "female"
    }'}}
        Mrs. {{user.[traits.lastName]}}
    {{else}}
        Visitor
    {{/cif}}
{{/cif}}
```

Once the function is evaluated, it displays the salutation according to the user's gender. For example, the function may result in:&#x20;

* `Dear Mr. Doe`,  if the user is male
* `Dear Mrs. Doe`, if the user is female
* `Dear Visitor`, if the user's gender is unknown

#### Stock Level Low

For this example, we output a call to action statement when the stock of a certain product is low.&#x20;

```jsx
{{#cif '{
    "property": "[properties.stockQuantity]", 
    "operator": "<", 
    "value": "4"
}'}}
    <p>Less than 4 items available. Buy now!</p>
{{/cif}} 
```

Once the function is evaluated, if a product's stock is less than 4, it displays the content below in the section where it is used in the message.:

```jsx
<p>Less than 4 items available. Buy now!</p>
```