easyComm — создание отзывов для товаров в MODX Revo

easyComm — это платный компонент для MODX Revo, который предназначен для создания отзывов, комментариев и создания разделов с вопросами пользователей. Плюс в отличии от tickets, у него из коробки есть звездный рейтинг.

Компонент предназначен в первую очередь для работы с неавторизованными пользователями (но поддержка работы авторизованными тоже есть).

Покупка и установка easyComm

Для того чтобы купить компонент, вам необходимо зарегистрироваться (авторизоваться) на сайте modstore.pro, перейти на страницу https://modstore.pro/packages/utilities/easycomm и добавить компонент в корзину, после чего оплатить его  удобным для вас способом.

После покупки, добавляем на сайт репозиторий от modstore.pro и устанавливаем компонент.

Что идет в комплекте

После установки easyComm, у вас появится 4 сниппета:

• ecForm – форма отправки комментариев/отзывов.
• ecMessages – сниппет вывода сообщений определенной цепочки
• ecMessagesCount – сниппет вывода количества сообщений определенной цепочки или цепочек
• ecThreadRating – сниппет вывода рейтинга определенной цепочки.

Также в админке, появится новый раздел (Приложения->easyComm), где вы сможете модерировать и отвечать на отзывы пользователей.

Зависимости

Для корректной работы компонента, вам самостоятельно необходимо установить (подключить) на сайт:

• в шаблон подключить библиотеки: jquery 1.7 + (если не подключен) и плагин jquery.form — без него вы получите ошибку can t find jquery ajaxform plugin

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>

• Установить компоненты (если не установлены): pdoTools (т.к. в чанках используется Fenom) и dateAgo — для формирования «красивой» даты.

Если что то не работает проверьте подключение вышеуказанных библиотек и пакетов.

Кастомизация (изменение внешнего вида) дефолтных чанков

Внимание! Не вносите изменения в чанки которые идут в комплекте, т.к. после обновления компонента все изменения будут затерты.

Меняем внешний вид формы отправки и выводим ее на сайте

Для того чтобы изменить стандартный вид формы сделаем копию дефолтного чанка (tpl.ecForm) и назовем его tpl.ecForm.custom

Далее открываем копию только созданного чанка и меняем в нем код на свой (осторожнее со скрытым полям, name, классами и идентификаторами), у меня он получился следующим:

<div class="container mt-3 mb-4">
    <form id="contact-form" class="ec-form" method="post" role="form" id="ec-form-{$fid}" data-fid="{$fid}" action="">
        <input type="hidden" name="thread" value="{$thread}">
        <div class="form-group ec-antispam">
            <label for="ec-{$antispam_field}-{$fid}" class="control-label">{'ec_fe_message_antismap' | lexicon}</label>
            <input type="text" name="{$antispam_field}" class="form-control" id="ec-{$antispam_field}-{$fid}" value="" />
        </div>
        <div class="row">
            <div class="col-md-6">
                <div class="md-form mb-0">
                    <input type="text" id="ec-user_name-{$fid}" name="user_name" class="form-control" value="{$user_name}" >
                    <label for="ec-user_name-{$fid}" class="">{'ec_fe_message_user_name' | lexicon}</label>
                    <span class="ec-error help-block" id="ec-user_name-error-{$fid}"></span>
                </div>
            </div>
            <div class="col-md-6">
                <div class="md-form mb-2">
                    <input type="text" id="ec-user_email-{$fid}" name="user_email" class="form-control" value="{$user_email}" >
                    <label for="ec-user_email-{$fid}" class="">{'ec_fe_message_user_email' | lexicon}</label>
                    <span class="ec-error help-block" id="ec-user_email-error-{$fid}"></span>
                </div>
            </div>
        </div>
        <label for="ec-rating-{$fid}" class="d-none">{'ec_fe_message_rating' | lexicon}</label>
        <input type="hidden" name="rating" id="ec-rating-{$fid}" value="{$rating}" />
        <div class="ec-rating ec-clearfix" data-storage-id="ec-rating-{$fid}">
            <div class="ec-rating-stars">
                <span data-rating="1" data-description="{'ec_fe_message_rating_1' | lexicon}"></span>
                <span data-rating="2" data-description="{'ec_fe_message_rating_2' | lexicon}"></span>
                <span data-rating="3" data-description="{'ec_fe_message_rating_3' | lexicon}"></span>
                <span data-rating="4" data-description="{'ec_fe_message_rating_4' | lexicon}"></span>
                <span data-rating="5" data-description="{'ec_fe_message_rating_5' | lexicon}"></span>
            </div>
            <div class="ec-rating-description">{'ec_fe_message_rating_0' | lexicon}</div>
        </div>
        <span class="ec-error help-block" id="ec-rating-error-{$fid}"></span>
        <div class="md-form">
            <textarea type="text" id="ec-text-{$fid}" name="text" rows="2" class="form-control md-textarea">{$text}</textarea>
            <label for="ec-text-{$fid}">{'ec_fe_message_text' | lexicon}</label>
            <span class="ec-error help-block" id="ec-text-error-{$fid}"></span>
        </div>
        {$recaptcha}
        <div class="form-actions">
            <input type="submit" class="btn btn-primary" name="send" value="{'ec_fe_send' | lexicon}" />
        </div>
    </form>
    <div id="ec-form-success-{$fid}"></div>
