Star Ratings

We are using for our star rating component. RateYo! is a tiny and flexible jQuery star rating plugin, it uses SVG to render rating, so no images required.
Read the official RateYo Documentation for a full list of instructions and other options.

Usage#

In order to use RateYo on your page, It is required to include the following vendors css in the "Vendors CSS" area from the page's header:

<link rel="stylesheet" href="assets/vendor/libs/rateyo/rateyo.css" />

Include the following vendors script in the "Vendors JS" area from the page's footer:

<script src="assets/vendor/libs/rateyo/rateyo.js"><script>

Examples#

Basic#

To create ratings just create a <div>, initialize and thats it!

<div class="basic-ratings"></div>

$('.basic-ratings').rateYo({
  rating: 3.6
});

Read Only#

Use data-rateyo-read-only="true" attribute with HTML element or use readOnly property in JS to create a read only ratings

<div class="read-only-ratings" data-rateyo-read-only="true"></div>

$('.read-only-ratings').rateYo({
  rating: 2
});

Custom SVG#

Use starSvg property to use custom svg icon.

<div class="custom-svg-ratings"></div>

$('.custom-svg-ratings').rateYo({
  rating: 3.2,
  starSvg: YOUR_SVG
});

Half Star#

Use data-rateyo-half-star="true" attribute with HTML element or use halfStar property.

<div class="half-star-ratings" data-rateyo-half-star="true"></div>

$('.half-star-ratings').rateYo({
  rating: 2
});

Full Star#

Use data-rateyo-full-star="true" attribute with HTML element or use fullStar property.

<div class="full-star-ratings" data-rateyo-full-star="true"></div>

$('.full-star-ratings').rateYo({
  rating: 2
});

Multi Color#

Use multiColor property and pass startColor and endColor.

<div class="multi-color-ratings"></div>

$('.multi-color-ratings').rateYo({
  multiColor: {
    startColor: COLOR,
    endColor: ANOTHER_COLOR
  }
});

Events#

Refer below example to use ratings events.

onSet Event

onChange Event

Ratings:

<div class="row">
  <div class="col-md d-flex flex-column align-items-start mb-sm-0 mb-4">
    <small class="text-light fw-medium">onSet Event</small>
    <div class="onset-event-ratings"></div>
  </div>

  <div class="col-md d-flex flex-column align-items-start">
    <small class="text-light fw-medium">onChange Event</small>
    <div class="onChange-event-ratings"></div>
    <div class="counter-wrapper mt-4">
      <span class="fw-medium">Ratings:</span>
      <span class="counter"></span>
    </div>
  </div>
</div>

// onSet Event
$('.onset-event-ratings').rateYo().on('rateyo.set', function(e, data) {
  alert('The rating is set to ' + data.rating + '!');
});

// onChange Event
$('.onChange-event-ratings').rateYo().on('rateyo.change', function(e, data) {
  var rating = data.rating;
  $(this)
    .parent()
    .find('.counter')
    .text(rating);
});

Methods#

Refer below example to use ratings methods.

<div class="methods-ratings"></div>
<button class="btn btn-primary btn-initialize">Initialize</button>
<button class="btn btn-danger btn-destroy">Destroy</button>
<button class="btn btn-success btn-get-rating">Get Ratings</button>
<button class="btn btn-info btn-set-rating">Set Ratings to 1</button>

var $instance = $('.methods-ratings').rateYo()

// Init Ratings
$('.btn-initialize').on('click', function() {
  $instance.rateYo();
});

// Destroy Ratings
$('.btn-destroy').on('click', function() {
  $instance.rateYo('destroy');
});

// Get Ratings
$('.btn-get-rating').on('click', function() {
  var rating = $instance.rateYo('rating');
  window.alert('Current Ratings are ' + rating);
});

// Set Ratings
$('.btn-set-rating').on('click', function() {
  $instance.rateYo('rating', 1);
});

Variables#

Refer below mentioned for all the variables

Variable	Description
`$unratedStarColor`	Variable for unrated stars fill
`$ratedStarColor`	Variable for rated stars fill