Главная » MODX Revo

TicketComments комментарии или отзывы в MODX при помощи Tickets

MODX комментарии или отзывы при помощи Tickets MODX Revo
Автор На чтение 18 мин Просмотров 2.8к. Комментарии 0 Опубликовано Обновлено
В данном уроке разберем как в MODX создать форму комментирования и выводить комментарии, либо отзывы в любых ресурсах при помощи Tickets. А если быть конкретнее при помощи сниппета TicketComments, который входит в состав дополнения тикетс.
Содержание
  1. Внедрение комментариев в MODX
  2. Создание новых чанков с оформлением (посадка статики на TicketComments)
  3. Вывод формы комментирования и самих комментариев
  4. Внедрение отзывов в MODX

Перед тем как начать рекомендую ознакомиться с документаций, т.к. все делается на ее основе.

Внедрение комментариев в MODX

Если у вас верстка (шаблон) на bootstrap 3 (да именно 3 версии, т.к. там в чанках TicketComments используются иконки от Glyphicons, в самих комментариях), то если сделать стандартный вызов [[!TicketComments? &allowGuest=`1`]], получите сразу довольно неплохой внешний вид.

Базовый вид формы комментариев

Если bootstrap не используется — то все будет выглядеть коряво. В общем сейчас покажу как изменять стандартный дизайн. Сделаем комментарии на нашем блоге — посадим готовую верстку на Tickets.

Блок с комментариями у нас сейчас выглядит так.

Комментарий и форма комментирования

Статичный html код самих комментариев следующий:

<div id="comments" class="post-block mt-5 post-comments">
	<h4 class="mb-3">Comments (3)</h4>
	<ul class="comments">
		<li>
			<div class="comment">
				<div class="img-thumbnail img-thumbnail-no-borders d-none d-sm-block">
					<img class="avatar" alt="TicketComments комментарии или отзывы в MODX при помощи Tickets" src="img/avatars/avatar-2.jpg">
				</div>
				<div class="comment-block">
					<div class="comment-arrow"></div>
					<span class="comment-by">
						<strong>John Doe</strong>
						<span class="float-end">
							<span> <a href="#"><i class="fas fa-reply"></i> Reply</a></span>
						</span>
					</span>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae, gravida pellentesque urna varius vitae. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae. Sed dui lorem, adipiscing in adipiscing et, interdum nec metus. Mauris ultricies, justo eu convallis placerat, felis enim ornare nisi, vitae mattis nulla ante id dui.</p>
					<span class="date float-end">January 12, 2023 at 1:38 pm</span>
				</div>
			</div>
			<ul class="comments reply">
				<li>
					<div class="comment">
						<div class="img-thumbnail img-thumbnail-no-borders d-none d-sm-block">
							<img class="avatar" alt="TicketComments комментарии или отзывы в MODX при помощи Tickets" src="img/avatars/avatar-3.jpg">
						</div>
						<div class="comment-block">
							<div class="comment-arrow"></div>
							<span class="comment-by">
								<strong>John Doe</strong>
								<span class="float-end">
									<span> <a href="#"><i class="fas fa-reply"></i> Reply</a></span>
								</span>
							</span>
							<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae, gravida pellentesque urna varius vitae.</p>
							<span class="date float-end">January 12, 2023 at 1:38 pm</span>
						</div>
					</div>
				</li>
				<li>
					<div class="comment">
						<div class="img-thumbnail img-thumbnail-no-borders d-none d-sm-block">
							<img class="avatar" alt="TicketComments комментарии или отзывы в MODX при помощи Tickets" src="img/avatars/avatar-4.jpg">
						</div>
						<div class="comment-block">
							<div class="comment-arrow"></div>
							<span class="comment-by">
								<strong>John Doe</strong>
								<span class="float-end">
									<span> <a href="#"><i class="fas fa-reply"></i> Reply</a></span>
								</span>
							</span>
							<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae, gravida pellentesque urna varius vitae.</p>
							<span class="date float-end">January 12, 2023 at 1:38 pm</span>
						</div>
					</div>
				</li>
			</ul>
		</li>
		<li>
			<div class="comment">
				<div class="img-thumbnail img-thumbnail-no-borders d-none d-sm-block">
					<img class="avatar" alt="TicketComments комментарии или отзывы в MODX при помощи Tickets" src="img/avatars/avatar.jpg">
				</div>
				<div class="comment-block">
					<div class="comment-arrow"></div>
					<span class="comment-by">
						<strong>John Doe</strong>
						<span class="float-end">
							<span> <a href="#"><i class="fas fa-reply"></i> Reply</a></span>
						</span>
					</span>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
					<span class="date float-end">January 12, 2023 at 1:38 pm</span>
				</div>
			</div>
		</li>
		<li>
			<div class="comment">
				<div class="img-thumbnail img-thumbnail-no-borders d-none d-sm-block">
					<img class="avatar" alt="TicketComments комментарии или отзывы в MODX при помощи Tickets" src="img/avatars/avatar.jpg">
				</div>
				<div class="comment-block">
					<div class="comment-arrow"></div>
					<span class="comment-by">
						<strong>John Doe</strong>
						<span class="float-end">
							<span> <a href="#"><i class="fas fa-reply"></i> Reply</a></span>
						</span>
					</span>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
					<span class="date float-end">January 12, 2023 at 1:38 pm</span>
				</div>
			</div>
		</li>
	</ul>
