Перейти к содержанию
Electr0n

[Решено] Рейтинг при написании отзывов

Рекомендуемые сообщения

Увидел вот такую нужную штуку на сайте розетке

 

Суть заключается вот в чем:

 

Выбор рейтинга к товару звездами. 

 

JvbggusrQZk.jpg

 

У меня стандартно 

 

ID-PK8VTBGg.jpg

 

Как сделать такой рейтинг на розетке? т.е. звездачками. при наводе на них они становятся активными. 

 

мой сайт 

Изменено пользователем Electr0n

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

У Вас хороший модуль, но пока что не расспологаю бюджетом на его покупку. 

 

Хотелось бы отдельное решение.

Изменено пользователем afwollis

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

для 2x

скачайте bootstrap-rating.js и bootstrap-rating.css, подключите их в header.tpl

после в product.tpl

замените

              <?php echo $entry_bad; ?> 
                    <input type="radio" name="rating" value="1" />
                     
                    <input type="radio" name="rating" value="2" />
                     
                    <input type="radio" name="rating" value="3" />
                     
                    <input type="radio" name="rating" value="4" />
                     
                    <input type="radio" name="rating" value="5" />
                     <?php echo $entry_good; ?>

на

<input type="hidden" name="rating" value="4" class="rating-tooltip"/>

и добавьте скрипт

    <script>
      $(function () {
        $('.rating-tooltip').rating({
          extendSymbol: function (rate) {
            $(this).tooltip({
              container: 'body',
              placement: 'bottom',
              title: 'Rate ' + rate
            });
          }
        });
 
      });
    </script>
  • +1 1

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

здесь смотрите

или здесь

 

Спасибо за наводку на решение .Сделал вот так: 

 

Как вариант, можете попробовать следующий код.

 

В шаблоне заменяем код, указанные вначале поста, на следующий

<b><?php echo $entry_rating; ?></b><br />

<div class="rating">

<div class="rate">

<div class="rate-1"></div>

<div class="rate-2"></div>

<div class="rate-3"></div>

<div class="rate-4"></div>

<div class="rate-5"></div>

</div>

<span>

<span class="rate-1"><?php echo $entry_bad; ?></span>

<span class="rate-2"><?php echo $entry_not_bad; ?></span>

<span class="rate-3"><?php echo $entry_normal; ?></span>

<span class="rate-4"><?php echo $entry_good; ?></span>

<span class="rate-5"><?php echo $entry_very_good; ?></span>

</span>

<input type="hidden" name="rating" value="0" />

</div>

<script type="text/javascript"><!--

$(document).ready(function() {

$('.rate div').mouseenter( function() {

var rate = $(this).attr('class').slice(-1);

changeRate($(this).parent(), rate);

}).click( function() {

var rate = $(this).attr('class').slice(-1);

var curVal = $('input[name=rating]').val();

rate = (rate != curVal) ? rate : 0;

$('input[name=rating]').val(rate);

changeRate($(this).parent(), rate);

});

$('.rate').mouseleave( function() {

var rate = $('input[name=rating]').val();

changeRate($(this), rate);

});

changeRate = function(obj, rate) {

var position = rate * 18;

obj.css('background-position', '0px -' + position + 'px');

$('.rating > span > span').each( function() {

$( this ).css('display', 'none');

});

$('.rating > span > span.rate-' + rate).css('display', 'inline-block');

}

});//--></script>

Кроме того, нужно найти строку

data: 'name=' + encodeURIComponent($('input[name=\'name\']').val()) + '&text=' + encodeURIComponent($('textarea[name=\'text\']').val()) + '&rating=' + encodeURIComponent($('input[name=\'rating\']:checked').val() ? $('input[name=\'rating\']:checked').val() : '') + '&captcha=' + encodeURIComponent($('input[name=\'captcha\']').val()),

и заменить ее на

data: 'name=' + encodeURIComponent($('input[name=\'name\']').val()) + '&text=' + encodeURIComponent($('textarea[name=\'text\']').val()) + '&rating=' + encodeURIComponent($('input[name=\'rating\']').val() ? $('input[name=\'rating\']').val() : '') + '&captcha=' + encodeURIComponent($('input[name=\'captcha\']').val()),

В таблицу стилей добавляем:

#tab-review .rating {

display: inline-block;

}

#tab-review .rating > div {

display: inline-block;

float: left;

width: 85px;

height: 18px;

margin-right: 10px;

background: url('../image/stars.png') 0 0 no-repeat transparent;

}

#tab-review .rating > div > div {

float: left;

width: 15px;

height: 15px;

margin: 2px 2px 0 0;

cursor: pointer;

}

#tab-review .rating > span {

display: inline-block;

font: normal 12px/18px Arial, Helvetica, sans-serif;

}

#tab-review .rating > span > span {

display: none;

}

В контроллер добавляем:

$this->data['entry_bad'] = $this->language->get('entry_bad');

$this->data['entry_not_bad'] = $this->language->get('entry_not_bad');

$this->data['entry_normal'] = $this->language->get('entry_normal');

$this->data['entry_good'] = $this->language->get('entry_good');

$this->data['entry_very_good'] = $this->language->get('entry_very_good');

Там уже должны быть две строки для entry_bad и entry_good. Их можно просто заменить.

 

 

В файле локализации заменяем:

$_['entry_good'] = 'Хорошо';

$_['entry_bad'] = 'Плохо';

на

$_['entry_bad'] = 'ужасно';

$_['entry_not_bad'] = 'плохо';

$_['entry_normal'] = 'средне';

$_['entry_good'] = 'хорошо';

$_['entry_very_good'] = 'отлично';

Во вложении спрайт со звездочками.

 

P.S. Писал код за пару часов, так что за то, что это оптимальное решение не ручаюсь.

Прикрепленные изображения
  • stars.png

Функционал работает, но с верской не могу разобраться не как. 

Пытался изображения подогнать. Не получилось.

сайт

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Разобрался, нужно было пеменять значение. 

var position = rate * 18;

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Всем спасибо за помощь!  :-)

Изменено пользователем Electr0n

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

 

для 2x

скачайте bootstrap-rating.js и bootstrap-rating.css, подключите их в header.tpl

после в product.tpl

замените

              <?php echo $entry_bad; ?> 
                    <input type="radio" name="rating" value="1" />
                     
                    <input type="radio" name="rating" value="2" />
                     
                    <input type="radio" name="rating" value="3" />
                     
                    <input type="radio" name="rating" value="4" />
                     
                    <input type="radio" name="rating" value="5" />
                     <?php echo $entry_good; ?>

на

<input type="hidden" name="rating" value="4" class="rating-tooltip"/>

и добавьте скрипт

    <script>
      $(function () {
        $('.rating-tooltip').rating({
          extendSymbol: function (rate) {
            $(this).tooltip({
              container: 'body',
              placement: 'bottom',
              title: 'Rate ' + rate
            });
          }
        });
 
      });
    </script>

Спасибо)

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти

  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу

×

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.