Как сделать форму с комментариями в MODX Revolution

MODXВ недавней статье про MODX Revolution мы рассмотрели создание блога на основе этой популярной CMS. Конечно же, блог (и прочие сайты с контентом) подразумевает возможность оставлять комментарии. В этой статье как раз и разберемся, как «прикрутить» такую нужную функцию к своему сайту на MODX Revolution.

Создавать форму с комментариями мы с вами будем при помощи того же инструмента, при помощи которого делали блог. Речь идет о плагине Tickets (про установку плагинов — вот тут).

Для начала создадим три чанка. Для этого перейдите в раздел Элементы, раскройте подраздел Чанки, выберите каталог плагина Tickets, щелкните по нему правой кнопкой мыши и нажмите Создать новый чанк здесь.

Как сделать форму с комментариями в MODX Revolution

Назовите первый из трех чанков 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>

 

Как сделать форму с комментариями в MODX Revolution

Сравнивайте классы и идентификаторы с оригинальным чанком 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="">&darr;</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]]">&uarr;</a></span>-->

Как сделать форму с комментариями в MODX Revolution

Третий чанк — 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>
-->

Как сделать форму с комментариями в MODX Revolution

После создания чанков добавьте в используемый шаблон следующий код:

[[!TicketComments?
    &allowGuest=`1`
    &tplCommentFormGuest=`commentFormTpl`
    &tplCommentGuest=`commentTpl`
    &tplCommentAuth=`commentTpl`
    &tplComments=`commentsWrapperTpl`
    &gravatarSize=`70`
    ]]

И здесь надо отметить вот что — если вы не сделали отдельный шаблон для страниц с формой комментирования, то тогда эта форма будет отображаться и там, где она не нужна.

Как сделать форму с комментариями в MODX Revolution
Готовая форма для комментариев.

Помимо этого, если вы откроете верхнее меню ПриложенияТикеты, и перейдете на вкладку Ветви комментариев, то увидите, что у вас появилась панель управления комментариями.

Как сделать форму с комментариями в MODX Revolution

На этом создание формы для комментариев можно считать завершенной. Но это лишь начало пути, и работе с комментариями в MODX будут посвящены ещё несколько статей.

Комментарии: 2 к “Как сделать форму с комментариями в MODX Revolution”

  1. Спасибо, полезная статья. Вопрос, а как создать чанк с выводом всех комментариев?
    Заранее спасибо.

Добавить комментарий

Ваш адрес email не будет опубликован.