</div>

А вот статический код блока с формой комментирования:

<div class="post-block mt-5 post-leave-comment">
	<h4 class="mb-3">Leave a comment</h4>
	<form class="contact-form p-4 rounded bg-color-grey" action="php/contact-form.php" method="POST">			
		<div class="p-2">
			<div class="row">
				<div class="form-group col-lg-6">
					<label class="form-label required font-weight-bold text-dark">Full Name</label>
					<input type="text" value="" data-msg-required="Please enter your name." maxlength="100" class="form-control" name="name" required>
				</div>
				<div class="form-group col-lg-6">
					<label class="form-label required font-weight-bold text-dark">Email Address</label>
					<input type="email" value="" data-msg-required="Please enter your email address." data-msg-email="Please enter a valid email address." maxlength="100" class="form-control" name="email" required>
				</div>
			</div>
			<div class="row">
				<div class="form-group col">
					<label class="form-label required font-weight-bold text-dark">Comment</label>
					<textarea maxlength="5000" data-msg-required="Please enter your message." rows="8" class="form-control" name="message" required></textarea>
				</div>
			</div>
			<div class="row">
				<div class="form-group col mb-0">
					<input type="submit" value="Post Comment" class="btn btn-primary btn-modern" data-loading-text="Loading...">
				</div>
			</div>
		</div>
	</form>
</div>

Сделаем код динамическим.

Создание новых чанков с оформлением (посадка статики на TicketComments)

Посадка своей верстки по факту это замена верстки в стандартных чанках TicketComments на свою. Родные чанки лучше не править, т.к. при обновлении компонента он их может затереть.

Начнем с чанка обвертки для всех комментариев — tpl.Tickets.comment.wrapper.  Сделайте его копию, назовите её tpl.Tickets.comment.wrapper.coment. Далее отредактируем его под нашу верстку, у меня код получился следующим:

<div id="comments" class="post-block mt-5 post-comments">
    <h4 class="mb-3">[[%comments]] (<span id="comment-total">[[+total]]</span>)</h4>
    <ul class="comments">
        [[+comments]]
    </ul>
    <div id="comments-tpanel">
        <div id="tpanel-refresh"></div>
        <div id="tpanel-new"></div>
    </div>
</div>
<!--tickets_subscribed checked-->

Теперь сделайте копию чанка tpl.Tickets.comment.form.guest (для формы добавления нового комментария гостям), назовите его tpl.Tickets.comment.form.guest.coment. Отредактируем его под нашу верстку, у меня код получился следующим:

