Samples > Starter stores > Starter store enhancements > Social Commerce > Work with Social Commerce widgets


Add Social Commerce widgets to store pages

You can integrate the Social Commerce user interface widgets into the own store pages using the different markup and scripting sections that are contained within the <head> and <body> elements in the store pages.

The sample Madisons starter store pages that are packaged in...

WC_INSTALL/starterstores/SocialCommerce/SocialCommerce.sar

...illustrate the process for adding these widgets to the store pages.


Sections within the <head> element of a store page

Section Description
Dojo module registration The Social Commerce user interface widgets are uniquely identified by a Dojo module. Use the Dojo module registration section to register this module within a JavaScript section that executes before any other user interface widget code is loaded.
Stylesheet The Social Commerce user interface widgets use a single CSS file that contains all of the widget styling information. You can customize the styles associated with these widgets to suit the store pages that to add the widgets to. Use the stylesheet section to include the browser-specific Social Commerce CSS file for the widgets.
Dojo profile The Social Commerce Dojo profile build improves performance by enabling you to download the complete set of user interface widgets in a single compressed JavaScript file. The Dojo profile section is a <script> element that loads the Dojo profile using the src attribute. You must add this section to the <head> element after the Dojo module registration section.


Sections within the <body> element of a store page

Section Description
Dojo requires This JavaScript section calls dojo.require, using the Social Commerce user interface widget name as the argument, and loads the user interface widget into the JavaScript engine. Each Social Commerce user interface widget corresponds to a single requires statement.

In this section, you can also specify when the user interface widgets are loaded and parsed. Although parsing the user interface widgets when the store page is loaded makes the widgets available immediately, it also increases the amount of time it takes to load the page.

Widget declaration This section contains an HTML div tag that creates the Social Commerce user interface widget on the store page. You can specify several configuration attributes for each user interface widget, such as the resourceId, within this declaration. By default, these attributes are configured based on settings from the sMash application.
SEO content This section renders static social content that search engine crawlers can index and use to rank the store page for search text. This SEO content is rendered in an HTML noscript tag and is not visible within a shopper's browser, unless they have disabled JavaScript.
Precision marketing When a shopper uses the Social Commerce user interface widgets to create social content, the WebSphere Commerce Server captures that event and associates it with the shopper so that Marketing Managers can identify and reward shoppers who meet specific criteria. The Social Commerce user interface widgets publish a predefined Dojo topic for each type of social content created by a shopper.

This JavaScript section calls dojo.subscribe to enable a listener for these topics and the listener contacts the Marketing engine in the WebSphere Commerce Server. This integration enables Marketing managers to set up targeted campaigns based on Social Commerce activity.

See...


Procedure

  1. In the <head> element of the store page:

    1. Use the Dojo profile section to map the Social Commerce widget that to add to include the context root (/soccom) used by the feature. 

      <!-- Begin Social Commerce integration -->

<script type="text/javascript">     

// Register the module here so that soccom.js can load.
dojo.registerModulePath("ibm", "/soccom/ibm");

</script>  3 

<script type="text/javascript" src="/soccom/ibm/soccom.js"></script>

<!-- End Social Commerce integration -->

    2. Use the <link> tag in the Stylesheet section to include the browser-specific Social Commerce style sheet for the user interface widgets. The following code snippet shows examples of how to include both the soccom.css and soccomie.css stylesheets, depending on the browser that is used to display the user interface widgets. 

      <%-- These are the default stylesheets for the Social Commerce widgets. --%>    

<link rel="stylesheet" href="<c:out value='/soccom/ibm/social/soccom.css'/>" type="text/css"/>  

<!--[if lte IE 6]>    

    <link rel="stylesheet" href="<c:out value='/soccom/ibm/social/soccomie.css'/>" type="text/css"/>

<![endif]-->

  2. In the <body> element of the store page:

    1. Use the Dojo requires section to declare the Social Commerce user interface widgets that will be used in the store page by way of a <script> tag. Also specify when the user interface widgets are loaded and parsed.

      Options for declaring, loading, and parsing user interface widgets...

      Option Example
      Integrate, load, and parse at page load The following code snippet shows the Blog widget and PhotoGallery widget integrated into a store page and parsed immediately when the page is loaded: 

      <script language="JavaScript" type="text/javascript">         

dojo.addOnLoad(function() 
{
    dojo.require("ibm.social.Blog");
    dojo.require("ibm.social.PhotoGallery");
    parseWidget("BlogWidget");
    parseWidget("PhotoGalleryWidget");     
});

