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


Create a gift registry remote widget

You can create a Flash widget to display information about a customer's gift registry, such as the event date and the number of gifts still remaining in the registry. Customers can share the widget to a personal Web page. The widget helps to remind friends and family of the upcoming event and provides a direct link back to the gift registry on the storefront. The gift registry information in the widget comes from an Atom feed.

This procedure explains how to create a gift registry remote widget using the KickApps App Studio. Another option is to use a widget service provider other than KickApps, or you can create and host the own widget. In either case, the widget must get its content from the gift registry Atom feed coming from the store.


Before you begin

  1. Make sure the WebSphere Commerce server you plan to use 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 view or edit feed data from a test gift registry in the widget template in KickApps.

    • The feed data will not display in test widgets you embed on external Web pages.

  2. If the server is accessible from the Internet, decide whether to create a test gift registry so that you can see and rearrange the text and images coming from the feed. If you do create a test gift registry, the KickApps App Studio requires the feed URL for the test gift registry.

    To form the URL, you need access to data in the WebSphere Commerce database. You might need help from a store developer to gather this information. Details are provided in the procedure steps.

To create a gift registry remote widget, publish IBM Gift Center for the Madisons starter store on top of the Madisons starter store. Gift registry pages are not included in the base Madisons starter store.

You can create remote widgets for customer-facing stores, including extended sites. You cannot create remote widgets for asset stores.


Procedure

  1. Optional: To create a test gift registry:

    1. On the server set up for remote widgets, log on to the Madisons store as a test customer, and create a gift registry that contains three or four gift items.

    2. Work with a store developer to form the URL for your test gift registry. Do so by replacing the variables in the following URL with actual values for the test gift registry: 

      http://host/wcs/resources/stores/storeId/GiftLists/giftRegistry_ID?responseFormat=atom&guestAccessKey=giftRegistry_guestAccessKey

      The URL variables are:

      host

      The fully qualified host name of the server on which you created the test gift registry.

      storeId

      The store ID of the store for which you are creating the test gift registry. This value is stored in the STORE_ID column of the STORE table.

      giftRegistry_ID

      The ID of the test gift registry you created. This value is stored in the GRGFTREG table in the EXTERNALID column.

      giftRegistry_guestAccessKey

      A randomly generated number that can be used as an access key to allow a guest to view the gift registry. This access key is required in URLs for gift registries so customers other than the gift registry owner can view the gift registry feed or remote widget. This value is stored in the GRGFTREG table in the GUESTACCESSKEY column.
      The following is an example gift registry URL: 

      http://mysite.example.com/wcs/resources/stores/10101/GiftLists/10005?responseFormat=atom&guestAccessKey=-65e4895b:12726956ada:-7fad

  2. Log on to the KickApps affiliate account.

  3. Open the KickApps App Studio.

  4. Click the App Studio tab.

    The remainder of this procedure explains how to create a gift registry remote widget using the WebSphere Commerce widget templates in KickApps. If you are already familiar with KickApps, you can skip this procedure and create the widget in KickApps from scratch using a Custom List component to display the feed in the widget. You can specify the test gift registry URL for the Custom List component.

  5. Select File > New from template.

  6. Click the WebSphere Commerce Templates tab.

  7. Double-click one of the two blue templates for gift registries. These two templates are examples of gift registry remote widgets that you can use as a starting point for the own widget. The templates are identical, except that one is sidebar-style and the other is banner-style.

  8. Optional: If you created a test gift registry to display in the widget editor:

    1. Select the feed_list layer in the center of the template.

    2. In the Content panel, specify the feed URL for the test gift registry, and then click Apply. The images and text from the test gift registry display in the widget.

  9. Use the KickApps App Studio to modify the template to suit your widget. Click on different layers in the widget template to display related KickApps editing panels. For more information about using the KickApps App Studio, click on the blue help icons on the KickApps pages.

    Here are some tips for using the WebSphere Commerce widget templates:

    • You can add text and images to the widget that are not from the feed by dragging new components into the widget. For example, you can delete images from the template and replace them with more suitable images. Keep in mind that text and images that do not come from the feed are static parts of the widget that all customers will see.

    These additional tips apply only if KickApps can access your server from the Internet, making the feed data available for editing:

    • To change or rearrange the feed data in the template, work with the feed_list layer. The templates use a Custom List component to display the gift registry feed. This component is represented in the template as the feed_list layer.

    • The two templates display only a select set of data from the gift registry feed: the gift registry name, the number of items already purchased, the number of items that have not yet been purchased, and the event month, day and year. Each is represented by a component (layer) within the feed_list layer. Your gift registry feed might contain additional images and text that you can display in the widget, even though the template is not displaying that data.

      To include additional feed data in the widget:

      1. Within the feed_list layer, drag in a new text or image component.

      2. Use the KickApps Content panel to select the feed element to display in the component.

    • You might find that text and images from the gift registry that you expected to display in the widget are not showing up in the template, and you cannot select them from feed. This means that a store developer must customize the feed formatting JSP files for gift registries so that the additional data is included in the feed. Then you can try creating the widget again.

  10. Save the widget in KickApps App Studio.

  11. Preview the widget in KickApps App Studio.

  12. In the Content panel, delete the feed URL for the test gift registry, and then click Apply. When a customer shares the widget to a personal Web page, the storefront will build the URL using the correct data for that customer. This is why you should not save the test gift registry URL in the widget.

  13. Optional: Create a second gift registry widget using the other blue gift registry template. This way, customers can choose the layout that fits their personal Web page. The "Share this widget" page for Madisons supports layout options for Sidebar and Banner. These layout options are viewable to customers only if you have two versions of the widget.

  14. Close KickApps App Studio.


What to do next

To allow customers to share this gift registry remote widget from the Madisons storefront, a store developer must associate the widgets you created to the Share link on the Registered Products page. You can use this Share link to test the widget from the customer's perspective. See Enable the Share link for a gift registry remote widget.


Related concepts

Remote widgets

IBM Gift Center for the Madisons starter store


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

Enable the Share link for a gift registry remote widget

Related reference

Troubleshoot remote widgets and feeds

Remote widget setup and implementation checklists


+

Search Tips   |   Advanced Search