[MODX] Оформление и настройка easyComm. Комментарии и отзывы на сайте.

easyComm — платный пакет для добавление в на ваш сайт блока с комментариями. Почитать более подробно о возможностях, преимуществах и поводах купить или не покупать данное дополнение на сайтах — https://docs.modx.pro/components/easycomm/ и https://modstore.pro/packages/utilities/easycomm.

Преимущества пакета из-за которых я готов его рекламировать бесплатно:)

  • It just works (c)
  • Настройка за несколько минут
  • Если используете Bootstrap, то оформление уже готово. То есть опрятный внешний вид уже «из коробки».
  • Удобный способ ответить на сообщение из админки
  • Уведомления на почту админу и пользователю (в т.ч. при размещении ответа).

Мне дополнение понравилось! Рекомендую. Кстати, на этом сайте сейчас установлен именно этот пакет.

Но все таки должна быть индивидуальность (..или стандартизация)

Я люблю когда можно быстро скопировать и разместить на сайт готовый функционал. Тут представлен пример модуля для комментариев в том виде, в котором он существует сейчас на этом самом сайте. Какие-то чанки могут незначительно отличаться от оригинальных, или не отличаться вовсе. Я предпочитаю чтобы при выводе сниппета все чанки были видны, чтобы ими было легко управлять при помощи tagElementPlugin (Если вы новичок и впервые слышите об этом дополнении — не проходите мимо, оно сэкономит вам часы жизни и сделает разработку еще более счастливой).

Протестировать дополнение можно прямо на этой странице (крутите вниз).

Что необходимо для работы дополнения

  1. jQuery, Плагин jQuery Form
  2. CSS Bootstrap, хотя для представленных тут стилей будет достаточно только сетки.
  3. Системная настройка emailsender должна содержать существующий адрес. Туда будут приходить уведомления. Если хотите другой адрес, есть специфическая настрока у дополнения.

Вызов сниппета

<div class="review">
[[!ecForm?
    &tplForm=`tpl.ecForm`
    &tplFormReCaptcha=`tpl.ecForm.ReCaptcha`
    &tplNewEmailManager=`tpl.ecForm.New.Email.Manager`
    &tplNewEmailUser=`tpl.ecForm.New.Email.User`
    &tplSuccess=`tpl.ecForm.Success`
    &tplUpdateEmailUser=`tpl.ecForm.Update.Email.User`
    
    &allowedFields=`user_name,user_email,user_contacts,subject,rating,text`
    &antispamField=`address`
    &requiredFields=`user_name,text`
    
    &thread=`[[*id]]`
]]
[[!ecMessages?
    &tpl=`tpl.ecMessages.Row`
    &sortby=`date`
    &sortdir=`DESC`
    &limit=`10`
    &thread=`[[*id]]`
]]
</div>

CSS

