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

В одной из работ мне была поставлена задача организовать функционал вопросов ответов по клику на кнопке. Изначально планировалось взять Tickets, потом написать свой функционал с ручным добавлением. Но заказчику нужно было, чтобы все происходило автоматно, с письмом на почту и самозаписью в админке, да чтобы отвечать на письма мог только администратор. В общем, выбор пал на EasyComm.

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

Задача — сделать форму вопросов, вызываемую по кнопке. Решение — просто добавить fancybox. Почему просто скрипт, а не что-то из самого modx? Потому что это быстрее, не требует еще плагинов и пригодится в фотогалерее :)

Порядок действий.
1. Устанавливаем компонент из репозитория ссылка (он не дорогой, но весьма удобный).
2. Качаем fancybox и подключаем его на странице (с точки зрения SEO и google speed перед закрытием тега body и стили, и скрипты — они при начале загрузки страницы не нужны.)
3. Убеждаемся, что не забыли подключить jquery.form.min.js

Теперь к настройкам.
Идем по пути assets/components/easycomm/js/web/
И копируем файл default.js, задав ему свое имя, например my.default.js.
В этот скрипт добавляем инициализацию fancybox и закрытие формы после успешной отправки через 3 секунды. Готовый скрипт ниже:

var easyComm = {
    initialize: function(){
        if(!jQuery().ajaxForm) {
            easyComm.notice.error('Can`t find jQuery ajaxForm plugin!');
        }
        easyComm.rating.initialize();
        jQuery(document).on('submit', 'form.ec-form', function(e){
            easyComm.message.send(this);
            e.preventDefault();
            return false;
        });
    },

    message: {
        send: function(form) {
            jQuery(form).ajaxSubmit({
                data: {action: 'message/create'}
                ,url: easyCommConfig.actionUrl
                ,form: form
                ,dataType: 'json'
                ,beforeSubmit: function() {
                    jQuery(form).find('input[type="submit"]').attr('disabled','disabled');
                    jQuery(form).find('.has-error').removeClass('has-error');
                    jQuery(form).find('.ec-error').text('').hide();
                    return true;
                }
                ,success: function(response) {
                    var fid = jQuery(form).data('fid');
                    jQuery(form).find('input[type="submit"]').removeAttr('disabled');
                    if (response.success) {
                        jQuery(form)[0].reset();
                        if(typeof (response.data) == "string") {
                            jQuery('#ec-form-success-' + fid).html(response.data);
                            jQuery(form).hide();
                            $(".fancybox-inner .hid.container").append("<div class='alert alert-success' role='alert'>Ваше сообщение было успешно отправлено. Оно будет опубликовано после одобрения модератором сайта! </div>");
                            setTimeout( function() {$.fancybox.close(); },3000);
                        }
                        else {
                            easyComm.notice.show(response.message);
                        }
                    }
                    else {
                        if(response.data && response.data.length) {
                            jQuery.each(response.data, function(i, error) {
                                jQuery(form).find('[name="' + error.field + '"]').closest('.form-group').addClass('has-error');
                                jQuery(form).find('#ec-' + error.field + '-error-' + fid).text(error.message).show();
                            });
                        } else {
                            easyComm.notice.error(response.message);
                        }
                    }
                }
                ,error: function(){
                    jQuery(form).find('input[type="submit"]').removeAttr('disabled');
                    easyComm.notice.error('Submit error');
                }
            });
        }
    },


    rating: {
        initialize: function(){
            var stars = jQuery('.ec-rating').find('.ec-rating-stars>span');
            stars.on('touchend click', function(e){
                var starDesc = jQuery(this).data('description');
                jQuery(this).parent().parent().find('.ec-rating-description').html(starDesc).data('old-text', starDesc);
                jQuery(this).parent().children().removeClass('active active2 active-disabled');
                jQuery(this).prevAll().addClass('active');
                jQuery(this).addClass('active');
                // save vote
                var storageId = jQuery(this).closest('.ec-rating').data('storage-id');
                jQuery('#' + storageId).val(jQuery(this).data('rating'));
            });
            stars.hover(
                // hover in
                function() {
                    var descEl = jQuery(this).parent().parent().find('.ec-rating-description');
                    descEl.data('old-text', descEl.html());
                    descEl.html(jQuery(this).data('description'));
                    jQuery(this).addClass('active2').removeClass('active-disabled');
                    jQuery(this).prevAll().addClass('active2').removeClass('active-disabled');
                    jQuery(this).nextAll().removeClass('active2').addClass('active-disabled');
                },
                // hover out
                function(){
                    var descEl = jQuery(this).parent().parent().find('.ec-rating-description');
                    descEl.html(descEl.data('old-text'));
                    jQuery(this).parent().children().removeClass('active2 active-disabled');
                }
            );
        }
    },

    notice: {
        error: function(text) {
            alert(text);
        },
        show: function(text) {
            alert(text);
        }
    }
}

 jQuery(document).ready(function(){
    easyComm.initialize();
    
     var forma = $('a.fansy');
    if (forma.length > 0) {
     forma.fancybox({
		closeClick  : false,
		closeBtn	: false,
		Width    : '70%',
                height    : '70%',
		openEffect	: 'elastic',
    	        closeEffect: 'elastic',
		hideOnContentClick:false,
		titleShow:false,
                helpers: {
                overlay: {
               locked: false
                },
		title	: {
		type: 'outside'
			}
                }
                });
}
});

Теперь остается только в настройках системы в EasyComm указать имя нового скрипта my.default.js

Вызов формы
Добавляем саму кнопку вызова формы
<a class="btn fansy" href="#questions" title="">Написать администрации</a>

Просто напомню, что href — это ссылка на id контейнера с формой, а класс fansy — навесит на кнопку скрипт.
Вызываем саму форму в скрытом css диве:
<div class="hid container" id="questions">
[[ecForm?
	&thread=`questions`
	&allowedFields=`user_name,user_email,user_contacts,text`
	&requiredFields=`user_name, user_email`
	&tplForm=`mytpl.ecForm`
	&tplNewEmailManager=`my.ecForm.New.Email.Manager`
	&newEmailSubjUser=`Вами оставлен вопрос на сайте site.ru`
]]
</div>

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

В общем то и все. Проверяем работу :)
Фото 1
фото 2