Samples > Starter stores > Starter store enhancements > Remote widgets > Work with remote widgets

Add a Share link for an e-Marketing Spot remote widget

The Madisons starter store provides store pages and code to demonstrate how customers can share e-Marketing Spot remote widgets. To familiarize yourself with the Madisons implementation, you can add a Share link to an e-Marketing Spot for which you have created a KickApps remote widget. Then consider using a similar implementation for the own store.

Before you begin

• Make sure the server is set up according to the Remote widget setup and implementation checklists. If the server is not accessible from the Internet, you can still do the procedure in this topic; however, you cannot see the feed data when you test the Share link at the end of this procedure.

• Create an e-Marketing Spot remote widget using KickApps App Studio.

• To see Madisons store pages with Share links already included on e-Marketing Spots, see E-Marketing Spot remote widget and feed flows.

This task walks you through the steps for adding a Share link to an e-Marketing Spot. This task also explains how to specify the IDs for remote widgets you have created in the KickApps App Studio. As a result, when a customer clicks the Share link, the widgets with the IDs you specify are available on the "Share this widget" page.

Several e-Marketing Spots on the Madisons starter store pages already include the code for the Share link:

• On the Home page:

  • HomePageDealOfTheWeek e-Marketing Spot

• In the right sidebar of certain pages:

  • RightSideBarAds e-Marketing Spot

  • CategoryPageRecommendations e-Marketing Spot

For these e-Marketing Spots, you can still follow the procedure in this topic; however, the code and parameters will already exist in the JSP file. You can change the parameter values to suit your widget.

Procedure

1. Open WebSphere Commerce Developer and switch to the Enterprise Explorer view.

2. Open the JSP file for the store page containing the e-Marketing Spot to which to add a Share link.

3. Within the JSP file, search for the name of the e-Marketing Spot, for example, HomePageRow3Ads.

4. Locate the <c:import tag for the specific e-Marketing Spot. The <c:import tag should be above the line for the emsName parameter containing the e-Marketing Spot name, as shown in the following example for the HomePageRow3Ads e-Marketing Spot:

   <c:import url="${jspStoreDir}Snippets/Marketing/ESpot/ContentAreaESpot.jsp">   
   <c:param name="emsName" value="HomePageRow3Ads" />   
   <c:param name="numberContentPerRow" value="2" />   
   <c:param name="catalogId" value="${WCParam.catalogId}" />   
   <c:param name="errorViewName" value="AjaxOrderItemDisplayView" />
   </c:import>
   

5. Above the <c:import tag, paste the following code snippet, which sets the URL and parameters for the e-Marketing Spot feed:

   <c:url var="feedURL" value="${restURLScheme}://${pageContext.request.serverName}:${restURLPort}${restURI}
   /stores/${WCParam.storeId}/MarketingSpotData/ems_Name">     <c:param name="responseFormat" value="atom" />     <c:param name="langId" value="${langId}" />     <c:param name="currency" value="${currency}"/>
   </c:url>
   

6. For the <c:url tag in the snippet you just pasted, replace ems_Name with the name of the e-Marketing Spot, for example, HomePageRow3Ads.

   The result should now look similar to this example code:

   <c:url var="feedURL" value="${restURLScheme}://${pageContext.request.serverName}:${restURLPort}${restURI}
   /stores/${WCParam.storeId}/MarketingSpotData/HomePageRow3Ads">     <c:param name="responseFormat" value="atom" />     <c:param name="langId" value="${langId}" />     <c:param name="currency" value="${currency}"/>
   </c:url>
   <c:import url="${jspStoreDir}Snippets/Marketing/ESpot/ContentAreaESpot.jsp">   
   <c:param name="emsName" value="HomePageRow3Ads" />   
   <c:param name="numberContentPerRow" value="2" />   
   <c:param name="catalogId" value="${WCParam.catalogId}" />   
   <c:param name="errorViewName" value="AjaxOrderItemDisplayView" />
   </c:import>
   

7. To add the Share link, add a series of mandatory and optional parameters within the <c:import tag:

   1. Add the following parameter to enable the Share link:

      <c:param name="showWidget" value="true" />
      

   2. Get the KickApps widget IDs for the e-Marketing Spot widgets you want customers to share. KickApps assigns a unique ID to each widget. You can get the widget ID by logging on to the KickApps affiliate account and then viewing the embed code for the widget. Search the embed code for widgetID= and take note of the widget ID number. If you have both a sidebar and a banner widget, get the ID of each widget.

   3. To specify the KickApps widget IDs to use for the Share link, in the store page JSP file, add one or both of the following parameters:

      • For a vertical sidebar-style widget, add this parameter and specify the widget ID for the value:

        <c:param name="sidebarWidgetId" value="widgetID"/>
        

      • For a horizontal banner-style widget, add this parameter and specify the widget ID for the value:

        <c:param name="bannerWidgetId" value="widgetID" />
        

        If you have two versions of the widget, one sidebar and one banner, you can use both of these parameters. As a result, when a customer clicks the Share link, the customer can choose either the sidebar or banner layout on the "Share this widget" page.

