I am using the number technique to put in a star rating using conditional visibility ratings greater than 0, 1, 2, etc to reveal the star. I would like to turn this into a component that I can use insert on the cms template page as well. I really hope for it to be reusable. How do I control conditional visibility using the number property (cms number) if I make it a component and using its cms number property.
Not sure if this is doable but I hope so, any advice would be greatly appreciated
You want the entire rating piece as a single component, not one per star
You want to bind it to a numeric 1-5 property field in the CMS, or set standalone
Do some research online, a lot of approaches to this, and it depends on whether you want whole stars 1-5 or whether you want to support half-steps like 2.5.
The conditional visibility approach you’re talking about isn’t currently available in components, but you can do this with custom CSS inside of the component, hiding and showing stars depending on the rating number.
Another common approach is to create it as one image with 5 stars, or as a contiguous DIV-wrapped piece, and then mask or crop it to the right position. e.g. 2.5 / 5 = 50%, you only show the left 50% of the stars. Or double-layer it, empty gray stars and yellow filled stars on top, and you’re masking only the top layer.
Personally I’d go with a code component on this because there are a lot of settings options; colors, sizes, spacing, icon variations, etc. and the possibility of using it as a form input element as well when collecting reviews or customer feedback.
You’ll find a lot of tutorials online regarding different HTML+CSS techniques; once you find one you like it’s easy to adapt into component form.