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


Enable the Share link for a wish list remote widget

The Madisons starter store provides store pages and code to demonstrate how customers can share wish list remote widgets.

To familiarize yourself with the Madisons implementation, you can try associating the Share link on the Personal Wish List page to a wish list remote widget you have created in KickApps App Studio. Then consider using a similar implementation for your own store.


Before you begin

This task explains how to specify KickApps widget IDs for the Share link on the Madisons Personal Wish List 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 Personal Wish List page at the following path:

    WCDE_INSTALL/workspace/Stores/WebContent/Madisons/UserArea/ServiceSection/InterestItemListSubsection/WishListResultDisplay.jsp

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

    <div class="right" id="getWidgetButton">    
<c:url var="feedURL" value="${restURLScheme}://${pageContext.request.serverName}:${restURLPort}${restURI}/stores/${WCParam.storeId}/GiftLists/${selectedWishListId}?guestAccessKey=${defaultWishList.accessSpecifier.guestAccessKey}">        
<c:param name="responseFormat" value="atom" />        
<c:param name="langId" value="${langId}" />        
<c:param name="currency" value="${CommandContext.currency}" />    
</c:url>    
<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="top" />    
</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 Wish list remote widgets in WebSphere Commerce Accelerator.

  4. Complete the following steps to specify the IDs of the KickApps wish list widgets you created. For the Share link to display on the Personal Wish List page, specify a widget ID for either the sidebarWidgetID parameter, or the bannerWidgetId parameter, or both:

    1. Get the KickApps widget IDs for the wish list 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 WishListResultDisplay.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.

  5. 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" />

  6. Save and close the JSP file.

  7. View the results on the Madisons Personal Wish List store page. For the Share link to display on the page:

    If you do not see the Share link, check that both these conditions are met.

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

  9. To test the Share link:

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

    2. Create a wish list containing three or four products.

    3. On the Personal Wish List 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 dimension, and 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

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