Basic Product Rating System - ArtaraxRatingStar

ArtaraxRatingStar is a small jQuery plugin used to rate desired products using a 1-5 star rating system.

Your users are able to rate your product with mouse hover and click. The star rating system provides a callback function that can get selected star value and product ID (data-id attribute) as a parameter.

The rating symbol is based on the CSS Sprite (star-rate.png).

How to use it:

1. Create the HTML for the star rating system with the following data attributes:

• data-id: product ID
• data-value: rating value

<div class="rating-star">
  <span data-id="001" data-val="1"></span>
  <span data-id="002" data-val="2"></span>
  <span data-id="003" data-val="3"></span>
  <span data-id="004" data-val="4"></span>
  <span data-id="005" data-val="5"></span>
</div>

2. Load jQuery JavaScript library and the jQuery ArtaraxRatingStar plugin at the end of the document.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous">
</script>
<script src="jquery.artarax.rating.star.js"></script>

3. Initialize the product rating system and done.

$(function () {

  var artaraxRatingStar = $.artaraxRatingStar();

});

4. The core stylesheet for the product rating system. Copy and paste the following CSS snippets into the page or directly load the jquery.artarax.rating.star.css in the document.

.rating-star span{
  width:30px;
  height:30px;
  display:block;
  float:left;
  background-image:url("images/star-rate.png");
  background-repeat:no-repeat;
  background-size:100%;
  margin:0px 2px;
  cursor:pointer;
  background-position:top;
}

.rating-star span.clicked,.rating-star span.hover{
  background-position:bottom;
}

5. Get the selected value & product ID using the onClickCallBack callback.

$(function () {

  var artaraxRatingStar = $.artaraxRatingStar({
      onClickCallBack: onRatingStar
  });

  function onRatingStar(rate, id) {
      alert("data-val(rate)=" + rate + " data-id(ProductId)=" + id);
  }

});

---

This awesome jQuery plugin is developed by H-Moradof. For more Advanced Usages, please check the demo page or visit the official website.