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

Содержание

Пример кода

Ответом на вопрос – штатными средствами пока никак. Однако, при помощи 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 буду рад помочь с доработкой.

Роман сказал:
Добрый день.
Верно ли понимаю, что если при такой реализации покупатель сначала применит промокод (скидка зафиксируется в итоговой сумме), а потом вернется на страницы каталога и добавит товар в другой упаковке (на которую этот промокод распространяться не должен), то скидка все равно останется?

14.10.2022 / 00:54
Ответить
- webvova сказал:
  Вообще я тестировал такой вариант. И чтобы его исключить, настраивал уже саму корзину в тильда. Там есть опция удаления всего из заказа при закрытии корзины. А так можно скрипт допилить и на вариант отмены применения после закрытия корзины. Все зависит от вашей задачи
  
  14.10.2022 / 06:49
Лена сказал:
как быть, если нужно, чтобы при одновременном нахождении разных товаров в корзине, промокод применялся только на один товар?

08.12.2022 / 14:33
Ответить
- webvova сказал:
  Пока на мой взгляд никак. Промокоды применяются только ко всей сумме заказа. Мой вариант только не даст применить промокод в текущем исполнении.
  
  15.12.2022 / 15:29
Виктория сказал:
Или я туплю, или тут есть лазейка:

если взять товар “стекло” применить промокод, выйти из корзины и закинуть товар “картон”, то промокод применится.

21.12.2022 / 13:35
Ответить
- Виктория сказал:
  применится и к картону)
  
  21.12.2022 / 13:36
- webvova сказал:
  Видимо есть ошибка, так как такой сценарий тестил в первую осередь:-). Но если что можно сделать очистку корзины при её зарытии
  
  21.12.2022 / 13:40