Шаблоны для Datalife Engine

Купить платные адаптивные DLE шаблоны
по приятным ценам.

Время работы: 10.00 - 18.00 (МСК, пн-пт)
Telegram: @vugluskr2023
Техническая поддержка
Корзина 0
Внимание: Обновление шаблонов до 15 и 17.1 версии. Решение проблем с большими краткими новостями, постерами, рейтингом.
Адаптивные dle шаблоны   Советы и новости   Рейтинг DLE, как на youtube (раздельные лайки, шкала)

Рейтинг DLE, как на youtube (раздельные лайки, шкала)

Приветствую.

Данным примером хочу показать, как стандартный рейтинг DLE "нравится-не нравится" визуально преобразовать в всякий интересный вид на примере рейтинга Youtube. Самое главное - этот способ не затрагивает файлы движка, полностью совместим с ним, по-сути это и есть стандартный функционал DLE.

Здесь я применю раздельный подсчет лайков, визуальную шкалу соотношений лайков, процентное соотношение лайков. С помощью js мы посчитаем все это, используя rating и vote-num, и применим. Живое голосование будем делать на основе немного измененной стандартной функции DLE. В результате мы получим такой супер рейтинг.

Рейтинг DLE, как на youtube (раздельные лайки, шкала)


Подробно не буду объяснять, что к чему, просто выложу.

1. в fullstory.tpl в нужное место ставим (замечу, что можно и в shortstory.tpl)

			[rating-type-3]
			<div class="frate ignore-select" id="frate-{news-id}">
				<div class="rate-plus" id="pluss-{news-id}" onclick="doRateLD('plus', '{news-id}');"><img src="{THEME}/images/thumb-up.png" alt="нравится" /><span>0</span></div>
				<div class="rate-minus" id="minuss-{news-id}" onclick="doRateLD('minus', '{news-id}');"><img src="{THEME}/images/thumb-down.png" alt="не нравится" /><span>0</span></div>
				<div class="rate-data">{rating}{vote-num}</div>
			</div>
			[/rating-type-3]


2. в ваш css файл в конец

