How do I create the correct star icon rating?

[raelyn]

Currently I have a particular “rating” that I am getting from Xano that I want to show in Weweb in terms of stars. I have the full star icon, the empty star icon, and the half star icon. Now how do I get the star icons to talk to the rating? For example, if the rating is 4.5, I want to show 4 full stars and 1 half star. The ratings are out of 5, so only 5 stars should be displayed at any one time (whether its full, half or empty stars)

Is this possible with Weweb?

[Alexis]

Yes of course, everything is possible with WeWeb, the question is how

I did it for you

1. Create a block of 5 stars by binding an array with 5 elements on a container

2. Bind a formula to your star icon :
   if(myRate - starIndex >= 1, "full-star-icon", if(myRate - starIndex >= 0.5,"half-star-icon","empty-star-icon"))

You’re done

[raelyn]

@Alexis

if(myRate - starIndex >= 1, “”, if(myRate - starIndex >= 0.5,“<half-star-icon”,“empty-star-icon”))

Thank you. That works!

[preze]

Also ran into this situation and it takes some time to replicate across pages
Please consider creating this “rating” block in the Inputs&Controls section as a drag&drop item
Other nocode platforms also have this one as an independent block (i.e Bubble)

[Alexis]

Once done, you can register this component in your design system and reuse it anywhere you want. They will not be linked though, so if you update this component in your design system it will not update every place where you used it.

This will be solved by the upcoming reusable component system, stay tuned!

[preze]

Thanks
Because in my case it is a little more complicated.
I have a database table called “user reviews”

These user reviews are linked to a given product

On the product page I need to show the average of the user reviews in the stars (just like an amazon review system) as well as the total count in front of the stars

And then every time a user makes a review, this table is updated

and in another section of the product page the user can submit the review that is pushed to this table

If you have any suggestion, it is much appreciated as I’ve been struggling with your example to show the average of the reviews I have

[Alexis]

Do you already have the average rate or do you have to calculate it yourself ? The best would be to calculate it backend side, you can probably have a computed column on your reviews returning the average score. Once you have this information you can reuse the formula I already shared, you will have to replace “myRate” with the average rate you have.

[chaefner]

This is great, thank you!

How can use this to collect a rating?

1. I would like to display 5 “empty” stars.
2. On hover, all stars before the hover-element will turn “dark”
3. On click, a workflow should grab the number of activated stars and write into a variable.
4. This should be repeatable (user can change star-review until it is saved in a database)

[Broberto]

I think this should be doable in no-code, by checking the cursor position relative to the individual stars. But it’s not the simplest thing to do.

[chaefner]

Agreed. That’s why I’m thinking of using the range input as an alternative solution. This would make things a lot easier.

[Broberto]

If that works for you then definitely could be a neat solution.

[thomlov]

This is quite simple to make in a no-code component. Here’s how I would do it:

1. Create a nocode component with a div. Intro to components
2. Create an icon with an empty star inside the div.
3. Create a component variable that will hold the star states, an array of 5 false values.
4. Create a new state on the star (filled) where you check the variable at the current index Docs on States
5. Create a mouseover workflow on the star. Iterate the star states and change all variable indexes that are smaller or the same as current hover index.
6. Create a mouse leave workflow on the star, where you reset the component variable.
7. Create an onclick workflow on the star, that emits an onchange event with the index of the clicked star.

Now you can also implement pre-filled stars from a value in your database as well, by using component inputs.

You can also implement half stars much the same way (then you would make 10 alternating half stars the same way, using states)

I know this is a quite rough outline of how to do it, but spending some time learning how you can create a component inside WeWeb will be rewarding, as you can create anything you want later.

[Broberto]

Yeah, this would indeed be a good approach, I was thinking with half stars in mind, so it seemed complex, but if the half stars aren’t a requirement, this should be a 10 min job.

[thomlov]

You have half stars both in FA Solid and FA regular icon sets.
De exactly as above, but use 10 half stars instead, array of 10 false values, use states to flip every second icon. Now a 11 minute job

[Broberto]

Maybe they’d overlap, so you’d have to use absolute positioning which is not the best, but yeah, not that hard.

[dorilama]

while this is grafically viable we should take into account accessibility.