Wedal Joomla Callback 2 – обновленная версия модуля обратной связи для Joomla 4+

Наконец, он готов к релизу. Рад представить вашему вниманию обновленный модуль обратной связи Wedal Joomla Callback 2.

В нем учтены все пожелания, собранные за время существования Wedal Joomla Callback 1.x.

В нем добавлены новые, очень полезные функции.

Он, как всегда, имеет открытый код и распространяется бесплатно.

Встречайте…

О модуле

Wedal Joomla Callback 2 – модуль для Joomla 4+, который позволяет добавлять на сайт встроенные и всплывающие формы обратной связи в любых количествах.

Модуль работает полностью по AJAX, без перезагрузки страницы при вызове и отправке.

Все другие подробности относительно базовых возможностей модуля, которые были в версии 1.x, вы можете прочитать в статье: Модуль Wedal Joomla Callback – Всплывающая Форма Обратной Связи.

Новые возможности Wedal Joomla Callback 2

Теперь про самое интересное. Что появилось в новой версии модуля.

Поддержка Joomla 4+ и отказ от поддержки Joomla 3

Код модуля переписан практически полностью. Теперь он выполнен по канонам Joomla 4. Версию Joomla 3 модуль, к сожалению, не поддерживает и поддерживать не будет.

Нужно смотреть в будущее и идти вперед. Было принято решение отказаться от сохранения совместимости с Joomla 3 ради чистоты кода.

Joomla 3 будет поддерживать старая версия модуля Wedal Joomla Callback 1.x. Вы можете скачать ее здесь:

Скачать Wedal Joomla Callback 1.x для Joomla 3

Поскольку код модуля полностью переписан, возможны проблемы с обновлением с версии 1.x на версию 2. Если вы используете старую версию модуля на Joomla 4+ и хотите обновить ее, то лучше пойти по пути удаления старого модуля и установки нового.

С неприятной частью закончили) Теперь о хорошем…

Добавлена поддержка неограниченного количества дополнительных полей разных типов, через Joomla XML Fields

Основным нововведением версии 2 является новый функционал модуля, реализующий поддержку дополнительных полей.

Вы можете добавить:

• Поля любых типов
• В любом количестве
• Разные в каждом модуле

Теперь ваш модуль может выглядеть, например, вот так:

Добавление полей происходит с помощью XML-формата полей Joomla. В админке это выглядит примерно вот так:

Пусть вас не пугает XML-формат полей. В документации Joomla есть подробное описание по каждому типу поля. Ссылка на эту документацию доступна прямо на вкладке дополнительных полей в модуле.

Таким образом, в Wedal Joomla Callback вы можете конструировать практически любые формы.

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

Добавлена возможность переопределения базовых полей

В продолжение темы полей. Код работы с полями переписан на полную поддержку возможностей Joomla. Отсюда появляется возможность не только добавлять новые поля, но и переопределять обязательные.

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

Теперь вы можете переопределить базовые поля. Это делается путем добавления в дополнительные поля новых, с именами базовых. Например, чтобы переопределить поле «Имя», которое имеет название «name», вам нужно добавить в дополнительные поля такую запись:

Таким образом вы можете изменить заголовок поля, его валидацию, а также некоторые другие настройки. Можете вывести его не над, а под другими дополнительными полями.

Добавлена поддержка вложений

Желанная многими функция теперь доступна из коробки. В Wedal Joomla Callback 2 появилась возможность прикреплять вложения в форму, например, файл с реквизитами, фото и др. В админке эта опция включается на главной вкладке:

Вы можете:

• Выбирать между загрузкой одиночного или множественного вложения
• Ограничивать допустимые форматы файлов вложения
• Указывать свое название поля вложения

Все выбранные пользователем файлы будет прикреплены к письму с данными формы, отправленному вам на Email.

Вот так это выглядит на сайте:

Добавлена поддержка целей Яндекс.Метрики

Еще одна желаемая многими функция. Теперь в настройках модуля вы можете указывать цели Я.Метрики на вызов всплывающей формы звонка (клик на кнопку «Заказать звонок») и отправку формы.

Вот как это выглядит:

Подсказка по работе с целями представлена прямо на вкладке.