.frate {display:inline-block; white-space:nowrap; height:30px; line-height:20px; position:relative;}
.rate-data {display:none;}
.rate-plus, .rate-minus {display:inline-block; vertical-align:top; cursor:pointer; min-width:40px; color:#a0a0a0;}
.rate-minus {margin-left:20px;}
.frate img {opacity:0.3; margin-right:7px; display:inline-block; vertical-align:top;}
.frate div:hover img {opacity:1;}
.frate div:hover {color:#000;}
.rbar {height:3px; overflow:hidden; background-color:#cfcfcf; border-radius:1px; position:absolute; left:0; top:100%; width:100%;}
.rfill {width:50%; height:100%; position:absolute; left:0; top:0; background-color:#2692e6; transition:width 1s linear;}


3. в ваш js файл в конец

$(document).ready(function(){

	$('.frate').each(function(){
        var rate = $(this),
			rdata = rate.find('.rate-data'),
			rrate = parseInt(rdata.find('.ratingtypeplusminus').text(), 10),
			rvote = parseInt(rdata.find('span[id*=vote]').text(), 10);
			rate.append('<div class="rbar"><div class="rfill"></div></div>');
		if ( rvote >= rrate && rvote > 0 ) {
			var m = (rvote - rrate)/2, 
				p = rvote - m,
				perc = Math.round(p/rvote*100);
			rate.find('.rate-plus span').html(p);
			rate.find('.rate-minus span').html(m);
			rate.find('.rfill').css({'width':''+perc+'%'});
		};
    });
	
});

	function doRateLD( rate, id ) {
		ShowLoading('');
		$.get(dle_root + "engine/ajax/rating.php", { go_rate: rate, news_id: id, skin: dle_skin, user_hash: dle_login_hash }, function(data){
			HideLoading('');
			if ( data.success ) {
				var rating = data.rating;
				rating = rating.replace(/&lt;/g, "<");
				rating = rating.replace(/&gt;/g, ">");
				rating = rating.replace(/&amp;/g, "&");
				$("#ratig-layer-" + id).html(rating);
				$("#vote-num-id-" + id).html(data.votenum);
				var rt = parseInt($(rating).text()),
					m = (data.votenum - rt)/2,
					p = data.votenum - m,
					perc = Math.round(p/data.votenum*100),
					fRate = $("#frate-" + id);
				fRate.find('.rate-plus span').html(p);
				fRate.find('.rate-minus span').html(m);
				fRate.find('.rfill').css({'width':''+perc+'%'});
			} else if (data.error) {DLEalert ( data.errorinfo, dle_info );}
		}, "json");
	};


4. закачиваем картинки лайков в папку images шаблона

Есть нюанс: работает, если был всегда нравится-не нравится или с нуля. Если ранее были звезды или просто один лайк и там наставили оценок, то работать не будет (цифры будут нули), надо обнулять все.

В архиве вы найдете все написанное выше, раскиданное по папкам и файлам.

youtube-rating.rar [3,67 Kb] (cкачиваний: 579)


Еще интересный красочный вариант.


Здесь добавлен вывод процента, который окрашивается в зеленый-красный в зависимости от высокий-низкий.



1. в fullstory.tpl в нужное место ставим

			[rating-type-3]
			<div class="frate ignore-select" id="frate-{news-id}">
				<div class="rate-plus" id="pluss-{news-id}" onclick="doRateLD('plus', '{news-id}');"><span class="fa fa-thumbs-up"></span><span class="rcount">{views}</span></div>
				<div class="rate-minus" id="minuss-{news-id}" onclick="doRateLD('minus', '{news-id}');"><span class="fa fa-thumbs-down"></span><span class="rcount">{comments-num}</span></div>
				<div class="rate-data">{rating}{vote-num}</div>
			</div>
			[/rating-type-3]

2. в ваш css файл в конец

.frate {height:40px; line-height:24px; width:200px; position:relative; opacity:0; 
display:-ms-flexbox;display:-webkit-flex;display:flex;-ms-flex-wrap:wrap;-webkit-flex-wrap:wrap;flex-wrap:wrap;
-ms-flex-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;}
.frate.done {opacity:1;}
.rate-data {display:none;}
.rate-plus, .rate-minus {cursor:pointer;}
.frate .fa {color:#3c0; display:inline-block; vertical-align:top; font-size: 24px; margin-right:10px;}
.rate-minus .fa {color:#f20404; position: relative;}
.frate div:hover .fa {animation: bounceRate  0.3s infinite linear; animation-direction: alternate;}
.rbar {height:6px; overflow:hidden; background-color:#f20404; border-radius:3px; position:absolute; left:0; bottom:0; width:100%;}
.rfill {width:50%; height:100%; position:absolute; left:0; top:0; background-color:#3c0; transition:width 1s linear;}
.rate-perc {font-size: 18px; font-weight: 700;}
.rate-perc.high {color:#3c0;}
.rate-perc.low {color:#f20404;}

@keyframes bounceRate {
  from {transform: translate(0,0%);}
  to {transform: translate(0,-50%);}
}

3. в ваш js файл в конец
$(document).ready(function(){
	
	$('.frate').each(function(){
        var rate = $(this),
			rdata = rate.find('.rate-data'),
			rrate = parseInt(rdata.find('.ratingtypeplusminus').text(), 10),
			rvote = parseInt(rdata.find('span[id*=vote]').text(), 10);
			rate.append('<div class="rbar"><div class="rfill"></div></div>');
			rate.find('.rate-plus').after('<div class="rate-perc">0%</div>');
		if ( rvote >= rrate && rvote > 0 ) {
			var m = (rvote - rrate)/2, 
				p = rvote - m,
				perc = Math.round(p/rvote*100);
			rate.find('.rate-plus span.rcount').html(p);
			rate.find('.rate-minus span.rcount').html(m);
			rate.find('.rfill').css({'width':''+perc+'%'});
			rate.find('.rate-perc').html(''+perc+'%');
			perc < 49 ? rate.find('.rate-perc').addClass('low') : rate.find('.rate-perc').addClass('high'); 
		} else {
			rate.find('.rate-plus span.rcount').html('0');
			rate.find('.rate-minus span.rcount').html('0');
			
		};
		rate.addClass('done'); 
    });
	
});

function doRateLD( rate, id ) {
		ShowLoading('');
		$.get(dle_root + "engine/ajax/rating.php", { go_rate: rate, news_id: id, skin: dle_skin, user_hash: dle_login_hash }, function(data){
			HideLoading('');
			if ( data.success ) {
				var rating = data.rating;
				rating = rating.replace(/&lt;/g, "<");
				rating = rating.replace(/&gt;/g, ">");
				rating = rating.replace(/&amp;/g, "&");
				$("#ratig-layer-" + id).html(rating);
				$("#vote-num-id-" + id).html(data.votenum);
				var rt = parseInt($(rating).text()),
					m = (data.votenum - rt)/2,
					p = data.votenum - m,
					perc = Math.round(p/data.votenum*100),
					fRate = $("#frate-" + id);
				fRate.find('.rate-plus span.rcount').html(p);
				fRate.find('.rate-minus span.rcount').html(m);
				fRate.find('.rfill').css({'width':''+perc+'%'});
				fRate.find('.rate-perc').html(''+perc+'%');
			} else if (data.error) {DLEalert ( data.errorinfo, dle_info );}
		}, "json");
	};
	

4. подключаем иконки http://fontawesome.io/icons/ любым способом. Например, с cdn.
в main.tpl в секцию head добавляем

<script src="https://use.fontawesome.com/fe271d92aa.js"></script>

Внимание! Если у вас версия 13 и выше http://webrambo.ru/115-fiks-problemy-s-nestandartnym-reytingom-v-versii-13.html
Написать отзыв
  • bowtiesmilelaughingblushsmileyrelaxedsmirk
    heart_eyeskissing_heartkissing_closed_eyesflushedrelievedsatisfiedgrin
    winkstuck_out_tongue_winking_eyestuck_out_tongue_closed_eyesgrinningkissingstuck_out_tonguesleeping
    worriedfrowninganguishedopen_mouthgrimacingconfusedhushed
    expressionlessunamusedsweat_smilesweatdisappointed_relievedwearypensive
    disappointedconfoundedfearfulcold_sweatperseverecrysob
    joyastonishedscreamtired_faceangryragetriumph
    sleepyyummasksunglassesdizzy_faceimpsmiling_imp
    neutral_faceno_mouthinnocent
У меня было пять яблок, два яблока я съел. Сколько у меня осталось яблок? Напиши буквой например десять
Отзывов (23)
Дмитрий
Дмитрий Гости 8 января 2018 05:17
Большое спасибо, а если бы вы подсказали как выводить число/процент в краткой новости или отдельно для разметки. Вам бы ценны не было!!!
webrambo
webrambo Администраторы 27 января 2018 14:19
Дмитрий, лучше поздно, чем никогда http://webrambo.ru/103-reyting-v-procentah-dlya-kratkoy-novosti-v-dle.html
Максим
Максим Гости 30 января 2018 14:04
Добрый день!
У Вас ссылка немного битая в комментарии:
http://webrambo.ru/103-reyting-v-procentah-dlya-kratkoy-novosti-v-dle.htmlhttp://[i][/i]
webrambo
webrambo Администраторы 30 января 2018 14:08
Максим, исправил, спасибо.
Александр
Александр Гости 6 марта 2018 16:53
Добрый день!

А можно ли на основе Вашего рейтинга сделать такое: https://image.ibb.co/dueO07/Screenshot_8.png

Готов отблагодарить за помощь.
webrambo
webrambo Администраторы 7 марта 2018 12:34
Александр, здравствуйте. Мой рейтинг - это всего лишь визуальная интерпретация стандартного рейтинга. Он не меняет сути, лишь внешний вид. Теоретически можно, да - плюс, нет - минус, только надо понимать,что эти плюсы и минусы будут влиять на рейтинг статьи на сайте, например, если она выводится у вас в топе - популярных. Пишите на почту, 500 р.
never3d22
never3d22 Гости 22 августа 2018 18:10
webrambo,
А как сделать, чтоб и в комментах пахало?
webrambo
webrambo Администраторы 22 августа 2018 18:52
never3d22, надо дополнять скрипт, так как нельзя сразу получить нужный id через длешный тег, а приходиться вытаскивать его из html, да к тому же для ajax подгрузки надо длешный js править. Точнее уже не помню, т.к. давно сделав раз, отказался от этого.
Алексей
Алексей Гости 27 ноября 2018 14:30
Какой код должен быть в functions.php [rating-type-3] при установке [rating-type-3] рейтинг не отображается при смене на [rating-type-1] отображается но некорректно. Дле 13.1
webrambo
webrambo Администраторы 27 ноября 2018 16:36
Алексей, functions.php тут ни при чем. Если вы переходите с рейтинга 1 на рейтинг 3, то нужно обнулять рейтинг новостей в админке в редактировании новостей, выделяете по 500 штук и в массовом действии очищаете. Потому что рейтинг 1 не совместим обратно с всеми другими. А рейтинги 2, 3 и 4 обратно совместимы между собой.
puprusi
puprusi Гости 25 апреля 2019 17:05
webrambo, не могли бы вы помочь с выводом данных для микроразметки, для данного рейтинга? Готов заплатить.
webrambo
webrambo Администраторы 25 апреля 2019 17:58
puprusi, микроразметка не касается моей работы, я ее не делаю.
sergi
sergi Гости 2 июня 2019 10:33
Привет всем форумчанам и админу, установил рейтинг, все получилось, только у меня значения по нулям, при нажатии появляются цифры, при обновлении страницы опять все по нулям. У меня всегда стоял рейтинг 3 типа, в чем может быть проблема?
Руслан
Руслан Гости 9 апреля 2020 20:42
Для DLE 14.0 не подходит? Кто-нибудь может сделать красочные лайки для DLE 14.0?

sergi,
у меня тоже самое. У Вас DLE 14.0?

И что означает вот эта строчка: "4. подключаем иконки http://fontawesome.io/icons/ любым способом. Например, с cdn."?
webrambo
webrambo Администраторы 10 апреля 2020 09:48
Руслан, на 14 все работает, нужно только http://webrambo.ru/115-fiks-problemy-s-nestandartnym-reytingom-v-versii-13.html. Если не работает, то причина не в коде лайков, а в чем-то другом. Это может быть старый кеш в браузере, хостинге, cloudflare - нужно очищать кеш. Это может быть некорректные данные для расчета (которые тут <div class="rate-data">{rating}{vote-num}</div>) - нужно открывать исходный код страницы в браузере и смотреть что там за данные.

К коду из статьи проблемы не относятся, код рабочий 100%. Индивидуально с вашими проблемами я разбираться не буду. Я код выкладывал не для того, чтобы потом каждому оказывать сопровождение. Разбирайтесь сами или напишите на https://dle-faq.ru/, оставляйте там ссылку на свой сайт и кто-нибудь посмотрит, там помощь добровольная.
Юзер
Юзер Гости 6 июля 2021 17:06
Эх, закончилась эпоха. На 14.3 больше не работает полоска показывающая сколько за, а сколько против.
webrambo
webrambo Администраторы 6 июля 2021 18:34
Юзер,в ДЛЕ не было изменений по этому поводу с 13 до 14.3, так что должно работать. Инспектор и консоль браузера вам в помощь.
Сергей
Сергей Гости 7 марта 2023 02:16
webrambo,
Здравствуйте, на 16.0 dle перестал работать, суть такая когда нажимаешь видно сколько нравится и не нравится, ка только обновляет страницу, опять 0% и все по 0
webrambo
webrambo Администраторы 7 марта 2023 08:17
Сергей
Сергей Гости 7 марта 2023 10:15
webrambo,
Спасибо большое вам:)
FuRReX
FuRReX Посетители 3 марта 2024 19:41
Полностью рабочий код на DLE 17.1. Второй вариант рейтинга.

Это для тех, кому лень самостоятельно делать изменения.

Хотел бы довести до ума этот рейтинг и связать его с AggregateRating (schema).

Буду признателен, если поможете с этим.

Всё отлично получилось вывести, кроме самих процентов. Возможно ли как-то модифицировать код, чтобы можно было привязать в мету проценты числом.

К примеру имеем:
<meta itemprop='bestRating' content='100' />
<meta itemprop="worstRating" content="1"/>


И внедрить кодом число процентов
<meta itemprop="ratingValue" content="тут число процентное">
webrambo
webrambo Администраторы 4 марта 2024 07:36
FuRReX, это не получится сделать. Чтобы добавить рейтинг в разметку, нужно чтобы рейтинг изначально был в исходном коде, то есть считался на уровне сервера. Js же работает в браузере "виртуально", не изменяя исходный код.
FuRReX
FuRReX Посетители 5 марта 2024 00:14
webrambo,
Благодарю за ответ.

Сделал вывод числа % через PHP скрипт.