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

Enable the Share link for a gift registry remote widget

The Madisons starter store provides store pages and code to demonstrate how customers can share gift registry remote widgets. To familiarize yourself with the Madisons implementation, you can try associating the Share link on the Registered Products page to a gift registry remote widget you have created in KickApps App Studio. 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 a gift registry remote widget using KickApps App Studio.

• To see a screen capture of the Madisons Registered Products page with the Share link included, see IBM Gift Center for Madisons: Remote widgets for gift registries.

This task explains how to specify KickApps widget IDs for the Share link on the Madisons Registered Products page. As a result, when a customer clicks the Share link, the widgets with the IDs you specified are available on the "Share this widget" page.

Procedure

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

2. Open the JSP file for the Registered Products page at the following path:

   WCDE_INSTALL/workspace/Stores/WebContent/Madisons/GiftCenter/manageRegistry/GiftRegistryManageDisplay.jsp

3. Within the JSP file, locate the block of code similar to this example:

   <flow:ifEnabled feature="RemoteWidgetGiftregistry">     <c:url var="feedURL" value="${restURLScheme}://${pageContext.request.serverName}:${restURLPort}${restURI}/stores/${WCParam.storeId}/GiftLists/${externalId}?guestAccessKey=${giftList.accessSpecifier.guestAccessKey}">         <c:param name="responseFormat" value="atom" />         <c:param name="langId" value="${langId}" />         <c:param name="currency" value="${CommandContext.currency}" />     </c:url>
   </flow:ifEnabled>
   

   This block of code defines the URL for the gift registry feed and the URL parameters. You do not need to make changes to this code, but you should be aware of its purpose.

4. Within the JSP file, locate the block of code similar to this example:

   <c:import url="${jspStoreDir}Snippets/Marketing/ESpot/RemoteWidgetButtons.jsp">   
   <c:param name="showWidget" value="true" />   
   <c:param name="showFeed" value="false" />   
   <c:param name="sidebarWidgetId" value="" />   
   <c:param name="bannerWidgetId" value="" />  
     
   <c:param name="feedURL" value="${feedURL}" />   
   <c:param name="widgetIconStyle" value="invert" />   
   <c:param name="sidebarColors" value="" />   
   <c:param name="bannerColors" value="" />
   </c:import>
   

   In the previous block of code, the showWidget parameter enables the Share link on the page. The value is set to true when you enable the change flow option for Gift registry remote widgets in WebSphere Commerce Accelerator.

5. Complete the following steps to specify the IDs of the KickApps gift registry widgets you created. For the Share link to display on the Registered Products page, specify a widget ID for either the sidebarWidgetID parameter, or the bannerWidgetId parameter, or both:

   1. Get the KickApps widget IDs for the gift registry widgets you want customers to share. KickApps assigns a unique ID to each widget. You can get the widget ID by logging on to your 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.

   2. In the GiftRegistryManageDisplay.jsp file, add the widget IDs to the appropriate parameters:

      • For a vertical sidebar-style widget, add the widget ID to this parameter:

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

      • For a horizontal banner-style widget, add the widget ID to this parameter:

        <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.

6. Optional: If you added custom layers to the widget that are not part of the WebSphere Commerce widget templates, you can add functions to the custom layers using some optional parameters:

   1. To allow customers to change the color of a custom layer, specify the layer name using one or both of these parameters:

      • For the widget ID you specified for the sidebarWidgetID parameter, add:

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

      • For the widget ID you specified for the bannerWidgetID parameter, add:

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

   2. To define a custom feed layer in the widget, add this parameter

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

7. Save and close the JSP file.

8. View the results on the Madisons Registered Products store page. The Registered Products page is the page that displays when you search for a gift registry that you own or manage, and then open the registry. 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.

9. Make required changes to the layout and position of the link on the page. The following file controls the link image and position:

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

10. To test the Share link:

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

    2. Create a gift registry containing three or four products.

    3. On the Registered Products page, click the Share link. The "Share this widget" page displays, showing a preview of the widget.

    4. 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.

    5. 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 Share link for 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

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