Бесплатный компонент «Товар с ценой зависимой от опции» предназначен для смены цены, размера скидки, веса и габаритов товара в зависимости от одного параметра товара. Компонет позволяет также менять картинку товара в зависимости от выбранной опции.
В примере ниже видно, как меняется заголовок и цена товара в зависимости от веса.
150 грамм
1,5 килограмма
Даныне для выделенных красными рамками элементов передаются в карточку товара с помощью данного компонента.
Чтобы при смене цены менялась и картинка товара, вам необходимо подключить интеграцию со слаайдером Swiper — ещё одним нашим бесплатным компонентом. Как это сделать, рассмотрим ниже.
Прежде чем читать инструкцию далее, настоятельно рекомендуем просмотреть видеообзор по ссылке. Это займёт менее 15 минут, и вы получите общее представление о компоненте, его работе и о том, как вам подготовить данные для него.
Чтобы воспользоваться компонентом «Товар с ценой зависимой от опции» вам первым делом нужно создать карточку товара. Вы размещаете все необходимые блоки, а затем уже вставляете компонент.
Когда компонент подключен, передаём ему данные.
Порядок действий:
Данные передаются в определённом формате. Для удобства формирования правильной записи с данными мы используем Google Таблицы.
Пример Google Таблицы с данными по продукту вы можете посмотреть по ссылке. Таблица откроется на вкладке product. Помимо прочих данных о продукте там будет колонка «Параметры цены».
Именно в ней данные хранятся в правильно закодированном виде.
На вкладке product в колонке «Параметры цены» в одной ячейке по специальной формуле собраны все варианты цены и зависимые от неё параметры — для каждой цены свои. Таблицу вы можете скопировать для себя (в свой Google Disk под своей учётной записью Google) и воспроизвести для своих товаров.
Исходные данные по каждой цене находятся во вкладке Price той же таблицы. Как это выглядит в нашем примере, вы можете увидеть на скриншоте:
Вы видите, что сначала идут параметры, затем в колонке К собирается код для одной цены. А код для всех цен одного товара собирается другой формулой на вкладке product.
Для работы компонента требуется 7 параметров. Рассмотрим каждый.
Параметры 1, 3, 4 и 5 выводятся на экран в карточке.
Параметр 2 используется для сортировки и отправки через CDEK.
В рамках данного плагина изначально нужен был числовой формат для первого параметра. Он использовался для сортировки — чтобы можно было размещать товары в порядке увеличения или уменьшения веса. Так уж совпало, что параметр 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.
Вы можете использовать любой удобный именно вам способ для создания записи нужного формата. Мы же находим наиболее удобным использование таблиц, которые являются базой данных по продуктам. Преимущество этого способа в том, что, меняя данные в базах, вы можете легко менять данные на сайте после синхронизации баз.
Повторим важное:
После того как мы собрали код для каждой опции продукта на вкладке Price, мы собираем единый код на вкладке product, колонке «Параметры цены», разделяя их с помощью двойного амперсанта (&&), это тоже уникальный разделитель в нашем коде.
Теперь, когда мы сформировали правильный код для продукта, мы можем его передать в компонент, чтобы он распознал код и вывел данные на странице.
В настройках компонента есть следующие поля:
На данном этапе нам надо ввести код с данными для продукта, разделители, а затем подменить классы каждого компонента на те, что указаны в пункте 5.
Пример:
При подмене класса имени происходит не затирание всего названия, а добавление параметра после запятой.
Далее мы выбираем способ передачи данных в корзину. Простой способ, понятный стандартному компоненту Корзина из Creatium, — «Добавить параметр к имени». Вы уже видели это:
Более сложный способ — в формате json. Туда можно поместить данные не только по одному параметру, а большему их количеству. Они все добавляются к имени. И есть способ уже в корзине вытащить эти данные и использовать на её странице. Этому будет посвящено отдельное видео и описание.
Последний момент (7) — «Включить Get-параметры». Если вы поставите галочку, то в url страницы будет указываться параметр, влияющий на изменение других параметров. Это нужно для истории просмотров страницы. В настоящее время он не полностью доработан: смена Get-параметра в url не ведёт к смене отображения опции в карточке: вы нажимаете в браузере стрелку «Обратно», url меняется, а карточка показывает ту же цену и выглядит так, будто ничего не происходит.
Стандартно для Creatium
В планах добавить адаптивность, чтобы можно было изменять размер элементов в зависимости от размера экрана.
Чтобы подключить интеграцию со Swiper, вам нужно
На картинке выше мы видим ID — Integration1.
Теперь нам надо проставить тот же ID в компоненте Swiper. Для этого
Возможна интеграция не одного, а многих компонентов сразу через переменные.
Необходимые предосторожности
Есть ряд особенностей работы с интегрированными картинками, которые нужно соблюдать, чтобы не было проблем в работе интеграции.
Для интеграции нужны номера из параметра 7 (Колонка J вкладки Price). Они совпадают с номерами картинок из галереи для Swiper. В предложеннм файле Google Таблиц вы можете их увидеть на вкладке produtct_gallery в колонке H.
Но простого совпадения номеров недостаточно. Второе условие состоит в том, что последовательность картинок и последовательность изменения параметров должны совпадать. Во вкладке product_gallery в колонке H благодаря специальной формуле номера последовательно увеличиваются на 1, начинаясь с 0. То есть вы не можете просто поменять местами последовательность картинок, оставив им прежние номера. Номера изменятся. Вам придётся следить ещё за тем, чтобы порядок картинок в галерее соответствовал порядку задающего изменение цееы параметра.
И последний момент: интеграция лучшего всего протестирована при типе 3 подключения баз в компоненте Swiper.
Если вы уже используете компонент Swiper, уже подключились к базам по первому или второму типу и у вас возникнут сложности, обращайтесь в поддержку. Будем решать.
Если вам нужна рассчитывать цену в зависимости от нескольких параметров, вам подойдет платный компонент — Цена зависящая от нескольких опций. Смотрите его по ссылке.
Работает на Creatium