Вместо li используй input type radio. Используется стандартное поле товара
color.
Тут можешь посмотреть пример:
https://ideecasa.ru/sushilka-dlya-belya-foppapedre...<div class="option-group">
<label class="col-md-2 control-label" for="options[color]">Цвет: <span class="selected-color">{$_modx->resource.color[0]}</span></label>
<div class="list">
{foreach $_modx->resource.color as $value}
{set $color_translit = $value | translit | replace : "/" : "_"}
<span>
<input type="radio" name="options[color]" id="{$color_translit}" value="{$value}" {if $value@index == 0}checked="checked"{/if}>
<label for="{$color_translit}" class="color-item" style="background-image:url(/assets/templates/images/background/{$color_translit}.gif);" title="{$value}"></label>
</span>
{/foreach}
</div>
</div>
Сниппет
translit:
<?php
$result = $input;
$options = array('friendly_alias_word_delimiter'=>'_');
$generator = $modx->newObject('modResource');
$result = $generator->cleanAlias($result, $options);
return $result;
