URL скопирован в буфер обмена!
Как сделать дополнительные опции в карточке товара в виде карточек
При помощи данной модификации можно изменить стандартные чекбоксы дополнительных опций на карточки в каталоге товаров Тильда. Можно загрузить свои изображения, настроить индикатор выбранной опции и кастомизировать сам чекбокс
Модификация работает с включенным Autoscale в блоках
Номер модификации в библиотеке TiCode
Модификация работает только со стандартным блоком
Цвет фона карточек
Радиус скругления углов
Цвет обводки карточек
Цвет обводки активной карточки
Цвет иконки
Цвет текста
Тип иконки
Расположение иконки
Текст опции
Ссылка на изображение
<!--TICODE--><!-- Библиотека модификаций для Тильда https://ticode.dev -->
<!--TCD000--><style>
@keyframes elastic {
0% {
transform: scale(0.1);
}
60% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
.t-product__checkbox-wrap {
display: flex;
gap: 10px;
justify-content: flex-start;
flex-wrap: wrap;
margin-left: 0px!important;
margin-top: 0px!important;
}
.t-product__checkbox-wrap .t-checkbox__control {
position: relative;
display: inline-block;
width: 22%;
border: 2px solid transparent;
text-align: center;
border-radius: 10px;
transition: border 0.3s ease;
cursor: pointer;
overflow: hidden;
}
.t-product__checkbox-wrap .t-checkbox__indicator {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
width: 100%;
height: 170px;
border: 2px solid #000;
position: relative;
background-color: #ffffff;
border-radius: 10px;
transition: border-color 0.3s ease;
padding-top: 10px;
box-sizing: border-box;
}
.t-checkbox__control input[type="checkbox"] {
display: none;
}
.t-product__checkbox-wrap .t-checkbox__indicator::before {
content: '';
width: 100px;
height: 100px;
background-size: cover;
background-position: center;
margin-bottom: 20px;
}
.t-product__checkbox-wrap .t-checkbox__control span {
font-size: 14px;
bottom: 10px !important;
position: absolute;
padding-left: 10px;
padding-right: 10px;
text-align: left;
color: #000000 !important;
}
.t-product__checkbox-wrap .t-checkbox__control input[type="checkbox"]:checked + .t-checkbox__indicator {
border: 2px solid #F96855;
}
.t-product__checkbox-wrap .t-checkbox__indicator:after {
content: '';
position: absolute;
right: 10px !important;
top: 10px !important;
left: auto !important;
background-color: #F96855;
border: solid 0px transparent !important;
width: 16px;
height: 16px;
border-radius: 50%;
opacity: 0;
animation: fadeOut 0.5s ease-out;
transform: rotate(0deg);
}
.t-product__checkbox-wrap .t-checkbox__control input[type="checkbox"]:checked + .t-checkbox__indicator:after {
content: '✔';
color: #ffffff;
display: block;
font-size: 12px;
text-align: center;
line-height: 15px;
animation: elastic 0.5s ease-out;
opacity: 1;
}
.t-product__checkbox-wrap .t-checkbox__control+.t-checkbox__control {
margin-top: 0px;
}
.t-product__checkbox-wrap .t-checkbox__control {
text-align: left !important;
}
@media (max-width: 1200px) {
.t-product__checkbox-wrap .t-checkbox__control {
width: 30%;
}}
@media (max-width: 960px) {
.t-product__checkbox-wrap .t-checkbox__control {
width: 22%;
}
.t-product__checkbox-wrap .t-checkbox__indicator::before {
content: '';
width: 80px;
height: 80px;
}}
@media (max-width: 620px) {
.t-product__checkbox-wrap .t-checkbox__control {
width: 30%;
}}
@media (max-width: 480px) {
.t-product__checkbox-wrap .t-checkbox__control {
width: 47%;
}
.t-product__checkbox-wrap {
justify-content: space-between;
column-gap: normal;
}
.t-product__checkbox-wrap .t-checkbox__indicator {
height: 150px;
}}
.t-checkbox[name=""] + .t-checkbox__indicator::before {
background-image: url('https://optim.tildacdn.com/tild3266-6231-4736-b234-393763356663/-/format/webp/pear-1620467_64022.jpg');
}
.t-checkbox[name=""] + .t-checkbox__indicator::before {
background-image: url('');
}
.t-checkbox[name=""] + .t-checkbox__indicator::before {
background-image: url('');
}
.t-checkbox[name=""] + .t-checkbox__indicator::before {
background-image: url('');
}
.t-checkbox[name=""] + .t-checkbox__indicator::before {
background-image: url('');
}
.t-checkbox[name=""] + .t-checkbox__indicator::before {
background-image: url('');
}
.t-checkbox[name=""] + .t-checkbox__indicator::before {
background-image: url('');
}
.t-checkbox[name=""] + .t-checkbox__indicator::before {
background-image: url('');
}
.t-checkbox[name=""] + .t-checkbox__indicator::before {
background-image: url('');
}
.t-checkbox[name=""] + .t-checkbox__indicator::before {
background-image: url('');
}
.t-checkbox[name=""] + .t-checkbox__indicator::before {
background-image: url('');
}
.t-checkbox[name=""] + .t-checkbox__indicator::before {
background-image: url('');
}
</style>
Для нормальной работы модификации необходимо включить библиотеку jQuery.
Как включить: Настройки сайта -> Еще -> Подключить jQuery на страницах сайта
Как включить: Настройки сайта -> Еще -> Подключить jQuery на страницах сайта
1. Загружаем товары в каталог тильда. Переходим в созданный товар и добавляем доп. опции. Для этого нажимаем "дополнительные опции", выбираем "множественный выбор", указываем название и далее перечисляем опции *каждую с новой строки);
2. Переходим в генератор кода и и пишем текст созданной опции в поле "текст опции". Важно соблюдать регистр букв, чтобы текст полностью совпадал с тем что вы указывали в товаре.
3. В поле "ссылка на изображение" указываем ссылку на картинку. Изображения загружаем в любую галерею, например GL01. Далее нажимаем пкм и копируем ссылку чтобы указать ее в генераторе. Саму галерею можно скрыть, кликнув на глаз в редакторе. Если у вас несколько опций, то нажимаем кнопку "добавить опцию" и проделываем все тоже самое;
4. При необходимости можем указать дополнительные настройки в генераторе кода:
Цвет фона карточек - указываем цвет фона карточек;
Радиус скругления углов - выбираем радиус скругления углов карточек;
Цвет обводки карточек - указываем цвет обводки карточек;
Цвет обводки активной карточки - указываем цвет обводки который будет показывается когда кликнули по карточке;
Цвет галочки - указываем цвет галочки которая показывает какую карточку выделили;
Цвет текста - указываем цвет текста фильтра;
Тип иконки - выбираем тип иконки который будем показывать в активной карточке;
Расположение иконки - выбираем место где будет показывается иконка.
5. Копируем код и вставляем в глобальный хедер сайта. Если выбрали в каталоге "показывать товар странице вместо popup" то прикрепляем к такой странице шапку и код загружаем код в нее, в блок Т123.
Если вы загрузили код в блок Т123 и при этом показываете открытый товар в попап, то при обновлении страницы(когда вы просматриваете попап) скрипт перестанет работать.
2. Переходим в генератор кода и и пишем текст созданной опции в поле "текст опции". Важно соблюдать регистр букв, чтобы текст полностью совпадал с тем что вы указывали в товаре.
3. В поле "ссылка на изображение" указываем ссылку на картинку. Изображения загружаем в любую галерею, например GL01. Далее нажимаем пкм и копируем ссылку чтобы указать ее в генераторе. Саму галерею можно скрыть, кликнув на глаз в редакторе. Если у вас несколько опций, то нажимаем кнопку "добавить опцию" и проделываем все тоже самое;
4. При необходимости можем указать дополнительные настройки в генераторе кода:
Цвет фона карточек - указываем цвет фона карточек;
Радиус скругления углов - выбираем радиус скругления углов карточек;
Цвет обводки карточек - указываем цвет обводки карточек;
Цвет обводки активной карточки - указываем цвет обводки который будет показывается когда кликнули по карточке;
Цвет галочки - указываем цвет галочки которая показывает какую карточку выделили;
Цвет текста - указываем цвет текста фильтра;
Тип иконки - выбираем тип иконки который будем показывать в активной карточке;
Расположение иконки - выбираем место где будет показывается иконка.
5. Копируем код и вставляем в глобальный хедер сайта. Если выбрали в каталоге "показывать товар странице вместо popup" то прикрепляем к такой странице шапку и код загружаем код в нее, в блок Т123.
Если вы загрузили код в блок Т123 и при этом показываете открытый товар в попап, то при обновлении страницы(когда вы просматриваете попап) скрипт перестанет работать.
