📧 jGrowl в AjaxForm: Перевизначення стилів повідомлень

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

Давайте розглянемо способи реалізації подібних завдань:

1. стандартний за документацією
2. і швидкий - через перевизначення стандартного методу

Стандартний метод з перевизначення стилів повідомлень AjaxForm AjaxForm

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

1. frontend_css ^{(за замовчуванням файл лежить за шляхом assets/components/ajaxform/css/default.css)}
2. frontend_js ^{(за замовчуванням файл лежить за шляхом assets/components/ajaxform/js/default.js)}

 

// customize AjaxForm

$(document).ready(function(){

    AjaxForm.Message.success = 

	function(message, sticky) {

		if (message) {

			$.jGrowl(message, {theme: 'taleby-message-success', sticky: true});
		}

	}; 

});

Недоліки цих методів у тому, що доведеться робити копії стандартних файлів і модефікувати їхній код. А під час оновлення плагіна код ajaxform/js/default.js може змінитися. Це не критично, але є ймовірність такої події. Що саме по собі вже не дуже приємно.

Більш практичний метод стилізації jGrowl повідомлень AjaxForm в MODX

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

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

І активувати будь-яку з доступних властивостей компонента jGrowl.