В недавней статье про MODX Revolution мы рассмотрели создание блога на основе этой популярной CMS. Конечно же, блог (и прочие сайты с контентом) подразумевает возможность оставлять комментарии. В этой статье как раз и разберемся, как «прикрутить» такую нужную функцию к своему сайту на MODX Revolution.
Создавать форму с комментариями мы с вами будем при помощи того же инструмента, при помощи которого делали блог. Речь идет о плагине Tickets (про установку плагинов — вот тут).
Для начала создадим три чанка. Для этого перейдите в раздел Элементы, раскройте подраздел Чанки, выберите каталог плагина Tickets, щелкните по нему правой кнопкой мыши и нажмите Создать новый чанк здесь.
Назовите первый из трех чанков commentsWrapperTpl, он будет своего рода «обёрткой» для комментариев. Вот его код:
<section class="inner-bottom-xs comments"> <h3><span id="comment-total">[[+total]]</span> Комментарии.</h3> <div id="comments-wrapper"> <div class="comment-list" id="comments"> [[+comments]] </div> </div> <div id="comments-tpanel"> <div id="tpanel-refresh"></div> <div id="tpanel-new"></div> </div> </section>
Сравнивайте классы и идентификаторы с оригинальным чанком Tickets и не забывайте сохранять создаваемые чанки.
Второй чанк — commentTpl:
<div class="comment-item ticket-comment" id="comment-[[+id]]" data-parent="[[+parent]]" data-newparent="[[+new_parent]]" data-id="[[+id]]"> <div class="row no-margin ticket-comment-body[[+bad]]"> <div class="col-lg-1 col-xs-12 col-sm-2 no-margin"> <div class="avatar"> <img src="[[+avatar]]" alt="avatar"> </div> </div> <div class="col-xs-12 col-lg-11 col-sm-10 no-margin-right"> <div class="comment-body"> <div class="meta-info"> <header class="row no-margin"> <div class="pull-left ticket-comment-rating inactive"> <h4 class="author"><a href="[[+url]]#comment-[[+id]]">[[+fullname]]</a></h4> <span class="date">- [[+date_ago]]</span> <span class="likes plus"><span class="likes-count rating[[+rating_positive]][[+rating_negative]]">[[+rating]]</span><i class="icon fa fa-thumbs-up"></i></span> <span class="dislikes minus"><i class="icon fa fa-thumbs-down"></i></span> [[+has_parent]] <span class="ticket-comment-down"><a href="#" data-child="">↓</a></span> </div> </header> </div> <div class="comment-content">[[+text]]</div> </div> </div> </div> <div class="comments-list">[[+children]]</div> </div> <!--tickets_rating_positive positive--> <!--tickets_rating_negative negative--> <!--tickets_has_parent <span class="ticket-comment-up"><a href="[[+url]]#comment-[[+parent]]" data-id="[[+id]]" data-parent="[[+parent]]">↑</a></span>-->
Третий чанк — commentFormTpl — чанк непосредственно формы отправки комментария:
<section id="reply-block" class="leave-reply"> <h4 id="comment-new-link"> <a href="#" class="btn btn-default">[[%ticket_comment_create]]</a> </h4> <h3>Написать комментарий</h3> <p>Ваш email не будет опубликован. Обязательные поля отмечены символом <abbr class="required">*</abbr> </p> <div id="comment-form-placeholder"> <form role="form" id="comment-form" action="" method="post" class="reply-form cf-style-1"> <div id="comment-preview-placeholder"></div> <input type="hidden" name="thread" value="[[+thread]]"/> <input type="hidden" name="parent" value="0"/> <input type="hidden" name="id" value="0"/> <div class="row field-row"> <div class="col-xs-12 col-sm-6"> <label>[[%ticket_comment_name]]*</label> <input class="le-input" name="name" value="[[+name]]" id="comment-name"> <span class="error"></span> </div> <div class="col-xs-12 col-sm-6"> <label>[[%ticket_comment_email]]*</label> <input class="le-input" name="email" value="[[+email]]" id="comment-email"> <span class="error"></span> </div> </div> <div class="row field-row"> <div class="col-xs-12"> <label for="comment-editor"></label> <textarea name="text" id="comment-editor" cols="30" rows="10" class="form-control"></textarea> </div> </div> <div class="row field-row"> <div class="col-xs-12"> [[+captcha]] </div> </div> <button class="le-button big post-comment-button submit" type="submit" value="[[%ticket_comment_save]]" title="Ctrl + Shift + Enter">Написать</button> </form> </div> </section> <!--tickets_captcha <div class="row field-row"> <div class="col-xs-12"> <label for="comment-captcha" id="comment-captcha">[[+captcha]]</label> <input type="text" name="captcha" value="" id="comment-captcha" class="form-control" /> <span class="error"></span> </div> </div> -->
После создания чанков добавьте в используемый шаблон следующий код:
[[!TicketComments? &allowGuest=`1` &tplCommentFormGuest=`commentFormTpl` &tplCommentGuest=`commentTpl` &tplCommentAuth=`commentTpl` &tplComments=`commentsWrapperTpl` &gravatarSize=`70` ]]
И здесь надо отметить вот что — если вы не сделали отдельный шаблон для страниц с формой комментирования, то тогда эта форма будет отображаться и там, где она не нужна.
Помимо этого, если вы откроете верхнее меню Приложения → Тикеты, и перейдете на вкладку Ветви комментариев, то увидите, что у вас появилась панель управления комментариями.
На этом создание формы для комментариев можно считать завершенной. Но это лишь начало пути, и работе с комментариями в MODX будут посвящены ещё несколько статей.
Спасибо, полезная статья. Вопрос, а как создать чанк с выводом всех комментариев?
Заранее спасибо.
Спасибо