.ec-form {
    margin-bottom: 50px;
    margin-top: 30px;
}
.ec-input_wr{
    position: relative;
    margin-bottom: 20px;
}
.ec-input_wr .ec-error {
    position: absolute;
    font-size: 12px;
    top: -8px;
    right: -8px;
    padding: 3px 8px;
    color: #fff;
    background-color: #c11313;
    border-radius: 4px;
}
.ec-input_text{
    width: 100%;
    padding: 10px 20px;
    border: 1px solid #d3c4c4;
    border-radius: 3px;
    outline: 0;
    box-shadow: inset 0 4px 7px rgba(0, 0, 0, 0.05);
    background-color: #fdfdfd;
}
.ec-input_text:focus{
    box-shadow: none;
}
.ec-input_text::-webkit-input-placeholder {
  color: #ccc;
}
.ec-input_text::-moz-placeholder {
  color: #ccc;
}
.ec-input_text:-ms-input-placeholder {
  color: #ccc;
}
.ec-input_text:-moz-placeholder {
  color: #ccc;
}
.ec-rating_wr{
    padding-top: 8px;
}
.ec-rating_wr label{
    display: inline-block;
    font-size: 16px;
    font-weight: 600;
    vertical-align: middle;
}
.ec-rating_wr .ec-rating{
    display: inline-block;
    vertical-align: middle;
}
.ec-rating-description {
    float: none;
    position: absolute;
    top: -11px;
    left: 125px;
}
.ec-action_go {
    display: inline-block;
    padding: 8px 17px;
    color: #fff;
    background-color: #32b595;
    border: none;
    border-radius: 5px;
    outline:none;
}
.ec-form .ec-rating-stars span,
.ec-message .ec-stars span
{
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAoCAYAAADkDTpVAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjUxNEQ1QzE0MjQ3MTExRTg4MTdFOTZCQTNFN0EwRTE1IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjUxNEQ1QzE1MjQ3MTExRTg4MTdFOTZCQTNFN0EwRTE1Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NTE0RDVDMTIyNDcxMTFFODgxN0U5NkJBM0U3QTBFMTUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NTE0RDVDMTMyNDcxMTFFODgxN0U5NkJBM0U3QTBFMTUiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7qmMJKAAAD0klEQVR42rSWX0hTURzHd+52tSzn5qb4L9xQN1ttoaDTpltLCwZDQZEoxSQD+4sjhArqoeglSewPJD1I6YsvvtRLLz1ElCLSHygyhCAqiDCTkGrm3Ol7bXfsbjd3ZrcDP8499/zO73fu7/c753OJKnnbDGmEEMgDyOJaypRSyViToPD1oGR88vRU/fm+HVc5jqgv9L84fuOy854qhcYlU2hrNrXn5mwoNhrSi/a3mjtJ9ginmAOdaUxvKdXWiGNLSZZz+1ZdjmIO+k5s8+QaN5jEsSE7vfBQR5lXEQcIBdlZndMsxD76jqhIhT3bn0qYhCRbIWWiMyxeLYO0NI7fatW54xfYrLr6LG1aC/SWRL9ifUDeUnrntWSjo0N1w7vd+R61mpA/ZfZngtdwPBK7RW5XX+aXPi6Hwr8iXxUpTxV9NPF5Yt+hh50SB6G5zu8wnqFSoIXDNMgZRjZKcgDjt1QKNeTrdsI7xPIU+oP4xPn1Gsbab+gOQ47JVhGcjCKWdVB8uA7jT4S1eBxes0zh5A0U9/4MrlzBojCDYQrd61jTgOErpnMAJ8tnLz69i2StJHdAV85deibcS0spHTRvXX4LEs8zJFSzx1vQlupJ3uTYpm9kjb/dpvfiqzOZHQSO2qqKCjIsMvF+CXke/z4vd6P5TMBey+zA11jYxPNcepzOTSSyBiIYuhY7IYSywZPfzOygutJoidn1HLoDkOOQH5FkBgREYO6TqFdVYbAxO9BlpY2iew+5jx270I/JrBmPzAkV9AEX3/BaDsj/ZnLS1tHR4ZucnHw3NTX1Ac9NDOdDIknB4fP52g0GQ7Fery/y+/2dLBxnRmZmZqbeZDJFmWw2m50Wi0U5Jnd3d3uw+yiTdTpdYWtrq1cpB6SyshJM5mKYTIjNZvOnEqYEJkfYquLRSkpKEphcWlpaj9C1LC4uyjIZImVyf3//cG1trQc7lZSsRqPhkVhZJi8sLHwMhUK/4gtoenp6ore3V8rkmZkZMFmtEJPDQavVGs9ktYJM5hKZjLKLMJn+A5PpKpNh69hfr4rZ2dlyKA6hUHalaBxMJkdg/JXcVREtNyiAyWRvMBgEkykDkymFLphMGkTjSc8BFJcHBgbA5DATkwcHB+9hTWpMdjqdYLKagcmcxuVypc7k8vJyZiajJIVrg53JXV1dVXl5eTJMpmAyTWCy0Wg09/T0sDPZ7XY34QTLMJmAyUSGyWoet0Bzsrso2hwORwyT6RyM9iKJsdgMoJwfY06onvzVXxe7nZ3JWq02hsnEFWdcrLRxYU5kMi6+NZn8W4ABAON+QS5JOJHFAAAAAElFTkSuQmCC');
}
.ec-form .ec-rating-stars span{
    width: 24px;
    height: 20px;
    background-position: 0 -20px;
    background-repeat: no-repeat;
}
.ec-form .ec-rating-stars span.active-disabled {
    background-position: 0 -20px;
}
.ec-message .ec-stars {
    background: none;
    width: initial;
    height: initial;
    zoom:0.5;
}
.ec-message .ec-stars span {
    height: 20px;
}
.ec-message .ec-stars span.rating-0{width: 0;height: 0;}
.ec-message .ec-stars span.rating-1{width: 24px;}
.ec-message .ec-stars span.rating-2{width: 48px;}
.ec-message .ec-stars span.rating-3{width: 72px;}
.ec-message .ec-stars span.rating-4{width: 96px;}
.ec-message .ec-stars span.rating-5{width: 120px;}
.review .ec-message {
    position: relative;
    padding: 10px 20px;
    background-color: #fff9ff;
    border: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    margin-bottom: 10px;
    border: 1px solid #eaeaea;
    border-top: 1px solid #f9f9f9;
    border-bottom: 1px solid #d4d4d4;
    /* box-shadow: 0 2px 3px rgba(0, 0, 0, 0.05); */
}
/*
.ec-message-text{
    white-space: pre-wrap;
}
*/
.ec-message .ec-message__reply {
    margin-top: 20px;
    background-color: #fff;
    padding: 18px 24px;
    border-radius: 3px;
    -webkit-box-shadow: 0 3px 4px rgba(0, 0, 0, 0.05);
    -moz-box-shadow: 0 3px 4px rgba(0, 0, 0, 0.05);
    box-shadow: 0 3px 4px rgba(0, 0, 0, 0.05);
}
.ec-message__reply p strong{
    display: block;
    margin-bottom: 10px;
    color: #aa4829;
    font-weight: 600;
    font-size: 16px;
}
.ec-message_from {
    margin-bottom: 5px;
}
.ec-message_from .ec-message__date{
    color: #c2bdbd;
    font-weight: normal;
}
.ec-message_from strong{
    font-weight: 600;
    font-size: 16px;
}
/*
.ec-message:after{
    content:"";
    position: absolute;
    left: -6px;
    top:38px;
    width: 36px;
    height: 31px;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAfCAYAAACPvW/2AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkEzN0IxNjhGMjQ3NzExRThCNjdFQURCRkZFNTJDNTkxIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkEzN0IxNjkwMjQ3NzExRThCNjdFQURCRkZFNTJDNTkxIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QTM3QjE2OEQyNDc3MTFFOEI2N0VBREJGRkU1MkM1OTEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QTM3QjE2OEUyNDc3MTFFOEI2N0VBREJGRkU1MkM1OTEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5BwOitAAABqklEQVR42rRY0W2DMBBNTvyTLlAqdYB0g7JB6ARkBEboCB0hI9ANwgZkgCqkEyQb9Fw5lUHYfoevliys2Hl59+7eBVivEsft+6u0yz5/fL6m4mTCLx348sRzw3PrbtnPEQxz7sNimHXhbHeZgMyeL7VnuxWo885z59k7rEEyJpqBZ+458saEWlCdc+DIA4FRNQEyN4SMo45vfBqVCVSnCRxpBbVTx3AQhaqAOmYcFdT5wyEFoFZBnROna4gSss4qAkc60F17NCjSAkqoQYwQA73w5RXJe2INGpf2iEKxqEZACTijoCggc62QrnLyF7OMEFA7aLoQnBYh1KQSsipXEYzL3e5eQraYCynQgmKeDYr+Qx0BTo8QqpYAzXTm7ZLAaKYz5woKIerMtg1aoA7SfxarTBNX7BTShZjCqzIJo9JKF0QIBdJIVzhlAlcECTFOBZri4rttuStUog8fkYZYpgZFGjJrpeuXkMBdwYIWuCuIQ4KoVvbZLFWdIA4J8q5GKFSH2QToxPNqf3iw696CHCO3Gq5LO6dWRnjRLu+8vUh5A7KxNZQ8fgQYAEBksvnEb69TAAAAAElFTkSuQmCC');
}
*/
.ec-form > h2{
    font-weight: normal;
}