</div>

В данной форме я убрал 2 стандартных поля: контактная информация и тема сообщения, по этому вызов будет следующим:

[[ecForm &allowedFields=`user_name,user_email,rating,text` &tplForm=`tpl.ecForm.custom`]]

После этого форма выведется.

Кастомизация и вывод отзывов

Внешний вид вывода отзыва хранится в чанке tpl.ecMessages.Row. Сделаем его копию и назовем tpl.ecMessages.Row.custom и отредактируем, у меня получился следующий код:

<div id="ec-{$thread_name}-message-{$id}" class="container ec">
    <div class="d-block"><strong class="ec-message__author">{$user_name}</strong> <span class="ec-message__date">{$date | dateAgo}</span>
        {if $voting_enable}
            {set $voting_button_classes = $voting_can_vote ? 'js-ec-vote-button enabled' : ''}
            <div class="ec-message__votes ec-clearfix" data-message-id="{$id}" data-properties-key="{$properties_key}">
                <div class="ec-message__votes-item">
                    <a href="javascript:void(0)" class="{$voting_button_classes} ec-message__votes-button ec-message__votes-button-like {if $vote==1}active{/if}" data-value="1">
                        {$likes}
                    </a>
                </div>
                <div class="ec-message__votes-item">
                    <a href="javascript:void(0)" class="{$voting_button_classes} ec-message__votes-button ec-message__votes-button-dislike {if $vote==-1}active{/if}" data-value="-1">
                        {$dislikes}
                    </a>
                </div>
                <div class="ec-message__votes-bar"><span class="js-ec-vote-bar" style="width: {$votes_rating_percent}%"></span></div>
            </div>
        {/if}
    </div>
    <div class="ozenka">Оценка:</div>
    <div class="ec-stars">
       <span class="rating-{$rating}"></span>
    </div>
    <p class="h6">Отзыв:</p>
    <p>{$text}</p>
    {if $reply_text}
    <div class="ec-message__reply">
        {if $reply_author}
        <p><strong>{$reply_author}</strong></p>
        {/if}
        <p>{$reply_text}</p>
    </div>
    {/if}
</div>

Теперь выводим сообщения:

[[ecMessages? &tpl=`tpl.ecMessages.Row.custom`]]

Вывод расширенного рейтинга отзывов (комментариев)

Для вызова расширенного рейтинга используем следующий вызов

[[ecThreadRating? tpl=`tpl.ecThreadDetailedRating`]]

Если не нравится внешний вид по умолчанию, то делаем копию чанка tpl.ecThreadDetailedRating и вносим свои классы

Что у меня получилось

И так я выводил это все в табе, а форму добавления отзыва в модальном окне и общий код у меня выглядит так:

<div class="tab-pane fade" id="otzivi" role="tabpanel" aria-labelledby="otzivi-tab">
        <div class="container">
            <p class="h4">Отзывы</p>
            <div class="row">
                <div class="col-sm-7">
                    [[ecThreadRating? &tpl=`tpl.ecThreadDetailedRating.custom`]]
                </div>
                <div class="col-sm-5">
                    <p>Для расчёта рейтинга используются общие оценки товара за всё время. Оставьте свой отзыв о товаре: <strong>[[*pagetitle]]</strong></p>
                    <button type="button" class="btn btn-primary mb-3" data-toggle="modal" data-target="#ostavitOtzivModal">Оставить отзыв</button>
                </div>
            </div>
            <hr>
            <div class="row">
                <div class="col-12">
                    [[ecMessages? &tpl=`tpl.ecMessages.Row.custom`]]
                </div>
            </div>
            <!-- Modal -->
            <div class="modal fade" id="ostavitOtzivModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
              aria-hidden="true">
              <div class="modal-dialog" role="document">
                <div class="modal-content">
                  <div class="modal-header">
                    <p class="h5 modal-title" id="exampleModalLabel">Оставить отзыв</p>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                      <span aria-hidden="true">×</span>
                    </button>
                  </div>
                  <div class="modal-body">[[ecForm? &allowedFields=`user_name,user_email,rating,text` &tplForm=`tpl.ecForm.custom`]]</div>
                </div>
              </div>
            </div>
        </div>
    </div>

А на сайте так.

Чем то похоже на то что у Mvideo

Ну и осталось вывести общий рейтинг.

Вывод общего рейтинга

Для того, чтобы сделать его, просто вызываем сниппет

[[ecThreadRating]]

Документация по пакету: https://docs.modx.pro/components/easycomm/