Плагин Art Feedback Button. Простой и быстрый функционал кнопки обратного звонка • 1 • Финты WordPress

Плагин Art Feedback Button. Простой и быстрый функционал кнопки обратного звонка

Лень — двигатель прогресса! Так что, когда задолбался писать на каждом проекте функционал обратного звонка (тыкаешь в кнопку и появляется форма во всплывающем окне) написал себе плагин Art Feedback Button для подобного. Простой и незамысловатый.

Плагин использует библиотеку Micromodal.js для модальных окон и VanillaMasker для телефонных масок. Написан на ванильном js c использованием REST API.

к содержанию

Как работает?

Плагин формирует шорткод [afb], который можно вывести в нужном месте темы. У шорткода есть дополнительные параметры:

  • label — надпись на кнопке
  • class — произвольный ccs класс
  • emails — список адресов через запятую, на который будет отправляться письмо, по умолчанию берется адрес из настроек сайта

Пример полного шорткода

[afb label="Обратный звонок" class="custom-button" emails="art@art.ru, der@tru.ru, art2l@gmail.com, der2@tru.ru"]

Пример шорткода для темы Kadence

Тема Kadence использует для кнопок собственные классы, так что добавляя нужные css классы, можно изменять внешний вид кнопки

[afb label="Заказать звонок" class="button-size-small" emails="art@art.ru, der@tru.ru, art2l@gmail.com, der2@tru.ru"]

Все остальное плагин делает сам, по нажатию на кнопку появляется форма, при заполнении формы происходит отправка письма по указанным адресам

Работа плагина Art Feedback Button
к содержанию

Часто задаваемые вопросы

Внимание!
Весь код необходимо добавлять в файл functions.php через дочернюю тему или например пустой плагин. Прежде чем, вносить какие либо изменения, сделайте бекап сайта.

В плагине есть основной фильтр полей afb_form_fields, через который можно манипулировать, как полями, так и свойствами полей

Как убрать ненужное поле?

Штатно выводиться 3 поля:

  • Имя (afb-name)
  • Емайл (afb-email)
  • Телефон (afb-phone)

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

add_filter( 'afb_form_fields', function ( $fields ) {

	unset( $fields['afb-email'] );

	return $fields;
} );

Как изменить маску телефона?

Замена маски телефона производиться через тот же фильтр, но только через поле телефона

add_filter( 'afb_form_fields', function ( $fields ) {

	$fields['afb-phone']['custom_attributes']['data-mask'] = '999-999-99';

	return $fields;
} );

Получим, что-то вроде такого

Плагин Art Feedback Button. Простой и быстрый функционал кнопки обратного звонка • 2 • Финты WordPress
Как изменить маску телефона в плагине Art Feedback Button

Внимание! В маске использование 9-ки — обязательно, так работает библиотека VanillaMasker. На другие цифры может не среагировать.

Например, изменим маску и плейсходел для Украины

add_filter( 'afb_form_fields', function ( $fields ) {

	$fields['afb-phone']['custom_attributes']['data-mask'] = '+38 (999) 999-99-99';
	$fields['afb-phone']['placeholder'] = '+38 (999) 999-99-99';

	return $fields;
} );

Получим вот такое

Плагин Art Feedback Button. Простой и быстрый функционал кнопки обратного звонка • 3 • Финты WordPress
Изменение маски и плейсхолдера под номер Украины
к содержанию

Как изменить шаблон письма, формы или окна?

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

В папке темы или дочерней темы создаете папку art-feedback-button и копируете в нее файлы из папки templates плагина. А дальше меняете что требуется и как требуется.

Как повесить цели метрики на отправку формы?

В плагине есть триггеры:

На открытие окна

jQuery( document ).on( 'afb_open', function( detail ) {
   console.log( 'afb_open', detail );
} );

На успешную отправку письма

jQuery( document ).on( 'afb_send_success', function( detail ) {
   console.log( 'afb_send_success', detail );
} );

На закрытие окна

jQuery( document ).on( 'afb_close', function( detail ) {
   console.log( 'afb_close', detail );
} );

Соответственно, отправки цели при отправке письма, будет такая

jQuery( document ).ready( function( $ ) {
	 jQuery( document ).on( 'afb_send_success', function( detail ) {

		 // XXXXXX - номер счетчика, TARGET - идентификатор цели
		 ym( XXXXXX, 'reachGoal', 'TARGET' );
	 } );
 } );
к содержанию

Скачать плагин Art Feedback Button

Плагина нет в репозитории WordPress и скорее всего не будет. Скачать архив плагина можно из релизов на GitHub или по кнопке ниже

Плагин Art Feedback Button. Простой и быстрый функционал кнопки обратного звонка • 4 • Финты WordPress
к содержанию

Поддержать плагин

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

к содержанию

Заключение

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

5 2 голоса
Рейтинг статьи

    Об авторе
    Артем Абрамович

    Автор и ведущий проекта «Финты WordPress». WordPress & WooCommerce разработчик. Четыре года создаю плагины и темы. В свободное время пишу статьи, видеообзоры, гайды.

    Подписаться
    Уведомить о
    guest
    2 комментарев
    Новые
    Старые Популярные
    Межтекстовые Отзывы
    Посмотреть все комментарии
    2
    0
    Оставьте комментарий! Напишите, что думаете по поводу статьи.x
    ()
    x