Скрипт автоматического применение промокода в Тильде

Сегодня речь пойдет о механизме автоматического применения промокода, написание скрипта можете посмотреть по этой ссылке

Первым обязательным условием нам нужно будет объявить переменную с необходимыми нам константами, но т.к. эти константы постоянно меняются в зависимости от суммы корзины мы запишем это в let

let sum_array = {
        amount: window.tcart.prodamount,
        discount_sum: window.tcart.promocode.prodamount_discountsum,
        full_sum: window.tcart.prodamount - window.tcart.promocode.prodamount_discountsum
    }

amount — это сумма корзины до вычета скидки
discount_sum — сумма скидки
full-sum — разница первых двух (итоговая стоимость)

Дальше нам создать сам промокод и написать функцию применения промокода, это вы можете посмотреть в предыдущей статье , здесь я напишу пример функции для сайта с поэтапной корзиной, назову функцию addPromo

function addPromo() {
    let sum = window.tcart.prodamount
    window.tcart.promocode = {message: 'OK', promocode: 'Ваш промокод', discountpercent: 'Ваш процент.00', prodamount_discountsum: sum*0.ваш процент}
    sum_array = {
        amount: window.tcart.prodamount,
        discount_sum: window.tcart.promocode.prodamount_discountsum,
        full_sum: window.tcart.prodamount - window.tcart.promocode.prodamount_discountsum
    }

}

В тильде промокоды имеют такое свойство, как сбрасываться при обновлении страницы или переходу на другую страницу, поэтому нам нужно закрепить промокод в куки на 30 дней, для этого напишем 2 функции:
Одна для записи кук
Вторая для чтения кук
Логика простая: Мы записываем в браузер информацию о том что человек активировал промокод (скидку) на сайте и автоприменяем его если существует соответствующая запись в куках
Вот сами функции записи addCookie и чтения readCookie кук

function addCookie(val, name){
    let date = new Date;
    date.setDate(date.getDate() + 30);
    document.cookie = name+"="+val+"; path=/; expires=" + date.toUTCString();
}
function readCookie(name) {
    let matches = document.cookie.match(new RegExp(
        "(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"
    ));
    return matches ? decodeURIComponent(matches[1]) : undefined;
}

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

if (readCookie('discount') === "1") addPromo()

Работу скрипта мы написали, осталось показать нашему пользователю его скидку, я назвал функцию editCartSum, обязательно проверяйте ID!

function editCartSum() {
    sum_array = {
        amount: window.tcart.prodamount,
        discount_sum: window.tcart.promocode.prodamount_discountsum,
        full_sum: window.tcart.prodamount - window.tcart.promocode.prodamount_discountsum
    }
    let html = '<span class="t706__sidebar-prodamount-label">Сумма: </span><span class="t706__sidebar-prodamount"><div class="t706__cartwin-prodamount-price">'+sum_array.amount+'</div><div class="t706__cartwin-prodamount-currency">р.</div></span>' +
        '<br><br><span class="t706__cartwin-totalamount-info_label">Скидка:</span><span\n' +
        '    class="t706__cartwin-totalamount-info_value"><div class="t706__cartwin-prodamount-price">'+ sum_array.discount_sum +'</div><div\n' +
        '    class="t706__cartwin-prodamount-currency">р.</div></span><br><span\n' +
        '    class="t706__cartwin-totalamount-info_label">Сумма со скидкой:</span><span\n' +
        '    class="t706__cartwin-totalamount-info_value"><div class="t706__cartwin-prodamount-price">'+ sum_array.full_sum +'</div><div\n' +
        '    class="t706__cartwin-prodamount-currency">р.</div></span>'

    $('#id_вашей_корзины .t706__sidebar-prodamount-wrap').html(html)
}

Теперь нам нужно вернуться в функцию добавления промокода и добавить туда нашу новую функцию editCartSum(), что бы пользователь увидел изменение цены.
И добавить триггер функцию которая будет реагировать на изменение состава корзины и вовремя подгружать цены в корзину

