Делаем CUSTOM-поле для плагина Shop-Script Webasyst

В стандартных настройках плагинов Webasyst можно использовать простые типы полей (INPUT, CHECKBOX, SELECT и т. д.), но иногда нужно что-то посложнее — например, цветовой пикер.

Разберём, как добавить собственный тип поля (CUSTOM) и сделать красивое управление цветом с <input type="color">.

Шаг 1. Добавляем поле в settings.php

Создаём новое поле с типом CUSTOM и указываем, какой метод будет отрисовывать его HTML:

'text_color' => [
    'title' => 'Цвет текста',
    'description' => 'Например: #ffffff',
    'value' => '#ffffff',
    'control_type' => waHtmlControl::CUSTOM . ' ' . 'shopNotifyPlugin::colorPickerControl',
],

Здесь:

• waHtmlControl::CUSTOM — указывает, что используется кастомный контрол;
• shopNotifyPlugin::colorPickerControl — метод класса плагина, который создаст HTML для этого поля.

Шаг 2. Реализуем метод в классе плагина

Добавляем функцию в lib/shopNamePlugin.class.php:

public static function colorPickerControl($name, $params = [])
{
    $value = isset($params['value']) ? $params['value'] : '#e53935';
    $html = sprintf(
        '<input type="color" name="%s" value="%s" style="width:60px;height:34px;cursor:pointer;border:1px solid #ccc;border-radius:4px;vertical-align:middle;margin-right:6px;">',
        htmlspecialchars($name, ENT_QUOTES, 'utf-8'),
        htmlspecialchars($value, ENT_QUOTES, 'utf-8')
    );

    // Текстовое поле для ручного ввода HEX
    $html .= sprintf(
        '<input type="text" name="%s_text" value="%s" style="width:90px;" oninput="this.previousElementSibling.value=this.value" onfocus="this.select()">',
        htmlspecialchars($name, ENT_QUOTES, 'utf-8'),
        htmlspecialchars($value, ENT_QUOTES, 'utf-8')
    );

    // JS-связка между полями
    $html .= <<<JS
<script>
document.querySelectorAll('input[type="color"][name="{$name}"]').forEach(function(el){
  el.addEventListener('input', function(){
    const txt = el.nextElementSibling;
    if (txt) txt.value = el.value;
  });
});
</script>
JS;
    return $html;
}

Что делает этот код

• Создаёт цветовой пикер (<input type="color">);
• Добавляет рядом текстовое поле для ручного ввода значения;
• Связывает их через небольшой JS — меняешь одно, обновляется другое.

Результат

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

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