.ec-form-success .alert {
    background: #e6f5e9;
    padding: 10px 30px;
    border-radius: 4px;
    margin-bottom: 25px;
    font-size: 15px;
}

Чанки

tpl.ecForm

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.form/4.2.2/jquery.form.min.js"></script>
<form class="ec-form" method="post" role="form" id="ec-form-[[+fid]]" data-fid="[[+fid]]" action="">
    <h2 class="font_t2">Добавить комментарий</h2>
    <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]]</label>
        <input type="text" name="[[+antispam_field]]" class="form-control" id="ec-[[+antispam_field]]-[[+fid]]" value="" />
    </div>
    <div class="row">
        <div class="col-xs-12 col-sm-4">
            <div class="ec-input_wr">
                <input type="text" name="user_name" class="ec-input_text" id="ec-user_name-[[+fid]]" value="[[+user_name]]" placeholder="Ваше имя" />
                <span class="ec-error" id="ec-user_name-error-[[+fid]]"></span>
            </div>
        </div>
        [[-
        <div class="col-xs-4">
            <div class="ec-input_wr">
                <input type="text" name="user_contacts" class="ec-input_text" id="ec-user_contacts-[[+fid]]" value="[[+user_contacts]]" placeholder="Телефон" />
                <span class="ec-error" id="ec-user_contacts-error-[[+fid]]"></span>
            </div>
        </div>
        <div class="col-xs-7">
            <div class="ec-input_wr">
                <input type="text" name="subject" class="ec-input_text" id="ec-subject-[[+fid]]" value="[[+subject]]" placeholder="Тема сообщения" />
                <span class="ec-error help-block" id="ec-subject-error-[[+fid]]"></span>
            </div>
        </div>
        ]]
        <div class="col-xs-12 col-sm-5">
            <div class="ec-input_wr ec-rating_wr">
                <label>Оцените статью</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="Ничего не понятно"></span>
                        <span data-rating="2" data-description="Хоть что-то"></span>
                        <span data-rating="3" data-description="[[%ec_fe_message_rating_3]]"></span>
                        <span data-rating="4" data-description="[[%ec_fe_message_rating_4]]"></span>
                        <span data-rating="5" data-description="Отлично!"></span>
                    </div>
                    <div class="ec-rating-description"></div>
                </div>
                <span class="ec-error help-block" id="ec-rating-error-[[+fid]]"></span>
            </div>
        </div>
        <div class="col-xs-12 col-sm-3">
            <div class="ec-input_wr">
                <input type="text" name="user_email" class="ec-input_text" id="ec-user_email-[[+fid]]" value="[[+user_email]]" placeholder="Email" />
                <span class="ec-error" id="ec-user_email-error-[[+fid]]"></span>
            </div>
        </div>
        <div class="col-xs-12">
            <div class="ec-input_wr">
                <textarea type="text" name="text" class="ec-input_text" rows="5" id="ec-text-[[+fid]]" placeholder="Ваше сообщение (Теги MODX выводятся корректно)">[[+text]]</textarea>
                <span class="ec-error help-block" id="ec-text-error-[[+fid]]"></span>
            </div>
        </div>
    </div>
        
    [[+recaptcha]]
    
    <div class="ec-action_go_wr">
        <input type="submit" class="ec-action_go" name="send" value="Добавить комментарий" />
    </div>
