В одной из работ мне была поставлена задача организовать функционал вопросов ответов по клику на кнопке. Изначально планировалось взять 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 перечисляем нужные поля, а в своих шаблонах делаем разметку как нам хочется, подробнее в самой инструкции к компоненту. Т.е. вызов не сильно отличается от стандартного.
В общем то и все. Проверяем работу :)


Игорь Игамов 11.02.2017 23:07 #
Вараника 12.02.2017 00:22 #
Мирослав 12.02.2017 07:41 #
Что ещё за цепочки?
Вараника 12.02.2017 11:48 #
docs.modx.pro/components/easycomm/interface — здесь есть информация.
basilioo 03.03.2017 16:31 #
Сделал все по инструкции, форма отображается на странице сразу, и во всплывающем окне соответственно тоже. После закрытия всплывающего та, что на странице тоже исчезает.
Подумал в вашем диве класс hid указан ошибочно, сделал hide — все исчезло, и на странице, и во всплывающем окне(
Что я сделал не так?
Вараника 03.03.2017 23:03 #
Попробуйте задать id для формы, которая должна всплывать и в assets/components/easycomm/js/web/ найти строку
и заменить ее на
basilioo 04.03.2017 08:45 #
basilioo 04.03.2017 08:45 #
basilioo 04.03.2017 08:46 #
LuDka 24.03.2017 22:45 #