Last active
August 14, 2020 12:48
-
-
Save charleshimmer/5134440 to your computer and use it in GitHub Desktop.
Inline Ratings (multiple product rating stars on one page)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> | |
| <title></title> | |
| <meta name="description" content=""> | |
| <meta name="viewport" content="width=device-width"> | |
| <!-- Meat and Potatoes of BV Integration Code--> | |
| <script src="//display-stg.ugc.bazaarvoice.com/static/ClientName/bvapi.js"></script> | |
| <!-- Inline Ratings with links --> | |
| <!-- Product IDs must be alphanumeric at the moment and not contain spaces --> | |
| <script> | |
| $BV.ui( 'rr', 'inline_ratings', { | |
| productIds : { | |
| productId1: {url: 'http://example.com/products/product1' }, | |
| productId2: {url: 'http://example.com/products/product2' }, | |
| productId3: {url: 'http://example.com/products/product3' }, | |
| productId4: {url: 'http://example.com/products/product4' } | |
| }, | |
| containerPrefix : 'BVRRInlineRating' | |
| }); | |
| </script> | |
| <!-- Just stars and text, no links--> | |
| <!-- <script> | |
| $BV.ui( 'rr', 'inline_ratings', { | |
| productIds : ['product1', 'product2', 'product3', 'product4'], | |
| containerPrefix : 'BVRRInlineRating' | |
| }); | |
| </script> --> | |
| <!-- If product IDs have spaces, periods, or special characters, you will need to specify the containerId like the GLK 80 product below. --> | |
| <!-- $BV.ui('rr', 'inline_ratings', { | |
| productIds : { | |
| 'GLK 80' : { | |
| url : 'http://wherever-whatever.com/products/glk80', | |
| containerId : 'BVRRInlineRating-GLK-80' | |
| }, | |
| 'SK25' : { | |
| url : 'http://wherever-whatever.com/products/sk25' | |
| } | |
| }, | |
| containerPrefix : 'BVRRInlineRating' | |
| }); --> | |
| </head> | |
| <body> | |
| <h1>Inline Rating integration code demo</h1> | |
| <!-- Contents of this div will be the star rating for product-id-1. --> | |
| <div id="BVRRInlineRating-productid1"></div> | |
| <!-- Contents of this div will be the star rating for product-id-2. --> | |
| <div id="BVRRInlineRating-productid2"></div> | |
| <!-- Contents of this div will be the star rating for product-id-3. --> | |
| <div id="BVRRInlineRating-productid3"></div> | |
| <!-- Contents of this div will be the star rating for product-id-4. --> | |
| <div id="BVRRInlineRating-productid4"></div> | |
| </body> | |
| </html> |
Great job, thanks for sharing!
Thanks - I too found BV's documentation lacking.
Do you know if he default configuration can be overridden here? For example: the default may be to show inline ratings WITH the average score in parentheses. Can we set a config option to hide it on a particular instance or page?
Thanks for sharing !
thanks for this
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Thanks for this, makes up for BV's terrible documentation. For what it's worth I had to wrap the productids in single quotes where the URLs are defined.