MODX - Звёздный рейтинг для статей сайта

В этой статье рассмотрим, как к статьям сайта добавить звёздный рейтинг.
Звёздный рейтинг - это система для оценки материалов сайта (например, статей) с помощью количества звёздочек (обычно от 1 до 5).
Добавление данного функционала в систему CMS MODX Revolution осуществим посредством дополнения FiveStarRating.
Дополнение FiveStarRating
FiveStarRating - это дополнение, добавляющее в систему MODX Revolution элементы, с помощью которых можно осуществить фронтенд оценку ресурсов с помощью звёздочек.

Установка дополнения FiveStarRating
Дополнение FiveStarRating расположено в репозитории modx.com.
Его установку в систему MODX Revolution можно осуществить на странице "Управление пакетами".

Использование дополнения FiveStarRating
Подключение звёздной оценочной системы к ресурсу осуществляется посредством помещения вызова сниппета SimpleRating
в шаблон или контент ресурса.
[[!SimpleRating]]
Параметры сниппета SimpleRating
:
&id
- id ресурса, для которого необходимо вывести рейтинг (по умолчанию текущий).&tpl
- чанк, содержащий HTML разметку звёздного рейтинга (по умолчаниюtplSimpleRating
).
Пример вызова сниппета SimpleRating
с указанием id ресурса:
[[!SimpleRating? &id = `3` ]]
Пример вызова сниппета SimpleRating
с указанием имени чанка:
[[!SimpleRating? &tpl = `tplSimpleRating1` ]]
Сниппет SimpleRating
выполняет следующие действия:
- регистрирует нужные стили и скрипты на фронтенде;
- получает рейтинг текущего или указанного ресурса и выводит его на страницу;
- устанавливает рейтинг активным или нет, в зависимости от того оценил уже этот ресурс пользователь или нет.
Отправка оценки осуществляется через ajax. Обработку ajax-запроса на сервере выполняет файл action.php
. Данный файл проверяет возможность оценки ресурса данным пользователем, выполняет установку рейтинга (запись необходимой информации в базу данных) и возвращает результат. После получения результата от action.php
сценарий JavaScript отображает его на странице.
Защита от накрутки оценки осуществляется посредством LocalStorage и IP адреса.
При необходимости защиту по IP адресу можно отключить. Осуществляется это посредством установки системному параметру simplerating_ip
значения "Нет".

