Конфигуратор цветов товара 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. Статья обязательно будет дописана по использованию этих полей в: корзине и заказе.
Буду благодарен Вам за донаты «на чай»!
Спасибо за внимание!
Денис Усманов
03 апреля 2023, 00:40
modx.pro
2
986
+15

Комментарии: 2

deleted
04 апреля 2023, 00:07
0
Цвета надо каждый раз вписывать иоли автодополнение есть?
    Денис Усманов
    04 апреля 2023, 08:33
    0
    Каждый раз, для каждого товара вписывать индивидуально. Такая была задача от заказчика.
    Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
    2