Теперь, когда мы сформировали правильный код для продукта, мы можем его передать в компонент, чтобы он распознал код и вывел данные на странице.
В настройках компонента есть следующие поля:
- Параметры данных с опциями — код с данными.
- Разделитель опций — в нашем случае &&.
- Разделитель значений одной опции — в нашем случае |.
- Галочка для интеграции с бесплатным компонентом Swiper, если он используется.
- Список классов CSS для подмены.
- Способ передачи в корзину.
- Включить Get-параметры.
На данном этапе нам надо ввести код с данными для продукта, разделители, а затем подменить классы каждого компонента на те, что указаны в пункте 5.
Пример:
-
Смотрим класс для подмены цены и копируем его.
-
Заходим в настройки цены (реальная цена для покупателя; цена уже со скидкой, если такая есть). Для этого последовательно кликаем на поля и кнопки.
Последловательность кликов для подмены класса у цены
-
Подставляем класс в поле «Классы компонента».
При подмене класса имени происходит не затирание всего названия, а добавление параметра после запятой.
Далее мы выбираем способ передачи данных в корзину. Простой способ, понятный стандартному компоненту Корзина из Creatium, — «Добавить параметр к имени». Вы уже видели это:
Видоизменение заголовка товара в зависимости от компонента
Более сложный способ — в формате json. Туда можно поместить данные не только по одному параметру, а большему их количеству. Они все добавляются к имени. И есть способ уже в корзине вытащить эти данные и использовать на её странице. Этому будет посвящено отдельное видео и описание.
Последний момент (7) — «Включить Get-параметры». Если вы поставите галочку, то в url страницы будет указываться параметр, влияющий на изменение других параметров. Это нужно для истории просмотров страницы. В настоящее время он не полностью доработан: смена Get-параметра в url не ведёт к смене отображения опции в карточке: вы нажимаете в браузере стрелку «Обратно», url меняется, а карточка показывает ту же цену и выглядит так, будто ничего не происходит.
