Jump to content
Sign in to follow this  
Electr0n

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

Recommended Posts

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

 

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

 

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

 

JvbggusrQZk.jpg

 

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

 

ID-PK8VTBGg.jpg

 

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

 

мой сайт 

Edited by Electr0n

Share this post


Link to post
Share on other sites

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

 

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

Edited by afwollis

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

или здесь

 

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

 

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

 

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

<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

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

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

сайт

Share this post


Link to post
Share on other sites

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

var position = rate * 18;

Share this post


Link to post
Share on other sites

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

Edited by Electr0n

Share this post


Link to post
Share on other sites

 

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

Спасибо)

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
You are posting as a guest. If you have an account, please sign in.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.