Like вместо рейтинга на uCoz | |
Измените свою оценку материалов на uCoz с помощью кнопки "Мне нравится". Легко, быстро и эффективно. Повышайте взаимодействие с вашим контентом уже сегодня! Это удобное решение для вашего сайта, полностью написанное на JavaScript с сохранением результатов в 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.: если что, то работоспособность я проверял только в модулях "Каталог файлов" и "Каталог статей" соответственно. Источник: for-ucoz.my1.ru |
Материал разместил
Комментарии: 7 | |
|