Embed an Amazon aStore on Wordpress with a functional URL that accepts ASIN etc arguments

Through the Amazon affiliate program you can create what's called an Amazon aStore - which is a functional "store" filled with products you specify from the Amazon website, that then earn you affiliate commissions. You curate the products shown on your store, and presumably that'll be what makes your store more valuable is the effort you take to select appropriate products for your audience. Whether the Amazon aStore is a good way to make money is an open question - I'm not convinced that if I landed on an aStore page, that I would buy a product through that page. But on the other hand, Amazon has offered this aStore feature for several years so obviously some people find it a valuable tool for earning money.

Suppose you log into your Amazon Affiliate account, create an aStore, then what do you do? Amazon gives you a URL hosted at astore.amazon.com. You could try and drive traffic to Amazon's URL, but then you're building up the popularity of Amazon's URL and not your own. It's better for the aStore to appear on your own URL so you have some modicum of control and have SEO benefit of sorts.

Amazon does provide an iframe snippet allowing an aStore to be embedded on another website. It's easy enough to create a Wordpress page and paste the aStore iframe snippet in, then call it a day. The aStore will show up nicely embedded inside your page and it works fine.

But, I wanted more. For example - study the URL's generated as you browse your aStore. You'll see "?ASIN=NNNNNN" pop up when viewing an individual page, and "?node=NN" show up when viewing a category page. What if your page that embeds your aStore could take those URL parameters, and pass them through to the aStore. That would let you build a URL on your website to a specific Amazon product just by including the "ASIN=" attribute. That could be cool, eh?

We start this by creating a custom page template. I looked for a way to do this completely with a custom plugin, but couldn't find enough information about creating a custom page out of a plugin. There has to be a method, but I couldn't find it. On the other hand, it's trivially easy to make a regular Page and override it's template with a custom page template. Then your custom page template contains the code to receive the ASIN= attribute and pass it through to the iframe.

By the way, with this custom page template you no longer paste the iframe snippet into the page body because it's in the custom page template.

This custom page template is written for the Nirvana theme. You should adjust the top and bottom part to match your theme.

<?php
/**
 *
 * Template Name: Embed Amazon aStore  -- CHANGE THIS TO SUIT YOUR PREFERENCE
 */
get_header(); ?>

<section id="container" class="<?php echo nirvana_get_layout_class(); ?> ltp-homepage">
<div id="content" role="main">
<?php cryout_before_content_hook(); ?>

<?php

$storeURL = 'http://astore.amazon.com/CODE-TAG-FOR-YOUR-STORE';

global $wp_query;
if (isset($wp_query->query_vars['ASIN'])) {
    $ASIN = $wp_query->query_vars['ASIN'];
}
if (isset($wp_query->query_vars['amznode'])) {
    $node = $wp_query->query_vars['amznode'];
}

if (!empty($ASIN)) {
    $storeURL = $storeURL .'/detail/'. $ASIN;
} else if (!empty($node)) {
    $storeURL = $storeURL .'?_encoding=UTF8&node='. $node;
}
?>

<iframe src="<?php echo $storeURL; ?>" width="100%" height="1500"
        frameborder="0" scrolling="yes"
        style="overflow-y: scroll !important"></iframe>

<?php cryout_after_content_hook(); ?>
</div><!-- #content -->
<?php nirvana_get_sidebar(); ?>
</section><!-- #primary -->

<?php get_footer(); ?>

This is fairly straightforward if you understand creating custom page templates. So let's walk our way through that process.

Paste this code into a file in your template folder - I named mine "astore-embed.php" but choose whatever file name you like. As you edit the file, change the code to match the URL of your store.

Now in the Dashboard, go to Page and select Add New. Over in the right-hand-side of the page creation screen you'll see -- under Page Attributes -- "Page Template" and a dropdown listing all the possible templates. If you created the above template correctly, your template name will show up. Select it.

Give the page a title like "Store" and then publish it.

The next thing to do is to accommodate the special query attributes for this page. Wordpress will want to strip those attributes out, but we want to be able to see them. Add this code to the functions.php in your template:

function nirvana_ltp_add_query_vars($aVars) {
    $aVars[] = "ASIN"; 
    $aVars[] = "amznode"; 
    return $aVars;
}
 
// hook add_query_vars function into query_vars
add_filter('query_vars', 'nirvana_ltp_add_query_vars');

This function name is written for my child theme based on the Nirvana theme. Again, adjust the function name to match your theme.

What this does is append those query attribute names to the allowed list. In the template shown above those query variables are picked up from the $wp_query object, and then used to construct the correct iframe snippet.

Now you can visit http://longtailpipe.com/store/?ASIN=0062386964 (substituting your URL specifics) and see the custom page in action.