Меняем внешний вид отображения вариантов товара

Портфолио

YouTube

Ресурсы

Поиск

Главная
/
Модификации
/
Стилизация свойств вариантов товара

Смотрите подробную инструкцию и код ниже

Стилизация свойств вариантов товара

Смотреть

Инструкция

Данный код корректно работает и отображается в том случае, если для одного товара у вас указан один вариант, где в свойствах «Вид управляющего элемента» выбран как «Кнопки». Либо может быть несколько вариантов, но «Вид управляющего элемента» должен быть выбран как «Выпадающий список»

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

Если у вас в вариантах товара добавлено не 3 свойства, как у меня, а 4 и больше, то нужно продублировать часть кода, которая начинается от комментария «№ иконка» и до закрывающей скобки }. Также поменять в это части кода nth-child (№) номер на свой порядковый

Готовый код

Здесь вы можете скопировать готовый код и также почитать подробные комментарии к нему

   <!--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>