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

Адаптивные качественные DLE шаблоны по приятным ценам, всего от 500 рублей.

Контакты:
e-mail: redissx@gmail.com telegram: @webrambo
Написать сообщение
Время работы: 10.00 - 20.00 (МСК)
Адаптивные 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качиваний: 242)


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


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



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
В какое время года идет снег?
Отзывов (13)
Дмитрий
Дмитрий Гости 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 типа, в чем может быть проблема?