Theme Configuration - Random Numbers

There may be times when you need a variable in your templates to hold a random number that you can then use to decide whether or not to show some content. An example scenario is A/B testing.

The Random Number theme configuration field is perfect for doing A/B testing across multiple templates. Often times you want to perform the same "A" or "B" display of content but you need a consistent "global" variable to decide whether or not to do that. Since theme settings are essentially global variables, that is a great place to have this value.

The Random Number field is configured in the theme.json file. You can see a sample of it below.

{
    "name": "Custom",
    "settings": {
        "groups": [
            {
                "name": "A/B Testing",
                "description": "A/B testing configuration",
                "fields": [
                    {
                        "name": "doABTest",
                        "label": "Do A/B test",
                        "description": "Whether or not to do the A/B testing",
                        "type": "select",
                        "default": "no",
                        "options": {
                            "yes": "Yes",
                            "no": "No"
                        }
                    },
                    {
                        "name": "abRandomNumber",
                        "label": "Random number",
                        "type": "randomNumber",
                        "min": 0,
                        "max": 10
                    }
                ]
            }
        ]
    }
}

You can, of course, use the Random Number field for things other than A/B testing. That's just the scenario that we originally built it for.

How the value is generated

The Random Number field is a little different than other theme setting fields in that you don't actually edit a value. When you edit the theme settings there are no fields to edit for the Random Number. You simply see a message sort of like this:

A random number between 0 and 10 will be generated on each page load and saved to the variable for this field.

The random number is generated for each page request and is stored in the appropriate theme setting variable, which is available to all templates. The same value will be available in all templates for a single request.

You need to save the theme settings in the administration under Design -> Themes -> Customize Current Theme before the random number field is made available to templates.

Setting the min and max

By default, a random number between 0 and 2,147,483,647 will be generated. Most of the time you will want to have more control over the range. You can do that with the min and max field configuration as shown in the code sample above.

Random Number Configuration Description
max

The maximum number to generate. It needs to be an integer that is less than 2,147,483,647.

If a value is not set, or it's not a valid integer, then 2,147,483,647 will be used.
min

The minimum number to generate. It needs to be an integer equal to or greater than 0.

If a value is not set, or it's not an integer greater than 0, then 0 will be used.

Using in templates

The Random Number field, like all theme settings, is accessed under the _core.theme.settings variable.

In our example above our random number field has the field name of abRandomNumber so its value is accessed at _core.theme.settings.abRandomNumber. 

Below is an example using both of the variables in the above example.

{% if _core.theme.settings.doABTest == 'yes' %}
    {% if _core.theme.settings.abRandomNumber >= 5 %}
       {# SHOW SOME HTML OR DO SOME OTHER LOGIC #}
    {% else %}
       {# SHOW SOME OTHER HTML OR DO SOMETHING ELSE #}
    {% endif %}
{% endif %}