TransWikia.com

¿Cómo logro que mi valoración con estrellas se acumulen y promedien para generar una valoración global del producto?

Stack Overflow en español Asked by Alberto Lr on December 4, 2020

estoy creando un e-commerce para mi página de venta de salsas en línea.

Ya cuento con el código para que puedan calificar de manera gráfica cada producto, el problema es que no logro que estas calificaciones se almacenen y promedien para mostrar la calificación global del producto.

Mi código HTML con los dos scripts que ocupa java queda de la siguiente manera:

<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8">
    <title>rating test</title>
    <link rel="stylesheet" href="../src/rating.css" type="text/css" media="screen" title="Rating CSS">
</head>

<body>

    <div class="container" style="margin-top:35px">
      <div class="ratings">
        <input type="radio" name="star" id="rating" value="1" />
        <input type="radio" name="star" id="rating" value="2" />
        <input type="radio" name="star" id="rating" value="3" />
        <input type="radio" name="star" id="rating" value="4" />
        <input type="radio" name="star" id="rating" value="5" />
      </div>
      <span class="info"></span>
    </div>

  <script type="text/javascript" src="../js/jquery.min.js"></script>

  <script>
  ;(function($){
      $.fn.rating = function(callback){

          callback = callback || function(){};

          // each for all item
          this.each(function(i, v){

              $(v).data('rating', {callback:callback})
                  .bind('init.rating', $.fn.rating.init)
                  .bind('set.rating', $.fn.rating.set)
                  .bind('hover.rating', $.fn.rating.hover)
                  .trigger('init.rating');
          });
      };

      $.extend($.fn.rating, {
          init: function(e){
              var el = $(this),
                  list = '',
                  isChecked = null,
                  childs = el.children(),
                  i = 0,
                  l = childs.length;

              for (; i < l; i++) {
                  list = list + '<a class="star" title="' + $(childs[i]).val() + '" />';
                  if ($(childs[i]).is(':checked')) {
                      isChecked = $(childs[i]).val();
                  };
              };

              childs.hide();

              el
                  .append('<div class="stars">' + list + '</div>')
                  .trigger('set.rating', isChecked);

              $('a', el).bind('click', $.fn.rating.click);
              el.trigger('hover.rating');
          },
          set: function(e, val) {
              var el = $(this),
                  item = $('a', el),
                  input = undefined;

              if (val) {
                  item.removeClass('fullStar');

                  input = item.filter(function(i){
                      if ($(this).attr('title') == val)
                          return $(this);
                      else
                          return false;
                  });

                  input
                      .addClass('fullStar')
                      .prevAll()
                      .addClass('fullStar');
              }

              return;
          },
          hover: function(e){
              var el = $(this),
                  stars = $('a', el);

              stars.bind('mouseenter', function(e){
                  // add tmp class when mouse enter
                  $(this)
                      .addClass('tmp_fs')
                      .prevAll()
                      .addClass('tmp_fs');

                  $(this).nextAll()
                      .addClass('tmp_es');
              });

              stars.bind('mouseleave', function(e){
                  // remove all tmp class when mouse leave
                  $(this)
                      .removeClass('tmp_fs')
                      .prevAll()
                      .removeClass('tmp_fs');

                  $(this).nextAll()
                      .removeClass('tmp_es');
              });
          },
          click: function(e){
              e.preventDefault();
              var el = $(e.target),
                  container = el.parent().parent(),
                  inputs = container.children('input'),
                  rate = el.attr('title');

              matchInput = inputs.filter(function(i){
                  if ($(this).val() == rate)
                      return true;
                  else
                      return false;
              });

              matchInput
                  .prop('checked', true)
                .siblings('input').prop('checked', false);

              container
                  .trigger('set.rating', matchInput.val())
                  .data('rating').callback(rate, e);
          }
      });

  })(jQuery);
  </script>
  <script>
  $('.ratings').rating(function(vote, event){
    $.ajax({
      url: '../src/insrating.php',
      type: 'GET',
      data: {rate:vote}
    }).done(function(info){
      $('.info').html("your vote: <b>"+vote+"</b>")
    })
  })
  </script>

</body>
</html>

El CSS queda de la siguiente manera:

