Add a "Product Bundle" Widget to Your Website

This tool provides a simple way to add a "Product Bundle Widget" to your web site. The widget displays one to ten products of your choice and allows the visitor to easily purchase all (or some) of the products at once.

To use the widget, you need to know the ASINs of the products you wish to combine into a bundle. You can find the ASIN of a product at Amazon.com. When viewing the page for the product, look for "ASIN:" or "ISBN-10" under the "Product Details" section.

To display a Product Bundle Wizard on your site, add the following HTML to your web page's source:

<iframe src="http://www.a2sdeveloper.com/oblio.php?Tag=oblio-20&Mode=Cart&Template=CLASSIC&ASINs=B00005A06N,B00005R1N6,B00005YUPQ" width="100%" style="height:300px;" scrolling="no" marginwidth="0" marginheight="0" frameborder="0"></iframe>

Change "oblio-20" to your Associates tag and follow ASINs= with a comma-separated list of the ASINs you wish to include in the "bundle." You may list one to ten ASINs, but the built-in templates generally work best with two through four products. Based on the template you use, you may need to change the "height" value or change "scrolling" to "yes."

The Template parameter determines the appearance of the widget. It can take any of the following values:

PLAIN	The products are listed in rows with no borders. A drop-down list is provided for the visitor to select the quantity of each product. [See Example]
CHECK	The products are listed in rows with no borders as with the PLAIN template, but a check box is displayed to choose products to add to the cart rather than a drop-down list to select the quantity. [See Example]
GRID	The products are listed in rows with no borders and alternating background colors. A drop-down list is provided for the visitor to select the quantity of each product. [See Example]
GRIDCHECK	The products are listed in rows with no borders and alternating background colors as with the GRID template, but a check box is displayed to choose products to add to the cart rather than a drop-down list to select the quantity. [See Example]
CLASSIC	The products are listed in columns with borders similar to Amazon's "Product Links." A drop-down list is provided for the visitor to select the quantity of each product. [See Example]
CLASSICCHECK	The products are listed in columns with borders similar to Amazon's "Product Links." A check box is displayed to choose products to add to the cart rather than a drop-down list to select the quantity. [See Example]
http://...	The file at the specified URL is used as a template. See: Using a Custom Template below.

Here's an example of the output of the tool. It displays three products:

For the example above, the "frameborder" parameter was set to "1" to draw a border around the widget.

Notes

The products may not be listed in the same order as the ASINs you specify.

In order to support A2SDeveloper.com, the widget will use our Associates tag instead of yours 20% of the time.

Using a Custom Template

If you wish more flexibilty in defining the appearance of the widget, you can use your own template. To use your own template, you create the template as a text file that you save on your page like a web page's HTML file. Use the URL of the file in the "Template" parameter of the widget's code and the widget will read the file and use it as a template for the widget.

Create the template using normal HTML tags plus a few special tags that the widget represents. Here's an example template to get you started:

<form target="_blank" method="POST" action="http://www.amazon.com/gp/aws/cart/add.html">

<style type="text/css">
table.oblio {
	border-width: 1px;
	border-spacing: ;
	border-style: solid;
	border-color: black;
	border-collapse: collapse;
	background-color: white;
}
table.oblio th {
	border-width: 1px;
	padding: 1px;
	border-style: node;
	border-color: black;
	background-color: white;
	-moz-border-radius: ;
             font-family:'Arial', sans-serif;
             font-size:10px; 
}
table.oblio td {
	border-width: 1px;
	padding: 1px;
	border-style: none;
	border-color: black;
	background-color: white;
	-moz-border-radius: ;
             font-family:'Arial', sans-serif;
             font-size:10px; 
}
</style>

<table align="center">
  <tr>
    $BEGIN$
     <td>
      <table class="oblio">
      <tr  valign="middle" height=120>
     <td align="center" width=120>
       <input type="hidden" name="ASIN.$COUNT$" value="$ASIN$"/>
       <input type="hidden" name="OfferListingId.$COUNT$" value="$OFFER$"/>
        <a href="$URL$" target="_blank"><img valign="middle" src="$SMALL$" border="0"></a><br />
     </td>
     <tr height=90 valign="middle">
     <td align="center" width=120>
        <a href="$URL$" target="_blank">$TITLE$</a><p>
        Price: $PRICE$<br />
     <tr height=30>
     <td align="center" valign="middle" width=120>
        Quantity: <select name="Quantity.$COUNT$"><option value ="0">0</option><option value ="1" selected>1</option><option value ="2">2</option><option value ="3">3</option><option value ="4">4</option></select>
      </td>
      </tr>
      </table>
      </td>
    $END$
  </tr>
</table>

The widget uses Amazon's "Add-To-Cart" form. The form requires certain parameters to be passed to it for each item to be added to the cart. The template above shows how this is done by the widget. The widget reads the template and returns the text in the template with the special tags replaced by information about the products in the bundle.

The special tags are:

$BEGIN$ / $END$ - Since one or more products may be included in the bundle, the special $BEGIN$ and $END$ tags are used to begin and end the section of the template that is repeated once for each product. The template must contain one, and only one, $BEGIN$ tag and one $END$ tag following it. All the other special tags may be used only between these two tags.

$COUNT$ - The $COUNT$ tag is replaced by a number, 1 for the first product, 2 for the second, etc. It is used to provide the unique identofier required to add products to Amazon's cart. Use it in the ASIN and OfferlistingId hidden fields that are required by the "Add-To-Cart" form.

$MOD$ - The $MOD$ tag is replaced by 0 or 1 - alternating with each product. It may be used to select a style for alternating rows when listing products.

$ASIN$ - The $ASIN$ tag is replaced by the ASIN of the current product. Use it as shown in the example template to tell Amazon what product to add to the cart.

$OFFER$ - The $OFFER$ tag is replaced by the "Offer ID" of the current product. Products at Amazon.com are often sold by more than one merchant. To ensure that the price displayed by the widget matches the price of the item in the cart, the widget specifies the offer ID. Use the $OFFER$ tag as shown in the example template to tell Amazon what offer for the product to add to the cart. The Widget usually lists the offer made by Amazon.com itself.

$SMALL$ / $MEDIUM$ / $LARGE$ - The $SMALL$, $MEDIUM$, and $LARGE$ tags replaced by URLs of small, medium, and large images of the products.

$URL$ - The $URL$ tag is replaced by the URL of the product's page at Amazon.com.

$PRICE$ - The $PRICE$ tag is replaced by the price of the product.

A2SDeveloper.com caches templates so it doesn't have to access your site as often to get the template. If you're testing a new template, add "&NoCache=Yes" to the end of the "http://www.a2sdeveloper.com/oblio.php..." URL to force A2SDeveloper.com to read the template even if it has a cached copy. Remove the "NoCache" parameter as soon as you've finished testing the template.

If you wish, your template can be the HTML code for a complete web page. Just edit your page to insert the special tags where you wish the "Product Bundle" widget to be displayed. Then use the URL of the widget directly in links instead of the original page's URL.