Open Social Gadget

From DevWiki

Google Gadgets are also compatible with Open Social Gadgets. This allows Google Gadgets integrated with Volusion API to be implemented with OpenSocial partners such as: MySpace, Friendster, Orkut, Hi5, FotoFlexer, iLike, RockYou, slide, viadeo, Ning, Linkedin, Flixster and many more.

Sample Social Gadget

This sample gadget retrieves and displays featured products.

<?xml version="1.0" encoding="UTF-8" ?> 
<Module>
<ModulePrefs title="Kams Store" height="300" width="600" scrolling="true" 
author="" author_email=""
screenshot="" description="Featured Products" /> 
<UserPref name="s_url" display_name="URL" required="false" /> 
<UserPref name="s_email" display_name="Login Email" required="false" /> 
<UserPref name="s_password" display_name="Encrypted Password" required="false" /> 
<UserPref name="s_interval" display_name="Seconds" required="false" /> 
<Content type="html">
<![CDATA[ 

  <style type="text/css"> 
    body { 
      width:200; 
      height:230; 
    }

    .regular { 
      font-family: calibri; 
      font-size: 12px; 
      color: #000000; 
    }

    .td1 {
      text-align: center;
      border-right: 1px solid #dddddd;
    }

    .td2 {
      font-family: verdana;
      font-size: 11px;
      text-align: left;
      border-bottom: 1px solid #dddddd;
    }

    .colors_productname {color:#0055bb}
    A.colors_productname:hover, A.colors_productname:visited {color:#0055bb}
    .pricecolor { FONT: bold 11px Verdana; }
    .colors_productprice {color:#cc0000}  
    .productnamecolor, A.productnamecolor {FONT: bold 11px Verdana; TEXT-DECORATION: none; }
  </style>
  
   <script type="text/javascript">
     var chkConn; 
     var s_url = "";
     var s_email = "";
     var s_password = "";
     var s_interval = "";
 
     function vTrim(strInput) {
       while(strInput.charAt(0) == " ") {strInput = strInput.substr(1);}
       while(strInput.charAt(strInput.length-1) == " ") {strInput = strInput.substr(0,strInput.length-1);}
       return strInput.toString();
     }
 
     function load_gadget() { 
       if (isNaN(s_interval) == true || s_interval == "") {s_interval = 300;} 
       load_settings(); 
       download_products();
       chkConn = setInterval(download_products, 1000 * s_interval);
     }
 
     function load_settings() { 
       var prefs = new _IG_Prefs();
       s_url = prefs.getString("s_url"); 
       s_email = prefs.getString("s_email"); 
       s_password = prefs.getString("s_password"); 
       s_interval = prefs.getString("s_interval");
     }
 
     function download_products() { 
       try { 
         var api_url = "http://" + s_url + "/net/WebService.aspx?Login=" + s_email + 
         "&EncryptedPassword=" + s_password + 
         "&API_Name=Generic\\Products&SELECT_Columns=p.HomePage_Section,p.ProductCode,p.ProductID,
         p.ProductName,pd.ProductDescriptionShort,pe.Availability,pe.ListPrice,pe.PhotoURL_Small,
         pe.ProductPrice,pe.SalePrice&WHERE_Column=p.HomePage_Section&WHERE_Value=1";
 
         var xmlhttp; 
         var api_response = "";
 
         _IG_FetchContent(api_url, function (response) { 
           if (s_url == "" || s_email == "" || s_password == "") { 
             content_area.innerHTML = "<font class=\"regular\">Check settings</font>"; 
           } else { 
             display_products(response); 
           } 
         }, 
         1 
         );
       } catch(err) { 
         if (s_url == "" || s_email == "" || s_password == "") { 
           content_area.innerHTML = "<font class=\"regular\">Check settings</font>"; 
         } else { 
           content_area.innerHTML = "<font class=\"regular\">Unable to connect</font>"; 
         } 
       }
     }
 
     function display_products(api_response) { 
       var xml_api; 
       var xml_product; 
       var xml_product_detail;
       var node_products;
       var node_product_details; 
       var i = 0, j = 0; 
 
       var product_id = "";
       var product_code = "";
       var product_name = "";
       var product_description_short = "";
       var product_list_price = "";
       var product_price = "";
       var product_photo_url_small = "";
       var html_products = ""; 
  
       html_products = html_products + "<table border=0 cellpadding=10 cellspacing=0 width=\"100%\">"; 
 
       try { 
         xml_api = new ActiveXObject("MSXML2.DOMDocument"); 
         xml_api.loadXML(api_response); 
         node_products = xml_api.getElementsByTagName("Products");
 
         xml_product = new ActiveXObject("MSXML2.DOMDocument"); 
         xml_product_detail = new ActiveXObject("MSXML2.DOMDocument");
 
         if (node_products.length > 0) { 
           for (i = node_products.length - 1; i > -1; i--) { 
             xml_product.loadXML(node_products.item(i).xml);  
             product_id = get_node_text(xml_product, "Products/ProductID"); 
             product_code = get_node_text(xml_product, "Products/ProductCode"); 
             product_name = get_node_text(xml_product, "Products/ProductName"); 
             product_description_short = get_node_text(xml_product, "Products/ProductDescriptionShort");
             product_list_price = get_node_text(xml_product, "Products/ListPrice");
             product_price = get_node_text(xml_product, "Products/ProductPrice");
             product_photo_url_small = get_node_text(xml_product, "Products/PhotoURL_Small");
 
             html_products = html_products + "<tr>";
             html_products = html_products + "<td class=\"td1\">";
             if (product_photo_url_small != null && product_photo_url_small.length > 0) {
               html_products = html_products + "<a target=\"_blank\" 
               href=\"http://" + s_url + "/productdetails.asp?ProductCode=" + 
               escape(product_code) + "\" class=\"productnamecolor colors_productname\"><img src=\"" 
               + product_photo_url_small + "\" border=0></a>";
             } else {
               html_products = html_products + "<a target=\"_blank\" 
               href=\"http://" + s_url + "/productdetails.asp?ProductCode=" + escape(product_code) + "\"
               class=\"productnamecolor colors_productname\"><img border=0 src=\http://" + s_url
               + "/v/vspfiles/templates/110/images/nophoto.gif\></a>";
             }
  
             html_products = html_products + "</td>";
             html_products = html_products + "<td class=\"td2\">";
             html_products = html_products + "<a target=\"_blank\" href=\"http://" + s_url
             + "/productdetails.asp?ProductCode=" + escape(product_code) + "\" class=\"productnamecolor
             colors_productname\">" + product_name + "</a><br>";
 
             if (product_list_price != null && vTrim(product_list_price) != "") {
               html_products = html_products + "<b>List Price:</b> " + product_list_price + "<br>";
             }
             if (product_price != null && vTrim(product_price) != "") {
               html_products = html_products + "<b>Our Price:</b> <font class=\"pricecolor 
               colors_productprice\">" + product_price + "</font> ";
               html_products = html_products + "<a target=\"_blank\" class=\"productnamecolor 
               colors_productname\" href=\"http://" + s_url + "/shoppingcart.asp?ProductCode="
               + escape(product_code) + "\"><img src=\"http://" + s_url  
               + "/v/vspfiles/templates/110/images/buttons/btn_addtocart_small.gif\" border=0></a><br>";
             }
             if (product_description_short != "" && vTrim(product_description_short) != "") {
               html_products = html_products + "" + product_description_short + "<br>";
             }
       
             html_products = html_products + "</td>";
             html_products = html_products + "</tr>"; 
           } 
         } 
       } catch(err) { 
         //error parsing xml 
       }  
       html_products = html_products + "</table>"; 
       content_area.innerHTML = html_products;
     }
 
     function get_node_text(xml_doc, node_name) { 
       var current_node; 
       var node_text; current_node = xml_doc.getElementsByTagName(node_name); 
       if (current_node.length > 0) {node_text = current_node.item(0).text;} 
       return node_text;
     }
   </script>
    
  <body onload="load_gadget()" style="margin:0px;" >
    
     <table border=0 cellpadding=0 cellspacing=0 style="margin:0px">
       <tr>
         <td><div style="margin:0px;" x="1" y="1" id="content_area">
           <font style="color:#000000;font-family:calibri;font-size:12px;\">Loading...</font></div>
         </td>
       </tr>
     </table>
     
  </body>
 ]]> 
</Content>
</Module>