Зворотний дзвінок сайту. Частина 2

30

Від автора: вітаю Вас, дорогий друже. У даному уроці ми продовжуємо працювати над скриптом форма зворотнього дзвінка для сайту. Нагадаю, що кнопка показу форми зворотного дзвінка, вже реалізована і причому з’являється вона, на сторінці з досить ефектною анімацією, а так само даний елемент відстежує розміри вікна браузера і переміщення повзунка скролла. Тепер нам належить описати покадрову анімацію для кнопки, стилізувати модальне спливаюче віконце з формою і написати код серверної частини, яка безпосередньо відправить електронне повідомлення із запитом на зворотний дзвінок.

скачать исходникискачать урок

Для залучення уваги відвідувачів, кнопки показу форми зворотного зв’язку, ми з Вами в стилях CSS визначили дві покадровые анімації, з псевдонімами shadow і pulse. При цьому ми поставили параметри анімаційних ефектів, але не вказали, що саме буде виконуватися при роботі анімації. А значить, давайте сформуємо параметри анімації pulse (файл стилів style.css додамо наступні рядки).

@keyframes pulse {
0% { width:60px; height:60px; top:0px; left:0px }
5% { width:66px; height:66px; top:-3px; left:-3px }
10% { width:60px; height:60px; top:0px; left:0px }
15% { width:66px; height:66px; top:-3px; left:-3px }
20% { width:60px; height:60px; top:0px; left:0px }
25% { width:66px; height:66px; top:-3px; left:-3px }
30% { width:60px; height:60px; top:0px; left:0px }
59% { transform:rotate(0deg); }
60% { transform:rotate(10deg); }
65% { transform:rotate(-10deg); }
70% { transform:rotate(10deg); }
75% { transform:rotate(-10deg); }
80% { transform:rotate(10deg); }
85% { transform:rotate(-10deg); }
90% { transform:rotate(0deg); }
100% { width:60px; height:60px; top:0px; left:0px }
}

Правило @keyframes – дозволяє описати анімацію CSS властивостей, обраного елемента у вигляді переліку станів елемента в певні моменти часу. Зверніть увагу, що мітки часу вказуються у вигляді певного відсотка від загального часу виконання анімації. Кожна мітка часу, задає конкретний стан елемента, тобто значення властивостей CSS – розміри, позиція, поворот і т. д. згідно з цим для початку, ми додамо пульсацію кнопки, тобто її почергове збільшення та зменшення, а потім зробимо кілька поворотів на 10 градусів в обидві сторони. Далі опишемо дуже прості параметри анімації shadow:

@keyframes shadow {
0% {top:0px; left:0px; width: 56px; height: 56px}
100% {top:-22px; left:-22px; width: 96px; height: 96px}
}

Тут протягом усього часу анімації, ми поступово будемо збільшувати блок з класом .telButton_border, тобто рамку кнопки.

На цьому робота з кнопкою, що стосується CSS, закінчена. Тепер давайте стилізуємо форму зворотного дзвінка. Насамперед визначимо правила для блоку з класом window_wrap, який повинен затінювати абсолютно весь контент, коли форма зворотного дзвінка буде показана на екран.

.window_wrap {
display: none;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,.7);
text-align: center;
z-index: 5005
}
.window_wrap:after {
display: inline-block;
height: 100%;
width: 0;
vertical-align: middle;
content:»
}

При цьому ширина і висота даного блоку вказана як 100%, прозорість 0.7 і спочатку він прихований. Потім додамо правила, для оформлення основного контейнера форми:

.window {
display: inline-block;
position: relative;
max-width: 80%;
padding: 20px;
border-radius: 15px;
border:3px solid #088789;
background: #fff;
vertical-align: middle;
background: #38833e none repeat scroll 0 0;
height: 136px;
}

Після цього стилізуємо кнопку закриття вікна з формою.

.window_close {
display: block;
position: absolute;
top: -18px;
right: 10px;
width: 12px;
height: 12px;
padding: 8px;
border-radius: 50%;
cursor: pointer;
background: #088789;
text-align: center;
font-size: 12px;
line-height: 12px;
color: #fff;
text-decoration: none;
font-weight: bold;
cursor:pointer;
box-sizing: content-box !important;
}
.window_close:hover {
background: #ff6600;
}

І наостанок, додаємо правила, для тега

, текстової області форми, а так само кнопки відправки даних форми.

.window p {
color: #fff;
font-family: «Arial»,sans-serif;
font-size: 16px;
font-weight: bold;
line-height: 24px;
text-align: center;
text-transform: uppercase;
}
#telForm {
background: #fafafa none repeat scroll 0 0;
border: medium none;
border-radius: 0 0 5px 5px;
float: left;
height: 35px;
text-align: center;
width: 58%;
}
#telButton {
background: #e03f58 none repeat scroll 0 0;
border: medium none;
border-radius: 0 5px 5px 0;
color: #fff;
cursor: pointer;
float: right;
height: 37px;
transition: all 0.6 s ease 0s;
width: 40%;
}

Звичайно, поки результат нашої роботи ми не побачимо, як форма прихована, тому давайте в файл script.js додамо логіку появи форми зворотнього дзвінка.

var p = $(‘.window_wrap’);
$(‘.telButton’).click(function() {
p.css({‘display’:’block’}).hide().fadeIn(1000);
});

Тобто за допомогою бібліотеки jQuery, вибираємо блок з класом telButton і реєструємо функцію обробник події клік мишею. Тобто, як тільки користувач клацне мишею по кнопці, ми відобразимо на екран віконце з формою зворотнього зв’язку.

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

$(‘.window_close’).click(function() {
p.css({‘display’:’none’});
});

І друга умова.

p.click(function(event) {
if(event.target == this) {
$(this).css({‘display’:’none’});
}
});

