Smartlanding

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

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

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

  • Егор

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

  • Артём

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

  • dimadv7

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

  • Артём

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

  • dimadv7

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

  • Константин

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

  • СЕРЫЙ

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

  • dimadv7

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

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

Поделитесь статьей в социальных сетях, чтобы не потерять