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

[Electr0n]

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

 

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

 

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

 

 

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

 

 

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

 

мой сайт 

Змінено 27 жовтня 2015 користувачем Electr0n

[markimax]

Как здесь ?

http://oc2.opencartadmin.com/desktops/iphone.html#commentlink_12_3

 

SEO CMS TOP или PRO

[Electr0n]

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

 

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

Змінено 27 жовтня 2015 користувачем afwollis

[AlexDW]

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

или здесь

[aridius]

для 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>

[Electr0n]

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

или здесь

 

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

 

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

 

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

<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. Писал код за пару часов, так что за то, что это оптимальное решение не ручаюсь.

Прикрепленные изображения

• 

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

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

сайт

[Electr0n]

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

var position = rate * 18;

[Electr0n]

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

Змінено 29 жовтня 2015 користувачем Electr0n

[serggggg]

 

для 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>

Спасибо)