Комментарии в 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`
			]]
	

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

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

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

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

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

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

  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. Виталий 30 апреля 2018, 00:41 # 0
                      Решили проблемму?
                    2. 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
                                      В самом комментарии телефон выводится, а в админ-панель нетПодскажите, что я неправильно сделала или что ещё конкретно нужно добавить?
                                      1. Петропавловский Артем 20 апреля 2018, 16:03 # 0
                                        цвуй1цвйцвйцвйцв
                                    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»
                                              1. Роман 21 января 2018, 22:04 # 0
                                                Здравствуйте, у меня такой вопрос, на этом изображении https://dart.agency/assets/img/teach/comments/comments1.pngвидно, что поставили N-ое кол-во лайков, т.е. их ставил не только админ, как сделать так, что бы неавторизованные пользователи тож могли оценивать комментарий? и второй вопрос, что бы неавт. пользователь мог удалить свой коммент, в документации не нашёл ответов на свои вопросы
                                            2. 23232323232 14 декабря 2017, 17:42 # 0
                                              32432432
                                              1. Иван 04 января 2018, 17:32 # 0
                                                Здравствуйте. нужна помощь с капчей. Здесь описание выглядит нормально. Введите сумму. у меня же Enter the amount. как это пофиксить???
                                                1. Ярослав 07 января 2018, 02:07 # 0
                                                  А как реализована модерация комментариев?
                                                  1. йцу 21 января 2018, 21:57(Комментарий был изменён) # 0
                                                    Здравствуйте, у меня такой вопрос, на этом изображении https://dart.agency/assets/img/teach/comments/comments1.pngвидно, что поставили N-ое кол-во лайков, т.е. их ставил не только админ, как сделать так, что бы неавторизованные пользователи тож могли оценивать комментарий? и второй вопрос, что бы неавт. пользователь мог удалить свой коммент, в документации не нашёл ответов на свои вопросы
                                                    1. Сергей 25 января 2018, 13:00 # 0
                                                      Здравствуйте.Как тут реализовать рейтинг комментариев для не авторизованных?
                                                      1. Ruslan 08 февраля 2018, 17:23 # 0
                                                        Здравствуйте, с десктопа все работает а вот с мобильных не тпровляется, как решить?
                                                        1. Sheeskha 20 февраля 2018, 20:52 # 0
                                                          Тоже вначале комменты не отображались, посмотрел консоль, в ней была ошибка, не находило jquery. Я вставил в дополнительно в чанк мета и всё заработало!
                                                          1. Дмитрий 15 марта 2018, 17:20 # 0
                                                            Хорошая статья, спасибо
                                                            1. Артём 25 апреля 2018, 06:16 # 0
                                                              Спасибо за статью!
                                                              1. Виталий 30 апреля 2018, 00:29 # 0
                                                                после нажатия отправить не обновляется форма и не появляются сообщение. если обновить страницу принудительно то все коментарии появляются
                                                                1. jl;kl;lk; 05 июня 2018, 15:05 # 0
                                                                  круто
                                                                  1. jl;kl;lk; 05 июня 2018, 15:05 # 0
                                                                    Круто)
                                                                    1. РОМАН 06 сентября 2018, 14:31 # 0
                                                                      Приветсвую! установил на сайт по инструкции, но Не работает Ajax отправка комментариев и соответсвенно их подгрузка. Хотя на другом сайте все работает, в чем может быть причина?
                                                                    2. Максим 05 июня 2018, 15:06 # 0
                                                                      Круто
                                                                      1. AlenaAlena 30 июня 2018, 09:19 # 0
                                                                        ДОбрый день, а как можно сделать, чтобы комментарии проходили модерацию? Заранее спасибо
                                                                        1. Андрей 03 июля 2018, 19:16 # 0
                                                                          Автор, большое спасибо тебе. У тебя прочел рекомендацию, что устанавливать надо с modstore. До этого компонент, установленный из официальной репы, считай, не работал. Если возможно, вставь прямо в текст, что устанавливать следует только с modstore.
                                                                          1. РОМАН 07 сентября 2018, 11:59 # 0
                                                                            Приветсвую! установил на сайт по инструкции, но Не работает Ajax отправка комментариев и соответсвенно их подгрузка. Хотя на другом сайте все работает, в чем может быть причина?
                                                                            1. РОМАН 07 сентября 2018, 13:25 # 0
                                                                              Пишет ошибку в файле defauil.js в строке wrapper: $('#comments-tpanel')
                                                                            2. Aleksandr Ustinov 14 сентября 2018, 21:18 # 0
                                                                              Добавил, проверил, дает ошибку, сервер Open server локальныйFatal error: Call to a member function setConfig() on null in
                                                                              1. Владимир 16 октября 2018, 16:37 # 0
                                                                                Добрый день! Такой вопрос, хочется, чтобы моим анонимным «комментаторам» приходили уведомления на емейл, что на их комментарий откликнулись. Как это можно докрутить?
                                                                                1. 7лнгнкг 30 октября 2018, 07:44 # 0
                                                                                  fwereqrg
                                                                                  1. 7лнгнкг 30 октября 2018, 07:44 # 0
                                                                                    tryjetyjetyj
                                                                                    1. 7лнгнкг 30 октября 2018, 07:45 # 0
                                                                                      56u536uy536u
                                                                                      1. 7лнгнкг 30 октября 2018, 07:45 # 0
                                                                                        5425425y452y245y245y45y
                                                                                        1. 7лнгнкг 30 октября 2018, 07:45 # 0
                                                                                          5t245y45y45y
                                                                                          1. 7лнгнкг 30 октября 2018, 07:45 # 0
                                                                                            356j35j356j356j
                                                                                            1. 7лнгнкг 30 октября 2018, 07:46 # 0
                                                                                              WWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWW

                                                                                              Написать комментарий

                                                                                              Хотите реализовать проект?

                                                                                              Контакты

                                                                                              Напишите нам - мы расскажем вам много интересного!


                                                                                              614060, Россия, г. Пермь,
                                                                                              ул. Крупской, д. 34, офис 510.
                                                                                              +7 (342) 277-43-93