Смотрите подробную инструкцию и код ниже
Стилизация дополнительных опций в карточке товара
Если вы хотите использовать такую стилизацию в карточках товаров, которые открываются на отдельной странице, то весь этот код необходимо вставить в head сайта.
При этом, если у вас товары открываются в попапах, то при перезагрузке старницы, стили также слетят, поэтому рекомендую добавлять код сразу в head сайта
В коде прописаны дополнительные комментарии, по которым вам будет проще ориентироваться, также есть дополнительная таблица, с помощью которой можете немного расширить функционал кода
При этом, если у вас товары открываются в попапах, то при перезагрузке старницы, стили также слетят, поэтому рекомендую добавлять код сразу в head сайта
В коде прописаны дополнительные комментарии, по которым вам будет проще ориентироваться, также есть дополнительная таблица, с помощью которой можете немного расширить функционал кода
Код для модификации
<!--https://dsgnmax.ru/useful/additional-options--> <style>
:root{
/*Стили карточек опций*/
--bgColorOption: #f7f7f7; /*Фоновый цвет*/
--paddingOption: 15px; /*Внутренние отступы у карточки*/
--gapOption: 15px; /*Отступ между текстом и фото*/
--borderRadiusOption: 12px; /*Скругление углов*/
--outlineOption: 2px solid #15470A; /*Цвет обводки выбранной карточки*/
/*Иконка галочки при выбранной опции*/
--iconChecked: url(https://static.tildacdn.com/tild6463-6630-4166-b532-316166343735/checked.svg); /*Ссылка на иконку*/
--iconWidthChecked: 20px; /*Ширина иконки*/
--topIconChecked: 10px; /*Отступ сверху от самой карточки*/
--rightIconChecked: 10px; /*Отступ справа от самой карточки*/
}
/*Стили заголовка для дополнительных опций*/
.js-product-multioption .js-product-option-name{
font-size: 18px; /*Размер текста*/
font-weight: 500; /*Толщина*/
letter-spacing: -0.5px; /*Трекинг*/
margin-bottom: 15px; /*Отступ снизу*/
}
/*----------*/
/*Стили для родительского контейнера с чекбоксами (карточками)*/
.js-product-multioption .t-product__checkbox-wrap {
margin: 0 !important;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); /*перавое значение – это минимальная ширина карточки*/
gap: 15px; /*отступ между карточками*/
}
.js-product-multioption .t-checkbox__indicator {
display: none; /*Скрываем стандартный чекбокс*/
}
/*----------*/
/*Стили самих карточек*/
.js-product-multioption .t-checkbox__control {
display: flex;
flex-direction: column;
gap: var(--gapOption); /*Отступ между фото и названием*/
margin: 0 !important;
padding: var(--paddingOption); /*Внутренние отступы*/
background-color: var(--bgColorOption); /*Фоновый цвет*/
border-radius: var(--borderRadiusOption); /*Радиус скругления углов*/
position: relative;
}
/*Стили текста для названий доп. опций*/
.js-product-multioption .t-checkbox__control span{
font-size: 12px; /*Размер текста*/
line-height: 1.1; /*Межстрочка*/
font-weight: 400; /*Толщина*/
letter-spacing: -0.3px; /*Трекинг*/
}
/*Иконка галочки при выборе доп. опции*/
.js-product-multioption .t-checkbox__control:after{
content:"";
position: absolute;
top: var(--topIconChecked); /*Отступ сверху от самой карточки*/
right: var(--rightIconChecked); /*Отступ справа от самой карточки*/
display: block;
width: var(--iconWidthChecked); /*Ширина иконки*/
scale: 0;
aspect-ratio: 1 / 1;
background-image: var(--iconChecked); /*Иконка галочки*/
background-size: cover;
background-repeat: no-repeat;
background-position: center;
transition: all 0.2s ease-in; /*плавность анимации появления*/
transform-origin: center;
}
.js-product-multioption .t-checkbox {
scale: 0 !important; /*Изначальный размер иконки галочки*/
}
.js-product-multioption .t-checkbox__control:has(.t-checkbox:checked):after{
scale: 1; /*Размер галочки при выбранной опции*/
}
.js-product-multioption .t-checkbox__control:has(.t-checkbox:checked) {
outline: var(--outlineOption); /*Цвет обводки выбранной опции*/
}
/*----------*/
/* Общие настройки для фото опций */
.js-product-multioption .t-checkbox__control:before{
content:"";
display: block;
width: 100%; /*Ширина фотографии*/
aspect-ratio: 1 / 1; /*Соотношение сторон у фотографий опций*/
background-size: cover;
background-repeat: no-repeat;
}
/*Фото для конкретных опций*/
/*Здесь вы можете добавлять и удалять лишние строчки кода. Чтобы фото подгружались, необходимо указать точное название, как в примере и вставить ссылку на изображение*/
.js-product-multioption .t-checkbox__control:has(input[name="Котлета"]):before{
background-image: url(https://static.tildacdn.com/tild6533-6534-4763-a139-363638653530/1.png);
}
.js-product-multioption .t-checkbox__control:has(input[name="Лук"]):before{
background-image: url(https://static.tildacdn.com/tild3464-6635-4438-a165-643861623636/2.png);
}
.js-product-multioption .t-checkbox__control:has(input[name="Бекон"]):before{
background-image: url(https://static.tildacdn.com/tild6533-3931-4231-a134-363030653437/3.png);
}
.js-product-multioption .t-checkbox__control:has(input[name="Ветчина"]):before{
background-image: url(https://static.tildacdn.com/tild6636-3565-4363-b134-643063343232/4.png);
}
.js-product-multioption .t-checkbox__control:has(input[name="Сыр"]):before{
background-image: url(https://static.tildacdn.com/tild3734-3838-4136-b366-363233663463/5.png);
}
.js-product-multioption .t-checkbox__control:has(input[name="Помидоры"]):before{
background-image: url(https://static.tildacdn.com/tild3738-3230-4861-b763-323335613565/6.png);
}
.js-product-multioption .t-checkbox__control:has(input[name="Шампиньоны"]):before{
background-image: url(https://static.tildacdn.com/tild6566-3638-4636-b430-353365303432/7.png);
}
/*Соусы*/
.js-product-multioption .t-checkbox__control:has(input[name="Кетчуп"]):before{
background-image: url(https://static.tildacdn.com/tild6164-6239-4532-b861-316561623066/11.png);
}
.js-product-multioption .t-checkbox__control:has(input[name="Сырный"]):before{
background-image: url(https://static.tildacdn.com/tild3933-3963-4434-b436-343433663234/22.png);
}
.js-product-multioption .t-checkbox__control:has(input[name="Кисло-сладкий"]):before{
background-image: url(https://static.tildacdn.com/tild3138-6336-4430-b534-363164666433/33.png);
}
.js-product-multioption .t-checkbox__control:has(input[name="Острый"]):before{
background-image: url(https://static.tildacdn.com/tild6138-6332-4435-a366-653731326662/44.png);
}
/*----------*/
/*Стили для мобильных устройств*/
@media screen and (max-width: 480px){
/*Стили для родительского контейнера с чекбоксами (карточками)*/
.js-product-multioption .t-product__checkbox-wrap {
grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); /*перавое значение – это минимальная ширина карточки*/
gap: 10px; /*отступ между карточками*/
}
/*Стили текста для названий доп. опций*/
.js-product-multioption .t-checkbox__control span{
font-size: 10px; /*Размер текста*/
letter-spacing: -0.2px; /*Трекинг*/
overflow-wrap: anywhere; /*Если слово длинное, оно перенесется на другу строку*/
}
/*Стили заголовка для дополнительных опций*/
.js-product-multioption .js-product-option-name{
font-size: 18px; /*Размер текста*/
font-weight: 500; /*Толщина*/
letter-spacing: -0.5px; /*Трекинг*/
margin-bottom: 15px; /*Отступ снизу*/
}
}
</style> <!--https://dsgnmax.ru/useful/additional-options--> <style>
:root{
/*Стили карточек опций*/
--bgColorOption: #f7f7f7; /*Фоновый цвет*/
--paddingOption: 15px; /*Внутренние отступы у карточки*/
--gapOption: 15px; /*Отступ между текстом и фото*/
--borderRadiusOption: 12px; /*Скругление углов*/
--outlineOption: 2px solid #15470A; /*Цвет обводки выбранной карточки*/
/*Иконка галочки при выбранной опции*/
--iconChecked: url(https://static.tildacdn.com/tild6463-6630-4166-b532-316166343735/checked.svg); /*Ссылка на иконку*/
--iconWidthChecked: 20px; /*Ширина иконки*/
--topIconChecked: 10px; /*Отступ сверху от самой карточки*/
--rightIconChecked: 10px; /*Отступ справа от самой карточки*/
}
/*Стили заголовка для дополнительных опций*/
.js-product-multioption .js-product-option-name{
font-size: 18px; /**/
font-weight: 500; /**/
letter-spacing: -0.5px; /**/
margin-bottom: 15px; /**/
}
/*----------*/
/*Стили для родительского контейнера с чекбоксами (карточками)*/
.js-product-multioption .t-product__checkbox-wrap {
margin: 0 !important;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); /*перавое значение – это минимальная ширина карточки*/
gap: 15px; /*отступ между карточками*/
}
.js-product-multioption .t-checkbox__indicator {
display: none; /*Скрываем стандартный чекбокс*/
}
/*----------*/
/*Стили самих карточек*/
.js-product-multioption .t-checkbox__control {
display: flex;
flex-direction: column;
gap: var(--gapOption); /*Отступ между фото и названием*/
margin: 0 !important;
padding: var(--paddingOption); /*Внутренние отступы*/
background-color: var(--bgColorOption); /*Фоновый цвет*/
border-radius: var(--borderRadiusOption); /*Радиус скругления углов*/
position: relative;
}
/*Стили текста для названий доп. опций*/
.js-product-multioption .t-checkbox__control span{
font-size: 12px; /*Размер текста*/
line-height: 1.1; /*Межстрочка*/
font-weight: 400; /*Толщина*/
letter-spacing: -0.3px; /*Трекинг*/
}
/*Иконка галочки при выборе доп. опции*/
.js-product-multioption .t-checkbox__control:after{
content:"";
position: absolute;
top: var(--topIconChecked); /*Отступ сверху от самой карточки*/
right: var(--rightIconChecked); /*Отступ справа от самой карточки*/
display: block;
width: var(--iconWidthChecked); /*Ширина иконки*/
scale: 0;
aspect-ratio: 1 / 1;
background-image: var(--iconChecked); /*Иконка галочки*/
background-size: cover;
background-repeat: no-repeat;
background-position: center;
transition: all 0.2s ease-in; /*плавность анимации появления*/
transform-origin: center;
}
.js-product-multioption .t-checkbox {
scale: 0 !important; /*Изначальный размер иконки галочки*/
}
.js-product-multioption .t-checkbox__control:has(.t-checkbox:checked):after{
scale: 1; /*Размер галочки при выбранной опции*/
}
.js-product-multioption .t-checkbox__control:has(.t-checkbox:checked) {
outline: var(--outlineOption); /*Цвет обводки у выбранной опции*/
}
/*----------*/
/* Общие настройки для фото опций */
.js-product-multioption .t-checkbox__control:before{
content:"";
display: block;
width: 100%; /*Ширина фотографии*/
aspect-ratio: 1 / 1; /*Соотношение сторон у фотографий опций*/
background-size: cover;
background-repeat: no-repeat;
}
/*Фото для конкретных опций*/
/*Здесь вы можете добавлять и удалять лишние строчки кода. Чтобы фото подгружались, необходимо указать точное название, как в примере и вставить ссылку на изображение*/
.js-product-multioption .t-checkbox__control:has(input[name="Котлета"]):before{
background-image: url(https://static.tildacdn.com/tild6533-6534-4763-a139-363638653530/1.png);
}
.js-product-multioption .t-checkbox__control:has(input[name="Лук"]):before{
background-image: url(https://static.tildacdn.com/tild3464-6635-4438-a165-643861623636/2.png);
}
.js-product-multioption .t-checkbox__control:has(input[name="Бекон"]):before{
background-image: url(https://static.tildacdn.com/tild6533-3931-4231-a134-363030653437/3.png);
}
.js-product-multioption .t-checkbox__control:has(input[name="Ветчина"]):before{
background-image: url(https://static.tildacdn.com/tild6636-3565-4363-b134-643063343232/4.png);
}
.js-product-multioption .t-checkbox__control:has(input[name="Сыр"]):before{
background-image: url(https://static.tildacdn.com/tild3734-3838-4136-b366-363233663463/5.png);
}
.js-product-multioption .t-checkbox__control:has(input[name="Помидоры"]):before{
background-image: url(https://static.tildacdn.com/tild3738-3230-4861-b763-323335613565/6.png);
}
.js-product-multioption .t-checkbox__control:has(input[name="Шампиньоны"]):before{
background-image: url(https://static.tildacdn.com/tild6566-3638-4636-b430-353365303432/7.png);
}
/*Соусы*/
.js-product-multioption .t-checkbox__control:has(input[name="Кетчуп"]):before{
background-image: url(https://static.tildacdn.com/tild6164-6239-4532-b861-316561623066/11.png);
}
.js-product-multioption .t-checkbox__control:has(input[name="Сырный"]):before{
background-image: url(https://static.tildacdn.com/tild3933-3963-4434-b436-343433663234/22.png);
}
.js-product-multioption .t-checkbox__control:has(input[name="Кисло-сладкий"]):before{
background-image: url(https://static.tildacdn.com/tild3138-6336-4430-b534-363164666433/33.png);
}
.js-product-multioption .t-checkbox__control:has(input[name="Острый"]):before{
background-image: url(https://static.tildacdn.com/tild6138-6332-4435-a366-653731326662/44.png);
}
/*----------*/
/*Отображение цены в карточках*/
.priceOption {
position: absolute; /*Можно указать relative и тогда цена будет над название опции*/
top: 10px; /*Отступ сверху*/
left: 10px; /*Отступ справа*/
background-color: #C8F2C4; /*Фоновый цвет*/
border-radius: 100px; /*Скругление углов*/
padding: 2px 6px; /*Отступы*/
font-size: 12px; /*Размер текста*/
font-weight: 500; /*Толщина текста*/
color: #15470A; /*Цвет текста*/
}
/*----------*/
/*Стили для мобильных устройств*/
@media screen and (max-width: 480px){
/*Стили для родительского контейнера с чекбоксами (карточками)*/
.js-product-multioption .t-product__checkbox-wrap {
grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); /*перавое значение – это минимальная ширина карточки*/
gap: 10px; /*отступ между карточками*/
}
/*Стили текста для названий доп. опций*/
.js-product-multioption .t-checkbox__control span{
font-size: 10px; /*Размер текста*/
letter-spacing: -0.2px; /*Трекинг*/
overflow-wrap: anywhere; /*Если слово длинное, оно перенесется на другу строку*/
}
}
</style> <script>
function processElements() {
const elements = document.querySelectorAll('.js-product-multioption .t-checkbox__control input');
elements.forEach(input => {
const price = input.getAttribute('data-product-variant-price');
if (!input.parentElement.querySelector('.priceOption')) {
const priceDiv = document.createElement('div');
priceDiv.className = 'priceOption';
priceDiv.textContent = price + ' ₽'; // Добавляем символ рубля
input.parentElement.insertBefore(priceDiv, input.parentElement.firstChild);
}
});
}
processElements();
const observer = new MutationObserver(mutations => {
mutations.forEach(mutation => {
if (mutation.type === 'childList') {
processElements();
}
});
});
observer.observe(document.body, {
childList: true,
subtree: true,
attributes: false,
characterData: false
});
</script> <!--https://dsgnmax.ru/useful/additional-options--> <style>
:root{
/*Стили карточек опций*/
--bgColorOption: #f7f7f7; /*Фоновый цвет*/
--paddingOption: 15px; /*Внутренние отступы у карточки*/
--gapOption: 15px; /*Отступ между текстом и фото*/
--borderRadiusOption: 12px; /*Скругление углов*/
--outlineOption: 2px solid #15470A; /*Цвет обводки выбранной карточки*/
/*Иконка галочки при выбранной опции*/
--iconChecked: url(https://static.tildacdn.com/tild6463-6630-4166-b532-316166343735/checked.svg); /*Ссылка на иконку*/
--iconWidthChecked: 20px; /*Ширина иконки*/
--topIconChecked: 10px; /*Отступ сверху от самой карточки*/
--rightIconChecked: 10px; /*Отступ справа от самой карточки*/
}
/*Стили заголовка для дополнительных опций*/
.js-product-multioption .js-product-option-name{
font-size: 18px; /**/
font-weight: 500; /**/
letter-spacing: -0.5px; /**/
margin-bottom: 15px; /**/
}
.t-product__option.js-product-multioption {
margin-bottom: 40px; /*Отступ у блока с опциями снизу до следующего блока*/
}
/*----------*/
/*Стили для родительского контейнера с чекбоксами (карточками)*/
.js-product-multioption .t-product__checkbox-wrap {
margin: 0 !important;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); /*перавое значение – это минимальная ширина карточки*/
gap: 15px; /*отступ между карточками*/
}
.js-product-multioption .t-checkbox__indicator {
display: none; /*Скрываем стандартный чекбокс*/
}
/*----------*/
/*Стили самих карточек*/
.js-product-multioption .t-checkbox__control {
display: flex;
flex-direction: column;
gap: var(--gapOption); /*Отступ между фото и названием*/
margin: 0 !important;
padding: var(--paddingOption); /*Внутренние отступы*/
background-color: var(--bgColorOption); /*Фоновый цвет*/
border-radius: var(--borderRadiusOption); /*Радиус скругления углов*/
position: relative;
}out
/*Стили текста для названий доп. опций*/
.js-product-multioption .t-checkbox__control span{
font-size: 12px; /*Размер текста*/
line-height: 1.1; /*Межстрочка*/
font-weight: 400; /*Толщина*/
letter-spacing: -0.3px; /*Трекинг*/
}
/*Иконка галочки при выборе доп. опции*/
.js-product-multioption .t-checkbox__control:after{
content:"";
position: absolute;
top: var(--topIconChecked); /*Отступ сверху от самой карточки*/
right: var(--rightIconChecked); /*Отступ справа от самой карточки*/
display: block;
width: var(--iconWidthChecked); /*Ширина иконки*/
scale: 0;
aspect-ratio: 1 / 1;
background-image: var(--iconChecked); /*Иконка галочки*/
background-size: cover;
background-repeat: no-repeat;
background-position: center;
transition: all 0.2s ease-in; /*плавность анимации появления*/
transform-origin: center;
}
.js-product-multioption .t-checkbox {
scale: 0 !important; /*Изначальный размер иконки галочки*/
}
.js-product-multioption .t-checkbox__control:has(.t-checkbox:checked):after{
scale: 1; /*Размер галочки при выбранной опции*/
}
.js-product-multioption .t-checkbox__control:has(.t-checkbox:checked) {
outline: var(--outlineOption); /*Цвет обводки у выбранной опции*/
}
/*----------*/
/* Общие настройки для фото опций */
.js-product-multioption .t-checkbox__control:before{
content:"";
display: block;
width: 100%; /*Ширина фотографии*/
aspect-ratio: 1 / 1; /*Соотношение сторон у фотографий опций*/
background-size: cover;
background-repeat: no-repeat;
}
/*Фото для конкретных опций*/
/*Здесь вы можете добавлять и удалять лишние строчки кода. Чтобы фото подгружались, необходимо указать точное название, как в примере и вставить ссылку на изображение*/
.js-product-multioption .t-checkbox__control:has(input[name="Котлета"]):before{
background-image: url(https://static.tildacdn.com/tild6533-6534-4763-a139-363638653530/1.png);
}
.js-product-multioption .t-checkbox__control:has(input[name="Лук"]):before{
background-image: url(https://static.tildacdn.com/tild3464-6635-4438-a165-643861623636/2.png);
}
.js-product-multioption .t-checkbox__control:has(input[name="Бекон"]):before{
background-image: url(https://static.tildacdn.com/tild6533-3931-4231-a134-363030653437/3.png);
}
.js-product-multioption .t-checkbox__control:has(input[name="Ветчина"]):before{
background-image: url(https://static.tildacdn.com/tild6636-3565-4363-b134-643063343232/4.png);
}
.js-product-multioption .t-checkbox__control:has(input[name="Сыр"]):before{
background-image: url(https://static.tildacdn.com/tild3734-3838-4136-b366-363233663463/5.png);
}
.js-product-multioption .t-checkbox__control:has(input[name="Помидоры"]):before{
background-image: url(https://static.tildacdn.com/tild3738-3230-4861-b763-323335613565/6.png);
}
.js-product-multioption .t-checkbox__control:has(input[name="Шампиньоны"]):before{
background-image: url(https://static.tildacdn.com/tild6566-3638-4636-b430-353365303432/7.png);
}
/*Соусы*/
.js-product-multioption .t-checkbox__control:has(input[name="Кетчуп"]):before{
background-image: url(https://static.tildacdn.com/tild6164-6239-4532-b861-316561623066/11.png);
}
.js-product-multioption .t-checkbox__control:has(input[name="Сырный"]):before{
background-image: url(https://static.tildacdn.com/tild3933-3963-4434-b436-343433663234/22.png);
}
.js-product-multioption .t-checkbox__control:has(input[name="Кисло-сладкий"]):before{
background-image: url(https://static.tildacdn.com/tild3138-6336-4430-b534-363164666433/33.png);
}
.js-product-multioption .t-checkbox__control:has(input[name="Острый"]):before{
background-image: url(https://static.tildacdn.com/tild6138-6332-4435-a366-653731326662/44.png);
}
/*----------*/
/*Отображение цены в карточках*/
.priceOption {
position: absolute; /*Можно указать relative и тогда цена будет над название опции*/
top: 10px; /*Отступ сверху*/
left: 10px; /*Отступ справа*/
background-color: #C8F2C4; /*Фоновый цвет*/
border-radius: 100px; /*Скругление углов*/
padding: 2px 6px; /*Отступы*/
font-size: 12px; /*Размер текста*/
font-weight: 500; /*Толщина текста*/
color: #15470A; /*Цвет текста*/
}
/*----------*/
/*ВТОРОЙ НАБОР ОПЦИЙ*/
/*Иконка галочки при выборе доп. опции*/
.js-product-multioption:has(.t-checkbox[name="Кетчуп"]) .t-checkbox__control:after{
background-image: url(https://static.tildacdn.com/tild3133-6563-4662-b233-663964636137/checked2.svg); /*Иконка галочки*/
}
.js-product-multioption:has(.t-checkbox[name="Кетчуп"]) .t-checkbox__control:has(.t-checkbox:checked) {
outline: 2px solid #D65D1A; /*Цвет обводки у выбранной опции*/
}
/*Отображение цены в карточках*/
.js-product-multioption:has(.t-checkbox[name="Кетчуп"]) .priceOption {
background-color: #FFCFB4; /*Фоновый цвет*/
color: #D65D1A; /*Цвет текста*/
}
/*----------*/
/*Стили для мобильных устройств*/
@media screen and (max-width: 480px){
/*Стили для родительского контейнера с чекбоксами (карточками)*/
.js-product-multioption .t-product__checkbox-wrap {
grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); /*перавое значение – это минимальная ширина карточки*/
gap: 10px; /*отступ между карточками*/
}
/*Стили текста для названий доп. опций*/
.js-product-multioption .t-checkbox__control span{
font-size: 10px; /*Размер текста*/
letter-spacing: -0.2px; /*Трекинг*/
overflow-wrap: anywhere; /*Если слово длинное, оно перенесется на другу строку*/
}
}
</style> <script>
function processElements() {
const elements = document.querySelectorAll('.js-product-multioption .t-checkbox__control input');
elements.forEach(input => {
const price = input.getAttribute('data-product-variant-price');
if (!input.parentElement.querySelector('.priceOption')) {
const priceDiv = document.createElement('div');
priceDiv.className = 'priceOption';
priceDiv.textContent = price + ' ₽'; // Добавляем символ рубля
input.parentElement.insertBefore(priceDiv, input.parentElement.firstChild);
}
});
}
processElements();
const observer = new MutationObserver(mutations => {
mutations.forEach(mutation => {
if (mutation.type === 'childList') {
processElements();
}
});
});
observer.observe(document.body, {
childList: true,
subtree: true,
attributes: false,
characterData: false
});
</script> 