Статьи / Рейтинг в виде звёздочек

Итак, долго созревала эта статья и вот, наконец, возникло желание её написать. Если Вы работали с Umi.cms Вы, наверное, знаете, что в системе реализована возможность голосования за любой элемент структуры сайта. Т.е. Вы можете предоставить пользователю возможность голосовать за новости, фотографии в фотоальбоме, объект каталога и т.д. В системе голосования, которая реализована в Umi.cms есть единственный минус – пользователь может либо добавлять 1 балл или же вычитать 1 балл, т.е. если Вы захотите реализовать голосование в виде пяти звёзд, то данная функция с этой задачей не справится. В этом случае и поможет рецепт, который мы опишем ниже. Реализация голосования в виде пяти звёзд будет реализована на основе имеющейся функции в Umi.cms. Пример такого голосования Вы можете увидеть на сайте http://oplastike.ru/

Что нам нужно для реализации данного функционала на сайте:

1. Вёрстка голосования в виде звёздочек. Вёрстку рейтинга можно взять здесь;
2. Скрипт обрабатывающий голосование;

Теперь можем приступать к интеграции голосование в систему. Необходимо, чтобы к странице был подключен файл ILib.js. Как правило, он расположен в папке js. Если Вы не смогли его там найти, то его можно скачать здесь.

Далее подключаем файл к нашей странице через шаблон, вписываем <script type="text/javascript" src="/js/lLib.js"></script>.

Далее заходим в шаблон страницы, на которой будут располагаться звёздочки для голосования. И вставляем скрипт следующего содержания:

<script type="text/javascript">
function rate(whishId, mode) {
var id = whishId;
var handler = function (response) {
var obj;
if(obj = document.getElementById("rate-sum-" + id)) {
obj.innerHTML = "(" + response.rate_sum + ")";
}
alert(response.state);
}
var url = "/vote/json_rate/" + whishId + "/" + mode + "/";
lLib.getInstance().makeRequest(url, handler);
return false;
}
function jsonSaveValue(whishId, selectObj) {
var __selectObj = selectObj;
var handler = function (response) {
__selectObj.disabled = false;
}
var propName = selectObj.name;
var propValue = selectObj.value;
var url = "/news/saveProperty/" + whishId + "/" + propName + "/" + propValue + "/";
lLib.getInstance().makeRequest(url, handler);
selectObj.disabled = true;
}
</script>

Затем, следующей строкой после подключения ILib.js, вставляем данный скрипт:

<script type="text/javascript">
function stars(s,v){
var s = parseInt(s);
var v = parseInt(v);
var x = s/v/5*100;
if(x>1)
{
document.write('<dl class="star-rating1"><dt class="current-rating" style="width:'+x+'%;">Всего '+x+' звезд.</dt><dt><a title="1 звезда из 5" class="one-star">1</a></dt><dt><a title="2 звезды из 5" class="two-stars">2</a></dt><dt><a title="3 звезды из 5" class="three-stars">3</a></dt><dt><a title="4 звезды из 5" class="four-stars">4</a></dt><dt><a title="5 звезд из 5" class="five-stars">5</a></dt></dl>'); }
else
{
document.write('<ul class="star-rating1"><li style="width:0%;"></li><li><a title="1 звезда из 5" class="one-star">1</a></li><li><a title="2 звезды из 5" class="two-stars">2</a></li><li><a title="3 звезды из 5" class="three-stars">3</a></li><li><a title="4 звезды из 5" class="four-stars">4</a></li><li><a title="5 звезд из 5" class="five-stars">5</a></li></ul>'); }
var x=s=v=0;
return;
}
</script>

Теперь можем перейти непосредственно к шаблону новости, для которых мы и делаем голосование. Возьмём для примера default шаблон новостей.

В блоке lastlist_item вставляем следующие строки:

<div id="starstop183"><p class="smallgap" id="stars"><ul class="star-rating"><li style="width:0%;"></li><li><a title="1 звезда из 5" class="one-star">1</a></li><li><a title="2 звезды из 5" class="two-stars">2</a></li><li><a title="3 звезды из 5" class="three-stars">3</a></li><li><a title="4 звезды из 5" class="four-stars">4</a></li><li><a title="5 звезд из 5" class="five-stars">5</a></li></ul></p></div>
<script type="text/javascript">
theElement = document.getElementById("starstop%id %");
theElement.style.display='none';
stars ('%rate_sum %', '%rate_voters %');
</script>

В блоке view вставляем следующие строки:

<ul class="star-rating" style="position:absolute;right:0px;top:-28px;">
<li class="current-rating" style="width:0%;"> </li>
<li><a href="#" title="1 звезда из 5" onclick="javascript: return rate('%id %', 1);" class="one-star">1</a></li>
<li><a href="#" title="2 звезды из 5" onclick="javascript: return rate('%id %', 2);" class="two-stars">2</a></li>
<li><a href="#" title="3 звезды из 5" onclick="javascript: return rate('%id %', 3);" class="three-stars">3</a></li>
<li><a href="#" title="4 звезды из 5" onclick="javascript: return rate('%id %', 4);" class="four-stars">4</a></li>
<li><a href="#" title="5 звезд из 5" onclick="javascript: return rate('%id %', 5);" class="five-stars">5</a></li>
</ul>

Далее идём в папку /classes/modules/vote. Находим там файл __rate.php. Открываем его, и находим там следующие строки:
if(regedit::getInstance()->getVal("//modules/vote/is_graded")) {
$bid = (int) getRequest('param1');
if($bid > 5) $bid = 5;
if($bid < 0) $bid = 0;
} else {
$bid = ((bool) getRequest('param1')) ? 1 : -1;
}
и заменяем их на:
$bid = (int) getRequest('param1');

Интересный пример реализации на сайте: купить lego недорого.

Похожие новости:

• Переход на новый способ хранения и управления шаблонами (2012-02-07)
• Правильное название статуса заказа в письмах пользователю (2012-02-07)
• Смена логина и пароля супервайзера (2012-02-04)
• Работа с корзиной без перезагрузки (2011-12-24)
• Изменение расположения доменов зарегистрированных в системе (2011-12-15)

Если у Вас возникают какие-либо вопросы или проблемы, то Вы можете написать в комментариях или воспользоваться формой обратной связи.

При копировании материлов ссылка на источник обязательна!