Displaying Amazon.com Product Information on Your Web Site

• Introducing Data Views
• Example
• How to display Amazon.com product information on your Web site
• See it in action
• Additional resources
   

Introducing Data Views

For example, Amazon.com allows developers to tap into a continually updated XML data feed that contains the entire list of products offered on Amazon.com, along with images, pricing, and product information. This information can be displayed in Data Views on sites created with Windows SharePoint Services. The remainder of this article discusses how you can use the Amazon Web Service and FrontPage 2003 to display Amazon.com product information on your Web site created with Windows SharePoint Services.

Example

This example shows a list of books sold on Amazon.com that you could include on your Web site. This list is created by connecting to the Amazon.com Web Service and pulling down a list of the top 10 books that meet a  key word search on the words "FrontPage 2003." Because the list is generated on-the-fly from Amazon.com's continually updated XML data source, the list is kept current without making any updates to the Web page.

How to use Data Views to display Amazon.com data on your Web site

Here are the steps we took to create the Data View shown in the example section. The first area to work on is to add the Amazon Web Service to the data sources you can choose from.

1. Open FrontPage 2003 and the page you want to insert the Data View into. Click the page where you want the Data View to appear.
2. Click Insert Data View on the Data menu. The Data Source Catalog task pane opens.
   
   
    
3. Click the plus sign next to XML Web Services, and then click the Add to Catalog link. The Data Source Properties dialog box opens.
   
   
    
4. Type http://soap.amazon.com/schemas3/AmazonWebServices.wsdl in the Service description location box on the Source tab.
   
   Tip: The URL for the service description location is case sensitive.
    
5. Click the Connect Now button. Connection information from the Amazon Web Service is automatically inserted into the Connection Info section of the Data Source Properties dialog box.
6. Click the Details button. The Parameter Details dialog box opens.
   
   
    
7. Click * keyword and then click the Modify button. The Parameter dialog box opens.
   
   
    
8. Type the key word or key words you would like to use in the Value box, such as "FrontPage 2003," and then click OK.
9. Repeat steps 7 and 8 for each of the following parameters:
   
    

   Parameter	Setting to Use
   page	1 (displays 1 page of items, which for books displays information about 10 books)
   mode	books (other choices include: Apparel, Baby, Classical Music, DVD, Electronics, Outdoor Living, Kitchen & Housewares, Magazines, Popular Music, Computers, Camera & Photo, Software, Toys & Games, Tools & Hardware, Video, and Computer & Video Games)
   tag	[optional] type your Amazon Associates Program number here if you want to earn revenue for your referrals.
   type	lite (displays a limited set of data about the products; use heavy if you want to choose from more detailed data about the products)
   devtag	type your Amazon Web Services developer's token here



10. Click OK on the Data Source Properties dialog box. AmazonSearchService has been added to the XML Web Services list in the Data Source Catalog task pane.
    
    

Now that the Amazon Web Service has been added to the list of available Web Services, the next step is to insert a Data View that displays the data.

11. Click where you want to insert the Data View of the Amazon Web Service key word search.
12. Click AmazonSearchServices on the Data Source Catalog task pane, and then click Insert Data View. The Data View is inserted into our page as an XSLT presentation of a bulleted list of details.
    
    
     

The Data View has been inserted onto the page, but the list style, the fields displayed, and the format of the list need work. Here are the steps we took to format the data in the example.

13. Click the Style link on the Data View Details task pane. The View Styles dialog box opens.
    
    
     
14. Click the basic table style, and then click OK. The table format changes to look like this:
    
    
     
15. Click one of the "amazon:Details" links, then click Insert on the Table menu, and then click Rows or Columns. The Insert Rows or Columns dialog box opens.
16. Make sure that the Columns and Left of selection radio buttons are on, and then click OK. A column is inserted.
    
    
     
17. Click in one of the cells to the left of "amazon:Details" and then scroll down to the ImageURLsmall field in the Data View Details task pane.
18. Right-click ImageURLsmall and then click the Insert as Picture link. Images of books are automatically inserted into the left column.
19. Click one of the book images, then click Select on the Table menu, and then click Column.
20. Right-click on the cells in the first column that are now highlighted, and then click Cell Properties. The Cell Properties dialog box opens.
21. Make sure that there is a check mark next to the Specify width option, and then type 48 into the Specify width box. Make sure that the In pixels radio button is on, and then click OK. The width of the first column fits the size of the book images.
    
    
     
22. Click one of the fields that says "amazon:Details" in the Data View.
23. Right-click the ProductName field in the Data View Details task pane, and then click Insert as Text. Book titles are added.
24. Type End to position your cursor after the book titles and then type " by ".
25. Right-click the Author field in the Data View Details task pane, and then click Insert as Text. Author names are inserted.
26. Type End to position your cursor after the author, and then type ", published by ". Right-click the Manufacturer field and then click Insert as Text. The book publisher name is inserted.
27. Type End to position your cursor after the publisher and then type " ".
28. Right-click the ReleaseDate field and then click Insert as Date & Time. The Format Date and Time dialog box opens.
29. Make sure that there is a check mark next to the Show Date option, and then click the date format you want to use in the Date Format drop-down box.
30. Make sure that the Show Time check box is empty, and then click OK.
    
    
     
31. Type End to position your cursor after the date you just inserted, and then type Enter to insert space.
32. Right-click the Url field, and then click Insert as Hyperlink. The link to more information about the book is added.
33. Click the text that says "xsi:type" at the top of the list.
34. Click Select on the Table menu, and then click Row.
35. Click Delete Rows on the Table menu. The row is deleted.
36. Save the page by clicking Save on the File menu. Be sure to save the page with a .aspx file extension.

See it in action

The finance and human resources sample sites have recommended reading lists that are actually Data Views of XML-based data coming from the Amazon Web Service.

Additional resources

Here are links to more articles about lists.

	Converting an Excel Spreadsheet into a List
	Using Lists to Create Collapsible Navigation Bars