Обратный звонок Opencart
Opencart

Обратный звонок для Opencart 2 — отправка данных

Это третий урок по созданию модуля обратного звонка для Opencart 2. Предыдущие уроки:

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



JS-скрипт для обработки и валидации вводимых данных

Данный скрипт находится в папке catalog / view / javascript

Opencart каталог

 

 

 

 

 

 

 


Для начала сделаем обработчик формы:

Сначала скрипт отменяет стандартное действие при отправке формы: event.preventDefault ? event.preventDefault() : (event.returnValue = false);


Затем идёт отсылка к функции валидации вводимых данных: if(!formValidation(event.target)){return false;}

Функция валидации проверяет введенные данные и в случае ошибки возвращает false, присваивая класс has-error ошибочным данным:

Валидация простая: проверяет не пустое ли значение у обязательных элементов и не жесткая проверка номера телефона. Маску телефонного номера добавим позднее.


Получив true от функции валидации, js-скрипт, используя Ajax, отправляет данные формы php-обработчику, указанному в атрибуте action самой формы <form id= «xd_zvonok-form» action=«xd_zvonok-send.php» role= «form»>

Непосредственно перед отправкой данных js-скрипт блокирует кнопку отправки, чтобы избежать повторных нажатий:


Получив ответ от php-скрипта, js-скрипт обрабатывает его и сигнализирует клиенту результат.

Если от php-скрипта пришла ошибка на кнопке отправке появляется надпись ERROR:


Если от php-скрипта пришел ответ об успешной отправке окно формы исчезает и на 4 секунды всплывает окно об успешной отправке:



Полный листинг js-скрипта xd_zvonok.js


Включим xd_zvonok.js в header.tpl

Для этого внесем изменения в xd_zvonok.ocmod.xml добавив строки:



Пишем php-обработчик xd_zvonok-send.php

Как обычно, возьмем имеющийся обработчик от модуля упрощенного заказа для Opencart 2 send-order.php и удалим всё «лишнее». Ничего сложного обработчик не представляет: принять данные от js-скрипта, получить данные из настроек, собрать письмо для отправки и отправить его. Листинг файла:

Тут куча комментариев, так что разобраться не составит труда.



Проверим как работает отправка данных

Теперь мы можем полностью собрать OCMOD архив для установки через «Установку дополнений». Для этого разложим наши файлы по папкам, переименуем xd_zvonok.ocmod.xml в install.xml и соберем всё в архив с именем xd_zvonok.ocmod.zip

Я уже собрал такой архив — скачать его можно здесь на сайте.

Теперь удаляем предыдущие установленные версии модификатора через менеджер дополнений и обновляем модификаторы. Переходим в установку дополнений и пытаемся установить наш zip-архив:

opencart форма модуля обратного звонка

Не забываем обновить модификаторы в менеджере дополнений!


Теперь мы можем вызвать форму в интернет-магазине:

opencart форма модуля обратного звонка


Если всё сработает — Вы должны увидеть окно, свидетельствующее об успешной отправке:

opencart форма модуля обратного звонка


А также должно придти письмо на e-mail адрес администратора:

opencart письмо обратный звонок

Модуль работает! В принципе можно остановиться на этом, но можно внести ряд интересных (и не слишком трудных) дополнений и украшательств, которые разберем в следующем уроке «Обратный звонок для Opencart 2. Дополнения и украшательства»

 



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