Делаем 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-код вручную.
Такой подход можно использовать для любых сложных элементов настройки — например, для слайдера, выбора иконок, радиогруппы с картинками и т.д.
Читайте также
Webasyst Задачи: трекер задач для команды магазина — полный разбор
Поручения тонут в чате, сроки срываются? «Задачи» Webasyst — трекер как почта: входящие и исходящие, проекты и этапы со сроками, статусы с правилами передачи, канбан, лента новостей, права по проектам. Полный разбор со скриншотами.
Photos Webasyst: банк фотографий и галерея для магазина
Гора съёмок копится хаотично и теряется. Photos: альбомы, теги, стеки, EXIF, публичная галерея и водяные знаки — медиа-банк магазина (это не каталожные фото товаров).
Files Webasyst: облачное хранилище для документов и файлов магазина
Договоры на почте, прайсы в «Загрузках», исходники на флешке. «Файлы» Webasyst — хранилище внутри системы: папки с правами по группам, теги, комментарии, фильтры, корзина, ссылки на скачивание. Пошагово и со скриншотами.
Готовы запустить магазин?
Оставьте email и наша команда свяжется с вами для бесплатной консультации