EN IT
Open2b version 7.8

Custom Variables

In addition to global variables, you can define your own variables whose values can be set in the admin without touching the template source code. We call them "variables", but in the template they are defined as fields of a structure accessible via the editor variable. More details below.

Custom variables are defined in the editor.json file in the template folder. Each has a unique name you choose, a type (e.g. checkbox, text, etc.), a label, and notes used to build the admin interface where the value can be changed. There are additional properties depending on the assigned type.

Example

We want a simple way to show or hide promotions on the store home page whenever needed.

Define the variable

In the editor.json file you can define a new variable named ShowPromotions of type checkbox, with default value true and labels in English and Italian:

    "variables": [
        …
        {
            "name" : "ShowPromotions",
            "type" : "checkbox",
            "label" : {
                "en" : "Display promotions on the home page",
                "it" : "Mostra le promozioni sulla home page"
            },
            "default" : true
        },
        …
    ]

Set a value

The admin interface is built automatically based on the custom variables that have been defined. In the admin you can set a value and change it whenever you want:

Use it in the template

In the template you can use it like this:

  {% if editor.ShowPromotions %}
  {% for promotion in promotions %}
  ...
  {% end for %}
  {% end if %}

Therefore, site pages can change based on the value set in the admin.

The name of a custom variable must start with an uppercase letter, otherwise it cannot be accessed from the template. Since it is defined as a field of a structure, you must prefix the name with "editor." to access it.

Fields

The following are the fields you can use when defining a custom variable in editor.json.

Field Description
"name" Name. It must start with an uppercase letter and there must not be multiple variables with the same name.
"type" Type. It can be "text", "textarea", "checkbox", "radio", "select" or "image"
"label" Label with the translation for each admin language. It is shown in the admin to briefly describe the field.
"description" Variable description. It is shown in the admin.
"placeholder" Placeholder. If the variable is multi-language, it should include a translation for each site language.
"isMultiLanguage" Indicates whether values vary based on the site language.
"groups" Option groups. Used only for the "select" type and is optional. In the "group" field in options you can indicate the index of the group where the option should appear.
"options" Available options. Required for "radio" and "select" types
"default" Default value. Not meaningful if "isMultiLanguage" is true. For "radio" and "select" variables, if present it must match one of the option values. For "image" variables, if present it is the image address in the form "https://www.domain.com/image.jpg" or "/image.jpg" if the image is in the template folder.

Custom variable types

The following are the custom variable types, with the possible fields for each type and optional fields shown in gray.

text

editor.json

"variables" : [ … {
    "name" : "Welcome",
    "type" : "text",
    "label" : {
        "en" : "Welcome message",
        "it" : "Messaggio di benvenuto"
    },
    "description" : {
        "en" : "Welcome message to show when the customer is logged",
        "it" : "Messaggio di benvenuto da mostare quanto il cliente è loggato"
    },
    "placeholder" : {
        "en" : "Welcome",
        "it" : "Benvenuto",
        "es" : "Bienvenido"
    },
    "isMultiLanguage" : true,
    "default" : ""
}, … ],

textarea

editor.json

"variables" : [ … {
    "name" : "Welcome",
    "type" : "textarea",
    "label" : {
        "en" : "Welcome message",
        "it" : "Messaggio di benvenuto"
    },
    "description" : {
        "en" : "Welcome message to show when the customer is logged",
        "it" : "Messaggio di benvenuto da mostare quanto il cliente è loggato"
    },
    "placeholder" : "Benvenuto",
    "isMultiLanguage" : false,
    "default" : "Benvenuto sul nostro sito"
}, … ],

checkbox

editor.json

"variables" : [ … {
    "name" : "ShowPromotions",
    "type" : "checkbox",
    "label" : {
        "en" : "Display promotions on the home page",
        "it" : "Mostra le promozioni sulla home page"
    },
    "description" : {
        "en" : "Indicates whatever display the promotions on the home page",
        "it" : "Indica se mostrare le promozioni sulla home page"
    },
    "default" : true
}, … ],

radio

editor.json

"variables" : [ … {
    "name" : "Align",
    "type" : "radio",
    "label" : {
        "en" : "Image align",
        "it" : "Allineamento immagine"
    },
    "description" : {
        "en" : "Choose whether to align the images to the left, center or to the right",
        "it" : "Scegliere se allineare le immagini a sinistra, al centro o a destra"
    },
    "options" : [ {
        "label" : {
            "en" : "Left",
            "it" : "Sinistra"
        },
        "value" : "left"
    }, … ],
    "default" : "left"
}, … ],

select

editor.json

"variables" : [ … {
    "name" : "Color",
    "type" : "select",
    "label" : {
        "en" : "Color",
        "it" : "Colore"
    },
    "description" : {
        "en" : "Color of page title",
        "it" : "Colore del titolo della pagina"
    },
    "groups" : [ {
        "label" : {
            "en" : "Reds",
            "it" : "Rossi"
        }
    }, … ],
    "options" : [ {
        "label" : {
            "en" : "Tomato",
            "it" : "Pomodoro"
        },
        "value" : "#FF6347",
        "group" : 0
    }, … ],
    "default" : "#FF6347"
}, … ],

image

Credit card logos:

editor.json

"variables" : [ … {
    "name" : "CreditCardLogos",
    "type" : "image",
    "label" : {
        "en" : "Credit card logos",
        "it" : "Loghi carte di credito"
    },
    "description" : {
        "en" : "Image for credit cart logos",
        "it" : "Immagine per i loghi delle carte di credito"
    },
    "default" : "/images/credit-cards.png"
}, … ],