ИнструкцияДанный код корректно работает и отображается в том случае, если для одного товара у вас указан один вариант, где в свойствах «Вид управляющего элемента» выбран как «Кнопки». Либо может быть несколько вариантов, но «Вид управляющего элемента» должен быть выбран как «Выпадающий список»
- Добавляем нужный блок на страницу из раздела «Магазин», переходим в «Настройки» — «Карточки» — ставим галочку «Показывать опции товара рядом с миниатюрой в списке товаров»
- Открываем нужный товар в каталоге товаров — раскрываем пункт «Варианты товара» — «Добавить свойство» — указываем своё название и «Вид управляющего элемента» выбираем как «Кнопки» — сохраняем
- Добавляем нужное количество таких свойств и заполняем их информацией
- Копируем код ниже и вставляем в блок T123
- Загружаем свои иконки для вариантов, для этого в любом зеро-блоке добавляем элемент «Image» — загружаем иконку — жмём правой кнопкой мыши — Copy Image Url. Повторяем нужное количество раз. Можно скрыть эти иконки в панеле слоёв и увести за область контента, но не удаляйте.
- В коде, который мы скопировали в 3 пункте, ориентируясь по комментариям добавляем ссылки на свои иконки
Если у вас в вариантах товара добавлено не 3 свойства, как у меня, а 4 и больше, то нужно продублировать часть кода, которая начинается от комментария
«№ иконка» и до закрывающей скобки
}. Также поменять в это части кода
nth-child (№) номер на свой порядковый