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

Обратный звонок для Opencart 2 — выводим в шапку

Первый урок, в котором мы разработали административную часть модуля обратного звонка для Opencart находится здесь. Переходим ко второму этапу разработки модуля — Вывод кнопки обратного звонка в шапку (и не только).

Поскольку у нас упрощенная версия обратного звонка, которая не использует запись в базу, нам потребуется лишь несколько файлов в папке catalog:

Общая структура папок front-end части будет выглядеть так:

Opencart каталог

Front-end часть модуля находится в папке catalog и состоит из 2 папок:

— language — содержит языковые файлы

— view — содержит файлы скриптов и стиля

Такая структура папок будет в случае если у Вас версия Opencart 2.0 или 2.1

В случае версии Opencart 2.2 и Opencart 2.3 языковые папки будут другими: для русского языка ru-ru, для английского en-gb, для украинского uk-ua

В случае версии Opencart 2.3 папка module будет содержаться в папке extension.


Однако для вывода кнопки обратного звонка этого недостаточно, нам понадобится ещё ocmod-модификатор — install.xml К нему перейдём в самом конце.


Языковые файлы:

Также как и в административной части удалим все языковые файлы кроме файла английского языка, а затем переименуем языковой файл в xd_zvonok.php. Кроме того, переименуем переменные и добавим дефолтный текст на кнопку и заголовок модального окна. С учетом того, что нам не понадобится поле e-mail, окончательный вариант файла будет таким:

Используя FTP, скопируем наш языковой файл в соответствующую папку на сервере.


Файл стиля:

На самом деле, это — необязательный файл, пока нам хватит имеющихся стилей bootstrap. Вернемся к этому файлу позднее, когда будем «украшать» нашу кнопку.


Файл скриптов:

Файл js-скриптов у нас будет отвечать за валидацию и обработку формы и отправку этих данных php-скрипту, который уже должен передать данные на почту администратору. Этот файл подробнее разберем в следующем уроке Обратный звонок для Opencart 2 — отправка данных.



Самое интересное — ocmod-модификатор install.xml

Этот файл отвечает непосредственно за вывод кнопки обратного звонка. Возможно, перед этим абзацем полезно будет прочитать статью, посвященную OCMOD Opencart.

Начнем с модального окна, которое должно всплывать при нажатии на кнопку «Заказать обратный звонок». Разместим модальное окно с формой в файле footer.tpl непосредственно перед закрывающим тегом </body>. Там же разместим success модальное окно, которое будет сигнализировать посетителю об удачной отправке данных. Все переменные уникализируем, чтобы не пересекаться с существующими.


Теперь переменные, которые мы используем в форме, необходимо определить в контроллере футера:


Следующий шаг — разместить кнопку обратного звонка, а также написать скрипт, который будет обрабатывать нажатие на эту кнопку и вызывать нашу форму. Для начала кнопку разместим в шапке (header.tpl) рядом с валютой и языками, а потом уже стилями сможем переместить её куда нам будет удобно.


Теперь переменные, которые мы использовали в header.tpl, необходимо определить в контроллере header.php:


В принципе, наш OCMOD-модификатор готов! Полный листинг будет выглядеть так:



Проверка front-end части:

Самый интересный этап — проверка. OCMOD-модфикатор называем xd_zvonok.ocmod.xml и пытаемся установить через установку дополнений в админке:

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


После этого модификатор должен появиться в списке дополнений:

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


Не забываем обновить модификаторы и получим нашу кнопку, которая вызывает форму:

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


Форма уже есть, осталось лишь принять данные, которые будет вводить посетитель. Это — в следующем уроке Обратный звонок для Opencart 2 — отправка данных.



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