Hiding Widgets with 0 reviews

Summary

In cases where a widget would have no content (i.e. an error or with no reviews), you may choose not to display the widget. The embedding page will be notified using window.postMessage.  Tripadvisor provides a JSON object that has more information about the frame and the widget inside it.

Supported Widgets

Property Detail, Property Summary, Licensed Rating

JSON Object Format

{
  /* Optional string error message, will only occur if the widget is in error */
      error: <String>,    
      /* Name of the iframe loading the widget.  “” if no name specified.  Note, this is NOT the id */
      frameName: <String>,
       /* Various pieces of widget data, specific to the widget*/
      data: {
          width: <int>, /* Widget content width */
          height: <int> /* Widget content height */
      }
  }

Parsing

In order to support older IE versions that don't support JSON objects as message payloads, the message object is delivered as a JSON parsable string.  Modern browsers provide a JSON.parse function which can be used to get the object representation itself. Older IE versions will provide this functionality if the resource being displayed (the page) is specifically doctyped as HTML.  JSON parsing is also made available open source (see https://github.com/douglascrockford/JSON-js among others).

  • Tripadvisor supports previous versions of string widget messaging that are not necessarily JSON parseable.
  • JSON.parse can throw ParseExceptions on strings that are not valid JSON.  If you're not sure of the validity of a prospective JSON string, surround the parse call with a try block and handle the exception in the catch, i.e

 

try {
    var parsed = JSON.parse(msg.data);
    // Appropriate business logic using the JSON message object format
 ...
 }
 catch (err) {
 // Block entered with error in scope as “err” in the case
 // that the string is not valid JSON 
 }

Error Messages

TA_widgetError - the widget would return in error, due to no content being available or other failure

TA_noReviews - specifically for Property Detail widget, which allows for no reviews so long as there is a picture to display.

Development

In order to capture these messages, the implementing partner would add a corresponding javascript event listener to capture the messages if they occur and hide the widget.  The following is an example listener skeleton.

var widgetErrorHandler = function(event) {
  // Ensure the message is from TA. not necessary, but safer
   if (event.origin == http://www.tripadvisor.com) {
     if (event.data.error) {
        // There has been an error.  At this point we can match on the error string to do more specific 
            work
       // or simply hide the widget using event.data.frameName to identify the frame to hide
     }
  }
window.addEventListener(“message, widgetErrorHandler, false);