Виджет скидок на основе ввода промокода для landing page

Виджет промокода для сайтаПривет, друзья. В прошлой статье я говорил, что по просьбе одного из читателей готовлю небольшой виджет скидок на основе ввода промокода. Уже есть что показать, поэтому решил поделиться с вами.

Возможно, после тестов, мы  вместе придумаем еще какой-то функционал и попробуем реализовать.

В чем заключается суть виджета скидок

Суть виджета заключается в том, что на сайте есть форма, в которую можно ввести промокод. Если он действительный, то на всем сайте пересчитывается цена на определенный процент, который соответствует промокоду.

Цена помещается в отдельный тег с определенным классом. А промокод, который был применен передастся в одно из полей вашей формы.

Суть, думаю, понятна. Давайте посмотрим как подключать плагин и разберем пример.

Виджет скидок на основе ввода промокода

Скачать плагин

Так как плагин разработан с использованием jQuery, то как обычно, подключим саму библиотеку, плагин и инициализируем его:

<!DOCTYPE html>
<html lang="ru">
<head>
   <meta charset="UTF-8">
   <title>Виджет скидки</title>
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
   <link rel="stylesheet" href="./sl-discount/css/sl-discount.css">
   <link rel="stylesheet" href="./css/style.css">
</head>
<body>
  <div class="sl-discount sl-discount__wrapper"></div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="./sl-discount/sl-discount.js"></script>
  <script>
     $(function () {
        $('.sl-discount').slDiscount();
     });
   </script>
</body>
</html>

Именно div c классом sl-discount нужно использовать для работы плагина. У меня это выглядит так:

<div class="sl-discount sl-discount__wrapper"></div>

Подключаем стили плагина:

<link rel="stylesheet" href="./sl-discount/css/sl-discount.css">

Получаем такой внешний вид:

Виджет скидок

Теперь, давайте условимся, что саму цену мы будем вставлять в отдельный тег на сайте с классом:

.sl-discount__full-price

В этом теге не будет ничего кроме цифры. То есть, если вам нужно указать валюту, то можно сделать это так:

<p class="product__price">
   <span class="product__price-number sl-discount__full-price">12500</span> ₽
</p>

Еще одна условность, разделять копейки точкой, а не запятой. Например: "120.50". Надеюсь, с этим понятно.

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

  • formButtonText - текст кнопки;
  • formInputPlaceholder - placeholder поля с вводом промокода;
  • formTitle - заголовок формы;
  • formRespondFail - текст, выводящийся при вводе промокода, который несуществует;
  • promocodeNamePercent - промокод с процентом скидки;

Как пользоваться настройками?

Все достаточно просто и стандартно. При инициализации плагина, нужно задать соответствующие параметры объектам, которым хотите переопределить значения. Основным, конечно же, является promocodeNamePercent. Давайте с него и начнем. Допустим мы придумали 3 промокода:

  • smartlanding со скидкой 10%
  • smarbiz со скидкой 20%
  • smartlid со скидкой 3.3%

Давайте добавим их в наш скрипт:

<script>
     $(function () {
        $('.sl-discount').slDiscount({
           promocodeNamePercent: {
            smartlanding: '10',
            smarbiz: '20',
            smartlid: '3.3'
           }
        });
     });
</script>

Правда несложно? По аналогии можно добавлять сколько угодно промокодов с разным процентом скидок.

Остальные настройки правятся путем изменения строки. По умолчанию значения уже заданы, но вы можете переопределить их. Например:

<script>
   $(function () {
      $('.sl-discount').slDiscount({
         promocodeNamePercent: {
            smartlanding: '10',
            smarbiz: '20',
            smartlid: '3.3'
         },
         formButtonText: 'Ввести', //текст кнопки
         formRespondFail: 'Такого промокода не существует', // текст ошибки, при несуществующем промокоде
      });
   });
</script>

Это тоже было несложно. А теперь... А теперь можно заканчивать статью, ведь все уже разобрано. Но давайте живую демку посмотрим:

Смотреть демо

Промокоды, использовавшиеся в статье - актуальны!

Чуть не забыл. Чтобы понять, какой именно промокод был применен, создайте поле с классом sl-discount__promocode. Можно скрытое. Именно в него и передается промокод. А дальше обрабатывайте как любые другие значения полей вашей формы.

В следующий раз, если будет отклик на эту статью (комментарии, лайки и т.д.), то разберем как связать пример выше, с формой обратной связи.

