settings_form.json

Настройки виджета в json формате, которые отображаются в редакторе. Дефолтные значения прописываются в файле settings_data.json

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

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

Пример:

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

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

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

Пример:

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

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

Пример:

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

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

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

В настройках можно использовать несколько видов полей настроек:

• Текст
• Число
• Чекбокс
• Селект
• Ползунок
• Кнопки
• Файл
• Цвет
• Блог
• Ссылка
• Меню
• Информация
• Переключатель
• Группа иконок
• Ссылка на виджет
• Описание текущей страницы

Текст (text)

Данный вид имеет следующие параметры:

• name - Идентификатор настройки (должен быть уникальным)
• label - Заголовок настройки
• value - Значение по умолчанию
• help - Подсказка (будет отображаться рядом с полем)
• type - Тип text
• general - Значение true или false - Boolean | булевый тип. Вывод настройки в основные в редакторе
• general_position - Значение 2 - тип number | Число. Порядок вывода настройки в основные в редакторе
• general_label - Значение - "{{ messages.title }}". Добавляет заголовок с переводом из messages в основных настройках виджета в редакторе
• enable_server_reload - Значение true или false - Boolean | булевый тип. Перезагрузка шаблона при изменении значения настройки
• hide_mobile - Значение true или false - Boolean | булевый тип. Скрыть настройку в мобильной версии редактора

Пример:

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

Основной текст (rich-text)

Данный вид имеет следующие параметры:

• name - Идентификатор настройки (должен быть уникальным)
• label - Заголовок настройки
• value - Значение по умолчанию
• help - Подсказка (будет отображаться рядом с полем)
• type - Тип rich-text
• general - Значение true или false - Boolean | булевый тип. Вывод настройки в основные в редакторе
• general_position - Значение 2 - тип number | Число. Порядок вывода настройки в основные в редакторе
• general_label - Значение - "{{ messages.title }}". Добавляет заголовок с переводом из messages в основных настройках виджета в редакторе
• enable_server_reload - Значение true или false - Boolean | булевый тип. Перезагрузка шаблона при изменении значения настройки
• hide_mobile - Значение true или false - Boolean | булевый тип. Скрыть настройку в мобильной версии редактора

Пример:

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

Число (number)

Данный вид имеет следующие параметры:

• name - Идентификатор настройки (должен быть уникальным)
• label - Заголовок настройки
• value - Значение по умолчанию
• help - Подсказка (будет отображаться рядом с полем)
• type - Тип number
• general - Значение true или false - Boolean | булевый тип. Вывод настройки в основные в редакторе
• general_position - Значение 2 - тип number | Число. Порядок вывода настройки в основные в редакторе
• general_label - Значение - "{{ messages.title }}". Добавляет заголовок с переводом из messages в основвных настройках виджета в редакторе
• enable_server_reload - Значение true или false - Boolean | булевый тип. Перезагрузка шаблона при изменении значения настройки
• hide_mobile - Значение true или false - Boolean | булевый тип. Скрыть настройку в мобильной версии редактора
• with_btns - Изменение отображения Range slider на поле с кнопками '+' и '-'
• min - Значение 2 - тип number | Число. Минимальное значение настройки
• max - Значение 2 - тип number | Число. Максимальное значение настройки
• step - Значение 2 - тип number | Число. Шаг(интервал) на которое увеличиться число

Пример:

{
  "class":"range",
  "name":"img-ratio",
  "label":"{{ messages.image_ratio }}",
  "min":0.5,
  "max":2.5,
  "step":0.1,
  "type":"number",
  "with_btns": true
}

Чекбокс (checkbox)

Данный вид имеет следующие параметры:

• name - Идентификатор настройки (должен быть уникальным)
• label - Заголовок настройки
• value - Значение по умолчанию
• help - Подсказка (будет отображаться рядом с полем)
• type - Тип checkbox
• general - Значение true или false - Boolean | булевый тип. Вывод настройки в основные в редакторе
• general_position - Значение 2 - тип number | Число. Порядок вывода настройки в основные в редакторе
• general_label - Значение - "{{ messages.title }}". Добавляет заголовок с переводом из messages в основных настройках виджета в редакторе
• enable_server_reload - Значение true или false - Boolean | булевый тип. Перезагрузка шаблона при изменении значения настройки
• hide_mobile - Значение true или false - Boolean | булевый тип. Скрыть настройку в мобильной версии редактора

Пример:

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

Селект (select)

Данный вид имеет следующие параметры:

