Product Rating Alpha
overview
A customizable dynamic rating block for e-commerce products.
Overview
Most page builders have rating elements, but they often lack customizability. For example, the Bricks rating block gives you practically no control over styling. Thus, we created a custom product rating block for Frames.
This rating block can be inserted in any product card. It will dynamically pull the rating from the product database (when using WooCommerce) and populate the correct number of rating stars.
This is a pure CSS block, so there’s no added javascript required. Additionally, the block can work with plain custom fields and even other e-commerce systems if a site isn’t using WooCommerce. As long as the rating can be passed into the block’s data attribute as a numerical value, the rating block will function properly.
Variables
This frame doesn't use any locally scoped variables.
Other frames within this frame may contain variables. You can see all related frames further down the page.
HTML5 Tags & Attributes
Other frames within this frame may contain specific HTML5 tags. You can see all related frames further down the page.
Accessibility Notes
This block has a dynamic aria-label to make sure the star rating is announced properly. Additionally, the block is given a role of img so that screen readers interpret the multiple blocks as a single element.
FAQs
Why can't I see the star ratings in Bricks Builder (but they work on the front end)?
Bricks does not currently add data attributes to elements inside the builder, so anything styled or controlled via data attributes will not render correctly in the builder. This doesn’t affect the front-end, though. The rating block will still work for all site visitors.
Use the related frames section above to check FAQs for other frames related to this frame if you don't see your question here.