Функционал JS. Селектор вариантов.

Как известно, в InSales вариант товара - это массив, относящийся к товару, и вариант определяется набором значений свойств.

Данный скрипт отвечает

• за правильное формирование доступных сочетаний свойств вариантов с учетом выбора посетителя
• за правильную стилизацию выбора значений свойств (выпадающий список, кнопки с картинками/значениями и т.д.)
• обработку выбора пользователя и переключение на нужный вариант товара
• переключение варианта товара, при переходе по ссылке вида www.shop_url.ru/product_url/?variant_id=product_id (например из Яндекс.Маркета)

Вызов

Происходит в шаблоне товара product.liquid конструкцией вида

var selectors = new InSales.OptionSelectors({
  selector: '#variant-select',
  product: {{ product | json }},
  settings: { настройки модуля }
});

где

selector - css-селектор стандартного выпадающего списка, в который выводит список вариантов (нужен на случай, если у пользователя отключен js). После него происходит вывод собранного селектора вариантов.

product - json товара

settings - объект с настройками модуля

Настройки

disable -блокирует выбор варианта, если ее осталось 0 на складе. По-умолчанию false.

default_type - вид селекторов, который применяется для всех свойств варианта по-умолчанию. По-умолчанию select

firstOption - выбирает первое доступное значение свойства. По-умолчанию false

labels - объект с измененными названиями свойств. Имеет вид 'название свойства в бэк-офисе': 'название селектора в карточке товара'. По-умолчанию пустой.

params - объект, описывающий какой внешний вид должен иметь селектор для данного свойства варианта. Имеет вид 'название свойства в бэк-офисе': 'внешний вид'. По-умолчанию пустой.

color - массив, содержащий пути к пользовательским файлам изображений. Ключ элемента массива - значение свойства, значение элемента массива - путь к картинке. По-умолчанию - пустой

image - объект с настройками, для блоков с изображениями из карточки товара. По-умолчанию содержит первое изображение из карточки товара, и все изображения, подпись к которым соответствует хотя бы одному значению свойств. Имеет поля

• size - размер изображения, который будет помещен в блок
• preview - размер изображения, который используется в галереи товара

collection - используем ли модуль в коллекции? По-умолчанию false. Для корректной работы требует обязательного указания data-атрибута data-product-id="{{ product.id }}" у формы, содержащей селектор вариантов.

Доступные варианты видов селекторов

select - выпадающий список значений свойства

span - блоки со значениями свойства

radio - группа переключателей

color - блоки с пользовательскими картинками

image - блоки с картинками из карточки товара

Важно!

Вариант image имеет следующие особенности:

• для изображений, которые нужно выводить в селектор, необходимо указать заголовки, соответствующих значениям свойств.
• если для какого-то значения нет соответствующего изображения, то в блок выводится первое изображение в товаре.

События

Любое взаимодействие с селектором вариантов вызывает событие

'onProductOption_Changed'

которое возвращает объект с полями:

variant - выбранный вариант. Объект.

jqObj - jQuery-объект исходного селектора, указанного в настройках модуля