Link to product details in an aStore iframe

It’s easy to link to product detail pages in a standalone Amazon store, or to use the target attribute with a custom navigation menu on the same web page as an aStore iframe. But what if you have several product reviews on various pages of your site, and want to link to their product detail page inside your Amazon store iframe?

This question was asked twice in one week on a discussion board I frequent, so, out of curiosity, I decided to figure out a simple way to do it with web pages and with a WordPress blog. First, the target attribute cannot be used with links on different pages than the iframe. The iframe’s src attribute must be changed to load a different page. Fortunately, we can do that with a script. I used jQuery for my ASP.Net website and PHP for WordPress. You could also use JavaScript without the jQuery library or ASP.Net, depending on your site requirements.

Anatomy of an Amazon Store iframe

The generated aStore iframe contains the basic information needed to embed your store on a typical web page with a wide content area:

<iframe src="http://astore.amazon.com/affiiateID" width="90%" height="4000" scrolling="no" frameborder="0" /></iframe>

Most Amazon associates modify the basic iframe to use all available horizontal space in a content div, reduce the height to 1000 or 1200px, and set scrolling to auto, so that a vertical scrollbar can appear when needed. In order to access the iframe via the target attribute, it needs an id and name. To manipulate it with a script, an id is necessary:

<iframe id="astore" name="astore" src="http://astore.amazon.com/affiiateID" width="100%" height="1200" scrolling="auto" frameborder="0"/></iframe>

Link format

Links to product detail pages on a standalone aStore are in this format:

<a href="http://astore.amazon.com/affiliateID/detail/ASIN">Displayed Product Text</a>

Deep links into an embedded iframe go to the page containing the iframe and include a parameter for the ASIN, or product ID number:

<a href="http://astore.amazon.com/affiliateID?azdp=0123456789">Displayed Product Text</a>

The "azdp" parameter is so named to prevent any conflict with WP’s own parameters. That’s why we can’t use a simple "p" for "page".

WordPress Solution

First, create a custom page template for the aStore to get rid of the sidebar(s), unless you have a very wide WP template. A full-width aStore needs about 800px of horizontal space. To do this, save your page.php file under a new name, such as store.php. You need access to the file system via your web host’s CPanel or FTP to do this. Edit the store.php file in your favorite editor or in your WordPress Dashboard, Appearance, Editor panel.

At the top of store.php page, add this code to identify the template:

<?php
/* Template Name: AStore */
?>

Inside the WP template "Loop," I added a short block of PHP code to grab a parameter named azdp from the URL’s query string. If the parameter exists, the script writes a modified astore iframe tag to the store page. If it does not exist, the standard astore iframe tag is written to the page. The param "azdp" contains the ASIN. You can name it anything you want, but WP uses “p” for page, so use something else to avoid conflicts:

<?php
if (isset($_GET['azdp'])) {
$dp = $_GET['azdp'];
echo "<iframe src='http://astore.amazon.com/AffiliateID/detail/$dp' width='100%' height='1200' frameborder='0'></iframe>";
} else {
echo "<iframe src='http://astore.amazon.com/AffiliateID' width='100%' height='1200' frameborder='0'></iframe>";}
?>

Replace AffiliateID with your own AffiliateID or the trackingID you are using with the store. Links that go to the aStore page on this blog would look something like this:
<a href="http://greenetea.com/real-tea/?azdp=B0032A8P2K">Japanese Izu Matcha</a> Japanese IzuMatcha

Finally, edit the Page with the aStore and select the AStore template (or whatever you named it) from the template dropdown on right side of the editing screen. If the page already contained an aStore <iframe> tag, delete it. The page works fine without any content. Remember that your iframe is written to the page by PHP in the aStore page template. If you forget and leave it in place, the astore will be rendered twice.

The main issue I see with this method is that the browser’s address bar does not change as visitors click around in the aStore. It wouldn’t anyway, but with the additional parameter, the URL shown in the address bar might be a little confusing.

jQuery Solution

jQuery works nicely with non-blog websites that are not primarily coded in PHP. If you do not already have it, add the jQuery library to your website and call it using a <script> in the <head> tag of the webpage containing the aStore, or in your site template. Get the jQuery plugin "getUrlParam" by Mathias Bank.

Paste the (preferably minified) script into a javascript file, such as geturlparam.js and call it using a <script> tag in the <head> of the web page containing the aStore or in your template, after jquery.js.

Next, on the web page containing the aStore iframe, add the following script. The script does not try to change the src of the iframe (which must have an id) unless there is a query string in the URL containing the parameter named "p". You can name the parameter anything you want, as long as you adjust the script. The value of the “p” param is Amazon’s product ID number, or ASIN:

<script type="text/javascript">
$(document).ready(function(){
var newSrc = $(document).getUrlParam("p")
if (newSrc !== null) { 
$('#aStore').attr('src','http://astore.amazon.com/affiliateID-20/detail/'+newSrc);
} })
</script>

Links that go to your web page with the aStore follow this pattern:

<a href='http://astore.amazon.com/affiliateID-20?p=ASIN>Good Book</a>

Here's an example link that goes to a demo aStore on one of my websites:
http://greeneteapot.com/2009/09/very-narrow-amazon-store.html?azdp=1601381255

Test on your Site

I am not absolutely certain that nothing bad happens to sessions or cookies, if you use the deep links, but I doubt it, since other people create their own navigation system with aStores. The links themselves seem to work just fine.