[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');
}
Способ поблагодарить автора сайта:

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

  1. Напишите первый комментарий
*Комментарий будет опубликован после проверки модератором

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

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

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

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

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

[MODx] Подсказки по API

[MODx] minishop2 tips

[Code helper] Заготовки для работы

Преобразовать JSON в HTML

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

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

[MODX, pdoCrumbs] Вывести список всех родителей в ТВ поле ресурса

[JS] Связать значения инпутов через jQuery (биндинг)

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

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

[OpenCart 1.5.1] Массово изменить адреса картинок у товаров

Вывести список всех файлов на сервере (и размер файла)

[PHP] Фиксированная сортировка массива на основе хэша

Курсы валют с cbr.ru на PHP, с запасным вариантом и кэшированием

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

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

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

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

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

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

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

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

[PHP] Узнать скорость выполнения кода. Простой таймер PHP

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

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

[MODX, MiniShop2] Отредактировать шаблон письма

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

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

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

[JS] Маска для ввода телефона +7(___)___-__-__

[MODX, MiniShop2] Добавить в письмо контактную информацию

[MODX, MiniShop2] Email сделать не обязательным полем

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

[MODX, MiniShop2] Изменить формат номера заказа

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

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

reCaptcha не через форму (без тега <form>)

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

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

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

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

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

Передать файл с одного на другой сервер

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

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

[MODX, MIGX] Простейшая авторизация

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

[MODX] Узнать размер файла

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

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

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

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

[MODX, MIGX] Вывести getImageList только если он не пустой

Bxslider отображение картинок после полной загрузки слайдера

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

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

[MODX, MIGX] Простой аудио-плеер HTML5

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

[OpenCart] Вывести на главную все категории с картинками

[PHP] Получить древовидный массив за один запрос к базе

Вырезать кавычки - фильтр MODx

Регулярное выражение

[MODx] Генератор настроек MIGX

[MODx, MIGx] Документация на русском по MIGx

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

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

[MODx,MiniShop2] Не приходит почта администратору

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

[Opencart] Вернуть английский язык, если вы его удалили

Универсальная форма обратной связи — feedBackForm

[MODx, miniShop2] Генерация YML для выгрузки в маркет

Редиректы

[MODx] pdoPage pagination css

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

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

[MODx, minishop] Фильтрация по TV параметрам в msProducts

Регулярные выражения notepad++ примеры

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

[JS] Заготовочки

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

[MODx, XML] Ответ для сервиса moneta.ru

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

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

[PHP] Простое логирование

[OpenCart] Вывести модуль напрямую через контроллер

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

[MODx, MIGX] Примеры использования

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

[Opencart, FilterPro] Не работает пагинация

[OpenCart] Заготовки для автоматического заполнения товарами магазина 1.5.5.1.2

[PHP] Разные фишки, заготовки

[PHP, JSON] Пример перевода с помощью Yandex Translate API

[MySQL] Примеры запросов

[MODx] Вывод tv-параметров в формате [название TV] - [значение TV]

[MODx] Дата на русском

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

[Opencart] API tips

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

[PHP] Загрузить файл для постобработки

[Opencart 2] Показывать в категориях

[MODx, Quip] Более рабочий вариант.

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

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

[MODx] getResources заготовки

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

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

Удалить HTML-теги span, и стили из тега br

Полезные ссылки

Все записи