</form>
<div id="ec-form-success-[[+fid]]" class="ec-form-success"></div>

tpl.ecForm.ReCaptcha

<div class="form-group">
    <div class="ec-captcha" id="ec-captcha-[[+fid]]"></div>
    <span class="ec-error help-block" id="ec-captcha-error-[[+fid]]"></span>
</div>

tpl.ecForm.New.Email.Manager

На сайте [[++site_url]] было оставлено новое сообщение:
<br />
<br />
Автор: <span style="font-weight: bold">[[+user_name]]</span>
<br/>
&лектронная почта: <span style="font-weight: bold">[[+user_email]]</span>
<br/>
[[-
Контактная информация: <span style="font-weight: bold">[[+user_contacts]]</span>
<br/>
<br/>
Тема сообщения: <span style="font-weight: bold">[[+subject]]</span>
<br/>]]
Оценка: <span style="font-weight: bold">[[+rating]]</span>
<br/>
Текст сообщения:
<br/>
<br/>
<div style="white-space:pre-line;background: #f0f0f0;padding: 10px;border: solid 1px #eee;">[[+text]]</div>
<br /><br />
Сообщение было оставлено на странице <a target="_blank" href="[[~[[+resource_id]]?scheme=`full`]]">[[+resource_pagetitle]]</a>
<br />
<br />
<a target="_blank" href="[[+site_manager_url]]?a=resource/update&id=[[+resource_id]]">Опубликовать или ответить на сообщение &gt;</a>

