Комментарии в MODx Revo с помощью Tickets

Сейчас мы с вами реализуем комментарии на MODX Revo при помощи компонента Tickets. Данный компонент работает как с авторизованными пользователями, так и с анонимами. Мы с вами будем работать с анонимными пользователями. Блок комментариев мы будем подстраивать под наш шаблон:

Итак, для того, чтобы приступить, нам необходимо установить компонент Tickets из репозитория modstore.pro (он есть и в официальном репозитории, но я советую устанавливать именно из modstore.pro, так как там он быстрее обновляется).

Из всего пакета Tickets нам пока понадобится только сниппет TicketComments. Для того чтобы нам начать его использовать необходимо создать 3 чанка:

1. Чанк обертки комментариев — commentsWrapperTpl (будьте внимательны, сравнивайте классы и идентификаторы с оригинальным чанком Tickets):

   		<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>
   	

   

2. Чанк самого комментария — commentTpl (будьте внимательны, сравнивайте классы и идентификаторы с оригинальным чанком Tickets):

   			<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>-->
   		

   

3. Чанк формы отправки комментария — commentFormTpl (будьте внимательны, сравнивайте классы и идентификаторы с оригинальным чанком Tickets):

   			<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 со следующими параметрами:

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

Думаю, что значат эти параметры, вы прочитаете в документации (она на русском, не пугайтесь). Теперь у нас работают комментарии! Поздравляю! В панели администратора теперь появился пункт управления комментариями в разделе “приложения”.

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

Данный урок, где мы делали блог – последний. Со следующего урока мы приступим к разработке Интернет-магазина. Самое интересное еще впереди!