Вывод ресурсов с самым большим рейтингом
В качестве заключения рассмотрим, как можно вывести на страницу 10 ресурсов с самым высоким рейтингом. Для выполнения этой задачи воспользуемся сниппетом pdoResources
из пакета pdoTools.
[[!pdoResources? &loadModels=`simplerating` &parents=`0` &innerJoin=`{ "SimpleRating": { "class":"SimpleRating", "on": "modResource.id = SimpleRating.resource" } }` &sortby = `{"SimpleRating.rating_value":"DESC"}` &select=`{ "modResource":"id,pagetitle", "SimpleRating":"rating_value" }` &tpl=`@INLINE <p>[[+id]]. [[+pagetitle]] - [[+rating_value]]</p>` ]]
Подскажите как тут сделать сортировку по рейтингу
Сниппет
getComments
ничего не знает о звездах. Тут нужно использовать вместоgetComments
сниппетpdoResources
и самому написать join соответствующих таблиц.И у меня возник вопрос, вот зачем записывать страницы на которых я уже ставил рейтинг в localStorage??? Проверка IP все равно производится на сервере!
При наведении курсора мышки на звезду, возможно ли чтобы предыдущие звездочки также приняли зеленый цвет? Сейчас окрашивается только та звезда, на котором стоит курсор мышки.
на это:
Установил плагин, прописал пути к css и js файлам, они открываются по ссылкам из исходного кода. Только вот при наведении на звёздочки ничего не происходит. Там data-id и width у меня не цепляются prnt.sc/1v9fkuy
Не могу найти причину почему. Вот пример страницы
Подскажите, пожалуйста, почему нет выводятся звезды? Только текстовое содержимое чанка — prnt.sc/ullesv
Код был использован по умолчанию:
Проверьте, где у вас на сервере находятся эти файлы. После этого откройте страницу в браузере и перейдите в консоль. Если браузер их не нашёл, то он это выведет в неё. В сообщениях будут указаны пути к ним. Далее нужно их сравнить. Если они не совпадают, то ошибка кроется в них. А если нет, то нужно разбираться дальше. Можно также ещё попробовать очистить кэш.
Но в источниках нет папки сниппета simplerating.
Вот ссылка на сайт, может так Вы сможете мне помочь.
Вы используете MinifyX, может из-за него такие проблемы.
Перестал работать, как выявить причину?
Я догадываюсь, что это скорее всего что-то с обработчиком action.php
Посмотреть на сайте
Перестал работать, как выявить причину?
Я догадываюсь, что это скорее всего что-то с обработчиком action.php
Перестал работать, при нажатии ничего не происходит.
Как выявить причину и с чем это может быть связано?
Посмотреть на сайте
В планах улучшить этот компонент, в частности сделать звёзды в формате svg. После этого операции по внешнему оформлению звёзд можно будет очень просто выполнять с помощью CSS.
Инструкция как сделать 10 звездочек вместо 5:
1. Сделать спрайт на 10 звёздочек аналогично тому, как это выполнено в файле «\assets\components\simplerating\stars.png». Файл с 10 звездочками сохранить, например, с именем «stars10.png».
В результате ширина изображения stars10.png теперь равняется 260px.
2. В файле «\assets\components\simplerating\js\web\default.js» найти строчку:
Эту строчку заменить на:
3. В файле «\assets\components\simplerating\css\web\default.css» нужно во вех местах stars.png заменить на stars10.png и 130px на 260px.
После этого добавить дополнительно ещё следующие стили:
4. Код чанка tplSimpleRating заменить на следующий:
5. В сниппете SimpleRating выполнить 2 измнения.
5.1. Найти эту строчку:
Заменить её на следующую:
5.2. Найти эту строчку
Заменить в ней цифру 5 на 10:
А еще выводит ли моя оценка? Поле чтоб показывало мою оценку к материалу.
P.S. кому в лом рисовать 10 звездочек вот: ibb.co/YDyyxXC
Для этого нужно выполнить следующие шаги:
1. В базе данных найти таблицу simple_rating. Для поля rating_value установить Длина/значение — 3,1.
2. Открыть файл «\core\components\simplerating\model\schema\simplerating.mysql.schema.xml» и в нём тоже поменять точность на 3,1:
3. Скачать файл «https://raw.githubusercontent.com/itchief/modx_utils/master/parse_schema.php»
4. Открыть его и изменить в нём имя пакета:
5. Сохранить скрипт parse_schema.php и поместить его в корень проекта.
6. Выполнить данный файл.
Скажите пожалуйста, как я могу кастомизировать звёзды? Хотелось бы вместо png поставить svg звёзды.
Заранее благодарю за ответ
В компоненте это реализовано через спрайт, и, следовательно, так просто это изменить нельзя. Сначала нужно хорошее решение для вывода звёздного рейтинга через SVG? Например, как с помощью SVG звездочек отобразить рейтинг 4.3?
Ладно, тогда вопрос другой, как тогда убрать цифры в спрайте так, чтобы ничего не съехало?
Сейчас по Вашей формуле в pdoPage выводит ресурсы по популярности.
Но в случае, если у ресурса еще не было голосов, еще нет в списке. Как можно поправить данный момент?
Чтобы убать цифры необходимо просто изменить стили, а именно CSS-свойство height:
Спасибо за проделанную работу и вопрос: Я использую популярную МОДХ экстра Babel для создания мультиязычного вебсайта. Каждая языковая версия «живет» на отдельном контексте и имеет свой id. То есть языковые версии представляют собой разные, хотя и связанные ресурсы. Можно ли сделать так, чтобы рейтинг не дробился между английской и русской страницами сайта?
У моего сайта два языка (русский и английский). На русском рейтинг выводится [[!SimpleRating]].
На англйском [[!SimpleRating? &id=`[[BabelTranslation? &contextKey=`web`]]`]]
где BabelTranslation? &contextKey=`web` это id русского ресурса, с которым залинкован данный английский ресурс.
Спасибо.
Для этого в CSS добавьте:
В JavaScript файле \assets\components\simplerating\js\web\default.js измените следующее:
а)
b)
В консоли браузера следующие ошибки:
В админке, в журнале ошибок ничего нет.
Может ли это связано с тем, что сайт стал работать на https? на старом хостинге, когда была разработка, сайт работал на http. Или это от хостинга зависит?
Спасибо!
Необходимо проверить, действительно ли такой путь до файла action.php.
Если это так, то проверить можно ли из клиента (браузера) обратиться к нему. Например, введя URL в адресную строку браузера:
звезды работают
при попытке вывода ресурсов с лучшими оценками возникли трудности
поставил свой шаблон item_prev
но почему то не выводит [[+alias]]
а подскажите еще такой момент, как вывести на превьюшке к примеру просто звездочку с текущей оценкой, то есть тот статус который на данный момент имеет страница
либо весь ряд звезд?
Второй вариант — это использовать изображение и плейсхолдер rating_value. Например, так:
Здесь первой идет сортировка по org_sticky_top, потом по рейтингу и затем по id ресурса. И тут у меня пошли косяки. Сортировка по org_sticky_top работает норм. т.е. все отмеченные галочкой ресурсы закрепляются вначале и даже сортировка по рейтингу среди них происходит отлично. Но в остальных ресурсах происходит хаос. Сортировка по рейтингу не работает. Материал с низшим рейтингом может стоять выше материала с высшим рейтингом.
Не могли бы Вы подсказать где я мог накосячить?
А Вам огромное спасибо, что находите время, чтобы помочь таким как я!
После этого в конструкции измените $modx на $pdo:
Почему-то идет ошибка.
Как исправить?
Выдает ошибку в 42 строке (файл default.js):
Как исправить? Или рейтинг не работает по другой причине?
Попробую jquery-migrate-1.4.1.min.js подключить.
В вашем коде необходимо 1 строчку заменить на следующую:
возникла проблема что не выводит список согласно количества голосов
то есть просто если у ресурса есть рейтинг то он выводиться, но не соблюдается требования что первый это самый популярный и с самым большим числом голосов
вот вывод
Если необходимо вывести ресурсы у которых нет рейтинга, то необходимо использовать параметр leftJoin.
Если необходимо отсортировать сначала по значению рйтинга, а потом по количеству голосов, то так:
Если вам необходимо обеспечить работу с полями FiveStarRating из админки, то, как это сделать можете взять из этой инструкции.
Такой вопрос. Мне нужно сделать сортировку по 3-м полям:
1) По популярности — компонент HitsPage
2) По рейтингу — компонент FiveStarRating
3) По новизне — publishedon
Нашёл вот такую простую сортировку modx.ru/novosti-i-stati/article/216
1) понятно как вывести, там значение записывается в TV
2) непонятно (https://itchief.ru/lessons/modx-revo/modx-how-to-add-additional-fields-to-the-resource), почитал статью и не понял как это всё соединить.
3) понятно.
Помогите разобраться. Или может уже есть какое то обновление и значение рейтинга записывается в TV
Например, для того чтобы включить в запрос FiveStarRating необходимо:
Сортировка указывается с помощью параметра sortby. Как это выполнить по 3-м полям указано в примере.
У этого компонента значение рейтинга не хранится в TV. Такого обновления не будет, потому что это не улучшит компонент, а наоборот только его ухудшит.
Кроме этого защита по COOKIE будет заменена на LocalStorage.