.star{
    background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAABQCAYAAAAZQFV3AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABOFJREFUeNrsmEFoHFUYx9/MdHfTJRKzUhBaFiL1YghZCFQUIV6UQJuLWCgr8eKpIoiFSqsHQYrmYj14KHqxKAl6MbA5eCgKRVAMBhpCwIJQCETRQzTsNtnO7s74+17fbGc3M7OzZhUsHfjzdvd97/++973vff99Y/m+rwb5WL0Idz60h2nckTc8Nw2hncLmAnhtIB7i3VGan8VD8Dhebh+U8FOaX8Bh4EB48R8TQlai+QnkgMTxD/AYpFt9EULk0EyBD8Dn4BPT9TZ4CrwD6Wos4V+XrUdpXzQk4tUEkAFXwNUu+1fAWWO7anADLDLJTkCYpf0K3DQe3Ui5oUI6B8ShlyBstZfMMiXoX4MV8GZKQgnJcXA6nKPtGJoE/gZ8Cy6mIJPwnIJsL3ZTIB2h+U6WANZjyE6Aj8Cz3WT7TooJ7HUwneDdc+BaFFnc0SuCzQTCTWOT+iwfN6cjWJ6clo9NzOS5Bcb6IZTZj5pU+syEYNV8XzA2Y6lOCptyhGbDeDFPnJa6TlGZ5rxJ/nxkSRPCACR5EUyHf4sCNjOgENVn/ecVe+CEy8vLWgJmZ2fd1IRra2vxSbe5eYlmu1gsXo6zmZycTKcpkEn6vC61kM+FQYiUeDdvauP5Ay0ZjyIlgKVv9bVkiBwQVJRX2YwWkKLxrhxB+qYSPaxUKrESANHVrh2PlQAzqSbskAA6UkkA5B0SICvRSzb5ddrMWu4jh8umSLwckLVjSKClWJ6SwsrM76fwLpCAM4x1I9OGjhrN8+AkAyYSyGTDnhEHjCPxeYhBagmIIvtXJOBQkgSY5Z01/76umAy4lbpiG5IqzQuG6Alz9LLmf+IP5hh+AfmxnoSQdUgAg5a6JuuQgMiSFi7fJHkR9JQAbGbA/SoBi4uLWgLK5XIqCdBpkyQBZne3sTm4BGxsbLQlgM+DkYBsNjucyWQKaSXATvCuZFnWHIQqlxMVUOeMx/0RMsgBWgIgcyBVgqwwIwH0JUvAwsJChwQwuOQ4jrJtO/CsfQBc11We56lWqyXfOySALNgJdlmuWzNSB/P5vBKyyJnxMjxBs9mc2tvbEye+DN1l7uYhuaZvAXg1LaQyOOkRL3d3d8XLishHOEd1DMfHx7UEYLjCrCop2aXP2Mht4QxjoyWADi0BxGddZm80GjpWYSL5TfpkYnHAOBK/yxhoCZAl1et1PbharWrUajX9m/SJBESRJUlAr6fvW0CvZyyxOIQPN4kbnv1mlwQERGPhMbHli/Q5Yv5lSdDnSYelrlLWIQGRJS1cvjk1RdBTArCZAferBPT7IkjvcuP7t3pKADaxEpB5+r10FXv3x3kKqqUlgM+DkQB76OFhKzdycAnAo5KynTlraFTZQ4/gqH3ursd9EjLIAVoC7KGCAxFWNqSjWgLoS5aAfS+C7EzJcrLKOjSkrNwoFu0ToPz6n8pv3dFQXjPyRdA9CbDsk/ZDx5SQxWiAsg4X7vE361NedQsn/P0SELwIgmzaHiZMtpMcKK+pWlUuVF6j0v0iSMcw/+QFLQF+y13xbv/GpF4CWUt5tV+FTEsAY6MlgA4tASxlnaUo362yLGLlh2Lo1iCjj4nFAeNI/H9sDHbYxesEfcK//XvSoq9Fkf0/JCDqDWfV3I+TJGCLne19CzAvgtoS8OBF0APC6OdvAQYAj2xzC/IfXBsAAAAASUVORK5CYII=');
    background-position:left -2px;
    display:block;
    width:20px;
    height:16px;
    line-height:16px;
    float:left;
    cursor: pointer;
    zoom:1;
}

.fullStar{
    background-position:left -59px;
}

.stars{
    overflow: hidden;
}

.tmp_es{
    background-position:left -21px;
}

.tmp_fs{
    background-position:left -40px;
}

Supongo la solución general es implementar algo similar a esto en el PHP con la intención de tener una variable acomuladora ($voteacomulado) y cambiar esta linea del HTML $(‘.info’).html("your vote: "+vote+"") por $(‘.info’).html("your vote: "+voteacomulado+"") para mandar a llamar la variable acomuladora lejos de la calificación dada por el usuario, pero mis conocimientos de PHP son casi nulos.

<?php
$vote = isNaN(vote) ? 0 : vote;
$voteacomulado += voteacomulado;

echo $_POST[‘vote’]

Les agradezco su tiempo y apreciaría mucho me pudieran apoyar a solucionar esto.

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP