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

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

Так как у Тильды есть три события для закрытия корзины:

  1. Нажатие на крест .t706__cartwin-closebtn
  2. Нажатие на свободное место – background (‘.t706__cartwin’).mousedown
  3. Просто закрытие корзины .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 можно активировать в том случае, если в корзине нет одновременно товаров из категории картон и стекло.

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

Видео – уроки по промокодам

Я знаю, как трудно найти полезную информацию о промокодах Tilda в этом океане цифрового творчества. Сам, как вед-дизайнер, я сталкивался с нехваткой качественного контента по этой теме.

Я создал цикл мини-уроков — это не просто сборник базовых знаний. Это погружение в тонкости реализации разных схем использования уникальных промокодов на Tilda.

🎓 1 – Урок “Промокод можно активировать только для одного уникального товара” 
Демонстрация здесь https://web4life.ru/one-promo

🚀 2 – Урок “Промокод можно активировать на группу товаров. Например на 3 из 4-х”:
Демонстрация здесь https://web4life.ru/group-promo

🔍3 – Урок “Промокод можно применить если в корзине набрано товаров на сумму больше или равно X” и “Промокод можно применить если в корзине набрано товаров на сумму больше или равно X, а также в корзине должны быть один или несколько определенных товаров”
Демонстрация здесь https://web4life.ru/price-promo/

👜 4 – Урок “Несколько промокодов можно применить только каждый на свой  товар или группу товаров”
Демонстрация здесь https://web4life.ru/uni-promo

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

Как со мной связаться

Если вы не нашли вашего решения в текущей статье, а также на страницах моих онлайн – уроков по промокодам в Тильда https://web4life.ru/curs-promo/ Тогда присылайте ваше ТЗ задание под ваш проект.
Пишите https://t.me/vbalakin буду рад помочь с доработкой.

Еще материалы

Комментарии

  1. Роман сказал:

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

    • webvova сказал:

      Вообще я тестировал такой вариант. И чтобы его исключить, настраивал уже саму корзину в тильда. Там есть опция удаления всего из заказа при закрытии корзины. А так можно скрипт допилить и на вариант отмены применения после закрытия корзины. Все зависит от вашей задачи

  2. Лена сказал:

    как быть, если нужно, чтобы при одновременном нахождении разных товаров в корзине, промокод применялся только на один товар?

    • webvova сказал:

      Пока на мой взгляд никак. Промокоды применяются только ко всей сумме заказа. Мой вариант только не даст применить промокод в текущем исполнении.

  3. Виктория сказал:

    Или я туплю, или тут есть лазейка:

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

    • webvova сказал:

      Видимо есть ошибка, так как такой сценарий тестил в первую осередь:-). Но если что можно сделать очистку корзины при её зарытии

    • Анастасия сказал:

      А можно сделать, чтобы при закрытии корзины не удалялись из неё все товары, а только сбрасывался промокод?

  4. Роман сказал:

    А можно реализовать создание уникальных промокоды? Хочется доказать купон на скидку при первой покупке, но если сделать безлимитный промокод с фикс названием, то ведь покупатель может и во 2 раз его применить ? Можете подсказать как это решить ?

    • webvova сказал:

      Поразмыслил я над вопросом. Нет нельзя. Например в ворпресс/woocommerce можно так как там есть контроль учетки и промокодов на его активацию конкретным юзером. В тильде ничего такого и нет. Да и кодом никак не отмледить даже если включили через JS передачу активаций в сессию.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *