Like вместо рейтинга на uCoz

Измените свою оценку материалов на uCoz с помощью кнопки "Мне нравится". Легко, быстро и эффективно. Повышайте взаимодействие с вашим контентом уже сегодня!

Это удобное решение для вашего сайта, полностью написанное на jаvascript с сохранением результатов в localStorage. Внешний вид конечно же за Вами, на скриншоте и в коде CSS представлена моя вариация дизайна данного скрипта.

Установка:

1. Вставляем этот HTML, где хотим видеть кнопку (Вид материалов и Страница материала и комментариев к нему):

Код:

<?if($RATING$)?><div class="like-container" data-id="$ID$">
 <button class="like-button" type="button"></button>
 <div class="like-count">$RATED$</div>
</div><?endif?>

2. Вставляем стили в CSS (Таблица стилей):

Код:

/* uLikes by SamVol */
.like-container {
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-pack: start;
 -ms-flex-pack: start;
 justify-content: start;
 -webkit-box-align: center;
 -ms-flex-align: center;
 align-items: center;
 cursor: pointer;
}
.like-button {
 display: block;
 width: 20px;
 height: 20px;
 background: url('/img/icon/heart.svg') no-repeat;
 margin-right: 4px;
 cursor: pointer;
 -webkit-transition: all var(--transition);
 transition: all var(--transition);
}
.like-count {
 font-size: 16px;
 font-weight: 500;
 line-height: 20px;
 color: var(--text-grey);
 -webkit-transition: all var(--transition);
 transition: all var(--transition);
}

.like-container:hover .like-button {
 background: url('/img/icon/like/heart-hover.svg') no-repeat;
}

.like-container:hover .like-count, .like-container.voted .like-count {
 color: var(--text-error);
}

.like-container.voted .like-button {
 background: url('/img/icon/heart-bold.svg') no-repeat;
}
/* ---/--- */

3. Загружаем файл likes.js и подключаем его перед </body>, в footer сайта вставляем следующий код:

Код:

<script src="/js/likes.js"></script>

Вместо подключения скрипта в глобальный блок "Нижняя часть сайта", я добавлял его только на следующих страницах: Главная страница Каталога Файлов, Страница материала и комментариев к нему Каталога Файлов, Страница со списком материалов категории Каталога Файлов.

Настройка:

По умолчанию скрипт рассчитан на работу в Каталоге Файлов. Чтобы использовать его в другом модуле, нужно найти в файле likes.js этот кусок кода:

Код:

 fetch('/load', {
  method: 'POST',
  headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
  body: new URLSearchParams({
   a: 65,
   mark: 1,
   mod: 'load',
   ajax: 2,
   id: id,
   _tp_: 'xml'
  })
 })

Нас интересует первая строка fetch('/load', { и седьмая - mod: 'load', где нужно будет поменять на название нужного вам модуля (например, publ).

P.S.: если что, то работоспособность я проверял только в модулях "Каталог файлов" и "Каталог статей" соответственно.

Скачать с [Зеркала]