Переопределение стилей сообщений jGrowl в AjaxForm

При использовании дополнения AjaxForm для отправки сообщений на почту в MODX Revolution часто возникает потребность стилизовать окна уведомлений и переопределить их стандартное поведение.

Давайте рассмотрим способы реализации подобных задач:

1. стандартный по документации
2. и быстрый - через переопределение стандартного метода

Cтандартный метод по переопределению стилей уведомлений AjaxForm

По документации AjaxForm для стилизации jGrowl окон (которые используются для отображения уведомлений) можно указать свои css и js файлы через параметры сниппета AjaxForm, это параметры:

• frontend_css (по умолчанию файл лежит по пути assets/components/ajaxform/css/default.css)
• frontend_js (по умолчанию файл лежит по пути assets/components/ajaxform/js/default.js)

Недостатки этих методов в том, что придется делать копии стандартных файлов, и модефицировать их код. А при обновлении плагина код ajaxform/js/default.js может измениться. Это не критично, но есть вероятность такого события. Что само себе уже не очень приятно.

Более практичный метод стилизации jGrowl уведомлений AjaxForm в MODX

Можно в своих js-файлах переопредлить нужный метод AjaxForm из файла assets/components/ajaxform/js/default.js. Давайте рассмотрим пример кода, когда для окна успеха нужно задать свойство sticky=true (чтобы окно не пропадало без явного нажатия на кнопку закрытия) и указать класс темы для уведомления, чтобы было удобнее стилизовать внешний вид виджета jGrowl:

// customize AjaxForm
$(document).ready(function(){
    AjaxForm.Message.success = 
	function(message, sticky) {
		if (message) {
			$.jGrowl(message, {theme: 'taleby-message-success', sticky: true});
		}
	}; 
});

И дальше можно легко стилизовать содержимое окна уведомления AjaxForm через селектор родителя div.jGrowl div.jGrowl-notification.taleby-message-success.

И активировать любое из доступных свойст компоненты jGrowl.