Create a wish list remote widget

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

Create a wish list remote widget

You can create a Flash widget to make a portable version of a wish list. The wish list remote widget displays an Atom feed containing the products that a customer has added to a wish list. Customers can embed the wish list remote widget on a personal Web page so that their friends and family can see gifts they want to receive.
This procedure explains how to create a wish list 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 wish list Atom feed coming from the store.

Before you begin

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 wish list in the widget template in KickApps.

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

If the server is accessible from the Internet, decide whether to create a test wish list so that you can see and rearrange the text and images displayed for each product in the wish list. If you do create a test wish list, KickApps App Studio requires the feed URL for the test wish list.
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.

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

Procedure
Optional: To create a test wish list:
On the server set up for remote widgets, log on to the Madisons store as a test customer, and create a wish list that contains three or four products.
Work with a store developer to form the URL for your test wish list. Do so by replacing the variables in the following URL with actual values for the test wish list:
http://host/wcs/resources/stores/storeId/GiftLists/wishList_ID?responseFormat=atom&guestAccessKey=wishList_guestAccessKey
The URL variables are:

host

The fully qualified host name of the server on which you created the test wish list.

storeId

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

wishList_ID

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

wishList_guestAccessKey

A randomly generated number that can be used as an access key to allow a guest to view the wish list. This access key is required in URLs for wish lists so customers other than the wish list owner can view the wish list feed or remote widget. This value is stored in the GRGFTREG table in the GUESTACCESSKEY column.

The following is an example wish list URL:
http://myserver.example.com/wcs/resources/stores/10101/GiftLists/10005?responseFormat=atom&guestAccessKey=-65e4895b:12726956ada:-7fad
Log on to the KickApps affiliate account.

Open the KickApps App Studio.

Click the App Studio tab.
The remainder of this procedure explains how to create a wish list 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 wish list URL for the Custom List component.

Select File > New from template.

Click the WebSphere Commerce Templates tab.

Double-click one of the two grey templates titled My Wish List. These two templates are examples of wish list remote widgets that you can use as a starting point for your own widget. The templates are identical, except that one is sidebar-style and the other is banner-style.

Optional: If you created a test wish list to display in the widget editor:

Select the feed_list layer in the center of the template.

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

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 the own static text and images 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 wish list 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 wish list feed: product image, product name, and price. Each is represented by a component (layer) within the feed_list layer. Your wish list feed might contain additional images and text that you can display in the widget, such as the product long description, even though the template is not displaying that data.
To include additional feed data in the widget:

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

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

You might find that text and images from the wish list 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 wish lists so that the additional data is included in the feed. Then you can try creating the widget again.

Save the widget in KickApps App Studio.

Preview the widget in KickApps App Studio.

In the Content panel, delete the feed URL for the test wish list, 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 wish list URL in the widget.

Optional: Create a second wish list widget using the other My Wish List 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.

Close KickApps App Studio.
What to do next
To allow customers to share this wish list remote widget from the Madisons storefront, a store developer must associate the widgets you created to the Share link on the Personal Wish List page. You can use this Share link to test the widget from the customer's perspective. See Enable the Share link for a wish list remote widget.

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
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 widget setup and implementation checklists

+
Search Tips | Advanced Search