Displaying Half Star Rating

Ask the community
,
1

Hi everyone,

I have managed to display star rating for individual review and get the average rating for each item, with the help of this example https://www.wix.com/code/home/example/Reviews .

I wanted to display the average rating in the form of stars. However the stars only appear if the average rating is a whole number. Can anyone teach me how to display half stars, e.g. 4.5 Stars.

Thank you very much!

2

Hey
In Wix Code you will have to split the star image I guess in 50% halves and for every 0.5 value add and show that half. So if the value is 4 you will show 8 halves on the screen. If the value is 4.5 you will show 9 halves which will be shown as 4.5 filled stars.

3

Hi Alvin,

Another option would be to have star images that are full-filled, and half-filled in. If the rating has a half star, then use the half-filled image instead of the full-filled image.

Good luck,

Yisrael

4

Hey Andreas & Yisrael,

Thanks for the advises! I have been searching for the half star symbol to place in the code, but couldn’t find it. For the “star image” that you mentioned, are you referring to an image file that is placed in the page design and not a font that can be placed in the code below?

const stars = ['1Star', '2Stars', '3Stars', '4Stars', '5Stars']; 
function renderStars(num) {
 if (num >= 1 && num <=5)
 return stars[num-1];
 return stars[0];
}

I have replaced the star symbols with 1Star, 2Stars etc, as I am unable to publish the comment when the star symbols are there.

5

hey
you cant have two returns

6

Aww - Andreas, you’re no fun. :upside_down_face:

7

oh. actually i copied the codes from the examples given in https://www.wix.com/code/home/example/Reviews :slight_smile:

hm… so i guess there is no way where i can include half stars symbols in the code and have to use images instead right?