</script>

      Integrate, load, and parse after a shopper action The following code snippet shows the Blog widget integrated into a store page, loaded, and parsed after a shopper clicks the Show Blog Content button: 

      <script language="JavaScript" type="text/javascript"> 
        var showBlog = function() 
        { 
            dojo.require("ibm.social.Blog");
            parseWidget("BlogWidget");     
        };

</script>

<input id="ShowBlogButton" 
       type="button" 
       value="Show Blog Content" 
       onclick="javascript:showBlog();"/>

      Programmatically add user interface widgets after a shopper action The following code snippet shows a new Blog widget instantiated and initialized in a store page after a shopper clicks the Show Blog Content button: 

      <script language="JavaScript" type="text/javascript">     

var showBlog = function() 
{
    dojo.require("ibm.social.Blog");         
    var containerNode = dojo.byId("BlogContainer");         
    containerNode.style.display = "block";         
    containerNode.style.width = "520px";         
    containerNode.style.margin = "10px 10px 10px 10px";         
    var blogNode = document.createElement("DIV");         
    containerNode.appendChild(blogNode);         

    var blog = new ibm.social.Blog
    (
        {title: "My Blog", resourceId: "LoungeChairsBlog" }, blogNode);         
        blog.startup();     
}; 

</script>     

<input id="ShowBlogButton" 
       type="button" 
       value="Show Blog Content" 
       onclick="javascript:showBlog();"/>
<div id="BlogContainer">
</div>

    2. Use the Widget declaration section to ensure that the social content for the Social Commerce user interface widgets you declared in the Dojo requires section renders within the appropriate user interface controls. The following code snippet shows the Blog widget and the PhotoGallery widget rendered within a table element in the sample Madisons starter store Category page (Stores.war/Madisons/Snippets/CategoryDisplay/CategoryDisplayExt.jspf). 

      <table>     
<tbody>         
<tr>             
<td>                 
<div dojoType="ibm.social.Blog"
     id="BlogWidget"
     resourceId="${WCParam.storeId}_${WCParam.catalogId}_${WCParam.categoryId}"
     style="display: block; width: 400px; margin: 10px 10px 10px 10px;">                 
</div>             

    </td>         
    </tr>         
    <tr>             
    <td> 
<div dojoType="ibm.social.PhotoGallery"
     id="PhotoGalleryWidget"
     resourceId="${WCParam.storeId}_${WCParam.catalogId}_${WCParam.categoryId}"
     style="display: block; width: 400px; margin: 10px 10px 10px 10px;">                 
</div>             

</td>         
</tr>     
</tbody>
</table>

    3. Use the SEO content section to render static social content that search engine crawlers can index and use to rank the store page for search text. The following code snippet shows the JSP file code that creates the HTML <noscript> tag which renders the SEO content in the sample Madisons starter store Category page (Stores.war/Madisons/Snippets/Catalog/CategoryDisplay/CategoryDisplayExt.jspf). 

      <%
com.ibm.commerce.server.JSPHelper jhelper = new com.ibm.commerce.server.JSPHelper(request); 
String resourceId = jhelper.getParameter("storeId") 
                  + "_" + jhelper.getParameter("catalogId") 
                  + "_" + jhelper.getParameter("categoryId"); 
StringBuilder sb = new StringBuilder();
 sb.append("CategoryDisplay:storeId:categoryId:");
 sb.append(jhelper.getParameter("storeId"));
 sb.append(":");
 sb.append(jhelper.getParameter("categoryId"));
 out.write(com.ibm.commerce.soccom.seo.SeoService.getBlogContent(resourceId, sb.toString()));
 out.write(com.ibm.commerce.soccom.seo.SeoService.getPhotoGalleryContent(resourceId, sb.toString()));
 %>

    4. Use the Precision marketing integration section to enable a listener for events that involve the creation of social content. The following code snippet shows dojo.subscribe called to enable a listener for the Customer Participates in Social Commerce trigger. 

      <script type="text/javascript"> 
dojo.subscribe("SocialCommerceMarketingTrigger", function(type){
var url = "AjaxMarketingTriggerProcessServiceEvaluate?DM_ReqCmd=SocialCommerceInteraction&type=" + type; 

dojo.rawXhrPost({
url: url, handleAs: 'text', error: function(resp, ioArgs) {
alert("Precision Marketing request failed."); }
}); });
</script>


What to do next

Use one of the following methods to clear the cache to remove any JSP files that DynaCache might have cached in memory for the Madisons store pages that you added Social Commerce widgets to:


Related tasks

Customize Social Commerce widgets

Publish the Social Commerce store archive

Related reference

User interface widgets


+

Search Tips   |   Advanced Search