Tutorials > Program model > Web services > Create an Atom feed to display recipes in a remote widget

< Previous

Add a Share link to a store page so that customers can share the recipe widget

In this lesson, you learn how to give customers access to the recipe widget you created in the last lesson. On the Madisons store page that displays a Recipe Collections list, you add a Share link. When a customer clicks the Share link, the customer can customize the recipe widget and share it to a social network.

This lesson uses the Recipe Collections store page developed during the following tutorial and lesson:

• Tutorial: Adding the Recipe tool to the Madisons starter store,

• Lesson: Create and registering the new JSP files to display Recipe information

If you do not have this page available, you can try adding the Share link to any store page for the purposes of this tutorial.

The following screen capture shows where you might add a Share link to the Recipe Collections store page:

Procedure

1. Open the Recipe Collections store page in an editor. If you completed Tutorial: Adding the Recipe tool to the Madisons starter store, the Recipe Collections store page should be located here:

   WCDE_INSTALL/workspace/Stores/WebContent/Madisons/ShoppingArea/RecipeSection/RecipeCollection.jsp

2. At the location in the JSP file that to display a Share link, paste the following lines of code:

   <c:import url="${jspStoreDir}Snippets/Marketing/ESpot/RemoteWidgetButtons.jsp">
     
   <c:param name="showWidget" value="true" />
     
   <c:param name="sidebarWidgetId" value="your_widgetID" />
     
   <c:param name="sidebarColors" value="your_layer_name" />
     
   <c:param name="feedURL" value="your_feedURL" />
     
   <c:param name="widgetIconStyle" value="top" />
     
   <c:param name="feedLayer" value="your_feed_layer_name" />
   </c:import>
   

   These lines of code add the Share link to the page. WebSphere Commerce uses a similar code snippet to display the Share link on Madisons store pages for e-Marketing Spot, wish list, and gift registry remote widgets. The snippet imports the RemoteWidgetButtons.jsp file. This file provides the Share link image, controls its position, and supports the link functions. For the reference, the RemoteWidgetButtons.jsp file is stored here:

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

3. Update the parameters in the code snippet for the widget:

   showWidget

   This parameter controls whether to display the Share link on the page. Leave the value set to true. The value false hides the link.

   sidebarWidgetId

   Specify the ID of the widget you created in KickApps. In the previous lesson, you wrote down the widget ID displayed in the embed code for the widget.

   sidebarColors

   Specify a layer in the widget for which to allow customers to change the color. Typically, this is the background layer. When the customer clicks the Share link, a "Share this widget" page displays. This page provides options for changing the color of a widget layer.

   feedURL

   Specify the URL for the recipe data displayed the widget you created, for example:

   http://mysite.example.com/wcs/resources/stores/10101/ProjectCollections?responseFormat=atom
   

   widgetIconStyle

   This parameter positions the Share link. Leave the value set to top.

   feedLayer

   Name of the layer in the widget that displays the feed data. In the example shown in the previous lesson, the feed is displayed in a layer named Custom List.

   Now the code snippet for the Share link should look similar to this example:

   <c:import url="${jspStoreDir}Snippets/Marketing/ESpot/RemoteWidgetButtons.jsp">
     
   <c:param name="showWidget" value="true" />
     
   <c:param name="sidebarWidgetId" value="339145" />
     
   <c:param name="sidebarColors" value="background" />
     
   <c:param name="feedURL" value="http://mysite.example.com/wcs/resources/stores/10101/ProjectCollections?responseFormat=atom" />
     
   <c:param name="widgetIconStyle" value="top" />
     
   <c:param name="feedLayer" value="Custom List" />
   </c:import>
   

4. Save and close the JSP file.

5. To test the Share link:

   1. Open the Madisons starter store.

   2. Navigate to the Recipe Collections store page.

   3. Click the Share link. The "Share this widget" page displays, showing a preview of the widget:

      Using the functions on the page, customers can make changes to the dimensions and color of the widget.

   4. Click Share:

      

      Use the functions on the page, customers can share the widget directly to a social network. Alternatively, customers can copy the embed code and then paste it into a Web page outside of WebSphere Commerce.

In this final lesson, you have made the recipe widget available for customers to share from a store page. This concludes the tutorial.

< Previous

+

Search Tips   |   Advanced Search