Зверніть увагу, що в даному варіанті нам потрібно перевіряти, з якого саме елементу клікнув користувач, адже якщо він клікнули по блоку з формою, модальне вікно не повинно закриватися.

Нагадаю, що працюючи з функцією обробником події, ми отримуємо доступ до властивості this, в якому міститься об’єкт вибраного елемента. При цьому властивості target, об’єкта event, який передається в якості першого аргументу при виклику функції обробника, міститься об’єкт елемента, для якого спрацював подія. І якщо обидва вищезазначених об’єкта співпадуть – значить, модальний слід закрити. Тепер давайте опишемо код відправки даних, доданих у форму, зворотного дзвінка.

$(‘#telButton’).click(function(event) {
event.preventDefault();
var tel = $(‘#telForm’).val();
$(‘#backPhone’).fadeOut(500,function() {
$(‘

Відправка!

‘).appendTo($(‘.window’)).hide().fadeIn(300,function() {
$.ajax({
type: ‘POST’,
url: ‘srv.php’,
data: ‘tel=’ + tel,
dataType: ‘json’,
success : function (json) {
if(json.error) {
$(‘.window p’).last().remove();
$(‘#backPhone’).fadeIn(300, function() {
alert(json.error);
});
}
else {
$(‘.window p’).last().fadeOut(300, function() {
$(this).text(‘Заявка прийнята!’).fadeIn(300, function () {
$(‘.window_wrap’).delay(1500).fadeOut(300);
});
});
}
}
});
});
});
});

Дані будуть відправлятися з використанням методу AJAX, а значить необхідно вибрати за допомогою бібліотеки jQuery кнопку відправки форми і зареєструвати функцію обробник події клік.

В коді функції, насамперед скасовуємо поведінку вибраного елемента (виключивши тим самим перезавантаження сторінки). Далі отримуємо номер телефону, який користувач, можливо, додав в текстову область. Тут так само можна перевірити, додав відвідувач номер телефону, але я це реалізую на серверній стороні.

Потім приховуємо форму, використовуючи анімаційний ефект fadeout, і звертаємося до методу jQuery, ajax(), для асинхронної відправки даних на сервер. При цьому дані, у вигляді параметра tel, будуть направлятися в файл srv.php, який необхідно створити в корені нашого проекту. Вище зазначений файл в якості відповіді, буде повертати дані у форматі рядка JSON, а значить вказуємо це в параметрі dataType. При цьому в функцію обробник властивості success, буде передана змінна json, в яку автоматично буде розміщений об’єкт, після декодування рядка відповіді.

При цьому якщо в поточному об’єкті, є властивість error, значить на стороні сервера виникла помилка. В цьому випадку форма зворотного зв’язку буде повторно показана на екрані відобразиться повідомлення про помилку, з використанням alert().
Якщо ж помилок немає, на екран здасться повідомлення «Заявка прийнята!» і модальний буде приховано. Тепер відкриваємо файл srv.php і опишемо логіку серверної сторони.

Для початку перевіримо – прийшли дані методом POST і якщо це так, отримаємо вміст, розміщений у запиті, попередньо обробивши його функцією strip_tags().

При цьому, якщо у змінній $tel, буде зберігатися порожнє значення, відповідно користувач не вказав номер телефону, а значить немає сенсу далі виконувати якісь дії. Тобто формуємо відповідь – масив з осередком error, кодуємо його в рядок JSON, відображаємо на екрані і завершуємо роботу додатка.

Якщо вищевказане правило спрацьовує значить, ми можемо надіслати повідомлення на певний електронний ящик, до запиту зворотного дзвінка. Для цього ми використовуємо досить відому бібліотеку Swiftmailer.

Для її установки скористаємося інструментом Composer і для цього виконуємо в консолі, наступну команду.

composer require swiftmailer/swiftmailer

Після цього підключаємо бібліотеку до нашого проекту.

Потім формуємо повідомлення, створивши об’єкт класу Swift_Message:

$message = Swift_Message::newInstance();
$message->setSubject(‘Зворотній дзвінок’);
$message->setFrom(array(‘[email protected]’ => ‘Shop’));
$message->setTo(array(‘[email protected]’));
$message->setBody(‘Зателефонуйте мені за номером — ‘. $tel);

При цьому використовуються такі методи:

setSubject() – зачеплений тему майбутнього повідомлення;

setFrom() – визначає відправника;

setTo() – задає адресу на який буде надіслано лист;

setBody() – формує вміст листа.

Далі необхідно визначити драйвер відправлення повідомлення, так званий транспорт.

$transport = Swift_MailTransport::newInstance();

Ми використовуємо драйвер, який у своїй роботі використовує стандартну функцію PHP mail(). Далі створюємо об’єкт глобального об’єкта бібліотеки і при цьому передаємо об’єкт використовуваного драйвера:

$mailer = Swift_Mailer::newInstance($transport);

І нарешті, відправляємо створене повідомлення і закінчуємо роботу даного скрипта (повний код файлу srv.php).

setSubject(‘Зворотній дзвінок’);
$message->setFrom(array(‘[email protected]’ => ‘Shop’));
$message->setTo(array(‘[email protected]’));
$message->setBody(‘Зателефонуйте мені за номером — ‘. $tel);
$transport = Swift_MailTransport::newInstance();
$mailer = Swift_Mailer::newInstance($transport);
$mailer->send($message);
exit(json_encode($res));
}
exit();

Якщо протестувати роботу програми в цілому – ми побачимо, що ось таке повідомлення буде відправлено на електронну скриньку.

Ось власне і все що я хотів розповісти Вам у цьому уроці, сервіс зворотній дзвінок реалізований а значить Ви можете використовувати його на своїх сторінках. Всього Вам доброго і вдалого кодування!!!