Промокод на определенный товар Тильда

Содержание

Пример кода

Ответом на вопрос — штатными средствами пока никак. Однако, при помощи 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 можно активировать в том случае, если в корзине нет одновременно товаров из категории картон и стекло.

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

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

Скрытие, показ полей корзины при помощи скриптов

Третья часть статьи о том как создать онлайн школу на тильде с нуля. Без больших вложений и технических знаний.

Читать третью часть цикла статей «Как создать онлайн школу на тильде»