Модификации для Тильды

Допустим у вас интернет магазин и 5 категорий товаров. У вас есть общий промокод, который даёт скидку 5%. Но вы хотите добавить уникальный промокод со скидкой 20% но только для 1 категории товара, причём так, что бы этот промокод не действовал на другие категории товаров.
К сожалению сама Тильда не предоставляет такой возможности.

На помощь придёт данный скрипт, который позволяет создавать 1 уникальный промокод в 1 категории товаров. Вы сможете выдавать уникальный промокод для определённой категории товара, при этот не опасаясь, что покупатель применит его не так как вы рассчитывали.

При использовании уникального промокода в не предназначенной для этого категории товара - появится системная ошибка, с предупреждением о невозможности применения промокода к данной категории товара.

Всё что вам потребуется, добавить в скрипт свой id категории товара и наименование промокода. Добавление самого промокода осуществляется через стандартные настройки Тильды.

Допустим у вас интернет магазин и 5 категорий товаров. У вас есть общий промокод, который даёт скидку 5%. Но вы хотите добавить уникальный промокод со скидкой 20% но только для 1 категории товара, причём так, что бы этот промокод не действовал на другие категории товаров.
К сожалению сама Тильда не предоставляет такой возможности.

На помощь придёт данный скрипт, который позволяет создавать до 3х уникальных промокодов в 3х категориях товаров. Вы сможете выдавать уникальный промокод для определённой категории товаров, при этот не опасаясь, что покупатель применит его не так как вы рассчитывали.

При использовании уникального промокода в не предназначенной для этого категории товара - появится системная ошибка, с предупреждением о невозможности применения промокода к данной категории товара.

Всё что вам потребуется, добавить в скрипт свой id категории товара и наименование промокода. Добавление самого промокода осуществляется через стандартные настройки Тильды.

Как использовать скрипт:

1. Добавьте на страницу блок T123
2. Вставьте код в блок T123
3. Опубликуйте страницу

_{*Модификация работает только на опубликованной странице}

<!-- ховер кнопки в форме в Zero Block VTILDE.BY -->

<style>

.tn-form__submit .t-submit {
transition: all 0.2s ease-in-out;
}

.tn-form__submit .t-submit:hover {
/* укажи цвет фона при наведении */
background-color: #1e1e1e !important;
/* укажи цвет текста при наведении */
color: #f2c94c !important;
/* укажи цвет бордюра при наведении, либо удали строку ниже, если стиль не нужен*/
border-color: #f2c94c !important;
}

</style>

Как использовать скрипт:

1. Задаем класс img-zoom изображению в Zero Block (для этого жмём по нему правой кнопкой мыши — Add CSS Class Name)
2. Добавьте на страницу блок T123
3. Вставьте код в блок T123
4. Опубликуйте страницу

_{*Модификация работает только на опубликованной странице}

<!-- зум при наведении на изображение в Zero Block VTILDE.BY -->

<style>

.img-zoom {
border-radius: 10px;
overflow: hidden;
}

.img-zoom .tn-atom {
border-radius: 10px;
transition: transform 200ms ease-in-out;
}

.img-zoom:hover .tn-atom {
transform: scale(110%);
}

</style>

Как использовать скрипт:

1. Создали 1-й Zero Block с кнопками "влево"/"вправо"
2. Задали им класс arrow-left и arrow-right (для этого жмём по кнопкам правой кнопкой мыши — Add CSS Class Name)
3. Создали 2-й Zero Block с контентом, который будет элементами слайдера. В настройках Zero указали — overflow: auto
4. Добавьте на страницу блок T123
5. Вставьте код в блок T123
6. Заменили в коде #rec000000000 на соответствующие ID блоков
7. При необходимости настройте величину скрола в px
8. Опубликуйте страницу

_{*Модификация работает только на опубликованной странице}

<!-- код для слайдера в Zero Block VTILDE.BY -->

<script src="https://unpkg.com/scrollbooster@3/dist/scrollbooster.min.js" defer></script>

<script>
$(function() {

// Укажи ID Zero блока cо скроллом и включи overflow: auto
var blockScrollId = '#rec000000000';

// Укажи ID Zero блока cо стрелками и добавь каждой класс arrow-left или arrow-right
var blockArrowsId = '#rec000000000';

var shiftSize;
$(window).on('load resize', function(){

if (window.matchMedia('(max-width: 480px)').matches) {
// Укажи величину сдвига при клике на стрелку для разрешения 320-480px
shiftSize = '297px';
}
else if (window.matchMedia('(max-width: 640px)').matches) {
// Укажи величину сдвига при клике на стрелку для разрешения 481-640px
shiftSize = '297px';
}
else if (window.matchMedia('(max-width: 960px)').matches) {
// Укажи величину сдвига при клике на стрелку для разрешения 641-960px
shiftSize = '297px';
}
else if (window.matchMedia('(max-width: 1200px)').matches) {
// Укажи величину сдвига при клике на стрелку для разрешения 961-1200px
shiftSize = '297px';
}
else {
// Укажи величину сдвига при клике на стрелку для разрешения больше 1200px
shiftSize = '297px';
}

});


$(blockScrollId + ' .t396__artboard').addClass('scrollbooster-viewport').wrapInner('<div class="scrollbooster-content"></div>');
$(blockScrollId + ' .t396').css('overflow','hidden');

new ScrollBooster({
viewport: $(blockScrollId + ' .scrollbooster-viewport')[0],
content: $(blockScrollId + ' .scrollbooster-content')[0],
scrollMode: 'native',
pointerMode: 'mouse',
bounce: false,
onPointerDown: function() { $(blockScrollId + ' *:focus').blur() }
});

$(blockArrowsId + ' .arrow-left').on('click', function(e) {
e.preventDefault();
$(blockScrollId + ' .t396__artboard').animate( { scrollLeft: '-=' + shiftSize }, 300);
});

$(blockArrowsId + ' .arrow-right').on('click', function(e) {
e.preventDefault();
$(blockScrollId + ' .t396__artboard').animate( { scrollLeft: '+=' + shiftSize }, 300);
});

});
</script>

<style>
.scrollbooster-viewport {
cursor: -webkit-grab;
cursor: grab;
padding-bottom: 30px;
margin-bottom: -30px;
}
.scrollbooster-viewport:active {
cursor: -webkit-grabbing;
cursor: grabbing;
}
.scrollbooster-content {
position: absolute;
width: 100%;
height: 100%;
}
.arrow-left,
.arrow-right {
cursor: pointer;
}

</style>

Как использовать скрипт:

1. Добавьте на страницу блок T123
2. Вставьте код в блок T123
3. Опубликуйте страницу

_{*Модификация работает только на опубликованной странице}


<!-- добавить приставку от к цене VTILDE.BY -->

<style>

.t-store__card__price-value:before, .js-product-price:before{
content:"от" ;
margin-right: 5px;
}

</style>