Виджет скидок на основе ввода промокода для 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. Можно скрытое. Именно в него и передается промокод. А дальше обрабатывайте как любые другие значения полей вашей формы.

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

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

  1. Дмитрий Давыдов

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

  2. Дмитрий Давыдов

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

    1. Дмитрий Давыдов

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

    2. Дмитрий Давыдов

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

    3. Дмитрий Давыдов

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

    4. Дмитрий Давыдов

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

  3. Дмитрий Давыдов

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

    1. Дмитрий Давыдов

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

  4. Дмитрий Давыдов

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

    1. Дмитрий Давыдов

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

    2. Дмитрий Давыдов

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

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

    3. Дмитрий Давыдов

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

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

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

      или

      window.location.href = "my.url"
  5. Дмитрий Давыдов

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

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

 

© 2014 — 2020, Smartlanding.biz. Все права защищены. Любое использование материалов допускается только с указанием активной ссылки на источник. Политика конфиденциальности