Представим, есть задача реализовать продукт с несколькими вариациями.
На сайте создается блок, состоящий из названия, фото, цены товара и кнопок, по клику по которым выбирается вариант с последующим изменением фото, цены на странице. При добавлении в корзину к названию продукта, добавляется уточняющая информация о выбранном варианте:
Стандартно в редакторе предусмотрено создание одной карточки товара под одну вариацию. Решение в данной статье позволит создать одну карточку товара со всеми его вариантами (которые могут отличаться цветом, размером и т.д.), без дублей.
Итак, приступим :)
Шаг 1: Создание карточки товара (основа)
Для начала создается стандартная карточка товара, подробнее в статье
«Kак добавить карточку товара?»
Как результат, можно создать блок следующего вида:
❗ Хотим отметить, что решение в данной статье подходит только для тех блоков – карточек товара, которые являются частью секции с блоками.
Ее можно найти среди шаблонов в редакторе:
Шаг 2: Добавление кнопок для выбора варианта товара/услуги
После настройки карточки товара необходимо добавить простой блок или колонки с классом color и наполнить кнопками выбора вариантов товара:
colorОформленным кнопкам необходимо задать действие "Ничего не делать":
🚀Совет: чтобы побудить будущих посетителей кликнуть на кнопку выбора, можно установить фразу «Не выбран» в качестве цены товара:
Шаг 3: Добавление кода в кнопки
На данном этапе можно определиться с тем, что необходимо менять в товаре. Например, отобразить в корзине вариант выбора (название товара), цену и фото. Для этой цели используется код:
<div class="name" hidden>
Имя товара, вариант
</div>
<div class="cost" hidden>
999 руб.
</div>
<div class="pht" hidden>
полная_ссылка_на_фото
</div>
Текст, что будет отображаться в кнопкеОн устанавливается в содержимое кнопки:
📝Если рассмотреть код по частям, то строки отвечают за:
- название товара с добавлением выбранного варианта:
<div class="name" hidden>
Имя товара, вариант
</div>- цену варианта товара:
<div class="cost" hidden>
999 руб.
</div>- фото варианта:
<div class="pht" hidden>
полная_ссылка_на_фото
</div>- текст, отображаемый в кнопке на странице, добавляется вне кода, в конце
Вы можете использовать не все элементы, а собрать свой код из вышеперечисленных блоков, добавляя их один за другим в содержимое кнопок.
Шаг 4: Получение ссылки на фото и ее добавление в код
Если предполагается выбор товара с последующей сменой фото на странице и в корзине, то дополнительно в редакторе загружаются все фото вариантов товара в виджеты «Картинка».
Их расположение на странице может быть любым – в дальнейшем их можно будет удалить. Данное действие загружает необходимые изображения на сервер платформы.
Публикуем изменения и переходим на страницу – необходимо извлечь прямые ссылки на изображения. Для этого:
- кликаем правой кнопкой мыши по изображению и выбираем пункт «Открыть картинку в новой вкладке»
- копируем адрес на изображение из адресной строки браузера:
Когда все ссылки на изображения получены, можно их добавить в коде соответствующих кнопок, в блоке с классом pht:
Шаг 5: Установка кода в плагин страницы
Следующий шаг - разместить в настройках страницы, в разделе «Метрика и скрипты», в плагине «Произвольный код» - поле «Произвольный код BODY» скрипт.
Код можно скопировать по ссылке.
Готово! 😊 Можно посмотреть результат на опубликованной странице:
Возможные варианты применения:
1) Выбор товара по изображению/цвету в кнопках, без текста:
В данном примере картинки размещены в фон виджетов кнопок. Сами кнопки содержат только код, без «Текста, что будет отображаться в кнопке», описанный в шаге 3. Они оформлены только отступами:
Вместо картинки в фоне можно использовать цвет. Для этого через настройки кнопки «Гаечный ключ» настраивается вид на вкладке «Цвета», далее добавляются отступы для придания нужного размера.
2) Выбор услуги без применения картинок - изменяется только цена и название:
Подробная реализация данного вида карточки товара описана в статье нашего блога - «Выбор цвета/размера или других характеристик в одной карточке товара»