Конфигуратор цветов товара Minishop2 на MIGX+ColorPicker

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

Minishop2 (я уверен, пока что) даёт возможность только создать опцию «Множественный список цветов», где к сожалению нет возможности распределить цвета по конкретным товарам, и нет визуальной палитры. Т.е. вписывать HEX придётся вручную…

Поэтому, я пошёл по другому пути, используя ТВ поле MIGX в котором палитрой будет играть роль ещё одно ТВ поле ColorPicker.

Давайте посмотрим, какой результат мы хотим получить в конечном итоге:


Итак, начнём.
1) Создаём ТВ поле «colorpicker» с типом ввода «ColorPicker». Привязывать к шаблону товаров не надо, это поле «техническое».
2) Создаём конфигурацию MIGX, называем — «colors».

Вкладка «Settings»:

• name — colors
• Замена «Добавить элемент» — Добавить цвет

Вкладка «Formtabs»:

• В «Fields» добавляем новый элемент, «Caption» — Добавить цвет.
• Открываем редактирование созданного элемента. Далее в «Fields» добавляем 2 поля — name и color
• Поле name:
  
  • «Fieldname» — name
  • «Caption» — Название
• Поле color:
  
  • «Fieldname» — color
  • «Caption» — Цвет
  • «Input TV» — colorpicker (т.е. тут мы привязываем ранее созданное ТВ поле с плалитрой...)

Должно получиться так:


Вкладка «Columns»:

• Добавляем 2 поля name и color_r
• Поле name:
  
  • «Header» — Название
  • «Field» — name
• Поле color_r:
  
  • «Header» — Цвет
  • «Field» — color_r
  • Вкладка «Renderer»
    
    • «Renderer» — this.renderChunk
    
    
    • «renderChunk template» —

      <i class="icon icon-square" style="color: [[+color]]; font-size: 25px">

      
      

3) Создаём ТВ поле «colors» с типом ввода «migx», указываем в «Конфигурации» — colors. Во вкладке «Доступно для шаблонов» привязываем к шаблону товаров.
4) Теперь давайте перенесём наш «конфигуратор» к полям товара во вкладку «Свойства товара».

• Открываем в настройках справа наверху «Настройка форм».
  


• Нажимаем «Создать новый профиль»
  
  • Назовём например «AddColors»
  
  
  • Ставим галочку «Активный»
• Редактируем созданный профиль. Нажимаем «Новый набор правил»
  
  • «Действие» — Обновить ресурс
  
  
  • «Шаблон» — Выбираем из списка шаблон товаров
• Редактируем созданный набор правил. Вкладка «Дополнительный поля (TV)». Находим поле «colors» и заменяем у него значение в столбце «Регион»… на Ваш выбор:
  
  • «minishop2-product-data» — под 2 столбцами полей (пример в 1 изображении статьи)
  • «minishop2-product-data-left» — под 1 (левом) столбцом полей
    
  • «minishop2-product-data-right» — под 2 (правом) столбцом полей

Примечания:

• Фильтровать товары по данным цветам — как по ТВ полю MIGX, т.е. цвета не попадают в msProductData!
• Выводить как ТВ поле MIGX — через сниппет getImageList
• Как добавить TV-поле товарам в письмо заказа
  Просто вписываем сниппету msGetOrder параметр 'includeTVs' => 'colors'. Доступно оно будет в шаблоне письма в цикле $products, и вызывается вот так: $product.colors
• P.S. Статья обязательно будет дописана по использованию этих полей в: корзине и заказе.

Буду благодарен Вам за донаты «на чай»!
Спасибо за внимание!