8. Add the following feedURL parameter:

   <c:param name="feedURL" value="${feedURL}"/>
   

   The result should now look similar to this example code:

   <c:url var="feedURL" value="${restURLScheme}://${pageContext.request.serverName}:${restURLPort}${restURI}
   /stores/${WCParam.storeId}/MarketingSpotData/HomePageRow3Ads">     <c:param name="responseFormat" value="atom" />     <c:param name="langId" value="${langId}" />     <c:param name="currency" value="${currency}"/>
   </c:url>
   <c:import url="${jspStoreDir}Snippets/Marketing/ESpot/ContentAreaESpot.jsp">   
   <c:param name="emsName" value="HomePageRow3Ads" />   
   <c:param name="numberContentPerRow" value="2" />   
   <c:param name="catalogId" value="${WCParam.catalogId}" />   
   <c:param name="errorViewName" value="AjaxOrderItemDisplayView" />   
   <c:param name="showWidget" value="true" />   
   <c:param name="sidebarWidgetId" value="123456"/>   
   <c:param name="bannerWidgetId" value="234567" />   
   <c:param name="feedURL" value="${feedURL}"/>
   </c:import>
   

9. If your widget contains a feed layer or background layer that has a name different from the name used in the WebSphere Commerce widget templates, add some additional parameters to configure those custom layers.

   The WebSphere Commerce widget templates in KickApps App Studio include a number of layers that contain text and images, including the following two significant layers:

   feed_list

   This layer contains the feed data.

   background

   This layer defines the widget background color.

   If the widget uses different layer names to display the feed data or to define the background color, specify the custom layer names using the following parameters:

   1. If the layer containing the feed data is not named feed_list, add this parameter to specify the custom layer name:

      <c:param name="feedLayer" value="layer_name_in_KickApps" />
      

   2. To allow customers to change the color of a custom layer, rather than a layer named background, specify the name of the custom layer using one or both of these parameters:

      • For the widget you specified using the sidebarWidgetID parameter, add:

        <c:param name="sidebarColors" value="layer_name_in_KickApps" />
        

      • For the widget you specified using the bannerWidgetID parameter, add:

        <c:param name="bannerColors" value="layer_name_in_KickApps" />
        

10. Save and close the JSP file.

11. View the results on the store page. For the Share link to display on the page:

    • You must have specified a widget ID value for either the sidebarWidgetID parameter or the bannerWidgetID parameter, or both.

    • A site administrator must have configured WebSphere Commerce to communicate with KickApps.

    If you do not see the Share link, check that both these conditions are met. In addition, if the file you modified in this procedure is not the top-level JSP file, ensure that the top-level JSP file has been recompiled.

12. Make any required changes to the layout and position of the link in relation to the e-Marketing Spot on the JSP page. The following file controls the link image and position:

    WCDE_INSTALL/workspace/Stores/WebContent/Madisons/Snippets/Marketing/ESpot/RemoteWidgetButtons.jsp
    

13. To test the Share link:

    1. Log on to the Madisons starter store as a test customer.

    2. On the store page containing the e-Marketing Spot, click the Share link. The "Share this widget" page displays, showing a preview of the widget.

    3. Use the functions on the page, make changes to the layout (available only if you specified both sidebarWidgetID and bannerWidgetId values), the dimensions, and the background color of the widget.

    4. Use the functions on the page, share the widget directly to a social network, or copy the embed code so that you can paste it into a Web page outside of WebSphere Commerce.

Related concepts

Remote widgets

Related tasks

Create an e-Marketing Spot remote widget

Add a Subscribe link for an e-Marketing Spot feed

Create a wish list remote widget

Enable the Share link for a wish list remote widget

Create a gift registry remote widget

Enable the Share link for a gift registry remote widget

Related reference

Troubleshoot remote widgets and feeds

Remote widgets change flow options

E-Marketing Spot remote widget and feed flows

Wish list remote widget flows, including multiple wish lists

Remote widget setup and implementation checklists

+

Search Tips   |   Advanced Search