Star rating implementation

[Johanna]

Hi, everybody!
Star ratings are very commonly used components for rating products, collecting customer feedbacks etc. I tried to look through the community but didn’t find an example on how to do it.

Can someone advise what is the right way to build it based on bootstrap project?

The user path is:
User is presented with 5 stars, presses the star (for example 4), presses the button “submit”, Server Connect creates a record in database with this rating.
User can change rating and press “Submit again”, so rating will change.

I see there are no such component as star rating in bootstrap.

[Teodor]

Hi @Johanna and welcome to our community!

No, there is no such a component integrated in Wappler, but it shouldn’t be hard to create one. I can setup a quick tutorial explaining how to do this in the next few days.

Just a question - should the rating be related to a registered user ID - or should it be public so anyone can vote?

[Johanna]

Hi, @Teodor!
Thank you for reply!

The rating is public, but once user pressed submit, he is presented with contact form, so he can leave a phone and name, if he wants to be contacted back by a manager.

[Teodor]

Ok, thanks.
I will try to create a tutorial pointing you to the right direction.

[Johanna]

Thanks, @Teodor! I would appreciate it!

[aschoijett]

Hi Teodor,
I am interested in this too. Looking forward to it!

Thanks in advance,

Alex

[Fred_K]

Bumping… Has there been any update on a basic star rating guide?
How can we transform “4” into something like with the fa icons?

[Teodor]

@Fred_K

How can we transform “4” into something like with the fa icons?

You need a repeat which repeats the stars icons 5 times and then you check this value of 4 and assign a dynamic class to your icons based on this value.

Example:

<div is="dmx-repeat" id="myrating" dmx-bind:repeat="5">
    <i class="fa" dmx-class:fa-star="$index+1 <= dynamic_value" dmx-class:fa-star-o="$index+1 > dynamic_value"></i>
</div>

The repeat always repeats 5 icons.
Then we check - if the icon in the repeat is less or equal to your dynamic_value we make it a full star.
If the icon is greater than that we make it an empty star.
If your dynamic_value is 3, then the result is:

[Fred_K]

I’ve got this correct query result
{"qryDataByKeywords":[{"AVG(rating.stars)":4.5,"COUNT(rating.authorUser_id)":2}]} but it won’t return correctly on the front end side. My fields in the DB are VAR types. Tried with INT, same pb. Tried to set value to number, no better.
Is that something to do with the field types?

[Teodor]

Not sure what exactly are you trying to achieve with that code and how/where are you using it exactly?

[Fred_K]

This is just the excerpt of a query I’ve opened in the browser, to test if the query works and returns expected results. It does but the front end won’t read those 4.5 average and 2 count values.

[Teodor]

How are you using these values on the page then?

[Fred_K]

Before even finishing building the star rating, I can’t even display the count number 2 (how many users rated that particular user

    <div class="row text-center justify-content-center" id="rating">

        <div class="text-warning lh-sm small align-self-center ms-0 me-0 ps-0 pe-0 col-auto text-center" id="star" dmx-repeat:maxstars="totalStars.value">

            <i class="fa fa-star-o" dmx-class:emptystar="($index+1 >= getAvgRating.data.roundedRating)"></i>

            <i class="fa fa-star" dmx-class:fullstar="($index+1 <= getAvgRating.data.roundedRating)"></i></div>

         <div class="align-self-center col-4 ps-0 pe-0">

            <p class="lh-sm align-self-center mb-0 small text-start">{{authorUser_id}}</p>

         </div>

  
    </div>

[Teodor]

Have you added an alias for count/average values in the query builder? If not, then add aliases for them and then the alias names will appear in the picker to add on the page.

[Fred_K]

Thanks, I did not know that! Have I missed a tutorial about it?

So now I’ve followed your explanation for the star rating display but I get this:

With this code. I’ve put both full/empty stars in the same repeated column.

[Teodor]

Check my example once again.
I am showing repeat children region with one icon inside and you are showing a repeat region with two icons.
Just copy my example as it is and replace with your expressions.

[Fred_K]

Works great!! Thanks again Teo for your patience.
But, FYI, I don’t just copy a PHP code that looks total Chinese to me, because I don’t understand it and learn anything from it. So I try to always replicate with the fantastic Wappler interface and it worked and now I understand how the code was generated.
And now I’ll share my understanding/learning with all future readers (anybody feel free to correct me if I’m wrong somewhere since I know zero php coding):
In your column add one font awesome star and create a repeat from the column’s dynamic attributes. 5 is for repeating the star 5 times:

Then select your font awesome icon element and make it a fa class in the properties. And you’ll need to create two class toggles within the properties of that fa icon element since you want to display two types of stars: full and empty.

• one class for a full star named fa-star (so it fetches the full star of the font awesome library) with condition where we check the index of the repeated star. $index value starts at 0 so we add +1 to the index to affect the value of 1 to the first repeated star (and so the second repeated star will have an incremented value of 2). And we compare the index with the value of your rating (which you fetch from your DB query). The line of code says: display full star as long as its index value in the repeated instance is <= to the fetched rating value. So when the star index is 3 and your rating is 4, it will display the full star. When the star index is 4, it equals the rating so it still displays the full star. When incremented star index is 5, it won’t show the full star since it is > to the rating value of 4.
  
• one class toggle for an empty star fa-star-o with the opposite logic.
  (the font awesome library has the name syntax of each icon, that’s how you know that empty star name is fa-star-o. You can also create the fa icon in a paragraph from the wappler’s fa library then check the icon’s properties for its exact name syntax):
  

Looks like a long explanation but it is so easy with Wappler’s interface, it’s actually outrageously disgusting.

[srcreative]

Thanks for the detailed step-through of your process here Fred.