14 комментариев

  1. Егор

    Здравствуйте, Дмитрий. Спасибо за скрипт, буду тестировать. Если появятся идеи или замечания по доработке - отпишу!

  2. Артём

    Приветствую!! Спасибо, я ждал этой статьи!) Буду завтра тестировать скрипт! Огромное спасибо)

    1. dimadv7

      Да не за что)) Тестируй, если что пиши сюда)

    2. Артём

      dimadv7, Применил! Спасибо всё круто! Спасибо!!

    3. dimadv7

      Отлично. Тебе спасибо за идею! Скоро сделаю статью, как связать с формой, вдруг кому-то сложно покажется самому.

    4. Константин

      Спасибо, пригодилось

  3. СЕРЫЙ

    А можно поподробнее о том, как внедрить это в сайт, построенный на Платформе LP?
    Какие скрипты и куда записать, чтобы это работало на сайте?

    1. dimadv7

      СЕРЫЙ, без понятия. Не разбирался как вставлять скрипты и файлы в этот конструктор. Наверное, это вопрос больше к техподдержке

  4. Дмитрий

    А как же защита? Можно просмотреть код страницы и узнать все промокоды. Надо бы добавить скрипт, который будет вычислять хэш по какому-то алгоритму и уже его сравнивать...

    1. dimadv7

      Дмитрий, конечно вы правы. Но для лендинга заморачиваться не стал. Хорошо бы и ограничить их количество, то есть например,не больше 10 раз можно использовать каждый, и количество попыток, чтобы не перебирали. И не выводить пользователю форму, который уже ввел промокод когда-то. Кстати, возможно, переделаю в ближайшем будущем статью. Спасибо за идею, попробую учесть все вышеперечисленное.

    2. Дмитрий

      dimadv7, дело в том, что у меня лендинг и там есть стоимость продукта. Мне надо чтобы по промокоду менялась цена, но при этом, его легко можно будет узнать из html. А ограничить число ввода, если не через куки или что-то ещё, скорее всего можно только через базу данных, как вариант. Ещё вопрос - можете подкинуть простой код, чтобы при вводе промо-кода производился переход на сайт по принципу:
      1. ввели промо код: promo1
      2. переход на сайт: __www.site.com/promo1

      я сделал на php, но страница лендинга html и php не срабатывает. А мы было бы удобно - если юзер введёт неверный промо - тогда ошибка 404, если верный - страница оплаты продукта со скидосом

    3. dimadv7

      Дмитрий, так можно же просто переименовать расширение на php, ничего же не измениться и не сломается. Все будет работать как и раньше.

      По поводу кода, то нужно считать строку, из поля и если она совпадает с нужной вызвать:

      window.open('http://example.com');

      или

      window.location.href = "my.url"
  5. Николай

    Классный виджет, пытаюсь его связать с самописным модулем оплаты, но при применении промокода, виджет не меняет value в input, а добавляет просто значение "0". Можно как-то исправить?

  6. Евгений

    Понадобилось менять цену в input для формы от юкасса. Инпут передает цену. Доработали код. Если кому надо вот.

    (function ($) {
    var defaults = {
    promocodeNamePercent: {
    smartlanding: '10',
    },
    formButtonText: 'Применить',
    formInputPlaceholder: 'Ваш промокод',
    formTitle: 'Введите промокод и получите скидку',
    formRespondFail: 'Ваш промокод недействительный'
    };

    var methods = {
    init: function (options) {
    let settings = $.extend(defaults, options);
    return this.each(function () {
    $(this).append(methods.showSlDiscountForm());
    $('body').addClass('sl-discount__body');
    });
    },
    сreateDiscountFormInner: function () {
    let slDiscountFormInner = $('').attr({
    class: 'sl-discount__inner',
    });

    let slDiscountForm = $('').attr({
    class: 'sl-discount__form',
    autocomplete: 'off'
    });

    let slDiscountTitile = $('').attr({
    class: 'sl-discount__title'
    }).text(defaults.formTitle);

    let slDiscountInput = $('').attr({
    class: 'sl-discount__input',
    type: 'text',
    name: 'promocode',
    placeholder: defaults.formInputPlaceholder
    });

    let slDiscountCloseButton = $('').attr({
    class: 'sl-discount__close',
    type: 'button',
    });

    slDiscountCloseButton.click(function (event) {
    event.preventDefault();
    methods.closeSlDiscountForm();
    $('body').removeClass('sl-discount__body');

    });

    let slDiscountSubmit = $('').attr({
    class: 'sl-discount__button',
    type: 'button',
    }).text(defaults.formButtonText);

    slDiscountSubmit.click(function (event) {
    event.preventDefault();
    let currentPromocode = slDiscountInput.val();
    for (key in defaults.promocodeNamePercent) {
    if (key == currentPromocode) {
    $('.sl-discount__full-price').each(function () {
    let temp = +$(this).text();
    let newPrice = (temp - ((temp * defaults.promocodeNamePercent[key]) / 100))
    if (!isNaN(temp)) {
    $(this).text(newPrice);

    $(this).parents('.ym-payment-btn-block').find('.sl-discount_ym_shop').val(newPrice);

    slDiscountForm.html('Ваша скидка применена. Она составляет ' + defaults.promocodeNamePercent[key] + '%');
    if ($('input').is('.sl-discount__promocode')) {
    $('.sl-discount__promocode').val(key);
    }
    } else {
    console.log('Предупреждение: некоторые из данных не являются числом, убедитесь что в классах .full-price находятся только цифры')
    false;
    }
    });
    break;
    } else {
    slDiscountTitile.text(defaults.formRespondFail);
    setTimeout(() => {
    slDiscountTitile.text(defaults.formTitle);
    }, 2000);
    };
    };
    });

    slDiscountForm.keydown(function (event) {
    if (event.keyCode == 13) {
    event.preventDefault();
    return false;
    }
    });

    slDiscountFormInner.append(slDiscountForm.append(slDiscountTitile).append(slDiscountInput).append(slDiscountSubmit)).append(slDiscountCloseButton);

    return slDiscountFormInner;
    },

    closeSlDiscountForm: function () {
    let close = $('.sl-discount').remove();
    return close;
    },

    showSlDiscountForm: function () {
    return methods.сreateDiscountFormInner();
    }
    };
    $.fn.slDiscount = function (method) {
    if (methods[method]) {
    return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
    } else if (typeof method === 'object' || !method) {
    return methods.init.apply(this, arguments);
    } else {
    $.error('Метод ' + method + ' не найден');
    };
    };
    }(jQuery));

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