В этой статье рассмотрим, как к статьям сайта добавить звёздный рейтинг.
Добавление данного функционала в систему CMS MODX Revolution осуществим посредством дополнения FiveStarRating .
Дополнение FiveStarRatingFiveStarRating - это дополнение, добавляющее в систему MODX Revolution элементы, с помощью которых можно осуществить фронтенд оценку ресурсов с помощью звёздочек.
Установка дополнения FiveStarRatingДополнение FiveStarRating расположено в репозитории modx.com.
Его установку в систему MODX Revolution можно осуществить на странице "Управление пакетами".
Использование дополнения FiveStarRating
Подключение звёздной оценочной системы к ресурсу осуществляется посредством помещения вызова сниппета SimpleRating в шаблон или контент ресурса.
[[!SimpleRating]]
Параметры сниппета SimpleRating:
Пример вызова сниппета 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
[[+id]]. [[+pagetitle]] - [[+rating_value]]
` ]]Все началось с того, что я решил изменить рейтинг для заметок на своем блоге.
Основной причиной смены рейтинга послужило то, что рейтинг выводился «целочисленными» звездами, ну максимум можно было вывести и половину звезды. Т. е. если рейтинг для статьи был 4.75, то надо было выводить либо 4.5 звезды либо 5, что меня не очень устраивало.
Поэтому было принято решение написать свой собственный плагин на jQuery для формирования рейтинга в виде звезд.
Основные требования к плагину:
После того, как требования к плагину были разработаны, я приступил к программингу. В результате у меня получился довольно неплохой, как мне кажется, плагин на jQuery для рейтинга заметок в виде звезд, которым я с радостью поделюсь с Вами.
Для того, чтобы использовать данный плагин у себя на сайте, первым делом необходимо подключить саму библиотеку jQuery и сам плагин. Подключать библиотке jQuery мы будем не обычным способом, а с репозитория Google.
window.jQuery || document.write("");
Данный код необходимо разместить между тегами на Вашем сайте.
О том, для чего необходимо подключать jQuery с репозитория Google можно почитать .
Также для корректной работы плагина, необходимо подключить следующие стили:
Все это Вы найдете в исходниках.
После того, как все необходимые стили и библиотеки подключены, можно вызывать сам плагин. Для этого в нужное место на Вашей странице необходимо вставить div, например, с классом rating:
Теперь к этому элементу можно вызвать плагин следующим образом:
$("div.rating").rating();
В данном случае будет вызван плагин с настройками по умолчанию, в результате чего будет создано 5 не закрашенных звезд.
Для того, чтобы, задать какое-то количество закрашенных звезд, необходимо внутрь нашего элемента вставить скрытое поле для ввода с классом val, которое будет содержать значение Вашего рейтинга:
Если теперь вызвать плагин, то будет создан следующий рейтинг:
После того, как пользователь кликнет по нужной звезде, рейтинг автоматически пересчитается (изменится количество закрашенных звезд) с учетом сделанного выбора, а также изменится количество голосов.
Если же на одной странице размещено несколько рейтингов и Вам нужно отправлять данные на сервер, то для идентификации рейтинга используется еще одно скрытое поле ввода с классом vote-id:
Значение данного поля будет передано на сервер вместе с результатом голосования. Таким образом вы сможете идентифицировать рейтинг и обновить значение нужного Вам рейтинга!
Теперь поговорим о том, какие есть настройки у плагина и как их можно изменять!
| fx | float | Эффект при наведении курсора мыши на звезду.
|
| image | путь к изображению звезд. Следует заметить, что картинка должна быть выполнена в виде спрайта, т. е. так В самом верху изображения расположена звезда, которая будет выводится для не закрашенных звезд. Под ней находится звезда, которая выводится при наведении курсора мыши. И в самом низу расположена звезда, которая выводится для закрашенных звезд. Если Вы решите изменить звезды, то эту последовательность следует сохранить. Также обращаю Ваше внимание, что высота и ширина одной звезды должны быть равны . Иначе рейтинг будет выводится не корректно |
|
| width | 32 | Ширина одной звезды |
| stars | 5 | Количество выводимых звезд в рейтинге |
| titles | [ "голос", "голоса", "голосов" ] |
Массив существительных, которые будут выводится для учета голосов |
| readOnly | false | Режим работы рейтинга. По умолчанию равен — false. Если установить в true, то не будет возможности проголосовать |
| minimal | 0 | Минимальное значение рейтинга, ниже которого пользователь не сможет проголосовать |
| url | Адрес страницы, на которую будет отправлен AJAX запрос с результатом голосования |
|
| type | post | Тип AJAX запроса. По умолчанию равен — post. Если Вам нужно передавать GET запрос на сервер, то установите это значение равным — get |
| loader | Путь к изображению, которое будет выводится в тот момент, пока идет AJAX запрос на сервер |
|
| click | Пользовательская функция, которая вызывается, когда пользователь кликает по звезде. Первым параметром функции будет сам объект рейтинга, а второй — результат голосования пользователя |
Формат вывода пользовательских сообщений
Допустим на сервере вы обрабатываете запрос и обновляете рейтинг у заметки. В таком случае можно вывести сообщение «Спасибо. Ваш голос учтен», перестроить рейтинг звезд и обновить количество проголосовавших в браузере пользователя.
Но чаще всего прежде чем обновить рейтинг, необходимо проверить, голосовал ли этот человек за эту статью или нет. И в том случае если человек уже проголосовал за эту заметку, то в браузере пользователя необходимо вывести предупреждение и не обновлять значение рейтинга и количество проголосовавших.
Поэтому для корректной работы плагина сервер должен возвращать json-объект следующего вида:
Если status будет равен значению - OK, то рейтинг звезд обновится и пересчитается количество проголосовавших, иначе будет просто выведено предупреждающее сообщение.
Вот такой вот универсальный плагин для вывода рейтинга заметок в виде звезд у меня получился.
Посмотреть демо можно
Если Вы постоянный читатель моего блога, то возможно уже успели заметить, что я изменил рейтинг для статей.
Основной причиной смены рейтинга послужило то, что рейтинг выводился «целочисленными» звездами, ну максимум можно было вывести и половину звезды. Т. е. если рейтинг для статьи был 4.75, то надо было выводить либо 4.5 звезды либо 5, что меня не очень устраивало.
Поэтому было принято решение написать свой собственный плагин на jQuery для формирования рейтинга в виде звезд .
Основные требования к плагину:
После того, как требования к плагину были разработаны, я приступил к программингу. В результате у меня получился довольно неплохой, как мне кажется, плагин на jQuery для рейтинга заметок в виде звезд , которым я с радостью поделюсь с Вами.
Для того, чтобы использовать данный плагин у себя на сайте, первым делом необходимо подключить саму библиотеку jQuery и сам плагин. Подключать библиотке jQuery мы будем не обычным способом, а с репозитория Google.
window.jQuery || document.write("");
Данный код необходимо разместить между тегами на Вашем сайте.
О том, для чего необходимо подключать jQuery с репозитория Google можно почитать .
Также для корректной работы плагина, необходимо подключить следующие стили:
Все это Вы найдете в исходниках.
После того, как все необходимые стили и библиотеки подключены, можно вызывать сам плагин. Для этого в нужное место на Вашей странице необходимо вставить div, например, с классом rating:
Теперь к этому элементу можно вызвать плагин следующим образом:
$("div.rating").rating();
В данном случае будет вызван плагин с настройками по умолчанию, в результате чего будет создано 5 не закрашенных звезд.
Для того, чтобы, задать какое-то количество закрашенных звезд, необходимо внутрь нашего элемента вставить скрытое поле для ввода с именем name="val" , которое будет содержать значение Вашего рейтинга:
Если теперь вызвать плагин, то будет создан следующий рейтинг:
После того, как пользователь кликнет по нужной звезде, рейтинг автоматически пересчитается (изменится количество закрашенных звезд) с учетом сделанного выбора, а также изменится количество голосов.
Если же на одной странице размещено несколько рейтингов и Вам нужно отправлять данные на сервер , то для идентификации рейтинга используется еще одно скрытое поле ввода с именем name=" vote-id":
Значение данного поля будет передано на сервер вместе с результатом голосования. Таким образом вы сможете идентифицировать рейтинг и обновить значение нужного Вам рейтинга!
Теперь поговорим о том, какие есть настройки у плагина и как их можно изменять!
| fx | float |
Эффект при наведении курсора мыши на звезду.
|
| image |
путь к изображению звезд. Следует заметить, что картинка должна быть выполнена в виде спрайта, т. е. так В самом верху изображения расположена звезда, которая будет выводится для не закрашенных звезд. Под ней находится звезда, которая выводится при наведении курсора мыши. И в самом низу расположена звезда, которая выводится для закрашенных звезд. Если Вы решите изменить звезды, то эту последовательность следует сохранить. Также обращаю Ваше внимание, что высота и ширина одной звезды должны быть равны . Иначе рейтинг будет выводится не корректно |
|
| stars | 5 | |
| minimal | 0 | Минимальное значение рейтинга, ниже которого пользователь не сможет проголосовать |
| titles | [ "голос", "голоса", "голосов" ] |
Массив существительных, которые будут выводится для учета голосов |
| readOnly | false | |
| url |
Адрес страницы, на которую будет отправлен AJAX запрос с результатом голосования |
|
| type | post |
Тип AJAX запроса. По умолчанию равен — post. Если Вам нужно передавать GET запрос на сервер, то установите это значение равным — get |
| loader |
Путь к изображению, которое будет выводится в тот момент, пока идет AJAX запрос на сервер |
|
| click |
Пользовательская функция, которая вызывается, когда пользователь кликает по звезде. Первым параметром функции будет сам объект рейтинга, а второй — результат голосования пользователя |
|
| callback |
callback-функция. Вызывается при успешном завершении AJAX-запроса. На вход принимает один парамет response - ответ сервера |
Допустим на сервере вы обрабатываете запрос и обновляете рейтинг у заметки. В таком случае можно вывести сообщение «Спасибо. Ваш голос учтен», перестроить рейтинг звезд и обновить количество проголосовавших в браузере пользователя.
Но чаще всего прежде чем обновить рейтинг, необходимо проверить, голосовал ли этот человек за эту статью или нет. И в том случае если человек уже проголосовал за эту заметку, то в браузере пользователя необходимо вывести предупреждение и не обновлять значение рейтинга и количество проголосовавших.
Поэтому для корректной работы плагина сервер должен возвращать json-объект следующего вида:
Если status будет равен значению - OK , то рейтинг звезд обновится и пересчитается количество проголосовавших, иначе будет просто выведено предупреждающее сообщение.
Вот такой вот универсальный плагин для вывода рейтинга заметок в виде звезд у меня получился.
О том, как создать обработчик рейтинга в виде звезд я писал в этой статье.
Если Вам пригодился этот плагин, то можете поблагодарить меня в комментариях ниже. Так я буду знать, что мои труды не напрасны.
Если есть предложения по улучшению данного плагина или вопросы, прошу писать в комментариях.
Надеюсь Вы сочтете его полезным для себя!
Обновление от 14.03.2012:
Все началось с того, что я решил изменить рейтинг для заметок на своем блоге.
Основной причиной смены рейтинга послужило то, что рейтинг выводился «целочисленными» звездами, ну максимум можно было вывести и половину звезды. Т. е. если рейтинг для статьи был 4.75, то надо было выводить либо 4.5 звезды либо 5, что меня не очень устраивало.
Поэтому было принято решение написать свой собственный плагин на jQuery для формирования рейтинга в виде звезд.
Основные требования к плагину:
После того, как требования к плагину были разработаны, я приступил к программингу. В результате у меня получился довольно неплохой, как мне кажется, плагин на jQuery для рейтинга заметок в виде звезд, которым я с радостью поделюсь с Вами.
Для того, чтобы использовать данный плагин у себя на сайте, первым делом необходимо подключить саму библиотеку jQuery и сам плагин. Подключать библиотке jQuery мы будем не обычным способом, а с репозитория Google.
window.jQuery || document.write("");
Данный код необходимо разместить между тегами на Вашем сайте.
О том, для чего необходимо подключать jQuery с репозитория Google можно почитать .
Также для корректной работы плагина, необходимо подключить следующие стили:
Все это Вы найдете в исходниках.
После того, как все необходимые стили и библиотеки подключены, можно вызывать сам плагин. Для этого в нужное место на Вашей странице необходимо вставить div, например, с классом rating:
Теперь к этому элементу можно вызвать плагин следующим образом:
$("div.rating").rating();
В данном случае будет вызван плагин с настройками по умолчанию, в результате чего будет создано 5 не закрашенных звезд.
Для того, чтобы, задать какое-то количество закрашенных звезд, необходимо внутрь нашего элемента вставить скрытое поле для ввода с классом val, которое будет содержать значение Вашего рейтинга:
Если теперь вызвать плагин, то будет создан следующий рейтинг:
После того, как пользователь кликнет по нужной звезде, рейтинг автоматически пересчитается (изменится количество закрашенных звезд) с учетом сделанного выбора, а также изменится количество голосов.
Если же на одной странице размещено несколько рейтингов и Вам нужно отправлять данные на сервер, то для идентификации рейтинга используется еще одно скрытое поле ввода с классом vote-id:
Значение данного поля будет передано на сервер вместе с результатом голосования. Таким образом вы сможете идентифицировать рейтинг и обновить значение нужного Вам рейтинга!
Теперь поговорим о том, какие есть настройки у плагина и как их можно изменять!
| fx | float | Эффект при наведении курсора мыши на звезду.
|
| image | путь к изображению звезд. Следует заметить, что картинка должна быть выполнена в виде спрайта, т. е. так В самом верху изображения расположена звезда, которая будет выводится для не закрашенных звезд. Под ней находится звезда, которая выводится при наведении курсора мыши. И в самом низу расположена звезда, которая выводится для закрашенных звезд. Если Вы решите изменить звезды, то эту последовательность следует сохранить. Также обращаю Ваше внимание, что высота и ширина одной звезды должны быть равны . Иначе рейтинг будет выводится не корректно |
|
| width | 32 | Ширина одной звезды |
| stars | 5 | Количество выводимых звезд в рейтинге |
| titles | [ "голос", "голоса", "голосов" ] |
Массив существительных, которые будут выводится для учета голосов |
| readOnly | false | Режим работы рейтинга. По умолчанию равен — false. Если установить в true, то не будет возможности проголосовать |
| minimal | 0 | Минимальное значение рейтинга, ниже которого пользователь не сможет проголосовать |
| url | Адрес страницы, на которую будет отправлен AJAX запрос с результатом голосования |
|
| type | post | Тип AJAX запроса. По умолчанию равен — post. Если Вам нужно передавать GET запрос на сервер, то установите это значение равным — get |
| loader | Путь к изображению, которое будет выводится в тот момент, пока идет AJAX запрос на сервер |
|
| click | Пользовательская функция, которая вызывается, когда пользователь кликает по звезде. Первым параметром функции будет сам объект рейтинга, а второй — результат голосования пользователя |
Формат вывода пользовательских сообщений
Допустим на сервере вы обрабатываете запрос и обновляете рейтинг у заметки. В таком случае можно вывести сообщение «Спасибо. Ваш голос учтен», перестроить рейтинг звезд и обновить количество проголосовавших в браузере пользователя.
Но чаще всего прежде чем обновить рейтинг, необходимо проверить, голосовал ли этот человек за эту статью или нет. И в том случае если человек уже проголосовал за эту заметку, то в браузере пользователя необходимо вывести предупреждение и не обновлять значение рейтинга и количество проголосовавших.
Поэтому для корректной работы плагина сервер должен возвращать json-объект следующего вида:
Если status будет равен значению - OK, то рейтинг звезд обновится и пересчитается количество проголосовавших, иначе будет просто выведено предупреждающее сообщение.
Вот такой вот универсальный плагин для вывода рейтинга заметок в виде звезд у меня получился.
Посмотреть демо можно
Звездный рейтинг с завидной частотой встречается почти на всех веб-сайтах. Сегодня мы решили немного поэкспериментировать, и разработать новый подход к созданию звездного рейтинга с использованием небольшого отрывка кода CSS, и совсем не прибегать к коду javascript.
В верстке для звезды используется единица уникода (☆). Если у вас стоит кодировка UTF-8, то здесь не будет проблем. В противном случае вы можете использовать ☆. Вы можете использовать столько звезд, сколько пожелаете:
☆☆☆☆☆
Теперь нам нужно при наведении заменить эту «пустую» звезду «твердой». Вы можете просто создать псевдо элемент твердой звезды (★) поверх нее при событии:hover
Rating > span:hover:before {
content: "2605";
position: absolute;
}
P.S.:
Перед 2605
\
В силу того, что элемент имеет абсолютное позиционирование, мы применяем top: 0; left: 0; (как минимум в новых браузерах). Таким образом, получается, что твердая звездочка сидит прямо поверх пустой. Вы даже можете изменить ее размер или цвет, если пожелаете.
Но тем не менее, то, что есть у нас, работает только с отдельными звездами. Наша структура UX требует того, чтобы все звезды были заполнены. Например, если мы наведем на 4-ю звезду, то не только она должна быть заполнена, но также и 3-я, 2-я и 1-я.
Невозможно посредством CSS выделить предыдущие дочерние элементы. Тем не менее, у нас есть возможность выделить последующие дочерние элементы. Например, посредством смежного или общего родственного комбинатора. Если мы буквально перевернем очередность символов, то сможем использовать общий родственный комбинатор для того, чтобы выделять звезды, расположенные до той звезды, на которую был наведен курсор мыши (так как фактически, в коде HTML будут выделены последующие звезды, просто отображены они у нас в перевернутом порядке).
Rating {
unicode-bidi: bidi-override;
direction: rtl;
}
.rating > span:hover:before,
.rating > span:hover ~ span:before {
content: "2605";
position: absolute;
}
P.S.:
Перед 2605
в указанном коде должен быть слэш \
(редактор данного движка его почему-то съедает.)
И на этом всё! Полноценная UX-структура с использованием чуточки кода. Вот весь код CSS, за счет которого данный элемент будет работать:
Rating {
unicode-bidi: bidi-override;
direction: rtl;
}
.rating > span {
display: inline-block;
position: relative;
width: 1.1em;
}
.rating > span:hover:before,
.rating > span:hover ~ span:before {
content: "2605";
position: absolute;
}
P.S.:
Перед 2605
в указанном коде должен быть слэш \
(редактор данного движка его почему-то съедает.)
Применение на практике
Если вероятность, что javascript все же будет включен в данную структуру. Когда пользователь кликает на звезду, сведения о рейтинге отправляются обратно посредством Ajax, а сам виджет запускает класс для мгновенного отображения выбранного числа звезд. Если javascript уже используется в проекте, не будет ли полезно хотя бы звездный рейтинг организовать без использования данной технологии? Если ваше приложение полноценно зависит от javascript, то не беспокойтесь за работу данного элемента. Если вы заинтересованы в разработке веб-сайта, который будет работать и без javascript, то данный пример реализации как раз подойдет вам. Советуем также взглянуть на от Леа Вероу (Lea Verou), где используются радио-кнопки, что позволяет сделать элемент частью формы, которую можно подтвердить и без применения JS.
