Use CMS for displaying star ratings in collection posts

Hello Everyone,

I am new to this forum so hope I have posted in the correct place.

I am using the CMS system to design my golf packages and I would like to have an option to display the star rating of the accommodation included in the package. For example, when I add a new package there will be a dropdown option named star rating and have options to choose either 3, 4 or 5 star. Then on the frontend page I would like to display the choice with perhaps images of stars that reflect the backend choice.

Is this possible?

Thanks,
Kevin

1 Like

Currently Webflow doesn’t have such a component. Would you like to be the first to add a request to our wishlist? Webflow Wishlist

You could create the value selection in your CMS collection and upload different image for each value, then display the appropriate image for the selected value.

Image 1 - Single star
Image 2 - Two stars
Image 3 - Three stars

etc.

1 Like

That’s a good workaround! I’ve created a demo:

http://cms-rating.webflow.io

How it’s done: Webflow - cms-rating

Replace [RATING] with the CMS rating field, where you populate a dropdown field with values 1-5

<script>
var imgUrl = "https://s0.wp.com/wp-content/mu-plugins/wpcom-smileys/twemoji/2/svg/2b50.svg";
for(let i = 0; i < [RATING]; i++) {
  document.write('<img width="12px" src="'+ imgUrl +'" />');
}
</script>

6 Likes

That’s what we did here: Webflow vs. WordPress: Discover the WordPress alternative :slight_smile:

1 Like

Thank you Samliew, what a great response! :clap: Really appreciate your help, I’ll be sure to share my finished version!

How to position Embeded element?

I’ve recently added this script to a site and it was working fine just a few days ago. Today it’s not pulling any data. You can see it here password “Fitness”.

Got it working but had to change the script to

<script>
for(let i = 0; i < [RATING]; i++) {
  document.write('<img src="https://s0.wp.com/wp-content/mu-plugins/wpcom-smileys/twemoji/2/svg/2b50.svg" width="12px" />');
}
</script>

Which I got from @samliew’s example site but it is slightly different than the code posted here previously.

Thanks for this Samliew,

I extended this code so it will always fill up te ‘empty’ stars. It might come in handy for some people.

Result:

1 Like

Hi WierperWebWorks,
your empty stars code seems exactly what I am looking for. Can you share it in the forum too? Would be awesome!
Thanks a lot!
Best
Colin

3 Likes

Would you be able to share how you extended the code?

2 Likes

Curious on this as well!

Also interested :slight_smile:

Hey all, I came up with a different solution that doesn’t use any custom code, just Webflow :slight_smile:. It includes the empty stars as well.

Here’s the cloneable site: https://webflow.com/website/cms-star-rating

Hope you find this helpful! Let me know if you have any questions.

3 Likes

Whoa…major brownie points man! Took a quick look and you’ve really made this simple - can I send you a little donation as a thank you? Well done.

The more time I’ve spent here in the forum and FB group, I just want to throw folks a ‘Thank You’ for sharing working projects and saving hours of work.

With that, thank you for putting this together and sharing!! :muscle: :mechanical_arm: :tada:

1 Like

Matt, I appreciate the donation offer, but seriously not needed! I’ve used so many free cloneables provided my other members of the Webflow community, I’m happy to help give back where I can. :slightly_smiling_face:

2 Likes

Thanks for this hack. Companies charge way too much for this feature and now it can be a native addition with a little leg work.