Делаем промокод на сайте для скидок

Март, 01 Мазиков Валентин Web разработка

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

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

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

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

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

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

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

Размер: 75.8 Kб

Так как плагин разработан с использованием 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 нужно использовать для работы плагина. У меня это выглядит так:

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

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

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

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

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

1	`.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 промокода:

moskvach со скидкой 10%
mosk со скидкой 20%
msk со скидкой 3.3%

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

<script>
     $(function () {
        $('.sl-discount').slDiscount({
           promocodeNamePercent: {
            moskvach: '10',
            mosk: '20',
            msk: '3.3'
           }
        });
     });
</script>

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

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

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

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

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

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

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

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

Надеюсь вам понравился материал, подписывайтесь на нас и не пропускайте интересные статьи)

Делаем промокод на сайте для скидок

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

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

Я дарю тебе бесплатно скрипты, ты меня благодаришь за это