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

Комментарии в 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="">&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>-->
    		

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

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

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

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

Оцените статью:

Проголосовало: 50

Комментарии (29)

  1. Артем 01 марта 2017, 20:09 # 0
    Здравствуйте! Вывелась форма, ввожу туда текст, имя, почту. Отправляю и комментарий не появляется. Переписывал код несколько раз, не могу понять в чем дело.
    1. Петропавловский Артем 01 марта 2017, 21:18 # 0
      Проверьте классы и id. Также посмотрите не включена ли у вас на сервере настройка PHP register_globals. Если включена, выключите через htaccess написав:
      php_flag register_globals Off
      1. Евгений Валериевич 25 октября 2017, 01:02 # +1
        Сапожник без сапог? Почему у вас на сайте в коментах не работает рейтинг? И зачем выведен визуально етот елемент, если он не работает?
        1. Петропавловский Артем 25 октября 2017, 11:05 # 0
          Прежде чем писать такие комментарии, вам нужно сначала разобраться что к чему и прочитать документацию. Кнопки все рабочие, но работают они только для авторизованных пользователей. В частности, для меня.
        2. Евгений Валериевич 25 октября 2017, 11:01 # 0
          После добавления этой строчки сайт сломался, при посещении любой страницы:Internal Server Error
          The server encountered an internal error or misconfiguration and was unable to complete your request.Please contact the server administrator at webmaster@lokilucky.xyz to inform them of the time this error occurred, and the actions you performed just before this error.More information about this error may be available in the server error log.Additionally, a 500 Internal Server Error error was encountered while trying to use an ErrorDocument to handle the request.
          1. Петропавловский Артем 25 октября 2017, 11:06 # 0
            Проблема в конфигурации сервера.
      2. dmitry 06 апреля 2017, 22:57 # 0
        Хорошая статья. Артем, была бы полезная статья выборе оценки по 5 бальной шкале в комментариях.
        1. Петропавловский Артем 14 апреля 2017, 13:52 # 0
          Реализовать можно на основе статьи Отзывы о товаре в MODx Revo
        2. Роман 24 мая 2017, 05:08 # 0
          Спасибо больше, хорошая статья
          1. Роман 24 мая 2017, 05:08 # 0
            Спасибо, хорошая статья
            1. Антон 04 июня 2017, 10:14 # 0
              Заметил, что в комментариях есть опция лайка/дизлайка. Однако иконка у меня серая и не активная. Как сделать, чтобы это заработало, может сталкивались с этим?
              1. Алексей 07 июля 2017, 01:14 # 0
                111111
                1. Олег 17 июля 2017, 16:48 # 0
                  Я заметил что на этом сайте точно так же есть нолики и стрелочки для кликов и лайков, но они тоже серые, никто не голосует.
                2. Кирилл 13 июня 2017, 13:57 # 0
                  Артем, как можно реализовать комментарии только ОДНОГО ресурса на главную страницу в ротации 3 штуки — как отзывы!!!???
                  1. Денис 15 июня 2017, 23:46(Комментарий был изменён) # 0
                    Добавление комментария происходит только после обновления страницы. В чем может быть проблема не подскажете?
                    1. fsdfsadg 18 июня 2017, 16:28 # 0
                      sadgsdgsd
                      1. Владимир 09 июля 2017, 16:24 # 0
                        Почему то вывод совсем не похож на тот какой был заявлен. Почему ни слова о стиле?
                        1. 12345 23 июля 2017, 21:11(Комментарий был изменён) # 0
                          Удаленный комментарий
                          1. User 23 июля 2017, 21:14 # 0
                            Комментарий удален
                            1. User12345 23 июля 2017, 21:14 # 0
                              Комментарий был удален
                              1. Павел 21 августа 2017, 22:08 # 0
                                тестируем тоже :)
                                1. Ника 29 августа 2017, 09:02 # 0
                                  Добрый день!Подскажите, как добавить дополнительное поле «телефон»?
                                  1. Петропавловский Артем 29 августа 2017, 14:04 # 0
                                    Это нужно расширять стандарную модель комментариев Tickets. Тут нужен навык разработки и доработки пакетов MODx Revolution
                                    1. Ника 29 августа 2017, 17:10 # 0
                                      Создала плагин на событие OnBeforeCommentSave
                                      <?php
                                      if ($modx->event->name == 'OnBeforeCommentSave') {
                                      
                                      	$properties = array(
                                      		'phone' => $modx->stripTags($_POST['phone'])
                                      	);	
                                      
                                      	$modx->event->params['TicketComment']->set('properties', $properties);
                                      }
                                      
                                      Чанк:
                                      <form id="comment-form" action="" method="post" class="well">
                                      		<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="form-group">
                                      			<label class="comment-name" for="comment-name">[[%ticket_comment_name]]</label>
                                      			<input type="text" name="name" value="[[+name]]" id="comment-name" class="form-control" />
                                      			<span class="error"></span>
                                      		</div>
                                      
                                      		<div class="form-group">
                                      			<label class="comment-name" for="comment-email">[[%ticket_comment_email]]</label>
                                      			<input type="text" name="email" value="[[+email]]" id="comment-email" class="form-control" />
                                      			<span class="error"></span>
                                      		</div>
                                      		
                                      	    <div class="form-group">
                                      			<label class="comment-name" for="comment-phone">Телефон</label>
                                      			<input type="text" name="phone" value="[[+phone]]" id="comment-phone" class="form-control" />
                                      			<span class="error"></span>
                                      		</div>
                                      		
                                      		<div class="form-group">
                                      			<label class="comment-editor" for="comment-editor"></label>
                                      			<textarea name="text" id="comment-editor" cols="30" rows="10" class="form-control"></textarea>
                                      		</div>
                                      
                                      		[[+captcha]]
                                      
                                      		<div class="form-actions">
                                      			<input type="button" class="btn btn-default preview" value="[[%ticket_comment_preview]]" title="Ctrl + Enter" />
                                      			<input type="submit" class="btn btn-primary submit" value="[[%ticket_comment_save]]" title="Ctrl + Shift + Enter" />
                                      			<span class="time"></span>
                                      		</div>
                                      	</form>
                                      
                                      добавила поле phone в
                                      /assets/components/tickets/js/mgr/comment/comment.window.js
                                       /core/components/tickets/processors/mgr/comment/get.class.php
                                      В самом комментарии телефон выводится, а в админ-панель нетПодскажите, что я неправильно сделала или что ещё конкретно нужно добавить?
                                  2. Алексей 04 сентября 2017, 18:25 # 0
                                    Здравствуйте! Подскажите пожалуйста все сделал по вашим урокам, проверил классы, id, внешний вид все вроде хорошо, заполняю форму нажимаю кнопку «опубликовать» перезагружается страница, а комментарий не появляется. В чем может быть причина? Спасибо!
                                    1. Алексей 04 сентября 2017, 18:25 # 0
                                      Здравствуйте! Подскажите пожалуйста все сделал по вашим урокам, проверил классы, id, внешний вид все вроде хорошо, заполняю форму нажимаю кнопку «опубликовать» перезагружается страница, а комментарий не появляется. В чем может быть причина? Спасибо!
                                      1. Алексей 04 сентября 2017, 18:26 # 0
                                        Здравствуйте! Подскажите пожалуйста все сделал по вашим урокам, проверил классы, id, внешний вид все вроде хорошо, заполняю форму нажимаю кнопку «опубликовать» перезагружается страница, а комментарий не появляется. В чем может быть причина? Спасибо!
                                        1. Сергей 13 октября 2017, 21:48 # 0
                                          Здравствуйте, такое сообщение выводится вместо текста сообщения Could not load snippet Jevix
                                          1. Евгений Валериевич 25 октября 2017, 00:57 # 0
                                            Установи сниппет «Jevix»