Внимание: Модуль не добавляет на сайт код Яндекс.Метрики. Убедитесь, что добавили код Яндекс.Метрики на сайт самостоятельно. Счетчики целей не будут работать без базового кода Метрики.

В настройках модуля вам нужно задать только идентификатор цели. Идентификатор счетчика модуль определит самостоятельно.

И, разумеется, вы можете задавать разные цели для каждого экземпляра модуля.

Код кнопки вызова формы максимально упрощен для использования в любом месте страницы

После того, как люди начали активно использовать первую версию модуля обратной связи, выяснилась одна особенность, о которой я не думал – многие хотят использовать модуль в билдерах страниц сайта.

Очень часто я получал вопрос: как встроить кнопку вызова модуля в то или иное место.

Проблема состояла в том, что нельзя было вот так просто создать в билдере кнопку, указать для нее ссылку и чтобы по ней вызывался нужный модуль. Почему? Модуль имел такой код для вызова кнопки:

<div id="WJC102" data-id="102" class="wjcallback ">
    <a class="wjcallback-link" href="#">Заказать</a>
</div>

DIV-обертка была обязательна, т.к. в ней передавался ID модуля, необходимый для получения корректных параметров из настройки именно нужно экземпляра. И во эта DIV-обертка создавала проблемы у пользователей билдеров.

В текущей версии я учел этот момент. Теперь код вызова всплывающего окна выглядит так:

<a data-id="109" class="wjcallback-link" href="#" data-ym-aimid="popuptest">Заказать звонок</a>

Таким образом, вы можете легко вставить кнопку в билдер и вывести в любом месте сайта.

Обязательных параметров всего два:

• data-id – должен содержать ID экземпляра модуля. Без него мы не сможем понять, какой именно модуль нужно вызывать
• class = “wjcallback-link” – класс, который позволяет скрипту понять, что при клике по этой кнопке/ссылке нужно вызывать модуль.
• Дополнительно вы можете вручную указать цель для передачи в Яндекс-метрику, используя атрибут data-ym-aimid

Вот, собственно, и всё. Надеюсь, что эта функция немного упростит и без того непростую жизнь пользователям билдеров.

Добавлены дополнительные возможности оформления модуля

Чтобы поменьше лазить в код и использовать переопределения макетов, в настройки модуля добавлена вкладка «Оформление» где есть возможность задать:

• CSS-классы кнопки заказа звонка
• CSS-классы кнопки отправки формы
• CSS-классы формы
• CSS-классы для обертки каждого поля
• CSS-классы для обертки формы

Зачем это нужно. Предположим, ваш шаблон использует какой-то фреймворк, или же, в нем используются какие-то нестандартные классы для оформления форм. Раньше вам бы пришлось переопределять макет формы в шаблон и править классы в нем. Теперь вы можете задать уникальные классы прямо в настройках.

Не могу сказать, что это всегда будет удобнее. Если у вас много модулей с формами, например, десятки, то может быть проще, как и прежде, внести один раз правки в макет и не добавлять дополнительные классы в настройках каждого модуля. Если же у вас 1-2 модуля, то может быть проще сделать это через настройки.

Вот как это выглядит в админке:

Также хочу отметить вот что. В зависимости от используемого шаблона форма может выглядеть теперь по-разному. Если шаблон переопределяет или оформляет базовые формы Joomla, то наш модуль унаследует это оформление и автоматически примет стиль других форм сайта.

jQuery больше не требуется

JS-скрипты модуля полностью переписаны на чистый Javascript. Теперь подключение jQuery не требуется. Модуль больше не подключает эту библиотеку.

Добавлены JS-триггеры для разных событий модуля

В JS-код модуля добавлены триггеры (нестандартные события), которые позволяют вам добавить свои кусочки кода в то или иное место. Это аналогично плагинам в Joomla, но только работает именно для JS-кода модуля.

На данный момент доступны следующие события:

• wjcOnFormPopupAfterLoad – срабатывает сразу после появления всплывающей формы. Содержит объект загруженной формы. Может быть использовано для определения того, какая форма вызвана, какие содержит поля и т.п.
• wjcOnFormBeforeClose – срабатывает перед закрытием всплывающего окна форма. Содержит объект загруженной формы. Может быть полезно для удержания посетителя путем добавления подтверждения закрытия всплывающего окна (пример кода будет ниже)
• wjcOnFormBeforeSubmit – срабатывает перед оправкой формы. Содержит объект загруженной формы и заполненных полей. Может использоваться для дополнительной валидации формы и т.п.
• wjcOnFormAfterSubmit – срабатывает сразу после отправки формы. Содержит объект отправленной формы и заполненных полей. Может использоваться для интеграции с CRM и другими сторонними сервисами.

