Как известно, в InSales варианты товара - это массив, относящийся к товару, и вариант определяется набором значений свойств.
При разработке шаблона магазина это создает определенные трудности при разбивке линейного списка вариантов на по сути n-мерную матрицу выбора значений свойств этого варианта. С наших стандартных темах эта разбивка производится внутри скрипта common.js, общего для всех магазинов на платформе.
Чтобы облегчить веб-мастерам эту задачу, мы разработали новый скрипт, разбивающий массив вариантов на матрицу свойств, работающий как вместе с common.js, так и отдельно от него и простой в настройке.
На момент написания статьи этот скрипт используется только в одной из наших тем оформления, а именно в теме Hi-Pink, она же "Тема радости".
Модуль selectDecorator содержит подробные комментарии о его использовании и будет обновляться в дальнейшем.
В частности, чтобы использовать скрипт в стандартном вызове скрипта, разбивающего выбор варианта на несколько select'ов можно указать ему массив настроек:
<script>
var $settings = {
template: {
span: 'Название свойства, выбор которого вывести как span со значением',
radio: 'Название свойства, выбор которого вывести как input type=radio',
color: 'Название свойства, выбор которого вывести как цветной квадратик',
image: 'Название свойства, выбор которого вывести изображением из раздела Файлы'
},
firstOption: true, //если первого варианта товара нет в наличии, то выбираем первую по порядку, которая в наличии
};
var product = {{product | json}};
var selector = new OptionSelectors('variant-select', { product: {{product | json}}, settings: $settings, callback: selectCallback});
</script>