corner Amazon Web Services using HTML and XSLT  corner
space design

Design

 

 

corner

Tutorial - Starting with Amazon Web Services

corner
HTML Tutorial

    bookmark

Web Design

Step by Step Instructions

Step 1. Become an Associate

Apply to become an Associate and obtain an Associate ID

Step 2. Web Services

Visit
http://www.amazon.com/gp/browse.html/104-8401708-7789521?node=3435361

From this page

  • Download the free developer's kit
  • Apply for a free developer's token

Step 3. Using XSLT

Because some of my hosts do not allow access to the cgi bin and don't allow PHP etc. I have used the XSLT stylesheet method. This tutorial is about using this method of :

HTML and XSLT

3a. Open you Amazon kit and index.html

Kit > AmazonWebServices > API Guide > index.html

Make a shortcut to this index.htm file which links to all the reference files. Rename this short cut to ReferenceIndex

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

 

3b. Exercise 1. Obtain a result from Amazon using an ASIN search

  • Create a new folder called web_services.
  • Create a new HTML page called test_services and save it in the web_services folder. Type into the body Testing Amazon Web Services, within an H1 tag.
  • In the ReferenceIndex file navigate as follows:
    Product and Catalog Data > ASIN and ISBN Searches
  • Look for the Request Format and copy the code

  • Paste this code into your HTML page test_services
  • Alter the code in your HTML page as follows:
    • If required alter amazon.com to your local Amazon site e.g. amazon.co.uk if your site is a UK site.
    • Enter your Associates ID in place of [Associates ID goes here]
    • Enter your Developer Token in place of [Developer Token goes here]
    • Enter an ASIN number 0201354934 in place of [ASIN/ISBN goes here].
    • Enter lite in place of [lite or heavy]
      • Lite information downloads faster, you can replace with heavy if required when you get everything working
    • Add an additional locale parameter. Add the following after lite
      &locale=uk. Make sure you use the correct locale. us, uk, de, etc. This locale must match to your local Amazon site e.g. amazon.co.uk if your site is a UK site.
    • Ensure that there is no Red font formatting left in the code
  • Save your HTML file
  • Copy your altered code
  • Go on line. Open up your web browser and paste into the address bar of your web browser and Go.

3c Examine the result

  • Note: A correct result will be a page of code and not a typical Amazon page which you may have expected - there is more work to do yet. This code should start similar to this:
    <?xml version="1.0" encoding="UTF-8" ?>
    - <ProductInfo xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="http://xml.amazon.com/schemas3/dev-lite.xsd">
    - <Request>
    ..........................................etc
  • Check near the bottom of your code for any Error messages. E.G. Your ASIN number may not be accepted. If you have major errors check your code. Also note that Amazon sometimes return error messages when it should not.
  • Save this code as asin_search0201354934.xsl in your web_services folder.  You will use this file later for offline testing.
  • If your test failed try the following example for the UK to see what a xsl  result looks like.
    http://xml.amazon.co.uk/onca/xml3?t=smallm206andtheo&dev-t=DUCJ169Q7EKVP&AsinSearch=0201354934&type=lite&locale=uk&f=xml
  • If your test submission worked OK then back in your HTML page turn the altered code into a proper A tag, by placing
    <a href="
    in front of the code and
    " target="_blank">A test ASIN Search for book with ASIN number.
    after the code.
  • Save your HTML page then test that it works.

Step 4 Using a XSLT Style sheet.

In order to transform the data that is returned by Amazon into some thing tat looks like a web page, you must use a XSLT Style sheet. You can prepare a style sheets from scratch or use one or more of the style sheets already prepared.

In the next step you will use the smallest of the files the lite version

Step 5 Copy lite-data-to-html.xsl from the Kit

  • Use Windows Explorer and navigate to
    kit\kit\AmazonWebServices\XSLTSamples\lite-data-to-html.xsl
  • Alternatively search for the file
  • Copy the file to your Web services folder

