Для чего нужен
Бесплатный компонент «Товар с ценой зависимой от опции» предназначен для смены цены, размера скидки, веса и габаритов товара в зависимости от одного параметра товара. Компонет позволяет также менять картинку товара в зависимости от выбранной опции.
В примере ниже видно, как меняется заголовок и цена товара в зависимости от веса.
150 грамм
1,5 килограмма
Даныне для выделенных красными рамками элементов передаются в карточку товара с помощью данного компонента.
Чтобы при смене цены менялась и картинка товара, вам необходимо подключить интеграцию со слаайдером Swiper — ещё одним нашим бесплатным компонентом. Как это сделать, рассмотрим ниже.
Прежде чем читать инструкцию далее, настоятельно рекомендуем просмотреть видеообзор по ссылке. Это займёт менее 15 минут, и вы получите общее представление о компоненте, его работе и о том, как вам подготовить данные для него.
Интеграция компонента с карточкой товара
Чтобы воспользоваться компонентом «Товар с ценой зависимой от опции» вам первым делом нужно создать карточку товара. Вы размещаете все необходимые блоки, а затем уже вставляете компонент.
Когда компонент подключен, передаём ему данные.
Порядок действий:
- Кликаем по настройкам.
- Вставляем код в поле «Передайте данные с опциями».
Данные передаются в определённом формате. Для удобства формирования правильной записи с данными мы используем Google Таблицы.
Пример Google Таблицы с данными по продукту вы можете посмотреть по ссылке. Таблица откроется на вкладке product. Помимо прочих данных о продукте там будет колонка «Параметры цены».
Именно в ней данные хранятся в правильно закодированном виде.
Как сформировать правильный набор данных
На вкладке product в колонке «Параметры цены» в одной ячейке по специальной формуле собраны все варианты цены и зависимые от неё параметры — для каждой цены свои. Таблицу вы можете скопировать для себя (в свой Google Disk под своей учётной записью Google) и воспроизвести для своих товаров.
Исходные данные по каждой цене находятся во вкладке Price той же таблицы. Как это выглядит в нашем примере, вы можете увидеть на скриншоте:
Вы видите, что сначала идут параметры, затем в колонке К собирается код для одной цены. А код для всех цен одного товара собирается другой формулой на вкладке product.
Для работы компонента требуется 7 параметров. Рассмотрим каждый.
Параметры 1, 3, 4 и 5 выводятся на экран в карточке.
Параметр 2 используется для сортировки и отправки через CDEK.
* Примечание относительно параметра 2.
В рамках данного плагина изначально нужен был числовой формат для первого параметра. Он использовался для сортировки — чтобы можно было размещать товары в порядке увеличения или уменьшения веса. Так уж совпало, что параметр 2 стал использоваться для передачи веса в другой компонент — компонент для расчёта стоимости доставки CDEK. И теперь это всегда вес в граммах. Если же вы не собираетесь использовать наш компонент для рассчёта стоимости доставки товара через CDEK или, например, не используете CDEK и не планируете, то вы можете использовать этот параметр в целях сортировки как числовой вариант для первого параметра, который является текстовым.
Параметр 7 нужен для интеграции со свайпером, который позволит выводить для каждого товара свою картинку. И первый объект в нём всегда имеет номер 0.
Вы можете менять первый параметр. Вместо веса вы можете, например, указать цвет. Остальные параметры, их последовательность обязательны.
Все эти данные записываются в одну строку, и это выглядит так:
150 гр|150|445|578,5|23%|11”11”15|0
Знак «|» мы используем как разделитель параметров.
Допустим, нам не нужны габаритные размеры, тогда параметр 6 мы оставляем пустым и получаем такую запись: 375 гр|375|590|767|23%||1 (два разделителся рядом).
В Google Таблицах мы это получим автоматически:
Вы можете скопировать образец таблицы по ссылке в Google Таблицах. Смотрите пример во вкладке Price.
Формула в Google Таблицах для передачи данных в правильном формате
Вы можете использовать любой удобный именно вам способ для создания записи нужного формата. Мы же находим наиболее удобным использование таблиц, которые являются базой данных по продуктам. Преимущество этого способа в том, что, меняя данные в базах, вы можете легко менять данные на сайте после синхронизации баз.
Повторим важное:
- Вы можете оставлять пустыми места от ненужных вам параметров: старую цену, величину скидки, габаритные размеры. Пропущенные данные отражаются в записи правильного формата следующими друг за другом разделителями без пробелов или иных символов.
- Вы не меняете ни последовательности параметров, ни их места в записи.
- В качестве разделителя вы можете выбрать любой символ, который вы не используете ни в одном из своих параметров. Итоговая запись должна иметь 6 таких разделителей — не больше и не меньше.
После того как мы собрали код для каждой опции продукта на вкладке Price, мы собираем единый код на вкладке product, колонке «Параметры цены», разделяя их с помощью двойного амперсанта (&&), это тоже уникальный разделитель в нашем коде.
Настройка функционала компонента
Теперь, когда мы сформировали правильный код для продукта, мы можем его передать в компонент, чтобы он распознал код и вывел данные на странице.
В настройках компонента есть следующие поля:
- Параметры данных с опциями — код с данными.
- Разделитель опций — в нашем случае &&.
- Разделитель значений одной опции — в нашем случае |.
- Галочка для интеграции с бесплатным компонентом Swiper, если он используется.
- Список классов CSS для подмены.
- Способ передачи в корзину.
- Включить Get-параметры.
На данном этапе нам надо ввести код с данными для продукта, разделители, а затем подменить классы каждого компонента на те, что указаны в пункте 5.
Пример:
- Смотрим класс для подмены цены и копируем его.
- Заходим в настройки цены (реальная цена для покупателя; цена уже со скидкой, если такая есть). Для этого последовательно кликаем на поля и кнопки.
- Подставляем класс в поле «Классы компонента».
При подмене класса имени происходит не затирание всего названия, а добавление параметра после запятой.
Далее мы выбираем способ передачи данных в корзину. Простой способ, понятный стандартному компоненту Корзина из Creatium, — «Добавить параметр к имени». Вы уже видели это:
Более сложный способ — в формате json. Туда можно поместить данные не только по одному параметру, а большему их количеству. Они все добавляются к имени. И есть способ уже в корзине вытащить эти данные и использовать на её странице. Этому будет посвящено отдельное видео и описание.
Последний момент (7) — «Включить Get-параметры». Если вы поставите галочку, то в url страницы будет указываться параметр, влияющий на изменение других параметров. Это нужно для истории просмотров страницы. В настоящее время он не полностью доработан: смена Get-параметра в url не ведёт к смене отображения опции в карточке: вы нажимаете в браузере стрелку «Обратно», url меняется, а карточка показывает ту же цену и выглядит так, будто ничего не происходит.
Настройка оформления компонента
Стандартно для Creatium
- Отступы между элементами
- Вертикальные отступы (внутри элементов)
- Горизонтальные отступы (внутри элементов)
- Размер шрифта
- Цвет фона
- Цвет обводки (границы)
- Цвет текста
- Цвет фона при наведении
- Цвет обводки (границы) при наведении
- Цвет шрифта при наведении.
В планах добавить адаптивность, чтобы можно было изменять размер элементов в зависимости от размера экрана.
Подключение интеграции для смены картинки в зависимости от опции
Чтобы подключить интеграцию со Swiper, вам нужно
- Поставить галочку перед пуктом «Включить интеграцию со Swiper».
- В появившемся окне вписать ID swiper. Под ID swiper подразумевается уникальное буквенно-цифровое сочетание, которое при интеграции компонентов для совместной работы в карточке товара ставится в оба компонента, работающих с этой карточкой.
На картинке выше мы видим ID — Integration1.
Теперь нам надо проставить тот же ID в компоненте Swiper. Для этого
- Кликаем по компоненту и заходим в его настройки.
- Ставим галочку на пункт «Включить интеграцию с другими блоками.
- Записываем в поле «Название для интеграции» ту же комбинацию букв и цифр, что и в поле ID Swiper выше.
Возможна интеграция не одного, а многих компонентов сразу через переменные.
Необходимые предосторожности
Есть ряд особенностей работы с интегрированными картинками, которые нужно соблюдать, чтобы не было проблем в работе интеграции.
Для интеграции нужны номера из параметра 7 (Колонка J вкладки Price). Они совпадают с номерами картинок из галереи для Swiper. В предложеннм файле Google Таблиц вы можете их увидеть на вкладке produtct_gallery в колонке H.
Но простого совпадения номеров недостаточно. Второе условие состоит в том, что последовательность картинок и последовательность изменения параметров должны совпадать. Во вкладке product_gallery в колонке H благодаря специальной формуле номера последовательно увеличиваются на 1, начинаясь с 0. То есть вы не можете просто поменять местами последовательность картинок, оставив им прежние номера. Номера изменятся. Вам придётся следить ещё за тем, чтобы порядок картинок в галерее соответствовал порядку задающего изменение цееы параметра.
И последний момент: интеграция лучшего всего протестирована при типе 3 подключения баз в компоненте Swiper.
Если вы уже используете компонент Swiper, уже подключились к базам по первому или второму типу и у вас возникнут сложности, обращайтесь в поддержку. Будем решать.
Совместно используемые бесплатные компоненты
Компонент для расчёта цены в зависимости от четырёх опций
Если вам нужна рассчитывать цену в зависимости от нескольких параметров, вам подойдет платный компонент — Цена зависящая от нескольких опций. Смотрите его по ссылке.
