» » Создание промо-кодов для калькулятора

Создание промо-кодов для калькулятора

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

Еще бы! Но как же это реализовать? Об этом и пойдет речь ниже.

Все, что нам понадобится, это:

  • виджет «HTML-код»
  • названия промо-кодов
  • ID задействованных элементов (кнопок и поля)

Как это работает.

Все очень просто. Пользователь оформляет заявку на вашей форме, достигает определенной суммы и при отправке уведомления получает промо-код, который он сможет использовать и при следующих заказах.

Итак, начали!

1. Для начала зайдите в расчетную часть проекта и оберните всю формулу в скобки. После этого добавьте в свою форму виджеты «Поле» и «Кнопка». Они послужат нам для указания и проверки промо-кодов.

2. Далее щелкните правой кнопкой мыши на только что созданном поле и выберите «Просмотреть код» («Исследовать элемент»). Найдите в открывшейся консоли его атрибут id и скопируйте его, он нам понадобится.

Для выдачи промо-кода мы будем использовать кнопку, которую создали вместе с полем. Аналогично найдите и скопируйте ее класс (class).

3. Теперь позаботимся о всплывающих сообщениях - уведомлениях, которые будут сообщать вашим клиентам о действии промо-кода, об их выдаче, или неудачном вводе. Для этого добавьте 2 виджета «HTML-код» и расположите их в том месте, где желаете видеть оповещения. Первый виджет послужит нам для выдачи промо-кода, второй - для проверки.

В первый виджет вставьте следующее:

<style>
#success, #fail, #promo_field {
 display: block;
 padding: 20px;
 font-size: 20pt;
 font-weight: bold;
 text-align: center;
}
#success, #promo_field {background-color: #77f277; color: #000;}
#fail {background-color: #f74e48; color: #fff;}
</style>
<div id='promo_field' style='display:none;'>Ваш промо-код: <span id='promo_code'></span></div>
А во второй - это:
<span id='success'>Такой промо-код есть!</span>
<span id='fail'>Увы, такого промо-кода нет.</span>

Внутри элементов <div> и <span> вы можете изменить текст сообщений на свой. Если же вы умеете работать с CSS, то также измените стили на свое усмотрение.

4. Теперь займемся основным кодом. Добавьте третий виджет «HTML-код» в самый низ формы. На выбор мы предоставляем 3 варианта скрипта - для одного промо-кода, для двух, или трех.

<script>
var code = {
 name: 'promo', // название промо-кода
 percent: '30%', // процент скидки
 result: 1200 // порог заказа
};

$(function() {
 $('.ID кнопки').click(function() {
 RECALC.go();
 if(RECALC.db.res[1] < code.result) {
 return false;
 } else {
 $('#promo_field').slideDown(400, function() {
 appNormalise();
 });
 $('#promo_code').text(code.name);
 $('.ID кнопки, #ID поля').attr('disabled', 'disabled').css('opacity', '.6');
 }
 });

 $('.ID кнопки').on('click', function() {
 if($('#ID поля').val() === code.name) {
 SAVER.json.results[0].formula += '-' + code.percent;
 RECALC.go();
 $('#success').slideDown(400, function() {
 appNormalise();
 });
 $('#fail').slideUp(200); 
 $('.ID кнопки').attr('disabled', 'disabled').css('opacity', '.6');
 } else if($('#ID поля').val() !== code.name) {
 $('#success').slideUp(200);
 $('#fail').slideDown(400, function() {
 appNormalise();
 });
 }
 }) 
});
</script>
<script>
var code = {
 name: 'promo', // название первого промо-кода
 percent: '30%', // размер скидки
 result: 1200 // порог заказа
};

var code2 = {
 name: 'discount', // название второго промо-кода
 percent: '50%', // размер скидки
 result: 1500 // порог заказа
};