<div id="comment-form-placeholder" class="post-block mt-5 post-leave-comment">
	<h4 class="mb-3">[[%ticket_comment_create]]</h4>
	<form id="comment-form" class="contact-form p-4 rounded bg-color-grey" action="" method="post">	
        <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">
        <input type="hidden" name="form_key" value="[[+formkey]]">
		<div class="p-2">
			<div class="row">
				<div class="form-group col-lg-6">
					<label class="form-label required font-weight-bold text-dark">[[%ticket_comment_name]]</label>
					<input type="text" value="[[+name]]" maxlength="100" class="form-control" name="name" required>
					<span class="error"></span>
				</div>
				<div class="form-group col-lg-6">
					<label class="form-label required font-weight-bold text-dark">[[%ticket_comment_email]]</label>
					<input type="email" value="[[+email]]" maxlength="100" class="form-control" name="email" required>
					<span class="error"></span>
				</div>
			</div>
			<div class="row">
				<div class="form-group col">
				    <label for="comment-editor"></label>
					<label class="form-label required font-weight-bold text-dark">Комментарий</label>
					<textarea id="comment-editor" maxlength="5000" rows="8" class="form-control" name="text" required></textarea>
					<span class="error" id="text-error"></span>
				</div>
			</div>
    
            [[+captcha]]
			<div class="row">
				<div class="form-group col mb-0 form-actions">
				    <input type="button" class="btn btn-default btn-modern preview" value="[[%ticket_comment_preview]]" title="Ctrl + Enter">
					<input type="submit" value="[[%ticket_comment_save]]" class="btn btn-primary btn-modern" title="Ctrl + Shift + Enter">
					<span class="time"></span>
				</div>
			</div>
		</div>
	</form>
</div>
<!--tickets_captcha
<div class="row">
	<div class="form-group col">
        <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>
-->

Примечание! Некоторый функционал завязан на id элементов (они указаны в js). Внимательные возможно заметили, что я поменял некоторые id верстки, на id tickets. Если что-то не работает, смотрите в первую очередь в эту сторону!

Делаем копию чанка tpl.Tickets.comment.one.guest (внешний вид самого комментария), назовите его tpl.Tickets.comment.one.guest.coment. Редактируем, у меня код получился следующим:

<li id="comment-[[+id]]">
	<div class="comment ticket-comment-body[[+bad]]">
		<div class="img-thumbnail img-thumbnail-no-borders d-none d-sm-block">
			<img class="avatar" alt="avatar" src="[[+avatar]]">
		</div>
		<div class="comment-block">
			<div class="comment-arrow"></div>
			<span class="comment-by">
				<strong>[[+fullname]]</strong>
				<span class="float-end">
					<span class="ticket-comment-link"> <a href="[[+url]]#comment-[[+id]]"><i class="fas fa-reply"></i> Ответить</a></span>
				</span>
			</span>
			<p>[[+text]]</p>
			<span class="date float-end">>[[+date_ago]]</span>
		</div>
	</div>
	<ul class="comments reply">[[+children]]</ul>
</li>

Делаем копию чанка tpl.Tickets.comment.one.auth (тоже внешний вид самого комментария для авторизованного пользователя), называем tpl.Tickets.comment.one.auth.coment:

<li class="ticket-comment[[+comment_new]]" id="comment-[[+id]]" data-parent="[[+parent]]" data-newparent="[[+new_parent]]" data-id="[[+id]]">
	<div class="comment ticket-comment-body[[+guest]][[+bad]]">
		<div class="img-thumbnail img-thumbnail-no-borders d-none d-sm-block">
			<img class="avatar" alt="avatar" src="[[+avatar]]">
		</div>
		<div class="comment-block">
			<div class="comment-arrow"></div>
			<span class="comment-by">
				<strong>[[+fullname]]</strong>
				<span class="float-end comment-reply">
					<span> <a class="reply" href="#"><i class="fas fa-reply"></i> [[%ticket_comment_reply]]</a></span>
					[[+comment_edit_link]]
				</span>
			</span>
			<p>[[+text]]</p>
			<span class="date float-end">[[+date_ago]]</span>
		</div>
	</div>
	<ul class="comments reply">[[+children]]</ul>
