# Global Variables

{% hint style="warning" %}
Global Variables are still in "beta"; It works but some parts in the backoffice don't have the final design. Unless told to use them, please wait, the feature is still in progress.
{% endhint %}

CMS variables are scoped only inside their block (or list/page), you can not access them from another block.

{% hint style="info" %}
Global Variables are **shared settings across the whole website**. You can access their value from any block, page, header, footer, etc...
{% endhint %}

Each global variable also has **a category** (you can create as many as you want), that will allow organizing variables by "goal"

#### Example 1 - Showing prices

For example, if you want an option to show/hide prices everywhere on the website, you could do:

```html
{if=" '#$global|settings|show-prices$#' "}
    <!-- your code here -->
{/if}
```

`#$global|settings|show-prices$#` is a global variable with the key "**show-prices**" in the category "**settings**"

* `settings`: the category key
* `show-prices`: the variable key&#x20;

#### Example 2 - Map default zoom

For example, if you want a default zoom for the maps everywhere on the website, you could do:

```html
{if=" '#$global|map|default-zoom$#' "}
    <!-- your code here -->
{/if}
```

`#$global|map|default-zoom$#` is a global variable with the key "**default-zoom**" in the category "**map**"

* `map`: the category key
* `default-zoom`: the variable key&#x20;

The combination of the category and the key creates a unique identifier for your variable (so if you change the category key, it is a new variable)

### Edit value in the backoffice

To edit your variable go to your website, sidebar > Settings > Global Variables

The section is still a work in progress:

* permissions are not defined yet, only some users have access to it
* you can only "**simple**" input fields (no switch, etc.)

![](https://3028197268-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LYM6a76uZePOTen0dIw-887967055%2Fuploads%2FzcLbe3CVnEPNjdRNAIhL%2FCleanShot%202022-02-24%20at%2014.31.53%402x.png?alt=media\&token=810adceb-55b8-4b96-bf1e-1aeaf9190bb3)

{% hint style="info" %}
Not all users have access to the "Global Variables" section
{% endhint %}

### Code

Here is the syntax: `#$global|category|variable-key$#`

```html
#$global|settings|show-prices$#
<!-- category: settings; key: show-prices -->

#$global|map|default-zoom$#
<!-- category: map; key: show-prices -->
```

You can create categories, they are defined at the theme level

#### Edit variable configuration

{% hint style="danger" %}
The documentation is only here to give some context. **As the feature is still in beta, if you need to use it, we will provide you with the exact file names and contents to use**
{% endhint %}

{% hint style="warning" %}

* It is not yet possible to edit the variable configuration in Testeur, you have to do it manually with a **.data** file inside the code
* Categories label can not be customized for now (so the name visible in the BO will be the key)
* You can only use "**simple input**" variables for now
  {% endhint %}

<details>

<summary>Read temporary documentation</summary>

As it is not yet possible to edit the variable configuration inside Testeur, you have to edit the `.data` files manually in the file `theme/global/{CATEGORY_KEY}/{VARIABLE_KEY}.data`

**Example:**

Let's imagine you have a variable `#$global|settings|show-prices$#` and `#$global|map|default-zoom$#`

You need to create 2 files:

`theme/global/settings/show-prices.data` and `theme/global/map/default-zoom.data`

Here is an example of the content:

```
label = "Show lead rate"
type_id = "1"
content = ""
is_edit_visual = "0"
is_translate = "1"
dependance_cms_variable_e_id = ""
dependance_value = ""
variable = "show-lead-rate"
data_type_id = ""
sort = ""
```

On your side, you can change

* `label = "Show lead rate"` the label visible in the backoffice
* `variable = "show-lead-rate"` the key of the variable
* &#x20;`is_translate = "1"` if the variable is translatable or not

</details>
