[[msOptionsColor?options=`color`]]
{if $product.options?}
{set $colors = $_modx->runSnippet('!msOptionsColor',[
'product' => $product.id,
'byOptions' => json_encode($product.options),
'return' => 'data'
])}
{/if}
{if $colors?}
{foreach $colors as $row index=$index}
{if $row.pattern?}
<div>
<img alt="" title="{$row.value}" class="img-rounded" style="background-image:url({$row.pattern});width:25px;height:25px;">
</div>
{else}
<div>
<img alt="" title="{$row.value}" class="img-rounded" style="background-color:#{$row.color};width:25px;height:25px;">
</div>
{/if}
{$row.value}
{/foreach}
{/if}
Необходимо положить кастомный класс фильтрации в папку
/core/components/msearch2/custom/filters/
указывать в настрокае mse2_filters_handler_class класс msocFilters
[[!mFilter2?
&limit=`5`
&parents=`0`
&element=`msProducts`
&setMeta=`1`
&filters=`
ms|price:number,
parent:categories,
msoption|size,
ms|vendor:vendors,
msoc|color~value~color,
`
&showLog=`1`
&suggestionsRadio=`ms|vendor`
&_filterOptions=`{"autoLoad":0}`
&tpls=`tpl.msProducts.row,tpl.msProducts.row`
&class=`msProduct`
&sort=`ms|price:desc`
&tplOuter=`tpl.mFilter2.outer`
&tplFilter.outer.ms|price=`tpl.mFilter2.filter.slider`
&tplFilter.row.ms|price=`tpl.mFilter2.filter.number`
&tplFilter.outer.ms|vendor=`tpl.mFilter2.filter.select`
&tplFilter.row.ms|vendor=`tpl.mFilter2.filter.option`
&tplFilter.outer.msoc|color=`tpl.mFilter2.filter.outer`
&tplFilter.row.msoc|color=`tpl.mFilter2.filter.checkbox.color`
]]
После указания ключа опции перечисляем необходимые поля для выборки через разделитель ~
msoc|color~value~color
Вообщем обычный чанк, включает обработку поля title, в него у нас попадают значения заданные через разделитель.
{var $title = $title|split:'~'}
<label for="mse2_[[+table]][[+delimeter]][[+filter]]_[[+idx]]" class="[[+disabled]] checkbox-inline">
<span style="display:none;"> {$title[0]} </span>
<input type="checkbox" name="[[+filter_key]]" id="mse2_[[+table]][[+delimeter]][[+filter]]_[[+idx]]" value="[[+value]]" [[+checked]] [[+disabled]]/>
<div>
<img alt="" title="{$title[0]}" class="img-rounded" style="background-color:#{$title[1]};width:25px;height:25px;">
</div>
{$title[0]} <sup>[[+num]]</sup>
</label>