Star rating component

[dandv]

A star rating AMP HTML component would enable common 1-5 star rating displays, with optional input.

Prior art is documented in my comparison of star rating widgets.

[dvoytenko]

/cc @rudygalfi @ericlindley-g

[ericlindley-g]

Thanks for raising—this would be a good thing to do eventually. Slotting it in the backlog for now, but feel free to submit an intent to implement if you'd like to propose an approach.

[ericlindley-g]

I should mention, though, that until we build out support for forms, the rating component won't be able to handle the actual input & transmission of data. Happy to see implementations for the ratings UI in the short term, but we won't see the full benefit until forms support is implemented.

[dandv]

Just a note that forms support is tracked at #3343 (formerly #1286).

[dandv]

Forms were released to production on 2016-10-31. Holding off until these are released as well:

• Ability to put variables into hidden form fields #5654 - Use CLIENT_ID inside amp form as hidden input field
• amp-form: Submit Form on Input Change #4272 - submit form on input change

See also #5540.

[aghassemi]

Closing for ampproject/amp-by-example#558

[aghassemi]

Re-opening since we decided (see ampproject/amp-by-example#558 (comment)) to make this an AMP component.

@dandv I assume you are still willing to take this one. When you have the API you have in mind ready, let's do a quick forma review with the team. (Just a PR with an example usage and/or markdown file for the API should be enough for the review)

@ericlindley-g

[ericlindley-g]

@aghassemi @dandv FYI, bumped the priority on this up slightly, given how useful it is for a range of e-comm use cases — @dandv, do you have a sense of a timeframe for this component?

[camelburrito]

Repasting my thoughts here

@dandv - i just had a thought, I think it might be easy to build on top very easily

It will make the component more semantic
You might be able to leverage the ability to set a range without any JS event listeners
It will make accessibility easy
Here is a code pen i found by google search (i would not implement it like how they did) that uses range input for ratings

https://codepen.io/catharsis/pen/vquyj

Let me know what you think !

(https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/)

[dandv]

Sorry, been bogged down with other work. Hope to get back to this soon.

[rudygalfi]

Thanks for the last update. Anything new happening with this?

[dandv]

Now that I/O is over, I'm back to work on this since it can unblock a number of partners.

/cc @joemarini FYI

[szynszyliszys]

I have fixed the reverse arrow issue in Starability.css. Now it works with keyboard in correct order. You might consider that. https://github.com/LunarLogic/starability

[ampprojectbot]

This issue hasn't been updated in awhile. @dandv Do you have any updates?

[aghassemi]

p2 -> p3 since there is an ABE sample for it already.

[nicopujol]

We'd love to use this feature and know of many users who would too.

[rudygalfi]

@nicopujol Have you had a chance to take a look at this guide for implementing star ratings in AMP: https://amp.dev/documentation/examples/interactivity-dynamic-content/star_rating/ ?

It would be great to hear what kinds of use cases you think a dedicated component would address vs what's possible with the capabilities illustrated in the guide linked above.

cc @nainar

[nicopujol]

Hi @rudygalfi @nainar ,

Some thoughts:

• We run sites on WordPress (largely food blogs) with the official AMP plugin. Due to site theme, recipe plugin and other CSS elements on the site, we sometimes see CSS overflow on AMP pages, breaking the layout. Not sure if adding more CSS would make things worse.

• WordPress recipe plugins embed star rating for standard non-AMP pages, and display ratings today in read-only for AMP. We would ask the developers of these plugins to implement support for AMP ratings. To do this, I need to give to give them something long term that will not change soon in terms of coding.

• When reading the CSS article, it states "stay tuned for the amp-rating component" which suggests it is a stop gap measure until an AMP JS component becomes available.

• CSS implementation also mentions limitations on non Chrome browsers. We have a large chunk of mobile traffic coming from non-Chrome (mostly iOS/Safari).

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 7 days if no further activity occurs. Thank you for your contributions.