tpl.ecForm.New.Email.User

Здравствуйте, <b>[[+user_name]]</b>!
<br />
Вы оставили сообщение на сайте <b>[[++site_name]]</b> на странице <a target="_blank" href="[[~[[+resource_id]]?scheme=`full`]]">[[+resource_pagetitle]]</a>:
<br />
<br />
Ваше сообщение будет опубликовано после проверки администратором.
<br />
<br />
<div style="white-space:pre-line;background: #f0f0f0;padding: 10px;border: solid 1px #eee;">[[+text]]</div>
<br />
----------------
<br />
С уважением, [[++site_name]].

tpl.ecForm.Success

<div class="alert alert-success" role="alert">
    [[%ec_fe_send_success]]
</div>

tpl.ecForm.Update.Email.User

Здравствуйте, [[+user_name]]!
<br />
Вы оставляли сообщение на сайте [[++site_url]]:
<br />
<br />
<div style="white-space:pre-line;background: #f0f0f0;padding: 10px;border: solid 1px #eee;">[[+text]]</div>
<br /><br />
[[+no_reply_and_published]][[+reply_and_published]][[+reply_and_not_published]]
<br />
<br />
С уважением, [[++site_name]].

[[-НЕ удаляйте HTML-комментари. Из них формируются живые плесхолдеры]]
<!--ec_no_reply_and_published
Ваше сообщение было опубликовано. Вы можете его просмотреть <a href="[[~[[+resource_id]]? &scheme=`full`]]#message-[[+id]]">здесь</a>.
-->
<!--ec_reply_and_published
[[+reply_author]]<br />
<br />
<div style="white-space:pre;background: #f0f0f0;padding: 10px;border: solid 1px #eee;">[[+reply_text]]</div>
<br />
Ваше сообщение с ответом на него опубликовано <a href="[[~[[+resource_id]]? &scheme=`full`]]#message-[[+id]]">здесь</a>.
-->
<!--ec_reply_and_not_published
[[+reply_author]]<br />
<br />
<div style="white-space:pre;background: #f0f0f0;padding: 10px;border: solid 1px #eee;">[[+reply_text]]</div>
-->

<!--ec_reply_author <span style="font-weight:bold;">[[+reply_author]]</span> ответил на ваше сообщение:-->
<!--ec_!reply_author На ваше сообщение дан ответ:-->

tpl.ecMessages.Row

Тут использован сниппет dateAgo

<div id="ec-[[+thread_name]]-message-[[+id]]" class="ec-message">
    <p class="ec-message_from"><strong>[[+user_name]]</strong><span class="ec-message__date"> [[+date:dateAgo]]</span></p>
    <div class="ec-stars">
        <span class="rating-[[+rating]]"></span>
    </div>
    <p class="ec-message-text">[[+text]]</p>
    [[+reply_text]]
</div>

[[-НЕ удаляйте HTML-комментари. Из них формируются живые плесхолдеры]]
<!--ec_reply_text <div class="ec-message__reply">[[+reply_author]]<p>[[+reply_text]]</p></div>-->
<!--ec_reply_author <p><strong>[[+reply_author]]</strong></p>-->

Отображение рейтинга

[[!ecThreadRating?
&thread=`[[*id]]`
&tpl=`tpl.ecThreadRating`
]]

tpl.ecThreadRating

<div class="res_rating">
  <div class="base" title="Рейтинг [[+rating_simple]]">
    <div class="set" style="width: [[+rating_simple_percent]]%"></div>
  </div>
</div>
[[-
Доступные плейсхолдеры
[[+rating_wilson]]<br>
[[+rating_simple]]<br>
[[+rating_wilson_percent]]<br>
[[+rating_simple_percent]]<br>
[[+rating_max]]<br>
]]

CSS Для рейтинга

