June 04, 2004

IFRAME and Amazon Product Feed:

Posted at 09:46 PM Gems, Instruction Manual, Notebook, Toolbox
How to display inline searches in your templates and pages

A 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.
  • First, view the source code of this page and find the line 
    <script type="text/javascript">
    Copy that line and everything following it until you get to 
    </head>
    and paste the whole block into your parent page somewhere inside the the <head> container. Posted by Patrick at June 4, 2004 09:46 PM | TrackBack
Trackbacks: Blogs linking to this entry.