• name - Идентификатор настройки (должен быть уникальным)
• label - Заголовок настройки
• value - Значение по умолчанию
• help - Подсказка (будет отображаться рядом с полем)
• type - Тип select
• general - Значение true или false - Boolean | булевый тип. Вывод настройки в основные в редакторе
• general_position - Значение 2 - тип number | Число. Порядок вывода настройки в основные в редакторе
• general_label - Значение - "{{ messages.title }}". Добавляет заголовок с переводом из messages в основных настройках виджета в редакторе
• enable_server_reload - Значение true или false - Boolean | булевый тип. Перезагрузка шаблона при изменении значения настройки
• hide_mobile - Значение true или false - Boolean | булевый тип. Скрыть настройку в мобильной версии редактора

Пример:

    {
      "Группа 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 - Значение по умолчанию
• help - Подсказка (будет отображаться рядом с полем)
• type - Тип range
• general - Значение true или false - Boolean | булевый тип. Вывод настройки в основные в редакторе
• general_position - Значение 2 - тип number | Число. Порядок вывода настройки в основные в редакторе
• general_label - Значение - "{{ messages.title }}". Добавляет заголовок с переводом из messages в основных настройках виджета в редакторе
• enable_server_reload - Значение true или false - Boolean | булевый тип. Перезагрузка шаблона при изменении значения настройки
• hide_mobile - Значение true или false - Boolean | булевый тип. Скрыть настройку в мобильной версии редактора
• min - Значение 2 - тип number | Число. Минимальное значение
• max - Значение 2 - тип number | Число. Максимальное значение
• step - Значение 2 - тип number | Число. Шаг значений
• unit Значение "vw" - тип string | Строка. Единица измерения (vw, px и т.п)
• with_btns - Значение true или false - Boolean | булевый тип. Изменение отображения Range slider на поле с кнопками '+' и '-'

Пример:

    {
      "Группа 1":[
        {
          "group_name":"Подгруппа 1",
          "items":[
            {
              "class":"range",
              "name":"layout-pt",
              "min":0,
              "max":10,
              "step":0.5,
              "label":"{{ messages.indentation_height }}",
              "type":"range",
              "unit":"vw"
            }
          ]
        }
      ],
      "Группа 2":[],
      "Группа 3":[]
    }

Кнопки (button-group)

Данный вид имеет следующие параметры:

• name - Идентификатор настройки (должен быть уникальным).
• label - Заголовок настройки
• value - Значение по умолчанию
• help - Подсказка (будет отображаться рядом с полем)
• type - Тип button-group
• general - Значение true или false - Boolean | булевый тип. Вывод настройки в основные в редакторе
• general_position - Значение 2 - тип number | Число. Порядок вывода настройки в основные в редакторе
• general_label - Значение - "{{ messages.title }}". Добавляет заголовок с переводом из messages в основных настройках виджета в редакторе
• enable_server_reload - Значение true или false - Boolean | булевый тип. Перезагрузка шаблона при изменении значения настройки
• hide_mobile - Значение true или false - Boolean | булевый тип. Скрыть настройку в мобильной версии редактора

Options:

• value - Значение кнопки.
• title - Текстовый заголовок, который будет отображаться на кнопке.
• icon - Иконка для отображения на кнопке. Значение должно соответствовать строке иконки.

Пример:

{
  "name":"widget-align",
  "options":[
    {
      "value": "left",
      "title": "{{ messages.align_left }}",
      "icon": "mdi-text-align-left"
    },
    {
      "value": "center",
      "title": "{{ messages.align_center }}",
      "icon": "mdi-text-align-center"
    },
    {
      "value": "right",
      "title": "{{ messages.align_right }}",
      "icon": "mdi-text-align-right"
    }
  ],
  "value":null,
  "label":"{{ messages.alignment }}",
  "type":"button-group"
}

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

Данный вид имеет следующие параметры:

• name - Идентификатор настройки (должен быть уникальным).
• label - Заголовок настройки
• value - Значение по умолчанию
• help - Подсказка (будет отображаться рядом с полем)
• type - Тип file
• general - Значение true или false - Boolean | булевый тип. Вывод настройки в основные в редакторе
• general_position - Значение 2 - тип number | Число. Порядок вывода настройки в основные в редакторе
• general_label - Значение - "{{ messages.title }}". Добавляет заголовок с переводом из messages в основных настройках виджета в редакторе
• enable_server_reload - Значение true или false - Boolean | булевый тип. Перезагрузка шаблона при изменении значения настройки
• hide_mobile - Значение true или false - Boolean | булевый тип. Скрыть настройку в мобильной версии редактора
• min - Значение 2 - тип number | Число. Минимальное значение
• max - Значение 2 - тип number | Число. Максимальное значение
• step - Значение 2 - тип number | Число. Шаг значений
• unit - Значение "vw" - тип string | Строка. Единица измерения (vw, px и т.п)
• with-generate-logo - Значение true или false - Boolean | булевый тип. Добавить генератор логотипов в редакторе

Пример:

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

Цвет

Данный вид имеет следующие параметры:

• name - Идентификатор настройки (должен быть уникальным).
• label - Заголовок настройки
• value - Значение по умолчанию
• help - Подсказка (будет отображаться рядом с полем)
• type - Тип color
• general - Значение true или false - Boolean | булевый тип. Вывод настройки в основные в редакторе
• general_position - Значение 2 - тип number | Число. Порядок вывода настройки в основные в редакторе
• general_label - Значение - "{{ messages.title }}". Добавляет заголовок с переводом из messages в основных настройках виджета в редакторе
• enable_server_reload - Значение true или false - Boolean | булевый тип. Перезагрузка шаблона при изменении значения настройки
• hide_mobile - Значение true или false - Boolean | булевый тип. Скрыть настройку в мобильной версии редактора
• clearable - Значение true или false - Boolean | булевый тип. Возможность очистить цвет фона в редакторе.
• fallback - Значение - color-btn-bg или bg. Переменные можно посмотреть здесь. Возвращает заданный цвет если он не указан пользователем.

Пример:

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

Блог

Данный вид имеет следующие параметры:

• name - Идентификатор настройки (должен быть уникальным).
• label - Заголовок настройки
• value - Значение по умолчанию
• help - Подсказка (будет отображаться рядом с полем)
• type - Тип blog
• general - Значение true или false - Boolean | булевый тип. Вывод настройки в основные в редакторе
• general_position - Значение 2 - тип number | Число. Порядок вывода настройки в основные в редакторе
• general_label - Значение - "{{ messages.title }}". Добавляет заголовок с переводом из messages в основных настройках виджета в редакторе
• enable_server_reload - Значение true или false - Boolean | булевый тип. Перезагрузка шаблона при изменении значения настройки
• hide_mobile - Значение true или false - Boolean | булевый тип. Скрыть настройку в мобильной версии редактора
• edit_admin_link - Значение - product_options. Ссылка на товар в панели администратора

Пример:

    {
      "Группа 1":[
        {
          "group_name":"Подгруппа 1",
          "items":[
            {
              "class": "text",
              "name": "permalink_blog",
              "label": "{{ messages.blog_choice }}",
              "value": null,
              "type": "blog",
              "general": true
            }
          ]
        }
      ],
      "Группа 2":[],
      "Группа 3":[]
    }

Ссылка (link)

Поле выбора ссылки: страница, товар, категория или произвольный адрес.

{
  "name": "banner_link",
  "label": "{{ messages.btn_link }}",
  "type": "link",
  "help": "{{ messages.btn_link_help }}"
}

Меню (navigation)

Выбор меню магазина. В Liquid значение — handle меню.

{
  "name": "menu-1",
  "label": "{{ messages.menu }}",
  "type": "navigation"
}

Информация (info)

Текст в редакторе без сохраняемого значения. Покупатель его не видит.

{
  "name": "mark-info",
  "label": "Маркировка рекламы",
  "type": "info",
  "text": "{{ messages.mark_info }}"
}

Переключатель (button_switch)

Кнопки с одним выбранным значением. Варианты задаются в options.

{
  "name": "product-desc-limit",
  "label": "{{ messages.product_desc_limit }}",
  "type": "button_switch",
  "options": [
    { "value": "10", "title": "10" },
    { "value": "20", "title": "20" }
  ]
}

Допустимы также типы button-switch и button-list: редактор показывает их тем же полем.

Группа иконок (icon_group)

Тот же выбор одного значения, но у каждого варианта есть иконка редактора.

{
  "name": "widget-align",
  "label": "{{ messages.align_content }}",
  "type": "icon_group",
  "options": [
    { "value": "left", "title": "{{ messages.align_left }}", "icon": "mdi-text-align-left" },
    { "value": "center", "title": "{{ messages.align_center }}", "icon": "mdi-text-align-center" },
    { "value": "right", "title": "{{ messages.align_right }}", "icon": "mdi-text-align-right" }
  ]
}

Тип icon-group работает так же.

Ссылка на виджет (link-to-widget)

Кнопка в редакторе, которая открывает виджеты указанной категории. На витрину не выводится.

{
  "name": "link-to-widget-stickers",
  "label": "{{ messages.sticker_colors }}",
  "type": "link-to-widget",
  "category_handle": "stiker_hex_color",
  "icon": "mdi-cat-drugie"
}

Описание текущей страницы (current-page-description)

Поле редактора с описанием текущей страницы. Отдельное значение в settings_data.json не хранится.

{
  "name": "current-page-description",
  "label": "{{ messages.product_description }}",
  "type": "current-page-description"
}

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

Пример файла 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":[]
    }

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

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

Пример liquid:

Шрифт: {{ widget_settings:font_family }}
Цвет текста: {{ widget_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"
        }
      ]
    }
  ]
}