Step 6. Amend the file

  • Alter the copied file in your Web services folder
  • The file is a text file so can be altered in Notepad if you have not got a better editor. I am told that the MS Script Editor that comes with Word is a good one.
  • Find and replace the 2 entries of D24H52G74BUDRY with your own token

Step 7. Amend your HTML to use the style sheet

  • On your HTML page alter the
    f=xml"
    to point to your style sheet as follows:
    f=lite-data-to-html.xsl"
  • Save the HTML file test that it works.

The following uses a different style sheet

Click here to see the above code working example

Note you may have a variety of XSLT stylesheets that you can use to provide a variety of outputs.

You can see this how this works by using the Developer Scratch Pad and clicking the bottom radio button and seeing the different results produced by selecting different stylesheets in the drop down box.

You can then download the Stylesheet to see the coding.

 

space

 

 

space
Search this site for a word or phrase. Place phrases inside "double quotes"

Buy Domains from 1&1 and Save Money!

Buy web hosting from 1&1- Get More for Less Money

 

 

 

space
space

 

This tutorial will be continued shortly, with the following

Step 8. Insert a £ currency sign

Step 9. Insert a CSS style sheet

Step 10. Alter the design

When altering the HTML that is embed with the XSLT style sheet you must remember that it is dynamic HTML, which has a few extra rules to standard HTML.

  • Use lower case for tags and attributes.
  • Make sure ALL tags are closed. This includes tags such as img, br ect.that do not normally have a closing tag. Close them as per the following examples.
    <img src="http://tutorials4u.com/amazon-services/graphic/fs-truck-icon.gif" alt="Delivery truck" width="29" height="22" border="0"/>
    <br />
  • Study the code in the stylesheets for more examples

Method to debug or edit an XSL stylesheet script

The following link describes a method of how to test your stylesheet. The advantage is that you obtain more information than the error messages returned by Amazon.

Method to debug or edit an XSL stylesheet script if you are using IE6:

A more advanced Stylesheet, Amazon XSL Explorer v109, is also obtainable from this site and how to convert it for the UK market is described in the next tutorial .

 

For UK sites

Replacing $ sign to £ sign

Find the line
<xsl:value-of select="$OurPrice"/>
and add some extra code as follows:
<xsl:text>£</xsl:text> <xsl:value-of select="$OurPrice" />

Do the same for the line
<xsl:value-of select="$ListPrice"/>

Preventing weird results in % calculations

Alter
<xsl:when test="$OurPrice = $ListPrice">
to
<xsl:when test="$OurPrice = $ListPrice or not(number($ListPrice))">

Converting the Amazon explorer 109 Stylesheet to use in the UK

:

corner
Previous Top of Page Next page
Design

 

corner
space

 



In Association with Amazon.co.uk
In Association with Amazon.co.uk

In Association with Amazon.co.uk

 

 

Leisure Time - book your holiday or flights with our UK sponsors


Last minute

Save 10%
Book a Thomas Cook holiday Book a Thomson holiday Book a Portland Holidays Direct
Thomas Cook flights Thomson holiday flights Flybe Cheap flights British Airways flights My Travel flights
The London Pass - Adult The London Pass - Adult

Welcome to The London Pass, the brand new leisure pass that lets you experience the very best that London has to offer. With free entry to over 50 attractions, free public transport and the ability to beat the queues, The London pass helps you to make the most of your stay.


More Tutorials by John McGuinn

M206
Home page of a tutorial in programming in Smalltalk, a object-oriented programming language. This is an ideal tutorial for anybody learning Smalltalk and of particular interest to students on courses: M206 at the OU Open University, and course CSC517 at NCSU North Carolina State University

C programming tutorial
Home page of a tutorial in programming in C This is an ideal tutorial for anybody learning C programming language, and of particular interest to students on courses: T223 at the OU Open University.

tutorials4u.com
Home page of tutorials4u.com

Leeds my home town

Relax in the sun.

Benidorm   Tenerife   San Marino apartments to rent

 

Top

AireWeb Web Design
Leeds Web design

Copyright © John McGuinn 2001-03

.