Порядок действий при подключении компонента
Чтобы воспользоваться компонентом «Товар с ценой зависимой от опции» вам первым делом нужно создать карточку товара. Вы размещаете все необходимые блоки, а затем уже вставляете компонент.
Когда компонент подключен, передаём ему данные.
Передача данных в компонен
Порядок действий:
- Кликаем по настройкам.
- Вставляем код в поле «Передайте данные с опциями».
Данные передаются в определённом формате. Для удобства формирования правильной записи с данными мы используем Google Таблицы.
Пример Google Таблицы с данными по продукту вы можете посмотреть по ссылке. Таблица откроется на вкладке product. Помимо прочих данных о продукте там будет колонка «Параметры цены».
Пример строки в базе данных
Именно в ней данные хранятся в правильно закодированном виде.
Как сформировать правильный набор данных
На вкладке product в колонке «Параметры цены» в одной ячейке по специальной формуле собраны все варианты цены и зависимые от неё параметры — для каждой цены свои. Таблицу вы можете скопировать для себя (в свой Google Disk под своей учётной записью Google) и воспроизвести для своих товаров.
Исходные данные по каждой цене находятся во вкладке Price той же таблицы. Как это выглядит в нашем примере, вы можете увидеть на скриншоте:
База данных со строками параметров для каждой опции
Вы видите, что сначала идут параметры, затем в колонке К собирается код для одной цены. А код для всех цен одного товара собирается другой формулой на вкладке product.
Для работы компонента требуется 7 параметров. Рассмотрим каждый.
| Номер | Параметры | Пример | Класс CSS на сайте |
|---|---|---|---|
| 1 | Параметр, на основе которого меняются другие параметры. Текстовый формат. | 10 кг | wight_text |
| 2 | Вес в граммах для CDEK*, всегда числовой формат. | 10000 | wight_in_gramm |
| 3 | Цена товара со скидкой | 12800 | price |
| 4 | Цена товара без скидки | 16640 | price_old |
| 5 | Величина скидки | 23% | sale |
| 6 | Размеры | 303050 | sizes |
| 7 | Номер | 6 | number |
Параметры 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 Таблицах для передачи данных в правильном формате
Нужный формат данных можно создавать автоматически в Google Таблицах по формуле:
Формула в Google Таблицах для записи параметров в правильном формате
Параметры формулы:
- Разделитель. Мы используем в качестве разделителя “|”, т.к. не используем этот символ в параметрах, из которых собираем код.
- ЛОЖЬ — указывает, что если ячейка пустая, то её содержимое всё равно учитывается.
- Диапазон значений — 7 ячеек с параметрами, первая и последняя ячейки через двоеточие.
Итог выполнения формулы выглядит так: 150 гр|150|445|578,5|23%|11”11”15|0
Скриншот итоговой записи для одной опции
Вы можете использовать любой удобный именно вам способ для создания записи нужного формата. Мы же находим наиболее удобным использование таблиц, которые являются базой данных по продуктам. Преимущество этого способа в том, что, меняя данные в базах, вы можете легко менять данные на сайте после синхронизации баз.
Повторим важное:
- Вы можете оставлять пустыми места от ненужных вам параметров: старую цену, величину скидки, габаритные размеры. Пропущенные данные отражаются в записи правильного формата следующими друг за другом разделителями без пробелов или иных символов.
- Вы не меняете ни последовательности параметров, ни их места в записи.
- В качестве разделителя вы можете выбрать любой символ, который вы не используете ни в одном из своих параметров. Итоговая запись должна иметь 6 таких разделителей — не больше и не меньше.
После того как мы собрали код для каждой опции продукта на вкладке Price, мы собираем единый код на вкладке product, колонке «Параметры цены», разделяя их с помощью двойного амперсанта (&&), это тоже уникальный разделитель в нашем коде.
