1. Робота з HTML файлом:
1.1. Якщо у вас є файл index.html, перейменуйте його на index.php.
1.2. На початку файлу вставте наступний код:
<?php
function generate_form_token() {
$_SESSION['csrf_token'] = substr(str_shuffle('qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM'), 0, 10);
return $_SESSION['csrf_token'];
}
?>
1.3. У формі введення номера телефону вставте наступний рядок:
<input name="csrf_token" id="csrf_token" type="hidden" value="<?= generate_form_token(); ?>">
1.4. В кінці файлу підключіть jquery.js, plugin.js, а потім ваші локальні JS файли. Порядок важливий.
2. Робота з JS файлом:
2.1. У вашому JS файлі додайте код для налаштування та ініціалізації плагіну:
const config = {
msisdnInputSelector: "#msisdn" - селектор для введення номера телефону.
msisdnButtonSelector: "#subscribe" - селектор для кнопки відправки номера телефону.
otpFormSelector: "#pin_code" - селектор для форми відправки пін-коду.
otpInputSelector: "#mw_pin_code" - селектор для введення пін-коду.
otpButtonSelector: "#verify" - селектор для кнопки відправки пін-коду.
errorMsgSelector: ".mw_error_msg" - селектор для елемента відображення повідомлень про помилки.
successLinkSelector: "#success_link" - селектор для елемента відображення успішної підписки.
footerRulesSelector: "#footer_text" - селектор для елемента відображення правил у підвалі сторінки.
footerTermsSelector: "#terms" - селектор для елемента відображення умов у підвалі сторінки.
csrfToken: $('#csrf_token').val(),
reqid: "",
hooks: {
onEnableButton: function(button) {
},
onDisableButton: function(button) {
},
onSuccessPhoneNumber: function(response) {
},
onErrorPhoneNumber: function(error) {
},
onSuccessOtpCode: function(response) {
},
onErrorOtpCode: function(error) {
},
onMsisdnInput: function(phoneNumber, maxLength) {
},
onOtpInput: function(otpCode) {
},
onEnableOtpButton: function(button) {
},
onDisableOtpButton: function(button) {
},
onOtpFormSubmit: function(event, form) {
},
onErrorMessage: function(message, config) {
},
onUpdateFooter: function(footerText, termsText) {
}
}
};
Переконайтеся, що цей код знаходиться всередині блоку:
document.addEventListener("DOMContentLoaded", function () { ... });
Це забезпечує виконання коду тільки після повного завантаження DOM. Це важливо, оскільки якщо скрипт спробує звернутися до елементів, які ще не завантажені, це спричинить помилки. Подія DOMContentLoaded відбувається, коли весь HTML повністю завантажено і оброблено.
2.2. Далі налаштуйте селектори для елементів форми, які використовуються плагіном.
Селектори використовуються для вказівки плагіну, з якими елементами на сторінці він повинен взаємодіяти. Наприклад, селектор для введення номера телефону дозволяє плагіну знайти та використовувати цей введення для введення даних користувача.
Щоб знайти селектори, потрібно переглянути HTML код вашої сторінки і визначити, які елементи будуть використовуватися плагіном. Наприклад:
Виходячи з цього HTML коду, можна налаштувати селектори наступним чином:
<input type="tel" id="msisdn" name="msisdn">
<button id="subscribe">Subscribe</button>
<form id="pin_code">
<input type="text" id="mw_pin_code">
<button id="verify">Verify</button>
</form>
<div class="mw_error_msg"></div>
<div id="success_link" style="display: none;">Your subscription has been successfully completed!</div>
<div id="footer_text"></div>
<div id="terms"></div>
Виходячи з цього HTML коду, можна налаштувати селектори наступним чином:
msisdnInputSelector: "#msisdn" - селектор для введення номера телефону.
msisdnButtonSelector: "#subscribe" - селектор для кнопки відправки номера телефону.
otpFormSelector: "#pin_code" - селектор для форми відправки пін-коду.
otpInputSelector: "#mw_pin_code" - селектор для введення пін-коду.
otpButtonSelector: "#verify" - селектор для кнопки відправки пін-коду.
errorMsgSelector: ".mw_error_msg" - селектор для елемента відображення повідомлень про помилки.
successLinkSelector: "#success_link" - селектор для елемента відображення успішної підписки.
footerRulesSelector: "#footer_text" - селектор для елемента відображення правил у підвалі сторінки.
footerTermsSelector: "#terms" - селектор для елемента відображення умов у підвалі сторінки.
2.3. Далі налаштуйте методи-хуки.
Методи-хуки у конфігурації плагіну надають можливість розробникам розширити функціонал плагіну та додати власні дії у відповідь на певні події. Наприклад, плагін відстежує довжину введеного номера телефону, і коли користувач ввів усі цифри номера, викликається хук onEnableButton: function(button) { … }.
Всередині методу потрібно вказати код для зміни кольору кнопки підписки та її активації.
Навпаки, коли користувач видаляє цифру в номері і номер знову стає недійсним, викликається хук onDisableButton: function(button) { … }.
Всередині методу потрібно вказати код для зміни кольору кнопки підписки та її деактивації.
Нижче наведено опис усіх хуків:
onEnableButton: Цей хук викликається, коли кнопку відправки номера телефону потрібно увімкнути (активувати).
onDisableButton: Цей хук викликається, коли кнопку відправки номера телефону потрібно вимкнути (деактивувати).
onSuccessPhoneNumber: Цей хук викликається при успішній відправці та перевірці номера телефону.
onErrorPhoneNumber: Цей хук викликається при помилці перевірки номера телефону.
onSuccessOtpCode: Цей хук викликається при успішній відправці та перевірці пін-коду.
onErrorOtpCode: Цей хук викликається при помилці перевірки пін-коду.
onMsisdnInput: Цей хук викликається, коли користувач вводить номер телефону.
onOtpInput: Цей хук викликається, коли користувач вводить пін-код.
onEnableOtpButton: Цей хук викликається, коли кнопку відправки пін-коду потрібно увімкнути (активувати).
onDisableOtpButton: Цей хук викликається, коли кнопку відправки пін-коду потрібно вимкнути (деактивувати).
onOtpFormSubmit: Цей хук викликається при відправці форми пін-коду.
onErrorMessage: Цей хук викликається для відображення повідомлень про помилки.
onUpdateFooter: Цей хук викликається для оновлення тексту у підвалі сторінки.
Деякі хуки є обов’язковими:
onSuccessPhoneNumber: Тут потрібно приховати форму введення номера телефону та показати форму введення пін-коду.
onErrorMessage: Цей хук викликається для відображення повідомлень про помилки.
onUpdateFooter: Для відображення обов’язкових умов пропозиції.
onSuccessOtpCode: При успішній відправці та перевірці пін-коду.
Якщо важко зрозуміти, для чого призначений хук і чи потрібен він на вашій конкретній сторінці, вставте alert() з назвою хука всередину хуків і відстежуйте їхній вивід. Наприклад:
onEnableButton: function(button) {
alert('onEnableButton');
},
onDisableButton: function(button) {
alert('onDisableButton');
},
Цей підхід допоможе краще зрозуміти алгоритм роботи плагіну та перевірити, чи були правильно вказані селектори.
Щоб протестувати вашу сторінку та змоделювати успішне введення номера телефону та пін-коду, введіть номер, що починається з цифри 2 після префіксу країни. Наприклад:
UAE (Об’єднані Арабські Емірати) – префікс країни 971, введіть номер 234567890, хук onEnableButton має спрацювати на цифру 0.
OM (Оман) – префікс країни 968, введіть номер 23456789, хук onEnableButton має спрацювати на цифру 9, оскільки номери телефонів у цій країні мають менше цифр, ніж в UAE.
3. Після підготовки лендінгу його необхідно подати на погодження. Ознайомитись з працюючим прикладом лендінгу ви можете, перейшовши за посиланням.
