Содержание
Пример кода
Ответом на вопрос – штатными средствами пока никак. Однако, при помощи Java Script можно внедрить на странице с корзиной пользовательский код, который позволит контролировать введенное значение в поле ввода промокода. Пример такого кода ниже
<script>
//состояние кнопки активировать по умолчанию
document.querySelector('.t-inputpromocode__wrapper > div').style.visibility = "hidden";
document.querySelector('.t-inputpromocode__wrapper > div').style.display = "none";
//создание события нажатия клавиши для инпута
document.querySelector('.t-inputpromocode__wrapper > .t-inputpromocode').addEventListener("input", myFunction);
//сбросить введенный промокод
document.querySelector('.t-inputpromocode__wrapper > input').value = "";
//создание массива ПРОМОКОДОВ
//СЮДА ВВОДИМ ПРОМОКОДЫ ДЛЯ СТЕКЛА//
const blogerpromocodesteklo = [
"VBALAKINPROMOS",
];
//СЮДА ВВОДИМ ПРОМОКОДЫ ДЛЯ КАРТОНА//
const blogerpromocodekarton = [
"VBALAKINPROMOK",
];
//привязка очистки поля с промокодом и кнопки к событию закрытия корзины
$('.t706__cartwin-close').click((function () {
var foo= document.querySelector('.t-inputpromocode__wrapper > input');
if(foo == null){
}
else
{
document.querySelector('.t-inputpromocode__wrapper > input').value = "";
document.querySelector('.t-inputpromocode__wrapper > div').style.visibility = "hidden";
document.querySelector('.t-inputpromocode__wrapper > div').style.display = "none";
}
}))
//привязка очистки поля с промокодом и кнопки к событию закрытия корзины
$('.t706__cartwin-closebtn').click((function () {
var foo= document.querySelector('.t-inputpromocode__wrapper > input');
if(foo == null){
}
else
{
document.querySelector('.t-inputpromocode__wrapper > input').value = "";
document.querySelector('.t-inputpromocode__wrapper > div').style.visibility = "hidden";
document.querySelector('.t-inputpromocode__wrapper > div').style.display = "none";
}
}))
//привязка очистки поля с промокодом и кнопки к событию закрытия корзины
$('.t706__cartwin').mousedown((function (e) {
if (e.target == this) {
var foo= document.querySelector('.t-inputpromocode__wrapper > input');
if(foo == null){
}
else
{
document.querySelector('.t-inputpromocode__wrapper > input').value = "";
document.querySelector('.t-inputpromocode__wrapper > div').style.visibility = "hidden";
document.querySelector('.t-inputpromocode__wrapper > div').style.display = "none";
}
}
}))
function myFunction() {
// присваеваем переменной promocodebutton кнопку активировать промокод
promocodebutton = document.querySelector('.t-inputpromocode__wrapper > div');
//присваеваем переменной input строку ввести промокод
let input = document.querySelector('.t-inputpromocode__wrapper > input');
// присваеваем переменной productname наименование товара одиночное
//let productname = document.querySelector('.t706__product-title > a').textContent;
// присваеваем переменной prod наименование товара массив
let productname = document.querySelectorAll('.t706__product-title > a');
result = [];
for (var i = 0; i < productname.length; i++) {
result.push(productname[i].textContent);
}
//поиск по массиву на наличие в корзине стекла
if ((result.indexOf("Курс живой хлореллы на кремниевой воде на 1 месяц") > -1) || (result.indexOf("Курс живой хлореллы на кремниевой воде на 6 месяцев") > -1) || (result.indexOf("Курс живой хлореллы на кремниевой воде на 3 месяцев") > -1) || (result.indexOf("Курс живой хлореллы на кремниевой воде на 16 дней") > -1)) {
//если ввели промокод который не соответствует базе стекла
if (blogerpromocodesteklo.indexOf(input.value) > -1) {
promocodebutton.className = "t-inputpromocode__btn t-btn";
promocodebutton.style.visibility = "visible";
promocodebutton.style.display = "table-cell";
} else {
promocodebutton.style.visibility = "hidden";
promocodebutton.className = "MyClass";
promocodebutton.style.display = "none";
}
}
//поиск по массиву на наличие в корзине картона
if (result.indexOf("Курс живой хлореллы на кремниевой воде на 30 дней, новая упаковка") > -1) {
//если ввели промокод который не соответствует базе картона
if (blogerpromocodekarton.indexOf(input.value) > -1) {
promocodebutton.className = "t-inputpromocode__btn t-btn";
promocodebutton.style.visibility = "visible";
promocodebutton.style.display = "table-cell";
} else {
promocodebutton.style.visibility = "hidden";
promocodebutton.className = "MyClass";
promocodebutton.style.display = "none";
}
}
//поиск по массиву на наличие в корзине картона и стекла
if ((result.indexOf("Курс живой хлореллы на кремниевой воде на 30 дней, новая упаковка") > -1) && (result.indexOf("Курс живой хлореллы на кремниевой воде на 1 месяц") > -1) ) {
promocodebutton.style.visibility = "hidden";
promocodebutton.className = "MyClass";
promocodebutton.style.display = "none";
}
else if ((result.indexOf("Курс живой хлореллы на кремниевой воде на 30 дней, новая упаковка") > -1) && (result.indexOf("Курс живой хлореллы на кремниевой воде на 6 месяцев") > -1) )
{
promocodebutton.style.visibility = "hidden";
promocodebutton.className = "MyClass";
promocodebutton.style.display = "none";
}
else if ((result.indexOf("Курс живой хлореллы на кремниевой воде на 30 дней, новая упаковка") > -1) && (result.indexOf("Курс живой хлореллы на кремниевой воде на 3 месяцев") > -1) )
{
promocodebutton.style.visibility = "hidden";
promocodebutton.className = "MyClass";
promocodebutton.style.display = "none";
}
else if ((result.indexOf("Курс живой хлореллы на кремниевой воде на 30 дней, новая упаковка") > -1) && (result.indexOf("Курс живой хлореллы на кремниевой воде на 16 дней") > -1) )
{
promocodebutton.style.visibility = "hidden";
promocodebutton.className = "MyClass";
promocodebutton.style.display = "none";
}
}
</script>
Данный код позволяет, разделить промокоды на две категории – стекло и картон. То есть, товар продается в двух вариантах стекло и картон. Поэтому промокоды должны работать только на свои варианты упаковок. Не стоит переживать, что пока не понятно все, я предлагаю рассмотреть порядок действий с самого начала, с момента как создать промокод в Тильде
Добавляем промокод
Чтобы создать промокод, нужно перейти в настройки сайта

