Рейтинг звёздочками в товаре (Решено)
  • http://upload.com.ua/get/903046009/создание rating.rar

    Спасибо за внимание! Кто хочет отблагодарить, пишем ICQ 333-727-2-два-8 или skype: dzeka12
  • Кому-нибудь удалось скачать?)
  • вроде все ок

    http://upload.com.ua/get/903046009/%D1%81%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5%20rating.rar
  • Все тот же рейтинг по статье марта, только реализован на новую версию симплы.
  • Но можно еще же редактирование в админке сделать, сортировку и т.д. ;)
  • Я этот рейтинг немного модмарофетил и вышла конфетка=)
    Также добавил сортировку товаров по рейтингу.
  • ну так бы и выложил решение :)
  • product.tpl







    {$product->rating|string_format:"%.1f"} (голосов {$product->votes|string_format:"%.0f"})






    ajax-rater.js

    $.fn.rater = function (options) {
    var opts = $.extend({}, $.fn.rater.defaults, options);
    return this.each(function () {
    var $this = $(this);
    var $on = $this.find('.rater-starsOn');
    var $off = $this.find('.rater-starsOff');
    opts.size = $on.height();
    if (opts.rating == undefined) opts.rating = $on.width() / opts.size;
    if (opts.id == undefined) opts.id = $this.attr('id');

    $off.mousemove(function (e) {
    var left = e.clientX - $off.offset().left;
    var width = $off.width() - ($off.width() - left);
    width = Math.ceil(width / (opts.size / opts.step)) * opts.size / opts.step;
    $on.width(width);
    }).hover(function (e) { $on.addClass('rater-starsHover'); }, function (e) {
    $on.removeClass('rater-starsHover'); $on.width(opts.rating * opts.size);
    }).click(function (e) {
    var r = Math.round($on.width() / $off.width() * (opts.units * opts.step)) / opts.step;
    $off.unbind('click').unbind('mousemove').unbind('mouseenter').unbind('mouseleave');
    $off.css('cursor', 'default'); $on.css('cursor', 'default');
    $.fn.rater.rate($this, opts, r);
    }).css('cursor', 'pointer'); $on.css('cursor', 'pointer');
    });
    };

    $.fn.rater.defaults = {
    postHref: location.href,
    units: 5,
    step: 1
    };

    $.fn.rater.rate = function ($this, opts, rating) {
    var $on = $this.find('.rater-starsOn');
    var $off = $this.find('.rater-starsOff');
    $off.fadeTo(600, 0.4, function () {
    $.ajax({
    url: opts.postHref,
    type: "POST",
    data: 'id=' + opts.id + '&rating=' + rating,
    complete: function (req) {
    if (req.status == 200) { //success
    opts.rating = parseFloat(req.responseText);

    if (opts.rating > 0) {
    opts.rating = parseFloat(req.responseText);
    $off.fadeTo(200, 0.1, function () {
    $on.removeClass('rater-starsHover').width(opts.rating * opts.size);
    var $count = $this.find('.rater-rateCount');
    $count.text(parseInt($count.text()) + 1);
    $this.find('.rater-rating').text(opts.rating.toFixed(1));
    $off.fadeTo(200, 1);
    });
    //alert('Спасибо! Ваш голос учтен.');
    }
    else
    if (opts.rating == -1) {
    $off.fadeTo(200, 0.6, function () {
    $this.find('.test-text').text('Вы уже голосовали!');
    });
    //alert('Вы уже голосовали за данный товар!');
    }
    else {
    $off.fadeTo(200, 0.6, function () {
    $this.find('.test-text').text('Вы уже голосовали!');
    });
    //alert('Вы уже голосовали за данный товар!');
    }
    } else { //failure
    alert(req.responseText);
    $on.removeClass('rater-starsHover').width(opts.rating * opts.size);
    $this.rater(opts);
    $off.fadeTo(2200, 1);
    }
    }
    });
    });
    };

    стили

    .testRater{margin-bottom:20px;}
    .rater span {vertical-align:middle;font-size:16px;}
    .rater-rating {margin-top:5px;}
    .rater-starsOff, .rater-starsOn {display:inline-block; height:32px; background:url(../images/stars.gif) repeat-x 0 0px;}
    .rater-starsOn {display:block; max-width:160px; top:0; background-position: 0 -32px;}
    .rater-starsHover {background-position: 0 -64px!important;}

    Сама картинка
    http://i.piccy.info/i7/d85050344b9d7acbb96e7da1ed8a9cd8/1-5-3951/3814500/stars.gif

    Выглядит кошерно http://kiev-mod.ho.ua/products/samsung_s7070_diva/
  • действительно рейтинг красиво смотрится.
  • Тока на моем сайте показывается вместо 5 звезд 10, а так прикольно! Все работает =)
  • Замените 160px на 80px в стилях или просто замените картинку, можете взять мою
    http://i.piccy.info/i7/d85050344b9d7acbb96e7da1ed8a9cd8/1-5-3951/3814500/stars.gif
  • Добавил опрос на сайте: http://kiev-mod.ho.ua/brands/nikon
  • По вашей рекомендации все сделал, работает как часы =)

    Спасибо большое!
  • osben, Noxter мне вот интересно, хоть кто-нибудь вас отблагодарил??
    Сам то я давно это сделал (рейтинг), с голосованием из списка и сортировкой по рейтингу, просто интересно...
  • классно сделал .. красиво зашаблонил .. Noxter молодец
  • Очень-очень редко случаются благодарности...
  • Март ты придумал рейтинг, osben перенес на вторую симплу, а я красиво оформил и подправил яваскрипт чтобы не выскакивал дурноватый alert который пугает покупателей.
    Марту от меня большое спасибо!
  • http://upload.com.ua/get/903046009/создание rating.rar

    ссылка не работает,
    пожалуйста перезалейте архив
  • Перезалейте архив плз!
  • Залейте на другой обменник. upload уже не пашет.
  • Просьба перезалить на другой обменник!!
  • А лучше бы админу форума подумать над возможностью прикреплять файлы к постам! Это ж несерьезно - по обменникам бегать, которые то работают, то нет.
  • Кто нить откликнитесь пожалуйста....
    Перезалейте или бросьте на почту...(в профиле)
  • Noxter спасибо!!!
  • Всегда пожалуйста=)
  • Спасибо, очень полезная вещь.

  • только с ошибками и неточностями.
    я не программист, но очевидное для меня исправил.
    но без толку, так и не заработало. =(
  • Если у всех работает, а у вас нет, так может это от того, что не стоило исправлять?))
  • Была замечена ошибка в моей статье.
    Править нужно файл product.tpl а не products.tpl, прописал ошибку машинально.
  • Все сделано по инструкции, не работает... (((
  • theme}/js/project.js"> это в тегах ЛИТЕРАЛ? Посмотрите, как в код страницы выводится))
  • theme}/js/project.js">
    а что не так


  • Разобрался, спс Noxter, кину на веб мани монетку, наверно это будет лучше чем большое спасибо....
  • можете выложить ссылку на скрипт! скачать не получается. Выдаёт ошибку при скачивании.
  • всё сделал по инструкции, картинка звёздочек появилась, но не активна для рейтинга:

    image
  • решил проблему!

    в место {$settings->theme} написал название темы default

    image
  • подскажите пожалуйста, картинка звёздочек имеет разрешение 23х66, как изменить разрешение под картинку размером 25х75
  • Danya спасибо за замеченный баг!

    Можно еще сделать так:

    {literal}
    <script src=\"design/{/literal}{$settings->theme}{literal}/js/project.js\"></script>
    <script type=\"text/javascript\">
    $(function() {
    $('.testRater').rater({ postHref: 'ajax/rating.php' });
    });
    </script>
    {/literal}


    или так


    <script src=\"design/{$settings->theme}/js/project.js\"></script>
    {literal}
    <script type=\"text/javascript\">
    $(function() {
    $('.testRater').rater({ postHref: 'ajax/rating.php' });
    });
    </script>
    {/literal}
  • :))))))))) А не проще просто вынести подключение за тег {literal} ???
  • Что-то я ошибок наделал, поспешно статью писал и дописался...
  • Noxter

    Вроде всё хорошо работает!
    Подскажешь, как скрипт подогнать под картинку с размером 25х75 ?

  • вот картинка звёздочек:

    image
  • И в стилях вместо ширины/высоты 23 прописать 25.
  • mart

    Спасибо за подсказку, разобрался!

    Ещё вопрос, как сделать, чтобы в файле products.tpl выводился рейтинг, но был не активным для рейтинга, как это было для предыдущих версий Simpla ?
  • На мой взгляд рейтинг должен выводиться не только в карточке товара, но также и в категории и таким образом, чтобы оценка, поставленная в карточке товара находила свое отображение в категории, но как это реализовать - может кто подскажет?

    Также интересует как реализовать сортировку по рейтингу - подскажите?
  • сортировка по рейтингу тоже заинтересовало!
Новая дискуссия

Добро пожаловать

Похоже, что Вы здесь впервые. Если хотите поучаствовать, нажмите на одну из этих кнопок!

В этой дискуссии