Дизайн конечно же за Вами. На скриншоте и в коде 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 (Таблица стилей) вставляем стили:
Код
.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("https://codestore.my1.ru/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("https://codestore.my1.ru/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("https://codestore.my1.ru/img/icon/heart-bold.svg") no-repeat;
}
3. Скачиваем файл likes.js и подключаем в низ сайта перед </body> вставляем следующий код:
Код
<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.
