Инструкция
Данный код корректно работает и отображается в том случае, если для одного товара у вас указан один вариант, где в свойствах «Вид управляющего элемента» выбран как «Кнопки». Либо может быть несколько вариантов, но «Вид управляющего элемента» должен быть выбран как «Выпадающий список»
Данный код корректно работает и отображается в том случае, если для одного товара у вас указан один вариант, где в свойствах «Вид управляющего элемента» выбран как «Кнопки». Либо может быть несколько вариантов, но «Вид управляющего элемента» должен быть выбран как «Выпадающий список»
- Добавляем нужный блок на страницу из раздела «Магазин», переходим в «Настройки» — «Карточки» — ставим галочку «Показывать опции товара рядом с миниатюрой в списке товаров»
- Открываем нужный товар в каталоге товаров — раскрываем пункт «Варианты товара» — «Добавить свойство» — указываем своё название и «Вид управляющего элемента» выбираем как «Кнопки» — сохраняем
- Добавляем нужное количество таких свойств и заполняем их информацией
- Копируем код ниже и вставляем в блок T123
- Загружаем свои иконки для вариантов, для этого в любом зеро-блоке добавляем элемент «Image» — загружаем иконку — жмём правой кнопкой мыши — Copy Image Url. Повторяем нужное количество раз. Можно скрыть эти иконки в панеле слоёв и увести за область контента, но не удаляйте.
- В коде, который мы скопировали в 3 пункте, ориентируясь по комментариям добавляем ссылки на свои иконки
Здесь вы можете скопировать готовый код и также почитать подробные комментарии к нему
<!--https://dsgnmax.ru/product-variants--> <style>
/*Меняем внешний вид отображения вариантов товара*/
/*Делаем значение варианта на одной строке с его свойством*/
.js-product .t-product__option {
display: flex;
justify-content: space-between;
margin-top: 0px !important;
margin-bottom: 0px !important;
}
.t-product__option-title {
text-wrap: nowrap;
}
/*Убираем отступы у вариантов*/
.js-product .t-product__option-variants_buttons .t-product__option-item_simple{
margin-bottom: 5px !important;
padding: 0px !important;
min-width: auto !important;
min-height: auto !important;
border: none !important;
background-color: transparent !important;
pointer-events: none;
font-family: 'Onest';
font-weight: 400;
}
/*Размер текста названия свойства и их названий*/
/*Название свойства*/
.js-product-edition-option-name{
font-size: 16px !important;
padding-left: 22px;
}
/*Значение свойства*/
.t-product__option-title_buttons{
font-size: 16px !important;
font-weight: 500;
}
@media screen and (max-width: 480px){
.t-product__option-title_buttons,
.js-product-edition-option-name{
font-size: 14px !important;
}
.js-store-prod-name{
font-size: 24px !important;
}
}
/*Отступ вниз от цены*/
.t-store__card__textwrapper{
margin-bottom: 15px !important;
}
/*Отступ вниз от цены в попапе*/
.t-store__prod-popup__price-wrapper{
margin-bottom: 15px !important;
}
/*Иконки у вариантов*/
/*Первая иконка*/
.js-product-controls-wrapper .js-product-edition-option:nth-child(1):before{
content: "";
display: block;
position: absolute;
background-image:url("https://static.tildacdn.com/tild6533-3564-4061-b266-316464613335/m2.svg");
background-size: cover;
top: 3px;
width: 16px;
height: 16px;
}
/*Вторая иконка*/
.js-product-controls-wrapper .js-product-edition-option:nth-child(2):before{
content: "";
display: block;
position: absolute;
background-image:url("https://static.tildacdn.com/tild3965-3633-4465-b538-313163653539/size.svg");
background-size: cover;
top: 3px;
width: 16px;
height: 16px;
}
/*Третья иконка*/
.js-product-controls-wrapper .js-product-edition-option:nth-child(3):before{
content: "";
display: block;
position: absolute;
background-image:url("https://static.tildacdn.com/tild6166-3566-4136-b661-356463376265/ip.svg");
background-size: cover;
top: 3px;
width: 16px;
height: 16px;
}
</style> 