Skip to content

settings_form.json

Форма настроек

Группы настроек

Имеется возможность группировки настроек, которые будут отображаться в виде дропов с заголовком. В случае если в настройках будет всего одна группа то заголовок группы отображаться не будет и дроп будет всегда раскрыт.

Пример:

    {
      "Группа 1":[],
      "Группа 2":[],
      "Группа 3":[]
    }

Подгруппы настроек

Каждую группу можно разделить на подгруппы которые будут визуально разделять настройки для более удобного их использования.

Пример:

    {
      "Группа 1":[
        {
          "group_name":"Подгруппа 1",
          "items":[]
        },
        {
          "group_name":"Подгруппа 2",
          "items":[]
        },
        {
          "group_name":"Подгруппа 3",
          "items":[]
        }
      ],
      "Группа 2":[],
      "Группа 3":[]
    }

Если вы не хотите разделять настройки на подгруппы то можно использовать такой формат.

Пример:

    {
      "Группа 1":[
        {
          "items":[

          ]
        }
      ],
      "Группа 2":[],
      "Группа 3":[]
    }

Варианты полей настроек

В настройках можно использовать несколько видов полей настроек: Текст Чекбокс Селект Ползунок Файл Цвет.

Текст

Данный вид имеет следующие параметры: * name - Идентификатор настройки (должен быть уникальным). * label - Заголовок настройки. * value - Значение по умолчанию. * help - Подсказка (будет отображаться рядом с полем). * type - Тип.

Пример:

    {
      "Группа 1":[
        {
          "group_name":"Подгруппа 1",
          "items":[
            {
              "name":"main_text",
              "label":"Текст",
              "help":"",
              "type":"text"
            }
          ]
        }
      ],
      "Группа 2":[],
      "Группа 3":[]
    }

Чекбокс

Данный вид имеет следующие параметры: * name - Идентификатор настройки (должен быть уникальным). * label - Заголовок настройки. * value - Значение по умолчанию. * help - Подсказка (будет отображаться рядом с полем). * type - Тип.

Пример:

    {
      "Группа 1":[
        {
          "group_name":"Подгруппа 1",
          "items":[
            {
              "name":"hide_caption",
              "label":"Скрыть заголовок",
              "value":null,
              "help":"",
              "type":"checkbox"
            }
          ]
        }
      ],
      "Группа 2":[],
      "Группа 3":[]
    }

Селект

Данный вид имеет следующие параметры: * name - Идентификатор настройки (должен быть уникальным). * label - Заголовок настройки. * value - Значение по умолчанию. * options - Массив значений селекта. * help - Подсказка (будет отображаться рядом с полем). * type - Тип.

Пример:

    {
      "Группа 1":[
        {
          "group_name":"Подгруппа 1",
          "items":[
            {
              "name":"font_family",
              "options":[
                [
                  "OpenSans",
                  "google:Open+Sans"
                ],
                [
                  "Roboto",
                  "google:Roboto"
                ]
              ],
              "value":null,
              "label":"Шрифт",
              "type":"select"
            }
          ]
        }
      ],
      "Группа 2":[],
      "Группа 3":[]
    }

Ползунок (Range slider)

Данный вид имеет следующие параметры: * name - Идентификатор настройки (должен быть уникальным). * label - Заголовок настройки. * value - Значение по умолчанию. * min - Минимальное значение. * max - Максимальное значение. * step - Шаг значений. * help - Подсказка (будет отображаться рядом с полем). * type - Тип.

Пример:

    {
      "Группа 1":[
        {
          "group_name":"Подгруппа 1",
          "items":[
            {
              "name":"font_weight",
              "label":"Начертание шрифта",
              "value":null,
              "min": 100,
              "max": 600,
              "step": 100,
              "type":"range"
            }
          ]
        }
      ],
      "Группа 2":[],
      "Группа 3":[]
    }

Файл (Пример из настроек шаблона)

Данный вид имеет следующие параметры: * name - Название поля дя {{ widget_settings.logotype }}. * label - Заголовок настройки. * value - Значение по умолчанию. * type - Тип.

Пример:

    {
      "Группа 1":[
        {
          "group_name":"Подгруппа 1",
          "items":[
            {
              "name":"logotype",
              "label":"Логотип",
              "value":null,
              "type":"file"
            }
          ]
        }
      ],
      "Группа 2":[],
      "Группа 3":[]
    }

Цвет

Данный вид имеет следующие параметры: * name - Идентификатор настройки (должен быть уникальным). * label - Заголовок настройки. * value - Значение по умолчанию. * help - Подсказка (будет отображаться рядом с полем). * type - Тип.

Пример:

    {
      "Группа 1":[
        {
          "group_name":"Подгруппа 1",
          "items":[
            {
              "name":"color_text",
              "label":"Цвет текста",
              "value":"#ffffff",
              "help":"",
              "type":"color"
            }
          ]
        }
      ],
      "Группа 2":[],
      "Группа 3":[]
    }

Использование настроек

Пример файла settings.json:

    {
      "Группа 1":[
        {
          "group_name":"Цвета",
          "items":[
            {
              "name":"color-background",
              "label":"Цвет фона",
              "value":"#ffffff",
              "help":"",
              "type":"color"
            },
            {
              "name":"color-text",
              "label":"Цвет текста",
              "value":"#ffffff",
              "help":"",
              "type":"color"
            },
            {
              "name":"color-link",
              "label":"Цвет ссылок",
              "value":"#ffffff",
              "help":"",
              "type":"color"
            }
          ]
        },
        {
          "group_name":"Шрифт",
          "items":[
            {
              "name":"font_family",
              "options":[
                [
                  "OpenSans",
                  "google:Open+Sans"
                ],
                [
                  "Roboto",
                  "google:Roboto"
                ]
              ],
              "value":null,
              "label":"Шрифт",
              "type":"select"
            },
            {
              "name":"font_weight",
              "label":"Начертание шрифта",
              "value":null,
              "min": 100,
              "max": 600,
              "step": 100,
              "type":"range"
            }
          ]
        },
        {
          "group_name":"Логотип",
          "items":[
            {
              "name":"logotype.png",
              "label":"Логотип",
              "value":null,
              "help":"",
              "type":"file"
            }
          ]
        }
      ],
      "Группа 2":[],
      "Группа 3":[]
    }

Пример получения значений настроек:

Вызов значения какого-либо параметра задается переменной {{ settings.необходимый_метод }}

Пример liquid:

Шрифт: {{ settings:font_family }}
Цвет текста: {{ settings:color_text }}

Пример JSON

{
  "{{ messages.content_settings }}": [
    {
      "items": [
        {
          "class": "text",
          "name": "title",
          "label": "{{ messages.title }}",
          "value": null,
          "type": "text"
        },
        {
          "class": "range",
          "name": "benefit_row_gap",
          "min": 0,
          "max": 10,
          "step": 0.5,
          "label": "{{ messages.benefit_row_gap }}",
          "type": "range"
        },
        {
          "class": "range",
          "name": "benefit_img_ratio",
          "label": "{{ messages.benefit_img_ratio }}",
          "min": 0.5,
          "max" : 2,
          "step": 0.1,
          "type": "range"
        },
        {
          "class": "range",
          "name": "benefit_img_border_radius",
          "label": "{{ messages.benefit_img_border_radius }}",
          "min": 0,
          "max" : 50,
          "step": 1,
          "type": "range"
        }
      ]
    }
  ]
}