Use CMS for displaying star ratings in collection posts

Design help CMS
1

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
2

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

3

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
4

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>

Screenshot_2018-02-08_110202
Screenshot_2018-02-08_110202803×228 9.74 KB

Screenshot_2018-02-08_110244
Screenshot_2018-02-08_110244896×637 8.7 KB

6 Likes
5

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

1 Like
6

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

7

How to position Embeded element?

8

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.

10

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:

30
301570×528 53.7 KB

1 Like
11

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
12

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

2 Likes
13

Curious on this as well!

14

Also interested :slight_smile:

15

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
16

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
17

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
19

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.