.res_rating .base{
  height: 11px;
  width: 65px;
  position: relative;
  background-color: #fff;
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEEAAAALCAYAAAAgNOBPAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MkMyMkU5NEZDRTBBMTFFOEIwQ0NCMDU4NUUwNzJDNjAiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MkMyMkU5NTBDRTBBMTFFOEIwQ0NCMDU4NUUwNzJDNjAiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDoyQzIyRTk0RENFMEExMUU4QjBDQ0IwNTg1RTA3MkM2MCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDoyQzIyRTk0RUNFMEExMUU4QjBDQ0IwNTg1RTA3MkM2MCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PkZkzdQAAAEUSURBVHjaYvz//z8DOnj27FkQkGKWkpJazUAkIEcPPe3Cp4cFh561UJqRBP+Qo4eeduHUw4QlxGKR2ElEhjLJeuhpFyE9jE+fPhUG0nxALA/EikDcD8T8UPkvQJwPxPeA+CEQfwImp7dAg0jWA3UAXewiVQ8oO6wEYmccgcgDxHOR+IeA2J5MPQx0tIskPaDsEAzVTAgcA+IAKJscPQx0tIskPYyw2gGYhOYBqUQcihcBk1k8lrxGsh562kWsHuSCsQtPiPXgECdHDz3tIkoPciB44NHgQaI4LeRopgc5EBKg9HEgtoPio1CxOBwGkaOHnnYRpYcFrTHRC8wni5HEbID5KhpIK+FpgJCqh552EaUHIMAATqfKezGX62cAAAAASUVORK5CYII=');

}
.res_rating .set{
  position: absolute;
  top:0;
  left: 0;
  height: 11px;
  width: 0;
  background-color: #fff;
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEEAAAALCAYAAAAgNOBPAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MjhCRDQzNjRDRTBBMTFFOEFEOUE5MjQ1MTgwNzczNTUiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MjhCRDQzNjVDRTBBMTFFOEFEOUE5MjQ1MTgwNzczNTUiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDoyOEJENDM2MkNFMEExMUU4QUQ5QTkyNDUxODA3NzM1NSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDoyOEJENDM2M0NFMEExMUU4QUQ5QTkyNDUxODA3NzM1NSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pu0lnnYAAAESSURBVHjaYvz//z8DBpjLGAQkmRmS/69mIBaQo4eeduHRw4JDy1oozUiCd8jRQ0+7cOphwhJisUjsJCJDmXQ99LSLgB7G/3MYhIE0HxDLA7EiEPcDMT9U/gsQ5wPxPSB+CMSfgMnpLdAg0vVAHEAfu0jUA8oOK4HYGUcY8oCcjsQ/BMT2ZOphoKNdJOkBZYdgqGZC4BgQB0DZ5OhhoKNdJOlhhNcOcxnnAclEHIoXAZNZPJa8RroeetpFpB7kgrELT4j14BAnRw897SJKD3IgeODR4EGiOC3kaKYHORASoPRxILaD4qNQsTgcBpGjh552EaWHBa0x0QvMJ4uRxGyA+SoaSCvhaYCQqoeedhGlByDAADYHoZ+LMBegAAAAAElFTkSuQmCC');
}

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

  1. Евгений 11 ноября 2019, 14:23 # 0
    Здравствуйте. У вас в комментарии для оформления кода в markItUp используется тэг code, а в предпросмотр код выводится уже в тэге pre class=«prettyprint». Подскажите, где вы делаете замену? Или это в настройках как-то указывается?
    *Комментарий будет опубликован после проверки модератором

    Комментарии easyComm

    Сергей 24 апреля 2018, 18:21

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

    Администратор

    Да, для этого уже видимо стоит использовать Tickets. Но преимущество этого модуля в том, что его настройка из коробки занимает от 3 до 30 минут.. Поэтому и на этом сайте стоит это модуль)) Ничего, в обозримом будущем и сюда Tickets поставлю.

    Похожие статьи

    Генератор настроек MIGX

    Документация на русском по MODX MIGX

    Подсказки по работе и заготовки для MiniShop2

    Импорт и экспорт в MiniShop2. Реализация 1

    pdoPage и getImageList - Постраничная навигация MIGX

    Как включить HTTPS (SSL) в MODX - Подробная инструкция

    Генерация YML для выгрузки в маркет

    Примеры работы с API MODX

    Расширение свойств товаров minishop2

    Примеры выборки where, optionFilters, innerJoin

    pThumb - ресайз изображений. Примеры использования.

    Примеры использования

    Сайт на обслуживании (выключить сайт)

    Вывести getImageList только если он не пустой

    Тип поля "Список ресурсов" (resourcelist) с ограничением по родителю (parents)

    Оформление и настройка easyComm. Комментарии и отзывы на сайте.

    Добавить в письмо контактную информацию

    Поиск на сайте с пакетом SimpleSearch

    Простая и симпатичная галерея fancybox

    Вывод tv-параметров в формате -

    Галерея. Вывести обложки альбомов и фотографии

    Подсчет и вывод количества потомков ресурса в MODX

    Отредактировать письмо о заказе - добавить ТВ поле, или что-то еще

    Quip для MODX. Более рабочий вариант

    pdoResources Заготовки для работы

    Сниппет для вывода размера и расширения файла

    Простой аудио-плеер HTML5

    Вывести список всех опций MiniShop2

    Как контролировать кэш CSS и скриптов

    Изменить цену на товар в зависимости от количества при добавлении в корзину minishop2

    Слайдер Slick slider в контенте ресурса

    Подключить MODX в стороннем PHP файле

    Простейшая авторизация

    Красивое адаптивное меню под pdoMenu

    Массово обновить ТВ, или другое поле через базу

    Как создать ресурс процессором $modx->runProcessor('resource/create', $props)

    Изменить формат номера заказа

    Создать свою страницу в админке

    Сообщение о том, что сайт использует Cookie

    Получить grandparent. Вывести родитель родителя

    Симпатичный список файлов, загружаемых к ресурсу через MIGX

    Создать источник файлов

    Установить шаблон по-умолчанию для новых, создаваемых ресурсов

    Вывести все доступные плейсхолдеры

    Отредактировать шаблон письма

    Добавить скрипт перед тегом body

    Общая сумма по каждому товару в корзине Minishop2

    Создать раздел с паролем на сайте MODX

    Что делать если ее приходит почта администратору

    Фильтрация по TV параметрам в msProducts

    Дата на русском

    FontAwesome - часто используемые иконки для шаблонов MODX

    Создать пакет с пользовательской таблицей

    Курсы валют с cbr.ru на PHP

    Заготовки для работы

    Обязательный чекбокс при оформлении заказа

    getResources заготовки

    Загрузка сниппета после загрузки страницы через AjaxSnippet

    Соответствие названия классов с названиями таблиц в MySQL

    Баннеры с использованием BannerY

    Разбить вывод pdoResources на несколько колонок (блоков)

    Обработка остатков заказа в miniShop2

    CSS для постраничной навигации pdoPage

    Вывести время загрузки (формирования) страницы

    Расширить таблицу site_content (объект modResource) за 5 минут

    Счетчик посещений и скачиваний для сортировки ресурсов

    Вырезать кавычки — фильтр-сниппет MODX

    Обновить alias (псевдоним) у всех ресурсов

    Динамическое поле emailSubject в FormIt

    Бесплатная доставка от 5000 рублей в MiniShop2

    Скрыть информацию о том, что сайт работает на MODX

    Отсортировать ресурсы по количеству комментариев Quip MODx

    Изменить цену на товар, если в корзине лежит товар из особой категории minishop2

    Создать редирект через autoRedirector API

    Вывести 404 ошибку по настройке TV MODX

    Ответ для сервиса moneta.ru

    Email сделать не обязательным полем

    Как разместить исходный код сниппета на сайте, в документации

    Ускорить установку MODX revo до пары кликов

    Постраничная навигация — набор параметров и CSS PdoPage

    Сделать поле размер обязательным

    Не работает подгрузка товаров ajax mfilter2 на мобильном

    Сделать все элементы статичными для Git и IDE

    Cортировать по списку id в pdoResources и pdoTools

    Кастомный чанк для AdminPanel

    Настройка стилей для комментариев Tickets

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

    Разместить корзину внутри блока с оформлением заказа

    Динамическая замена шаблона ресурса - плагин

    Вывести список всех родителей в ТВ поле ресурса

    Вложенные условия в xPDO MODX

    Плагин для формирования замороженных URL с редиректом

    Приветственный экран / заглушка на сайт

    Вывести список всех емэйлов miniShop2

    Если getParentIds не работает в плагине

    Как получить данные пользователя сразу после авторизации через API

    xPDO Выборка из одной таблицы с зацепкой значения из другой

    Контролировать кэширование файлов CSS и JS MiniShop2

    Не приходят / не отправляются письма - в чем причина?

    Кэширование в MODX: использование $modx->cacheManager

    Наш сайт использует куки, нажмите «ОК» если вы не против
    OK