Back to blue

Stars Rating

Non interactive stars

Implementation

Make sure to include the CSS into your page or project:

<link rel="stylesheet" type="text/css" media="all" href="{{ static('css/ca_sg_stars_rating.css') }}" />

Rating display

To include integer star rating, you can add the star rating icons as img, in the other cases you can use it as SVG.

Star rating icons are in the folder /media/img/stars/ of the mainsite.

Not rated <img src="{{ static('/media/img/icons/stars/stars-0.svg') }}" alt="Not rated" class="stars-rtg" />
Rated with 1 star <img src="{{ static('/media/img/icons/stars/stars-1.svg') }}" alt="Rated with 1 star" class="stars-rtg" />
Rated with 2 stars <img src="{{ static('/media/img/icons/stars/stars-2.svg') }}" alt="Rated with 2 stars" class="stars-rtg" />
Rated with 3 stars <img src="{{ static('/media/img/icons/stars/stars-3.svg') }}" alt="Rated with 3 stars" class="stars-rtg" />
Rated with 4 stars <img src="{{ static('/media/img/icons/stars/stars-4.svg') }}" alt="Rated with 4 stars" class="stars-rtg" />
Rated with 5 stars <img src="{{ static('/media/img/icons/stars/stars-5.svg') }}" alt="Rated with 5 stars" class="stars-rtg" />

Smaller stars

For a smaller version of the stars, you have to add a stars-rtg--sm modifier class to the stars-rtg element (img or svg).

Rated with 3 stars

Image example:

<img src="{{ static('/media/img/stars/stars-3.svg') }}" alt="Rated with 3 stars" class="stars-rtg stars-rtg--sm" />

SVG example:

<div class="stars-rtg stars-rtg--sm"> {% with class="stars-rtg__svg--full" %} {% include "base/common/icons/rebrand/star.html" %} {% endwith %} {% with class="stars-rtg__svg--full" %} {% include "base/common/icons/rebrand/star.html" %} {% endwith %} {% with class="stars-rtg__svg--full" %} {% include "base/common/icons/rebrand/star.html" %} {% endwith %} {% include "base/common/icons/rebrand/star.html" %} {% include "base/common/icons/rebrand/star.html" %} </div>

Medium size stars

For a slighty bigger version of the stars, you have to add a stars-rtg--md modifier class to the stars-rtg element (currently only svg is supported).

SVG example:

<div class="stars-rtg stars-rtg--md"> {% with class="stars-rtg__svg--full" %} {% include "base/common/icons/rebrand/star.html" %} {% endwith %} {% with class="stars-rtg__svg--full" %} {% include "base/common/icons/rebrand/star.html" %} {% endwith %} {% with class="stars-rtg__svg--full" %} {% include "base/common/icons/rebrand/star.html" %} {% endwith %} {% include "base/common/icons/rebrand/star.html" %} {% include "base/common/icons/rebrand/star.html" %} </div>

Increased star

To increase a specific star you need to add star SVG with stars-rtg__svg--inc class to the context variable of the SVG include.

<div class="stars-rtg"> {% with class="stars-rtg__svg--full" %} {% include "base/common/icons/rebrand/star.html" %} {% endwith %} {% with class="stars-rtg__svg--full" %} {% include "base/common/icons/rebrand/star.html" %} {% endwith %} {% with class="stars-rtg__svg--full stars-rtg__svg--inc" %} {% include "base/common/icons/rebrand/star.html" %} {% endwith %} {% with class="stars-rtg__svg--full stars-rtg__svg--inc" %} {% include "base/common/icons/rebrand/star.html" %} {% endwith %} {% include "base/common/icons/rebrand/star.html" %} </div>

Partial fill

To fill the stars partially, you need to use the code snippet as shown below (wrapping the star you want to be partially filled), and include the SVG with the percentage as a context variable.


