Вывод на сайте

На витрине сниппет ms3OptionsColor рисует свотчи. Select собирает чанк tplMs3OptionsColorSelect. Фильтр рисует тип ms3oc. Параметры и чанки: Сниппеты.

Стили читают [data-ms3oc-swatch], [data-empty], [data-size]. Классы темы не обязательны.

После AJAX-вставки [data-ms3oc-select] вызовите window.ms3ocInitColorSelects().

CSS и JS

При ms3optionscolor_frontend_css=Да плагин и сниппет подключают css/web/main.css. Select нужен отдельно:

fenom

<link rel="stylesheet" href="{'assets_url' | option}components/ms3optionscolor/css/web/main.css">
<script src="{'assets_url' | option}components/ms3optionscolor/js/web/select.js"></script>

modx

<link rel="stylesheet" href="[[++assets_url]]components/ms3optionscolor/css/web/main.css">
<script src="[[++assets_url]]components/ms3optionscolor/js/web/select.js"></script>

select.js ищет [data-ms3oc-select]. При jQuery + Select2 строит список со свотчами. Иначе остаётся обычный <select> с data-ms3oc-select-plain (native=1 / data-ms3oc-native).

Размер свотча задаёт data-size: sm, md, lg. Без атрибута размер 1.75rem.

Страница товара

fenom

{'!ms3OptionsColor' | snippet : [
  'product' => $_modx->resource.id,
  'options' => 'color',
  'tpl' => 'tplMs3OptionsColor'
]}

modx

[[!ms3OptionsColor?
  &product=`[[*id]]`
  &options=`color`
  &tpl=`tplMs3OptionsColor`
]]

Штатный tplMs3OptionsColor рисует <span data-ms3oc-swatch> с data-color, data-pattern, data-ral, data-status. Пустой свотч получает data-empty. Поля строки: сниппет ms3OptionsColor.

Select

fenom

{$_modx->getChunk('tplMs3OptionsColorSelect', [
  'product' => $_modx->resource.id,
  'option_key' => 'color',
  'caption' => 'Цвет',
  'placeholder' => 'Выберите цвет',
  'native' => 1
])}

modx

[[$tplMs3OptionsColorSelect?
  &product=`[[*id]]`
  &option_key=`color`
  &caption=`Цвет`
  &placeholder=`Выберите цвет`
  &native=`1`
]]

Чанк вызывает сниппет с tplMs3OptionsColorSelectOption. Параметры tpl / optionTpl подменяют чанк одной option. Имя поля формы: options[color] (или ваш option_key).

Параметр чанка	Назначение
product	ID товара
option_key	Ключ опции, по умолчанию color
caption	Подпись label
placeholder	Пустая option в начале
native	1 отключает Select2
selected / selectedValue	Предвыбранное value
activeOnly	Как у сниппета
includeUnset	В чанке по умолчанию 1. У сниппета auto: 1 только при byOptions, иначе 0
multiple / required	Атрибуты <select>
field_id	id элемента

Каталог

На листинге передайте ID товара из строки:

fenom

{'!ms3OptionsColor' | snippet : [
  'product' => $id,
  'options' => 'color',
  'tpl' => 'tplMs3OptionsColor',
  'limit' => 6
]}

modx

[[!ms3OptionsColor?
  &product=`[[+id]]`
  &options=`color`
  &tpl=`tplMs3OptionsColor`
  &limit=`6`
]]

byOptions

Когда значения уже есть (корзина, свой JSON), не читайте опции товара из базы:

fenom

{set $colors = $_modx->runSnippet('!ms3OptionsColor', [
  'product' => $product.id,
  'byOptions' => json_encode($product.options),
  'return' => 'data'
])}

modx

[[!ms3OptionsColor?
  &product=`[[+id]]`
  &byOptions=`{"color":["Синий","Чёрный"]}`
  &return=`data`
]]

byOptions это JSON-строка. В чанке корзины удобнее Fenom и runSnippet. В тегах MODX передайте уже сериализованный JSON.

Корзина

Чанк tplMs3OptionsColorCart показывает три ветки:

Строка корзины	Поведение
Есть options._variant_id	Свотч color без смены опции. Подпись size, если есть. Без color блок свотча не рисуется. Нет cart/changeOption. Ссылка «изменить вариант» ведёт на товар ?variant=ID
Bundle (options.msbundles / bundle_hash)	Без смены опции. Свотч при options.color. Иначе один цвет из product.color или все цвета товара. Нет cart/changeOption
Обычная позиция	Если у товара есть опция color, <select> + cart/changeOption виден даже без options.color в строке. Свотч и подпись только когда цвет уже выбран. Select размера только если options.size уже задан

CSS витрины должен быть подключён. Иначе свотч в корзине часто с нулевой шириной.

Чанк выводит свотч цвета и подпись размера. Другие ключи опций не показывает. Поля варианта _variant_id, цена и канонические options остаются у ms3variants.

tplMs3OptionsColorCart это полный шаблон корзины (tpl.msCart: $products, qty, cart/clean). Назначьте его как tpl сниппета корзины, не вставляйте внутрь строки. Готового фрагмента-строки в пакете нет.

mFilter и ms3variants

• mFilter — тип фильтра ms3oc, Filter Set, чанк ряда
• ms3variants — variants[].swatches в каталоге

Свой чанк свотча

Минимальный контракт для CSS и select (цвет и паттерн задаются через data-color / data-pattern, отрисовку делает main.css):

fenom

<span data-ms3oc-swatch
      {if !$color && !$pattern}data-empty{/if}
      {if $pattern}data-has-pattern{/if}
      data-option="{$option_key | escape}"
      data-value="{$value | escape}"
      data-color="{if $color}#{$color | escape}{/if}"
      data-pattern="{$pattern | escape}"
      data-ral="{$ral | escape}"
      data-status="{$status ?: 'active'}">
</span>

modx

<span data-ms3oc-swatch[[+color:empty=`[[+pattern:empty=` data-empty`]]`]][[+pattern:notempty=` data-has-pattern`]]
      data-option="[[+option_key]]"
      data-value="[[+value]]"
      data-color="[[+color:notempty=`#[[+color]]`]]"
      data-pattern="[[+pattern]]"
      data-ral="[[+ral]]"
      data-status="[[+status:default=`active`]]"></span>

Классы темы можно менять. JS select и штатный CSS читают data-ms3oc-*. Штатные чанки пакета написаны на Fenom.