$('#id_вашей_корзины .t706__carticon-counter').bind('DOMSubtreeModified', function(){
        editCartSum()
    });

Теперь она будет выглядеть так:

function addPromo() {
    let sum = window.tcart.prodamount
    window.tcart.promocode = {message: 'OK', promocode: 'Ваш промокод', discountpercent: 'Скидка_промокода_в_процентах.00', prodamount_discountsum: sum*0.Скидка_промокода_в_процентах}
    sum_array = {
        amount: window.tcart.prodamount,
        discount_sum: window.tcart.promocode.prodamount_discountsum,
        full_sum: window.tcart.prodamount - window.tcart.promocode.prodamount_discountsum
    }
    editCartSum()
    $('#id_вашей_корзины .t706__carticon-counter').bind('DOMSubtreeModified', function(){
        editCartSum()
    });
}

Теперь осталось написать вызов всех наших функций по клику по нашей кнопке

$('.Класс кнопки').on('click', function(){
    addPromo()
    addCookie(1, 'discount')
    return false
})

Теперь соберем наш код в единое целое:

1) Объявим переменную
2) Напишем функции кук
3) Добавим функцию рендринга итоговой цены со скидкой для пользователя
4) Добавим авто применение промокода если есть соответствующая запись в браузере
5) Напишем наш триггер в котором пропишем все вызовы функций

Выглядеть будет примерно так:

let sum_array
/**
 *
 * @param name
 * @returns {string|undefined}
 */
function readCookie(name) {
    let matches = document.cookie.match(new RegExp(
        "(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"
    ));
    return matches ? decodeURIComponent(matches[1]) : undefined;
}

function addCookie(val, name){
    let date = new Date;
    date.setDate(date.getDate() + 30);
    document.cookie = name+"="+val+"; path=/; expires=" + date.toUTCString();
}

function editCartSum() {
    sum_array = {
        amount: window.tcart.prodamount,
        discount_sum: window.tcart.promocode.prodamount_discountsum,
        full_sum: window.tcart.prodamount - window.tcart.promocode.prodamount_discountsum
    }
    let html = '<span class="t706__sidebar-prodamount-label">Сумма: </span><span class="t706__sidebar-prodamount"><div class="t706__cartwin-prodamount-price">'+sum_array.amount+'</div><div class="t706__cartwin-prodamount-currency">р.</div></span>' +
        '<br><br><span class="t706__cartwin-totalamount-info_label">Скидка:</span><span\n' +
        '    class="t706__cartwin-totalamount-info_value"><div class="t706__cartwin-prodamount-price">'+ sum_array.discount_sum +'</div><div\n' +
        '    class="t706__cartwin-prodamount-currency">р.</div></span><br><span\n' +
        '    class="t706__cartwin-totalamount-info_label">Сумма со скидкой:</span><span\n' +
        '    class="t706__cartwin-totalamount-info_value"><div class="t706__cartwin-prodamount-price">'+ sum_array.full_sum +'</div><div\n' +
        '    class="t706__cartwin-prodamount-currency">р.</div></span>'

    $('#id корзины.t706__sidebar-prodamount-wrap').html(html)
}

function addPromo() {
    let sum = window.tcart.prodamount
    window.tcart.promocode = {message: 'OK', promocode: 'Ваш промокод', discountpercent: 'Процент скидки.00', prodamount_discountsum: sum*0.процент скидки}
    sum_array = {
        amount: window.tcart.prodamount,
        discount_sum: window.tcart.promocode.prodamount_discountsum,
        full_sum: window.tcart.prodamount - window.tcart.promocode.prodamount_discountsum
    }
    editCartSum()
    $('#id_вашей_корзины .t706__carticon-counter').bind('DOMSubtreeModified', function(){
        editCartSum()
    });
}
if (readCookie('discount') === "1") addPromo()


$('.Класс кнопки').on('click', function(){
    addPromo()
    addCookie(1, 'discount')
    return false
})