Здравствуйте! Сегодня выполняю просьбу и делюсь с вами скриптом лайки для материала как на талантлев! думаю не нужно описывать что такое лайки и для чего они нужны а так же обойдёмся без скриншотов и видео демонстрации так как вы можете посмотреть работу данного скрипта прям на сайте нажав на любую кнопку для оценки материала или же комментариев принцип их работы один и тот же.
Сразу скажу что скрипт будет отличаться от того что написан конкретно для сайта талантлев так как сами должны понимать почему! но и отличаться сильно тоже не будет так же как и на сайте вывод уведомлений и обновление оценки сразу после голосования останется с небольшой правкой вида по дизайну вообщем приступим к установки скрипта
Установка
Для начало нам нужно зайти в админ панель и выбрать модуль для которого будем использовать скрипт после чего зайти в настройку дизайна данного модуля ну и в вид материалов или же на страницу материала в нужное место добавить код который представлен ниже. так как просьба была для модуля каталог файлов то я и покажу на его примере
Код кнопки
Код
<span title="Проголосовало $RATED$" id="waaklike$ID$" onclick="likphoto$ID$();"><i class="fa fa-heart" aria-hidden="true"></i> $RATED$</span>
<script>
function likphoto$ID$() {
$('#waaklike$ID$').html('<img src="/img/upload.gif">');
$.post('/load',{'a':65, 'mark':1, 'mod':'load', 'ajax':2, 'id':'$ID$', '_tp_':'xml'},function(data) {if($(data).text().indexOf('уже оценивали')>-1) { $('#waakof').html('Вы уже <br>оценивали'); setTimeout(function(){$('#waakof').fadeIn('fast')});setTimeout(function(){$('#waakof').fadeOut('fast')},7000); $('#waaklike$ID$').html('<i class="fa fa-heart" aria-hidden="true"></i> $RATED$'); } else {$('#waakok').html('Ваша оценка принята'); setTimeout(function(){$('#waakok').fadeIn('fast')});setTimeout(function(){$('#waakok').fadeOut('fast')},7000);$('#waaklike$ID$').html('<i class="fa fa-heart" aria-hidden="true" style="color: #F43C0A;"></i> <?$RATED$+1?>');};});
}
</script>
Отлично не забываем сохранить! так же в коде есть картинка её вам нужно скачать и залить к себе на сайт в папку
img Теперь нам нужно в нижнюю часть сайта добавить два блока в которых будет выводиться уведомление о результате оценки. для этого просто копируем код ниже и вставляем его в самый низ после всего содержимого, так же можно добавить просто в любой другой глобальный блок по сути но нижняя часть больше для этого подходит просто
Код блоков
Код
<div id="waakof"></div>
<div id="waakok"></div>
Отлично не забываем сохранить!
Ну теперь подключим стили для блоков с уведомлениями для этого копируем код ниже и вставляем его в свою таблицу стилей css в самый низ
Таблица стилей css
Код
#waakof, #waakok{
display: none;
position: fixed;
bottom: 10px;
left: 10px;
max-width: 200px;
padding: 10px 20px;
color: #FFF;
font-size: 13px;
}
#waakof {
background: #e12929;
}
#waakok {
background: #09ab33;
}
Отично не забываем сохранить!
Чистим кеш браузера и проверяем работу скрипта если что то не так пишите в комментариях!
Кому нужно для других модулей так же пишите в комментариях!
