comments.showRatingUI JS

Skip to end of metadata
Go to start of metadata

Description

 

Displays a Rating plugin. The plugin presents the average rating of an item and a link to show all the reviews.

Note: If you plan on integrating the Rating plugin, we highly recommend reading the R&R page, which is a step-by-step guide for integrating Gigya's Rating & Reviews platform in your site, including the Rating plugin.

 

Plugin's Default Design

The following screen shot presents a Rating plugin:

The design is fully customizable via HTML Elements Style (CSS).

 

Syntax

 

 

Parameters

The following table lists the available parameters:

   

RequiredNameTypeDescription
containerIDstringAn ID of a <div> element on the page in which you want to display the plugin.
categoryIDintegerThe identifier of the Comments Category with which this plugin is associated.
Before embedding a Rating plugin in your site, you are required to create at least one Comments Category in the Comments Setup page on Gigya's website, and assign to it 'Operation mode: Rating & Reviews'. When creating a new Comments Category, a unique categoryID is created. The generated 'Embed code' includes the categoryID. You can use this code to embed the plugin in your site.
streamIDstringIn each category you may define multiple streams. Set this parameter with a unique ID of your choice to identify a stream. Note: the string is limited to 150 characters and is case sensitive.
actionAttributesJSON objectIn Gamification your users receive points for actions they perform on your site, in this case adding a rating grants the user points. Action Attributes may be used to annotate actions with additional information, such as the section of the web site that generated the action. If you set here the actionAttributes, each time a user adds a rating, the action also receives an attribute, for example "tv-show":"glee", which can mean that the action was performed on the "Glee" page of the site. 
actionAttributes contain a JSON object comprised of a series of attribute keys (categories) with associated values. You can also use a generic "tags" key.

No more than three values can be given, they can be with a single key or each have their own key.

For more information see Variants and Action Attributes. Action attributes are later used to filter GM Plugins by a certain attribute.
Example:  {"<attribute key1>": ["<attribute value1>", "<attribute value2>"],  "<attribute key2>": "<attribute value3>" }

contextobjectA reference to a developer created object that will be passed back unchanged to the event handlers as one of the fields of the eventObj (see extended explanation in the "Plugin Events" section below).
customLangJSON objectThis parameter allows you to set custom texts in the comments plugin. The object is made up of pairs - the key that represents a text element in the UI, with the text to which you want to change:
customLang = {textKey1: text1,textKey2: text2,[...]}
For example:
        params.customLang = {
            num_reviews: '%num',
            write_a_review: 'Write a review'
        }
The full list of existing keys is available here
linkedCommentsUIstringThe containerID ( <div> ID) of a Comments plugin that resides on the same page. This will be used to jump to the appropriate section in the comments plugin when the user clicks the # reviews link or the "Write your review" button.
ratingTemplatestring (HTML)Using this parameter you may override the default design of the Rating plugin. Defines an HTML template representing the design of the Rating plugin. The HTML template supports the following placeholders: $stars, $readReviewsLink, $addReviewButton, $write_a_review and $review_summary
There is also a new template format, which uses HTML classes instead of the $ placeholders:
  • gig-rating-stars - the average rating stars
  • gig-rating-readReviewsLink - the read reviews 
  • gig-rating-writeYourReview - the write review
  • gig-rating-dimensions - the dimensions box is the dimension titles plus the stars
showCommentButtonBooleanIndicates whether the "Write your review" button is displayed in the plugin. The default value is 'true'.
showReadReviewsLinkBooleanIndicates whether the "Read reviews" link is displayed in the plugin. The default value is 'true'.
useHiResIconsBooleanDefault: 'false', uses standard icons. When 'true' icon resolution will be set by the device's pixel ratio. Recommended for mobile displays, for example iPhones with retina display. 
Note: If Gigya's icons are overridden by custom icons and this parameter is set to 'true', it may cause display problems.
widthintegerDetermines the width in pixels of the plugin. The minimum width is 493 pixels before wrapping, 205 pixels after wrapping. Width can also be specified in percentages of the container element: "100%" , "50%" etc.  
 Events Registration Parameters 
onLoadfunction refA reference to an event handler function that will be called when the plugin has finished drawing itself.
onErrorfunction refA reference to an event handler function that will be called when an error occurs.
onAddReviewClickedfunction refA reference to an event handler function that will be called when the "Write your review" button clicks.
onReadReviewsClickedfunction refA reference to an event handler function that will be called when the # reviews link clicks.
 

Plugin Events

An Event Handler is a JavaScript function with the following signature:

functionName(eventObj)

The single argument, eventObj, contains information about the event and has different fields for different events.

The following tables specify the list of fields available in the eventObj for each event:

onLoad Event Data

FieldTypeDescription
   
eventName string The name of the event.
source string The source plugin that generated this event. The value of this field is the name of the plugin's API method, e.g., 'showLoginUI', 'showCommentsUI', etc.
contextobject The context object passed by the application as parameter to the API method, or null if no context object has been passed.

onError Event Data

FieldTypeDescription
   
eventName string The name of the event.
source string The source plugin that generated this event. The value of this field is the name of the plugin's API method, e.g., 'showLoginUI', 'showCommentsUI', etc.
contextobject The context object passed by the application as parameter to the API method, or null if no context object has been passed.
errorCodeintegerThe result code of the operation. Code '0' indicates success, any other number indicates failure. For a complete list of error codes, see the Error Codes table.
errorMessagestringA short textual description of an error, associated with the errorCode, for logging purposes.
errorDetailsstringThis field will contain the exception info, if available.

onAddReviewClicked Event Data

FieldTypeDescription
   
eventName string The name of the event.
source string The source plugin that generated this event. The value of this field is the name of the plugin's API method, e.g., 'showLoginUI', 'showCommentsUI', etc.
contextobject The context object passed by the application as parameter to the API method, or null if no context object has been passed.

 

onReadReviewsClicked Event Data

FieldTypeDescription
   
eventName string The name of the event.
source string The source plugin that generated this event. The value of this field is the name of the plugin's API method, e.g., 'showLoginUI', 'showCommentsUI', etc.
contextobject The context object passed by the application as parameter to the API method, or null if no context object has been passed.

 

Please refer to Events to learn more about how to handle events generated by the Gigya service.

 

Code Sample

var params=
{
	categoryID: 'Rating1',  
	streamID: 'RatingStream1',
        containerID: 'ratingDiv'
};

gigya.comments.showRatingUI(params)

Notes:

  • This sample is not meant to be fully functional code. For brevity's sake, only the code required for demonstrating the API call itself is presented.
  • To run the code on your own domain, add your Gigya API key to the gigya.js URL. A Gigya API key can be obtained on the Site Dashboard page on Gigya's website. Please make sure that the domain from which you are loading the page is the same domain name that you used for generating the API key.

 

In the Rating & Reviews demo you will find a complete working example that uses the comments.showRatingUI method. You may view the code, run it and view the outcome.