</li>
<!--tickets_comment_edit_link <a href="#" class="edit">[[%ticket_comment_edit]]</a>-->
<!--tickets_comment_was_edited <span class="ticket-comment-edited">([[%ticket_comment_was_edited]])</span>-->
<!--tickets_comment_new  ticket-comment-new-->
<!--tickets_guest  ticket-comment-guest-->
<!--tickets_has_parent <span class="ticket-comment-up"><a href="[[+url]]#comment-[[+parent]]" data-id="[[+id]]" data-parent="[[+parent]]">↑</a></span>-->

Вывод формы комментирования и самих комментариев

Теперь вызовем TicketComments с нашими новыми чанками:

[[!TicketComments?
    &allowGuest=`1`
    &autoPublishGuest=`0`
    &gravatarSize=`40`
    &tplCommentFormGuest=`tpl.Tickets.comment.form.guest.coment`
    &tplCommentAuth=`tpl.Tickets.comment.one.auth.coment`
    &tplCommentGuest=`tpl.Tickets.comment.one.guest.coment`
    &tplComments=`tpl.Tickets.comment.wrapper.coment`
]]

Это вывод для всех пользователей (авторизованных и нет) — без предмодерации, поэтому открываем страницу с этой формой в режиме инкогнито, оставляем пару тестовых комментариев и смотрим все у нас так или нет. Если все хорошо, то поменяйте значение autoPublishGuest с 1 на 0.

Ну и тестируем, оставив пару комментариев.

Вывод комментариев на сайте

Код вызова и чанков на fenom

Вызов TicketComments

{'!TicketComments' | snippet : [
    'allowGuest' => '1',
    'autoPublishGuest' => '0',
    'gravatarSize' => '40',
    'tplCommentFormGuest' => 'tpl.Tickets.comment.form.guest.coment',
    'tplCommentAuth' => 'tpl.Tickets.comment.one.auth.coment',
    'tplCommentGuest' => 'tpl.Tickets.comment.one.guest.coment',
    'tplComments' => 'tpl.Tickets.comment.wrapper.coment',
]}

Чанк tpl.Tickets.comment.wrapper.coment

<div id="comments" class="post-block mt-5 post-comments">
    <h4 class="mb-3">{'comments' | lexicon} (<span id="comment-total">{$total}</span>)</h4>
    <ul class="comments">
        {$comments}
    </ul>
    <div id="comments-tpanel">
        <div id="tpanel-refresh"></div>
        <div id="tpanel-new"></div>
    </div>
</div>
<!--tickets_subscribed checked-->

Чанк tpl.Tickets.comment.one.guest.coment

<li id="comment-{$id}">
	<div class="comment ticket-comment-body{$bad}">
		<div class="img-thumbnail img-thumbnail-no-borders d-none d-sm-block">
			<img class="avatar" alt="avatar" src="{$avatar}">
		</div>
		<div class="comment-block">
			<div class="comment-arrow"></div>
			<span class="comment-by">
				<strong>{$fullname}</strong>
				<span class="float-end">
					<span class="ticket-comment-link"> <a href="{$url}#comment-{$id}"><i class="fas fa-reply"></i> Ответить</a></span>
				</span>
			</span>
			<p>{$text}</p>
			<span class="date float-end">>{$date_ago}</span>
		</div>
	</div>
	<ul class="comments reply">{$children}</ul>
</li>

Чанк tpl.Tickets.comment.one.auth.coment

<li class="ticket-comment{$comment_new}" id="comment-{$id}" data-parent="{$parent}" data-newparent="{$new_parent}" data-id="{$id}">
	<div class="comment ticket-comment-body{$guest}{$bad}">
		<div class="img-thumbnail img-thumbnail-no-borders d-none d-sm-block">
			<img class="avatar" alt="avatar" src="{$avatar}">
		</div>
		<div class="comment-block">
			<div class="comment-arrow"></div>
			<span class="comment-by">
				<strong>{$fullname}</strong>
				<span class="float-end comment-reply">
					<span> <a class="reply" href="#"><i class="fas fa-reply"></i> {'ticket_comment_reply' | lexicon}</a></span>
					{$comment_edit_link}
				</span>
			</span>
			<p>{$text}</p>
			<span class="date float-end">{$date_ago}</span>
		</div>
	</div>
	<ul class="comments reply">{$children}</ul>