<div class="stars-rtg"> {% with class="stars-rtg__svg--full" %} {% include "base/common/icons/rebrand/star.html" %} {% endwith %} {% with class="stars-rtg__svg--full" %} {% include "base/common/icons/rebrand/star.html" %} {% endwith %} {% with class="stars-rtg__svg--full" %} {% include "base/common/icons/rebrand/star.html" %} {% endwith %} <div class="stars-rtg__star"> <div class="stars-rtg__prtl"> {% with percentage=25 class="stars-rtg__svg--full" %} {% include "base/common/icons/rebrand/star.html" %} {% endwith %} </div> {% include "base/common/icons/rebrand/star.html" %} </div> {% include "base/common/icons/rebrand/star.html" %} </div>

Secondary color stars

For a secondary color version of the stars, you have to add a stars-rtg--snd modifier class to the stars-rtg element (currently only svg is supported).

SVG example:

<div class="stars-rtg stars-rtg--md stars-rtg--snd"> {% with class="stars-rtg__svg--full" %} {% include "base/common/icons/rebrand/star.html" %} {% endwith %} {% with class="stars-rtg__svg--full" %} {% include "base/common/icons/rebrand/star.html" %} {% endwith %} {% with class="stars-rtg__svg--full" %} {% include "base/common/icons/rebrand/star.html" %} {% endwith %} {% include "base/common/icons/rebrand/star.html" %} {% include "base/common/icons/rebrand/star.html" %} </div>

Interactive stars

To implement the interactive stars please add the stars-rtg--intv class modifier to the stars-rtg element. This will add the styles required for the interactive stars. If you want to have the messages displayed in the bottom part, then you need to add the stars-rtg--msg class to the parent element too.

With messages:
Very dissatisfied with the experience Dissatisfied with the experience Satisfied with the experience Happy with the experience Would recommend to a friend

Without messages:

With color variant
(stars-rtg--snd modifier):
Very dissatisfied with the experience Dissatisfied with the experience Satisfied with the experience Happy with the experience Would recommend to a friend

The result of selection is provided inside input element.

<div class="stars-rtg stars-rtg--msg stars-rtg--intv js-stars-rating"> {% with class="js-stars-rating__star" %} {% include "base/common/icons/rebrand/star.html" %} {% endwith %} <span class="stars-rtg__msg">Very dissatisfied with the experience</span> {% with class="js-stars-rating__star" %} {% include "base/common/icons/rebrand/star.html" %} {% endwith %} <span class="stars-rtg__msg">Dissatisfied with the experience</span> {% with class="js-stars-rating__star" %} {% include "base/common/icons/rebrand/star.html" %} {% endwith %} <span class="stars-rtg__msg">Satisfied with the experience</span> {% with class="js-stars-rating__star" %} {% include "base/common/icons/rebrand/star.html" %} {% endwith %} <span class="stars-rtg__msg">Happy with the experience</span> {% with class="js-stars-rating__star" %} {% include "base/common/icons/rebrand/star.html" %} {% endwith %} <span class="stars-rtg__msg">Would recommend to a friend</span> <input type="hidden" value="3" /> </div>

Minimal value

To set up minimal required number of stars, add data-min-stars="N" attribute to the div element.

With messages, min is 2:
Very dissatisfied with the experience Dissatisfied with the experience Satisfied with the experience Happy with the experience Would recommend to a friend

Without messages, min is 2:
<div class="stars-rtg stars-rtg--msg stars-rtg--intv js-stars-rating" data-min-stars="2"> … <div>

How to init

Make sure to include the CSS and JS into your page or project:

<link rel="stylesheet" type="text/css" media="all" href="{{ static('css/ca_sg_stars_rating.css') }}" /> <script src="{{ static("js/ca_styleguide_stars_rate_v2.js") }}"></script>

All elements with selector .js-stars-rating will be initialised.

Input manipulations

To simplify integration the plugin stores the value inside an input field. This input will change the value and fire the native change event on stars selection. It also will listen to the native change input event to update selected stars

Helpful methods

  • _setValue(value) - setting value from 0 to 5
  • selectedValue - internal value (should be exactly same as input value)