IFRAME and Amazon Product Feed:
How to display inline searches in your templates and pagesA Newbie Tutorial
On my HTML pages I figured out how to use SSI to display the results of
amazon_product_feed searches on my web pages. However, Neither the SSI or PHP methods described in
the documentation will work if placed within the templates. I've got this great sidebar in my page design but very few of the useful Amazon Product Feed variables are available at the page template level. What to do?
There are two HTML options <OBJECT> and <IFRAME>. These are fairly well supported on the more popular browsers, though OBJECT is the only one of the two specified in the HTML 4.0 standards. Nonetheless, I went with IFRAME for some of its more useful features.
Two HTML options <OBJECT> and <IFRAME>. These are fairly well supported on the more popular browsers, though OBJECT is the only one of the two specified in the HTML 4.0 standards. Nonetheless, I went with IFRAME for some of its more useful features.
It took some immersion in HTML references and some code from additional sources to get all this working, but it's not rocket science. An IFRAME is just a window layered on top of your main window. You can display stuff in it in much the same way you would the main browser. We're going to make it as transparent and flexible as possible. It's quite amazing the results a couple lines of code can produce! Well, there is a bit more to it than that...
Setting Up the Frame
<iframe name="sidebar" id="sidebar" align="top" allowtransparency="true"
marginwidth="4" width="100%" height="750"
scrolling="auto" frameborder="0"
src="/cgi-bin/Amazon/amazon_heavy_products_feed.cgi?
mode=blended&search_type=SimilaritySearch&input_string=%%Asin%%
&templates=4&link_templates=1&max_results=6&link_max_results=10">
Sorry, your browser does not support IFRAMEs
</iframe>
So we have a child frame appearing in the parent window with the following configuration
- An IFRAME named "sidebar" (we'll be using that later),
- that will hopefully force itself to display at the top of the sidebar
- it's transparent so whatever colour our sidebar is will show through
- as wide as the parent sidebar (less 4 pixel margins on each side)
- will automatically put up scroll bars if there's more data than fits in the frame.
- won't have a border because we already have one in the parent sidebar.
- browsers which don't support IFRAMES will display the message instead.
Nifty. Now inside that IFRAME is a call to the APF script. This call will perform a similarity search on the current value for %%Asin%%. It's calling a special 'heavy' version of the script which I've lightly hacked in order to get the "
heavy" data from AWS, in order to display %%Director%% and %%Starring%% information when available. There's more to this call, but we'll get back to that.
For now, let's finish off the IFRAME implementation.
Resizable IFRAMEs
We've configured our IFRAME to be 750 pixels in height. That's fine when you know how much data the search will return, but we don't. In order to make it resizable, we have to get the IFRAME window and its parent window to have a conversation. "Hey Dad!" "Yes, son?" "I need to be T H I S B I G !!!" Except they're going to talk in javascript. There's a simple example of this
here found on
this page. I'd save you all the digging, but the code's
Terms of Use prevent me from redistributing it. Instead, I'll tell you what you need to do.
