xLike — идеальная система лайков для MODX Revo

В данном уроке разберем документацию по бесплатному MODX дополнению xLike и разберем на реальном примере как внедрить систему лайков для любого объекта.

Установка

Устанавливается пакет стандартно из репозитория modstore.

Документация по xLike

Дополнение довольно простое и одновременно достаточно функциональное. Выполняет систему рейтинга для любого объекта, по-умолчанию, для ресурсов. Чем-то напоминает систему лайков на YouTube, в частности.

Также, особенностью компонента является правильный подсчет рейтинга на основе вычисления нижней границы доверительного интервала Вильсона для параметра Бернулли. По-простому: эта формула не даст встать новым записям с 1 лайком и 0 дизлайками выше более старых записей с сильным рейтингом.

Список преимуществ:

1. Оптимистичный интерфейс,
2. Наиболее правильная формула вычисления рейтинга,
3. Работа с любыми объектами (modResource, modUser, кастомные объекты),
4. Голосование гостями,
5. Анимированное изменения полосы/числа рейтинга,
6. Событие плагина — xLikeOnVote.

Сниппет xLike

Выводит систему рейтинга на месте вызова.

Параметры

• tpl — чанк шаблона вывода. По-умолчанию, tpl.xLike.
• mode — режим работы сниппета: db или local. В режиме local сниппет обходится без запроса к базе для того, чтобы узнать кол-во лайков/дизлайков и рейтинг, вместо этого вам необходимо передать эти цифры в сниппет в качестве параметров. По-умолчанию, db.
• guest — разрешить гостям голосовать. По-умолчанию, Да.
• parent — ID объекта. По-умолчанию, ID текущего ресурса.
• class — класс объекта. По-умолчанию, modResource.
• list — название списка (дополнительный параметр группировки). По-умолчанию, default.

Официальные примеры

Вывод рейтинга для текущего ресурса с возможностью голосовать гостям:
{'!xLike' | snippet}
Вывод рейтинга для текущего тикета без возможности голосовать гостям:

{'!xLike' | snippet : [
    'guest' => false,
    'class' => 'Ticket',
]}

Вывод рейтинга для текущего ресурса в режиме local:

{'!xLike' | snippet : [
    'mode' => 'local',
    'likes' => $_modx->resource['likes'],
    'dislikes' => $_modx->resource['dislikes'],
    'rating' => $_modx->resource['rating'],
]}

Подразумевается, что в ТВ полях likes, dislikes, rating хранится соответствующая информация.

Событие xLikeOnVote

Данное событие срабатывает после голосования пользователем и всех проверок.

Параметры плагина

• parent — ID объекта, к которому привязан рейтинг,
• class — класс объекта,
• list — название списка,
• likes — кол-во лайков,
• dislikes — кол-во дизлайков,
• rating — текущий рейтинг, уже пересчитанный.

Оригинал документации находиться на странице с описанием компонента.

Практическое применение

Внедрение системы лайков на страницы блога (в виде сердечек)

Внешний вид по умолчанию у xLike следующий.

У нас в шаблоне используются сердечки и нет полосы с рейтингом, давайте изменим иконки по умолчанию и уберем полосу с рейтингом. Для этого сделаем копию чанка tpl.xLike и назовем ее tpl.xLike.new. После чего отредактируем ее.

За полоску с рейтингом и цифры отвечают вот эти 2 строки:

<div class="xlike__line">
        <div class="xlike__line-fill [ js-xlike-stripe ]" style="min-width: {$rating}%;"></div>
    </div>
    <div class="xlike__percent">
        <span class="[ js-xlike-rating ]">{$rating | number_format : 2 : '.' : ''}</span>%
</div>

Их можно просто закомментировать.

А сами иконки там:

лайк: <svg class="xlike__icon xlike__icon_like xlike__svg xlike__svg_like icon-svg" viewBox="0 0 100 100">{$pathes}</svg>
дизлайк: <svg class="xlike__icon xlike__icon_dislike xlike__svg xlike__svg_dislike icon-svg" viewBox="0 0 100 100">{$pathes}</svg>

Т.к. в шаблоне подключен иконочный шрифт от fontafesome v5, то не буду изобретать велосипед и использую его, для этого заменю вышеприведенные иконки на него:

Лайк: <i class="fas fa-heart">{$pathes}</i> 
Дизлайк: <i class="fas fa-heart-broken">{$pathes}</i>

Сохраняем наш чанк. И затем вызываем xLike в нужном месте с новым чанком:

[[!xLike? &tpl=`tpl.xLike.new`]]

Получаем следующее:

Запись текущего рейтинга в ТВ поле

Задача: при голосовании в рейтинге (с параметрами сниппета class=modResource, list=default), записывать текущий рейтинг в ТВ поле rating.

Код плагина:

switch ($modx->event->name) {
    case "xLikeOnVote":
        if ($class == 'modResource' && $list == 'default') {
            if ($resource = $modx->getObject($class, array('id' => $parent))) {
                $resource->setTVValue('rating', $rating);
                $resource->save();
            }
        }
        break;
}

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