Далее выбираем раздел “Платежные системы”, опускаемся вниз и выбираем “Промокоды”

Нажимаем кнопку “Добавить промокод” и заполняем строки – “Название промокода”, “Скидка”, “Количество”, “Срок действия”.
В качестве названия промокода должно быть наименование, которое будет вводить покупатель во время оформления заказа, например “VESNA2022”
Более интересно с полем “Скидка”, так как здесь можно указать значение как в процентах, так и рублях. Например если промокод должен давать скидку 10%, то ставит значение – 10%, если хотите, чтобы давал скидку 2000 рублей от суммы покупки, то указываете – 2000
“Количество”, здесь указывается значение, сколько раз можно использовать промокод. Один пользователь может указывать данный промокод несколько раз.
“Срок действия”, все просто, пусто – действие не ограниченно по времени, стоит дата – действует до этого числа.
Активируем в корзине
Теперь переходим на страницу где у нас расположен блок с корзиной ST100 и добавляем поле “Промокод”

На этом процесс создания промокода и активации функционала окончен. Приступим к внедрению скрипта
Внедряем скрипт
Для начала на странице с корзиной, добавляем блок T123 – HTML и нажимаем кнопку “Контент”, куда и вставляем скрипт, написанный в самом начале

Нажимаем “Сохранить” и опубликовываем страницу. Теперь подробнее рассмотрим блоки кода
//состояние кнопки активировать по умолчанию
document.querySelector('.t-inputpromocode__wrapper > div').style.visibility = "hidden";
document.querySelector('.t-inputpromocode__wrapper > div').style.display = "none";
Данный блок скрывает кнопку “Активировать промокод” при открытии корзины за счет добавление стиля style.visibility= “hidden” и style.display= “none”
querySelector – позволяет найти любой элемент на странице. В данном случае мы ищем кнопку по пути .t-inputpromocode__wrapper > div
//создание события нажатия клавиши для инпута
document.querySelector('.t-inputpromocode__wrapper > .t-inputpromocode').addEventListener("input", myFunction);
Данный блок привязывает мою функцию myFunction к событию ввода input в поле куда вводится промокод
querySelector – позволяет найти любой элемент на странице. В данном случае мы ищем поле для ввода промокода по пути .t-inputpromocode__wrapper > .t-inputpromocode
//сбросить введенный промокод
document.querySelector('.t-inputpromocode__wrapper > input').value = "";
Данный блок позволяет установить значением по умолчанию для поля ввода промокода – пусто, где value = “” присваивает это значение
querySelector – позволяет найти любой элемент на странице. В данном случае мы ищем поле для ввода промокода по пути .t-inputpromocode__wrapper > input
//создание массива ПРОМОКОДОВ
//СЮДА ВВОДИМ ПРОМОКОДЫ ДЛЯ СТЕКЛА//
const blogerpromocodesteklo = [
"VBALAKINPROMOS",
];
//СЮДА ВВОДИМ ПРОМОКОДЫ ДЛЯ КАРТОНА//
const blogerpromocodekarton = [
"VBALAKINPROMOK",
];
Данный блок позволяет создать два массива промокодов blogerpromocodesteklo и blogerpromocodekarton благодаря чему и будет выполняться активации промокода в зависимости от товара. ТО есть, если вы добавили товар в картонной упаковке и пытаетесь активировать промокод на стекло, то кнопка “Активировать промокод” не появится
Сюда добавляются промокоды, которые ранее создали стандарными средствами Тильды.
//привязка очистки поля с промокодом и кнопки к событию закрытия корзины
$('.t706__cartwin-close').click((function () {
var foo= document.querySelector('.t-inputpromocode__wrapper > input');
if(foo == null){
......
......
......
//привязка очистки поля с промокодом и кнопки к событию закрытия корзины
$('.t706__cartwin-closebtn').click((function () {
var foo= document.querySelector('.t-inputpromocode__wrapper > input');
if(foo == null){
......
......
......
//привязка очистки поля с промокодом и кнопки к событию закрытия корзины
$('.t706__cartwin').mousedown((function (e) {
if (e.target == this) {
var foo= document.querySelector('.t-inputpromocode__wrapper > input');
if(foo == null){
Так как у Тильды есть три события для закрытия корзины:
- Нажатие на крест .t706__cartwin-closebtn
- Нажатие на свободное место – background (‘.t706__cartwin’).mousedown
- Просто закрытие корзины .t706__cartwin-close
if(foo == null){
}
else
{
document.querySelector('.t-inputpromocode__wrapper > input').value = "";
document.querySelector('.t-inputpromocode__wrapper > div').style.visibility = "hidden";
document.querySelector('.t-inputpromocode__wrapper > div').style.display = "none";
}
То на эти события вешаем функцию со скрытием кнопки “Активировать промокод” и очисткой поля для ввода промокода
Описание функции
Вспомогательную часть кода разобрали, теперь приступаем к основной функции myFunction, которая висит на проверке ввода input в поле ввода промокода
function myFunction() {
// присваеваем переменной promocodebutton кнопку активировать промокод
promocodebutton = document.querySelector('.t-inputpromocode__wrapper > div');
//присваеваем переменной input строку ввести промокод
let input = document.querySelector('.t-inputpromocode__wrapper > input');
// присваеваем переменной productname наименование товара одиночное
//let productname = document.querySelector('.t706__product-title > a').textContent; // присваеваем переменной prod наименование товара массив
let productname = document.querySelectorAll('.t706__product-title > a');
result = [];
for (var i = 0; i < productname.length; i++) {
result.push(productname[i].textContent);
}
Благодаря querySelector присваиваем переменным: promocodebutton, input пути по которым с ними можно работать. Для переменной productname создаем массив значений, так как в корзине одновременно могут быть несколько товаров
//поиск по массиву на наличие в корзине стекла
if ((result.indexOf("Курс живой хлореллы на кремниевой воде на 1 месяц") > -1) || (result.indexOf("Курс живой хлореллы на кремниевой воде на 6 месяцев") > -1) || (result.indexOf("Курс живой хлореллы на кремниевой воде на 3 месяцев") > -1) || (result.indexOf("Курс живой хлореллы на кремниевой воде на 16 дней") > -1)) {
.....
.....
.....
//поиск по массиву на наличие в корзине картона
if (result.indexOf("Курс живой хлореллы на кремниевой воде на 30 дней, новая упаковка") > -1) {
.....
.....
.....
//поиск по массиву на наличие в корзине картона и стекла
if ((result.indexOf("Курс живой хлореллы на кремниевой воде на 30 дней, новая упаковка") > -1) && (result.indexOf("Курс живой хлореллы на кремниевой воде на 1 месяц") > -1) ) {
.....
.....
else if ((result.indexOf("Курс живой хлореллы на кремниевой воде на 30 дней, новая упаковка") > -1) && (result.indexOf("Курс живой хлореллы на кремниевой воде на 6 месяцев") > -1) )
{
.....
.....
else if ((result.indexOf("Курс живой хлореллы на кремниевой воде на 30 дней, новая упаковка") > -1) && (result.indexOf("Курс живой хлореллы на кремниевой воде на 3 месяцев") > -1) )
{
.....
.....
else if ((result.indexOf("Курс живой хлореллы на кремниевой воде на 30 дней, новая упаковка") > -1) && (result.indexOf("Курс живой хлореллы на кремниевой воде на 16 дней") > -1) )
{
Предпоследняя задача, это проверить значение массива productname – содержимое корзины на условия наличия конкретного товара.
В данной реализации есть большой минус. а именно необходимость добавлять новые условия проверки при добавления нового товара в перечень существующих. Но так как мне необходимо было реализовать проверку только среди 5 наименований и больше добавлять не планировалось вообще, то данная реализация подходит идеально
promocodebutton.className = "t-inputpromocode__btn t-btn";
promocodebutton.style.visibility = "visible";
promocodebutton.style.display = "table-cell";
Данный код позволяет применить промокод и делает активной кнопку “Активировать промокод”
promocodebutton.style.visibility = "hidden";
promocodebutton.className = "MyClass";
promocodebutton.style.display = "none";
Данный код запрещает к применению промокода и скрывает кнопку “Активировать промокод”
Демонстрация
Перед тем как перейти к демонстрации, необходимо знать. В магазине есть две категории товаров, картон:
- Курс живой хлореллы на кремниевой воде на 30 дней, новая упаковка
стекло:
- Курс живой хлореллы на кремниевой воде на 16 дней
- Курс живой хлореллы на кремниевой воде на 1 месяц
- Курс живой хлореллы на кремниевой воде на 3 месяцев
- Курс живой хлореллы на кремниевой воде на 6 месяцев
Соответственно, тестовый промокод VBALAKINPROMOK действует только на товар из категории картон, VBALAKINPROMOS – стекло


Получается, что VBALAKINPROMOK можно активировать в том случае, если в корзине нет одновременно товаров из категории картон и стекло.
В результате получилось реализовать промокод на индивидуальный товар. Если у вас есть вопросы, пишите в комментариях или в личных сообщениях. Ниже можете ознакомиться с похожими статьями по конструктору Тильда
Еще на сайте

Разберем как реализовать показ полей для ввода в корзине при добавлении определенного товара

Третья часть статьи о том как создать онлайн школу на тильде с нуля. Без больших вложений и технических знаний.
Читать третью часть цикла статей «Как создать онлайн школу на тильде»
Как со мной связаться
Если хотите хорошее и качественное решение под ваш проект и ТЗ, то остается два выхода: либо адаптировать самостоятельно, либо обратиться ко мне за доработкой за отдельную стоимость. Я не фанат подписок поэтому считаю что база должна быть доступна всем.
Пишите https://t.me/vbalakin буду рад помочь с доработкой.
Добрый день.
Верно ли понимаю, что если при такой реализации покупатель сначала применит промокод (скидка зафиксируется в итоговой сумме), а потом вернется на страницы каталога и добавит товар в другой упаковке (на которую этот промокод распространяться не должен), то скидка все равно останется?
Вообще я тестировал такой вариант. И чтобы его исключить, настраивал уже саму корзину в тильда. Там есть опция удаления всего из заказа при закрытии корзины. А так можно скрипт допилить и на вариант отмены применения после закрытия корзины. Все зависит от вашей задачи
как быть, если нужно, чтобы при одновременном нахождении разных товаров в корзине, промокод применялся только на один товар?
Пока на мой взгляд никак. Промокоды применяются только ко всей сумме заказа. Мой вариант только не даст применить промокод в текущем исполнении.
Или я туплю, или тут есть лазейка:
если взять товар “стекло” применить промокод, выйти из корзины и закинуть товар “картон”, то промокод применится.
применится и к картону)
Видимо есть ошибка, так как такой сценарий тестил в первую осередь:-). Но если что можно сделать очистку корзины при её зарытии