To link to a specific aStore category from a separate web page or site, it’s necessary to change the src (source) of the iframe “on-the-fly” by using a script. The target attribute of the iframe cannot be used when the link and the iframe are on different web pages.
This post contains instructions and a script to accomplish deep-linking into an aStore category. It builds on information in the post, Link to product pages in your Amazon aStore iframe on Blogger, and in a similar post for WordPress users.
Here are the steps to enable category links
1. First, please experiment on a draft copy of your aStore page in case something goes wrong! On the draft page, paste your aStore iframe tag. Edit the tag to add id and name attributes, as shown below. Doing this creates a hook that can be referenced in a script. The name attribute is needed by older versions of IE. Do replace yourTag-20 with your own associateID:
<iframe id="astore" name="astore" src="http://astore.amazon.com/yourTag-20" width="100%" height="1200" frameborder="0" scrolling="auto"></iframe>
2. If you’re not already using jQuery, add a <script> tag that calls the jQuery library in the <head> tag of your blogger or web page template. Add it after your meta tags and stylesheet links, and above any jQuery plugins (without a line break before the closing script tag):
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js">
</script>
</head>
3. Copy getURLparam.js from http://www.mathias-bank.de/jQuery/jquery.getUrlParam.js and paste the code into a text editor, such as Notepad. Save it as a backup copy named getUrlParam-original.js
4. Go to http://www.refresh-sf.com/yui/ and paste the same code into the big empty code box. Select File Type JS; check the box for "Minify only, no symbol obfuscation," and check the box for "Redirect output." Click the Compress button. Copy the output and paste it into a text file named getUrlParam.js
5. Upload getUrlParam.js to your server and add a script tag with it as the src below the script tag for the jQuery library. If you put the script in a folder named “scripts,” the tag would be: <script type="text/javascript" src="/scripts/getUrlParam.js"></script>
If that's too much work, paste the output into a <script> tag in the <head> tag below the script that loads the jQuery library.
6. Paste the following script below the other two on your aStore page, still in the <head> tag:
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
var newSrc = $(document).getUrlParam('azdp');
if (newSrc !== null) {
var n = newSrc.length;
if (n > 4) {
$('#astore').attr('src','http://astore.amazon.com/yourTag-20/detail/'+newSrc);}
else {
var qs = '\?_encoding=UTF8\&node='+newSrc;
$('#astore').attr('src','http://astore.amazon.com/yourTag-20'+qs);}
} })
//]]>
</script>
7. Test in your browser by creating a link that goes to your aStore test page, using a parameter for a category. Test a product ASIN as well to make sure the script works for both products and categories.
For example: http://www.greeneteapot.com/p/real-tea.html?azdp=24 (a category) or http://www.greeneteapot.com/p/real-tea.html?azdp=B0050QORMQ (a product)
WordPress users can use a PHP script to emit the appropriate iframe tag in a WP Page template. I’ve added that information in response to a comment on another site.
I wouldn’t go hog wild with external links into an aStore, but a few well-chosen links into important store categories will provide an extra level of functionality to your store promotions without creating a pile of html pages.
If all this is too daunting, the simple solution of having separate pages for some of your aStore categories works quite well. Each category has a special link with its unique node number in the query string (the stuff after the question mark). On each page, embed an aStore iframe with the appropriate category node as the aStore src attribute. To get the category node links, mouse over your category navigation widget and copy each URL OR edit your aStore, open each category and copy the Permalink.
Enjoy!
0 comments:
Post a Comment