</li>
<!--tickets_comment_edit_link <a href="#" class="edit">{'ticket_comment_edit' | lexicon}</a>-->
<!--tickets_comment_was_edited <span class="ticket-comment-edited">({'ticket_comment_was_edited' | lexicon})</span>-->
<!--tickets_comment_new  ticket-comment-new-->
<!--tickets_guest  ticket-comment-guest-->
<!--tickets_has_parent <span class="ticket-comment-up"><a href="{$url}#comment-{$parent}" data-id="{$id}" data-parent="{$parent}">↑</a></span>-->

Чанк tpl.Tickets.comment.form.guest.coment

<div id="comment-form-placeholder" class="post-block mt-5 post-leave-comment">
	<h4 class="mb-3">{'ticket_comment_create' | lexicon}</h4>
	<form id="comment-form" class="contact-form p-4 rounded bg-color-grey" action="" method="post">	
        <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">
        <input type="hidden" name="form_key" value="{$formkey}">
		<div class="p-2">
			<div class="row">
				<div class="form-group col-lg-6">
					<label class="form-label required font-weight-bold text-dark">{'ticket_comment_name' | lexicon}</label>
					<input type="text" value="{$name}" maxlength="100" class="form-control" name="name" required>
					<span class="error"></span>
				</div>
				<div class="form-group col-lg-6">
					<label class="form-label required font-weight-bold text-dark">{'ticket_comment_email' | lexicon}</label>
					<input type="email" value="{$email}" maxlength="100" class="form-control" name="email" required>
					<span class="error"></span>
				</div>
			</div>
			<div class="row">
				<div class="form-group col">
				    <label for="comment-editor"></label>
					<label class="form-label required font-weight-bold text-dark">Комментарий</label>
					<textarea id="comment-editor" maxlength="5000" rows="8" class="form-control" name="text" required></textarea>
					<span class="error" id="text-error"></span>
				</div>
			</div>
    
            [[+captcha]]
			<div class="row">
				<div class="form-group col mb-0 form-actions">
				    <input type="button" class="btn btn-default btn-modern preview" value="{'ticket_comment_preview' | lexicon}" title="Ctrl + Enter">
					<input type="submit" value="{'ticket_comment_save' | lexicon}" class="btn btn-primary btn-modern" title="Ctrl + Shift + Enter">
					<span class="time"></span>
				</div>
			</div>
		</div>
	</form>
</div>
<!--tickets_captcha
<div class="row">
	<div class="form-group col">
        <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>
-->


В тикетс, есть функционал рейтинга и т.д. чтобы это все работало вам нужно прикручивать авторизацию и настраивать права пользователям и доступа (это все есть в документации по Tickets). Переписывать код в чанках как я, только не удалять функционал отвечающий за рейтинг.

Внедрение отзывов в MODX

Внедрение отзывов не чем не отличается от внедрения комментариев. Если у вас на сайте нет комментариев на tickets то можно воспользоваться всем кодом указанным выше. А затем в словарях поменять названия.

Словари tickets

Либо вы их можете сразу в ручную прописать (когда будите делать копии чанков) все что выводиться из словарей выглядит так [[%ticket_comment_что-то]].

<
>
Поделиться с друзьями
Алексей

Веб-дизайнер и SEO оптимизатор. Занимаюсь созданием сайтов с 2010 года и их продвижение с 2012 года!

Оцените автора
( 3 оценки, среднее 4.67 из 5 )
Web-Revenue.ru
Добавить комментарий

Условия использования | Конфиденциальность

© 2012-2024 web-revenue.ru

Цитирование документа разрешается только при обязательном указании активной гиперссылки на сайт. Полное заимствование документа не разрешается и является нарушением российского и международного законодательства.

Работает на теме Reboot for WordPress
Этот сайт использует cookie для хранения данных. Продолжая использовать сайт, Вы даете свое согласие на работу с этими файлами.