Ниже примеры использования JS-событий модуля в вашем JS-коде:

document.addEventListener('DOMContentLoaded', () => {
    //Получить все поля формы после загрузки
    document.addEventListener('wjcOnFormPopupAfterLoad', (form) => {
        console.log(form.detail.querySelectorAll('input'));
    });

    //Получить информацию о форме после ее закрытия и вывести дополнительный диалог о закрытии формы
    document.addEventListener('wjcOnFormBeforeClose', (form) => {
        console.log(form.detail);

        if (!confirm("Вы уверены, что хотите закрыть форму?")) {
          event.preventDefault();
        }
    });

    //Получить данные полей формы перед отправкой
    document.addEventListener('wjcOnFormBeforeSubmit', (form) => {
        let formdata = new FormData(form.detail.closest('form'));
        console.log(formdata);
    });

    //Получить данные полей формы после отправки и возврата успешного ответа
    document.addEventListener('wjcOnFormAfterSubmit', (form) => {
        let formdata = new FormData(form.detail.closest('form'));
        console.log(formdata);
    });
});

Обратите внимание, что ваш код должен быть подключен после подключения файла скриптов модулей!

Возможность указать несколько получателей письма

Еще одна небольшая функция, которой не хватало. Теперь в настройках модуля вы можете указать нескольких получателей писем с данными отправленной формы – просто укажите их в поле «Дополнительные получатели»:

Все поля теперь используют базовые макеты Joomla, наследуют стили шаблона, могут быть переопределены в шаблон

Поскольку в модуле появились дополнительные поля, хорошо бы иметь возможность переопределения их разметки в шаблон. Такая возможность есть!

Все поля модуля используют макеты полей Joomla из папки:

/layouts/joomla/form

Эти макеты могут быть переопределены в ваш шаблон. Но учтите, что обычно все формы на сайте используют их. Таким образом, изменения в этих макетах повлияет не только на формы модуля, но и на другие стандартные формы сайта (например, форма авторизации, регистрации и т.д). Хотя это скорее плюс.

Файлы стилей и скриптов модуля теперь доступны для переопределения

Файлы скриптов и стилей модуля теперь располагаются в папке media, и, соответственно, могут быть переопределены в используемый вами шаблон.

Если вам не хватает чего-то в оформлении или JS-кода, то теперь вы легко можете переопределить файлы и подправить это под себя.

Но что касается JS-кода, то гораздо предпочтительнее будет использовать JS-триггеры, поскольку в обновлениях модуля в файл JS могут быть внесены изменения, которые вы не увидите, в случае когда переопределили JS-файл в шаблон.

Мелкие доработки и исправления

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

Практически все замечания, которые вы присылали, были учтены и исправлены в новой версии. Так что надеюсь, что обратная связь была полезной для нас всех.

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

Где скачать модуль Wedal Joomla Callback 2?

Новая версия модуля доступна в том же репозитории на Github. Только теперь она будет занимать ветку master. Старая же версия модуля 1.x переместится в ветку Joomla3.

В разделе релизов вы сможете найти версии для обеих веток:

• версии 1.х – для Joomla 3
• версии 2.х – для Joomla 4+

Для понимания:

• версии Wedal Joomla Callback 1.х будут работать и на Joomla 3 и на Joomla 4, но на 4 предпочтительнее использовать новый модуль
• версии Wedal Joomla Callback 2.х будут работать только на Joomla 4+

Ниже даю ссылки на скачивание последний версий обеих веток:

Скачать Wedal Joomla Callback 2 для Joomla 4+

Скачать Wedal Joomla Callback 1.x для Joomla 3

Об авторе

Wedal (Виталий). Веб-разработчик полного цикла (Full Stack). Создатель и автор сайта Wedal.ru.

Основной профиль – создание сайтов и расширений на CMS Joomla.

• Об авторе
• Портфолио
• Услуги
• Контакты