function showNotice(a) {
 SAVER.json.results[0].formula += '-' + a.percent;
 RECALC.go();
 $('#success').slideDown(400, function() {
 appNormalise();
 });
 $('#fail').slideUp(200); 
 $('#ID кнопки проверки').attr('disabled', 'disabled').css('opacity', '.6');
};

function getPromo(a) {
 $('#promo_field').slideDown(400, function() {
 appNormalise();
 });
 $('#promo_code').text(a.name);
 $('#ID основной кнопки, #ID кнопки проверки, #ID поля проверки').attr('disabled', 'disabled').css('opacity', '.6'); 
};

$(function() {
 $('#ID основной кнопки').click(function() {
 RECALC.go();
 if(RECALC.db.res[1] < code.result) {
 return false;
 } else if(RECALC.db.res[1] > code.result && RECALC.db.res[1] < code2.result) {
 getPromo(code);
 } else if(RECALC.db.res[1] > code2.result) {
 getPromo(code2);
 }
 });

 $('#ID кнопки проверки').click(function() {
 if($('#ID поля проверки').val() === code.name) {
 showNotice(code);
 } else if($('#ID поля проверки').val() === code2.name) {
 showNotice(code2);
 } else if($('#ID поля проверки').val() !== code.name || $('#ID поля проверки').val() !== code2.name) {
 $('#success').slideUp(200);
 $('#fail').slideDown(400, function() {
 appNormalise();
 });
 }
 });
</script>
<script>
var code = {
 name: 'promo', // название первого промо-кода
 percent: '30%', // размер скидки
 result: 1200 // порог заказа
};

var code2 = {
 name: 'discount', // название второго промо-кода
 percent: '50%', // размер скидки
 result: 1500 // порог заказа
};

var code3 = {
 name: 'sale', // название третьего промо-кода
 percent: '70%', // размер скидки
 result: 1800 // порог заказа
};

function showNotice(a) {
 SAVER.json.results[0].formula += '-' + a.percent;
 RECALC.go();
 $('#success').slideDown(400, function() {
 appNormalise();
 });
 $('#fail').slideUp(200); 
 $('#ID кнопки проверки').attr('disabled', 'disabled').css('opacity', '.6');
};

function getPromo(a) {
 $('#promo_field').slideDown(400, function() {
 appNormalise();
 });
 $('#promo_code').text(a.name);
 $('#ID основной кнопки, #ID кнопки проверки, #ID поля проверки').attr('disabled', 'disabled').css('opacity', '.6'); 
};

$(function() {
 $('#ID основной кнопки').click(function() {
 RECALC.go();
 if(RECALC.db.res[1] < code.result) {
 return false;
 } else if(RECALC.db.res[1] > code.result && RECALC.db.res[1] < code2.result) {
 getPromo(code);
 } else if(RECALC.db.res[1] > code2.result && RECALC.db.res[1] < code3.result) {
 getPromo(code2);
 } else if(RECALC.db.res[1] > code3.result) {
 getPromo(code3);
 }
 });

 $('#ID кнопки проверки').click(function() {
 if($('#ID поля проверки').val() === code.name) {
 showNotice(code);
 } else if($('#ID поля проверки').val() === code2.name) {
 showNotice(code2);
 } else if($('#ID поля проверки').val() === code3.name) {
 showNotice(code3);
 } else if($('#ID поля проверки').val() !== code.name || $('#ID поля проверки').val() !== code2.name || $('#ID поля проверки').val() !== code3.name) {
 $('#success').slideUp(200);
 $('#fail').slideDown(400, function() {
 appNormalise();
 });
 }
 });
</script>

Примечания

  • ID основной кнопки - идентификатор кнопки, которая отвечает за передачу уведомлений и оформления заказа
  • Порог заказа - необходимая сумма заказа, по достижению которой клиенту будет предоставляться промо-код

Готово!

Теперь вы с гордостью можете представлять этот функционал своим клиентам :)

Удачи в будущих рекламных акциях!

Создание промо-кодов для калькулятора

avatar