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":"color_text",
"label":"Цвет текста",
"value":"#ffffff",
"help":"",
"type":"color"
}
]
}
],
"Группа 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"
}
]
}
]
}