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

MODX комментарии или отзывы при помощи Tickets MODX Revo
В данном уроке разберем как в MODX создать форму комментирования и выводить комментарии, либо отзывы в любых ресурсах при помощи Tickets. А если быть конкретнее при помощи сниппета TicketComments, который входит в состав дополнения тикетс.

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

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

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

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

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

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

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

<div class="comments-area">
    <h4>05 Comments</h4>
    <div class="comment-list">
        <div class="single-comment justify-content-between d-flex">
            <div class="user justify-content-between d-flex">
               <div class="thumb">
                  <img src="img/comment/comment_2.png" alt="MODX комментарии или отзывы при помощи Tickets">
               </div>
               <div class="desc">
                  <p class="comment">
                     Multiply sea night grass fourth day sea lesser rule open subdue female fill which them
                     Blessed, give fill lesser bearing multiply sea night grass fourth day sea lesser
                  </p>
                  <div class="d-flex justify-content-between">
                     <div class="d-flex align-items-center">
                        <h5>
                           <a href="#">Emilly Blunt</a>
                        </h5>
                        <p class="date">December 4, 2017 at 3:12 pm </p>
                     </div>
                     <div class="reply-btn">
                        <a href="#" class="btn-reply text-uppercase">reply</a>
                     </div>
                  </div>
               </div>
            </div>
        </div>
    </div>
    <div class="comment-list">
        <div class="single-comment justify-content-between d-flex">
            <div class="user justify-content-between d-flex">
               <div class="thumb">
                  <img src="img/comment/comment_3.png" alt="MODX комментарии или отзывы при помощи Tickets">
               </div>
               <div class="desc">
                  <p class="comment">
                     Multiply sea night grass fourth day sea lesser rule open subdue female fill which them
                     Blessed, give fill lesser bearing multiply sea night grass fourth day sea lesser
                  </p>
                  <div class="d-flex justify-content-between">
                     <div class="d-flex align-items-center">
                        <h5>
                           <a href="#">Emilly Blunt</a>
                        </h5>
                        <p class="date">December 4, 2017 at 3:12 pm </p>
                     </div>
                     <div class="reply-btn">
                        <a href="#" class="btn-reply text-uppercase">reply</a>
                     </div>
                  </div>
               </div>
            </div>
        </div>
    </div>
</div>
<div class="comment-form">
    <h4>Leave a Reply</h4>
    <form class="form-contact comment_form" action="#" id="commentForm">
        <div class="row">
            <div class="col-12">
               <div class="form-group">
                  <textarea class="form-control w-100" name="comment" id="comment" cols="30" rows="9"
                     placeholder="Write Comment"></textarea>
               </div>
            </div>
            <div class="col-sm-6">
               <div class="form-group">
                  <input class="form-control" name="name" id="name" type="text" placeholder="Name">
               </div>
            </div>
            <div class="col-sm-6">
               <div class="form-group">
                  <input class="form-control" name="email" id="email" type="email" placeholder="Email">
               </div>
            </div>
            <div class="col-12">
               <div class="form-group">
                  <input class="form-control" name="website" id="website" type="text" placeholder="Website">
               </div>
            </div>
        </div>
        <div class="form-group mt-3">
            <a href="#" class="btn_3 button-contactForm">Send Message</a>
        </div>
    </form>
</div>

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

Создание новых чанков с оформлением

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

<div class="comments-area" id="comments">
    [[+modx.user.id:isloggedin:is=`1`:then=`
    <span class="comments-subscribe pull-right">
        <label for="comments-subscribe" class="checkbox">
            <input type="checkbox" name="" id="comments-subscribe" value="1" [[+subscribed]]/> [[%ticket_comment_notify]]
        </label>
    </span>
    `:else=``]]
    <h4><span id="comment-total">[[+total]]</span> [[%comments]]</h4>
    [[+comments]]
    <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 class="comment-form">
    <h4>[[%ticket_comment_create]]</h4>
    <form class="form-contact comment_form" action="" method="post" id="comment-form">
        <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="row">
            <div class="col-12">
               <div class="form-group">
                  <textarea class="form-control w-100" name="text" id="comment-editor" cols="30" rows="9"
                     placeholder="Текст комментария"></textarea>
                  <span class="error" id="text-error"></span>
               </div>
            </div>
            <div class="col-sm-6">
               <div class="form-group">
                  <input class="form-control" name="name" value="[[+name]]" id="comment-name" type="text" placeholder="[[%ticket_comment_name]]">
                  <span class="error"></span>
               </div>
            </div>
            <div class="col-sm-6">
               <div class="form-group">
                  <input class="form-control" name="email" value="[[+email]]" id="comment-email" type="email" placeholder="[[%ticket_comment_email]]">
                  <span class="error"></span>    
               </div>
            </div>
            [[+allowFiles:is=`1`:then=`
                [[%ticket_comment_upload_auth]]
            `]]
            [[+captcha]]
        </div>
        <div class="form-group mt-3 form-actions">
            <input type="submit" class="btn_3 button-contactForm submit" value="[[%ticket_comment_save]]"
                   title="Ctrl + Shift + Enter"/>
            <span class="time"></span>
        </div>
    </form>
</div>
<!--tickets_captcha
<div class="col-12">
    <div class="form-group">
        <input type="text" name="captcha" value="" id="comment-captcha" class="form-control" placeholder="[[+captcha]]">
        <span class="error"></span>
    </div>
</div>
-->

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

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

<div class="comment-list" id="comment-[[+id]]">
    <div class="single-comment justify-content-between d-flex ticket-comment-body[[+bad]]">
        <div class="user justify-content-between d-flex">
            <div class="thumb">
                <img src="[[+avatar]]" alt="аватар [[+fullname]]">
            </div>
            <div class="desc">
                <p class="comment">[[+text]]</p>
                <div class="d-flex justify-content-between">
                    <div class="d-flex align-items-center">
                        <h5><a href="[[+url]]#comment-[[+id]]">[[+fullname]]</a></h5>
                        <p class="date">[[+date_ago]]</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="ml-4">[[+children]]</div>
</div>
<!--tickets_has_parent <span class="ticket-comment-up"><a href="[[+url]]#comment-[[+parent]]" data-id="[[+id]]" data-parent="[[+parent]]">↑</a></span>-->

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

<div class="comment-list ticket-comment[[+comment_new]]" id="comment-[[+id]]" data-parent="[[+parent]]" data-newparent="[[+new_parent]]" data-id="[[+id]]">
    <div class="single-comment justify-content-between d-flex ticket-comment-body[[+guest]][[+bad]]">
        <div class="user justify-content-between d-flex">
            <div class="thumb">
                <img src="[[+avatar]]" alt="аватар [[+fullname]]">
            </div>
            <div class="desc">
                <p class="comment">[[+text]]</p>
                <div class="d-flex justify-content-between">
                    <div class="d-flex align-items-center">
                        <h5><a href="[[+url]]#comment-[[+id]]">[[+fullname]]</a></h5>
                        <p class="date">[[+date_ago]]</p>
                    </div>
                    <div class="reply-btn">
                        <a href="#" class="btn-reply text-uppercase">[[%ticket_comment_reply]]</a>
                        [[+comment_edit_link]]
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="ml-4">[[+children]]</div>
</div>
<!--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.

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

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

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

Словари tickets

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

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

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

Оцените автора
( Пока оценок нет )
Web-Revenue.ru