simplashop.com
info@simplashop.com
Корзина (0)
Поиск
"Звездный рейтинг" для Simpla 2.1+

"Звездный рейтинг" для Simpla 2.1+

Дата публикации:
Поделиться:

Для начала забираем архив с файлами. Распаковываем его в корень нашего сайта. В нем содержится 3 файла:

  1. картинка "звездочки" design/default/images/rating.jpg
  2. файла для отработки AJAX-запроса выставления рейтинга ajax/rating.php
  3. скрипт на JQuery для выставления рейтинга товарам design/default/js/jquery.rater.js

Теперь добавим поля в нашу таблицу товаров s_products для хранения данных по рейтингу - выполним SQL-запрос

ALTER TABLE `s_products` ADD `rating` FLOAT( 3, 2 ) NOT NULL DEFAULT '0' AFTER `featured` ,
ADD `votes` INT NOT NULL DEFAULT '0' AFTER `rating`

Добавляем эти 2 поля в выборку товаров. В файле api/Products.php в метод после 117 строки добавляем в методе get_products наши поля. Получится примерно следующее

p.featured,
p.rating,
p.votes,

Далее в этом же файле в методе get_product добавляем эти же поля (~236 строка) - результат

p.featured,
p.rating,
p.votes,

Следующим шагом добавляем данные по стилям для модуля рейтинга. Для этого в конец нашего файла стилей design/[ваш_шаблон]/css/style.css (возможно Ваш файл стилей будет иметь другой путь, но если Вы смогли уйти от стандартного шаблона, то Вы найдете куда поставить наш код :) )

.rating .rater-starsOff, .rating .rater-starsOn { width: 80px; display: inline-block; background:url(../images/rating.jpg) repeat-x 0 0px; height:16px; }
.rating .rater-starsOn { background-position: 0 -16px; }

Подключаем JS-скрипт рейтинга в файле design/[ваш_шаблон]/html/index.tpl в блок head после корзины - результат

<script src="design/{$settings->theme}/js/ajax_cart.js"></script>
<script src="design/{$settings->theme}/js/jquery.rater.js"></script>

Теперь формируем вывод рейтинга в списке товаров и карточке.

В файлах design/[ваш_шаблон]/html/main.tpl и design/[ваш_шаблон]/html/products.tpl сразу после вывода заголовка товара

<h3 class="{if $product->featured}featured{/if}"><a data-product="{$product->id}" href="products/{$product->url}">{$product->name|escape}</a></h3>

и файле design/[ваш_шаблон]/html/product.tpl после

<h1 data-product="{$product->id}">{$product->name|escape}</h1>

вставим код вывода рейтинга

    <div class="rating" rel="{$product->id}">
        <span class="rater-starsOff"><span style="width:{$product->rating*80/5|string_format:"%.0f"}px" class="rater-starsOn"></span></span> <span class="rater-rating">{$product->rating|string_format:"%.1f"}</span>&#160;(<span class="rater-rateCount">{$product->votes|string_format:"%.0f"}</span> {$product->votes|plural:'голос':'голосов':'голоса'})
    </div>

Вот в-принципе и все чудеса. Голосовать можно как в товаре, так и в списке, и даже в "просмотренных", если правильно вставить код :) Вы можете экспериментировать с рейтингом - поменяв 5 звед на 8 или 10. Или же измение размер звезд или форму :) . Вывод тоже можете менять как Вам угодно, главное чтобы сохранить конструкцию блока div.rating и в параметре rel передавать ID товара.

Мой результат

Рейтинг на главной в SimplaCMS Рейтинг в списке товаров в SimplaCMS Рейтинг в карточке товара в Simpla

Удачи в работе!

Отзывы

Оставьте отзыв
На него будут приходить уведомление при ответе. На сайте не публикуется

Модули из этой тематики