Construct navigation for your Amazon aStore using php and YUI
February 26, 2008
PHP

Amazon "aStores" are very easy to set up, but you will probably find you want to customize the navigation, particularly if you want to integrate the store into your own site. I'm in the process of doing just that, and decided to construct my own navigation system for the DesignSpace book shop.. The php script that creates the tabs for the store is based on the YUI (Yahoo UI) "Tab View Control" and can be easily adapted to your own site.

This is just a down and dirty approach but it is a good start for you to build from.


More after the jump...
Ads by Google
Posted by ellen at February 26, 2008 11:24 AM

Using the script

  1. Create your aStore at Amazon if you haven't already. Note the node numbers from each of the permalinks on your categories.
  2. Decide what the top-level tab categories will be.
  3. Get the YUI tab view control and upload the files to your site.
  4. Create a list of tab-sets for the second level navigation. This is where the node numbers come in. Each category is denoted by its node number in the variable name, id and tab parameter: 
    

    $tabs6= '<ul class="yui-navset bd">';
    
$tabs6.='<li class="first selected" id="tab6"><a href="shop.php?tab=6" >Web Development</a></li>';
    
$tabs6.='<li class="" id="tab180"><a href="shop.php?tab=180" >CSS</a></li>';
    
$tabs6.='<li class=" " id="tab183"><a href="shop.php?tab=183">Javascript</a></li>';
    
$tabs6.='<li class="last" id="tab181"><a href="shop.php?tab=181">DHTML</a></li>';
    
$tabs6.='</ul>';

    Save the file as "tabs.php". A sample "tabs.php" file is shown here:

    

     <?php
    


    //-----"tabs.php"--------//
    
$tabs6= '<ul class="yui-navset bd">';
    
$tabs6.='<li class="first selected" id="tab6"><a href="shop.php?tab=6" >Web Development</a></li>';
    
$tabs6.='<li class="" id="tab180"><a href="shop.php?tab=180" >CSS</a></li>';
    
$tabs6.='<li class=" " id="tab183"><a href="shop.php?tab=183">Javascript</a></li>';
    
$tabs6.='<li class="last" id="tab181"><a href="shop.php?tab=181">DHTML</a></li>';
    
$tabs6.='</ul>';
    


    $tabs180= '<ul class="yui-navset bd">';
    
$tabs180.='<li class="first " id="tab6"><a href="shop.php?tab=6" >Web Development</a></li>';
    
$tabs180.='<li class="selected" id="tab180"><a href="shop.php?tab=180" >CSS</a></li>';
    
$tabs180.='<li class=" " id="tab183"><a href="shop.php?tab=183">Javascript</a></li>';
    
$tabs183.='<li class="last" id="tab181"><a href="shop.php?tab=181">DHTML</a></li>';
    
$tabs180.='</ul>';
    


    $tabs183= '<ul class="yui-navset bd">';
    
$tabs183.='<li class="first " id="tab6"><a href="shop.php?tab=6" >Web Development</a></li>';
    
$tabs183.='<li class="" id="tab180"><a href="shop.php?tab=180" >CSS</a></li>';
    
$tabs183.='<li class=" selected" id="tab183"><a href="shop.php?tab=183">Javascript</a></li>';
    
$tabs183.='<li class="last" id="tab181"><a href="shop.php?tab=181">DHTML</a></li>';
    
$tabs183.='</ul>';
    


    ?>
    
$tabs181= '<ul class="yui-navset bd">';
    
$tabs181.='<li class="first " id="tab6"><a href="shop.php?tab=6" >Web Development</a></li>';
    
$tabs181.='<li class="" id="tab180"><a href="shop.php?tab=180" >CSS</a></li>';
    
$tabs181.='<li class="" id="tab183"><a href="shop.php?tab=183">Javascript</a></li>';
    
$tabs181.='<li class="last selected" id="tab181"><a href="shop.php?tab=181">DHTML</a></li>';
    
$tabs181.='</ul>';
    
//------Art tab-------// 
    
$tabs231= '<ul class="yui-navset bd">';
    
$tabs231.='<li class="first selected" id="tab231"><a href="shop.php?tab=231" >Art</a></li>';
    
$tabs231.='<li class="" id="tab232"><a href="shop.php?tab=232" >Design</a></li>';
    
$tabs231.='<li class="last" id="tab236"><a href="shop.php?tab=236">How-to</a></li>';
    
$tabs231.='</ul>';
    


    $tabs232= '<ul class="yui-navset bd">';
    
$tabs232.='<li class="first " id="tab231"><a href="shop.php?tab=231" >Art</a></li>';
    
$tabs232.='<li class="selected" id="tab232"><a href="shop.php?tab=232" >Design</a></li>';
    
$tabs232.='<li class="last" id="tab236"><a href="shop.php?tab=236">How-to</a></li>';
    
$tabs232.='</ul>';
    


    $tabs236= '<ul class="yui-navset bd">';
    
$tabs236.='<li class="first" id="tab231"><a href="shop.php?tab=231" >Art</a></li>';
    
$tabs236.='<li class="" id="tab232"><a href="shop.php?tab=232" >Design</a></li>';
    
$tabs236.='<li class="last selected" id="tab236"><a href="shop.php?tab=236">How-to</a></li>';
    
$tabs236.='</ul>';
    


    //-----Sci Fi-------// 
    



    
$tabs7= '<ul class="yui-navset bd">';
    
$tabs7.='<li class="first selected" id="tab7"><a href="shop.php?tab=7" >SciFi Favorites</a></li>';
    
$tabs7.='<li class="" id="tab9"><a href="shop.php?tab=9" >Fantasy Adventure</a></li>';
    
$tabs7.='<li class="last" id="tab261"><a href="shop.php?tab=261">Graphic Novels</a></li>'; 
    
$tabs7.='</ul>';
    



    
$tabs9= '<ul class="yui-navset bd">';
    
$tabs9.='<li class="first " id="tab7"><a href="shop.php?tab=7" >SciFi Favorites</a></li>';
    
$tabs9.='<li class="selected" id="tab9"><a href="shop.php?tab=9" >Fantasy Adventure</a></li>';
    
$tabs9.='<li class="last" id="tab261"><a href="shop.php?tab=261">Graphic Novels</a></li>'; 
    
$tabs9.='</ul>';
    


    $tabs261= '<ul class="yui-navset bd">';
    
$tabs261.='<li class="first " id="tab7"><a href="shop.php?tab=7" >SciFi Favorites</a></li>';
    
$tabs261.='<li class="" id="tab9"><a href="shop.php?tab=9" >Fantasy Adventure</a></li>';
    
$tabs261.='<li class="last selected" id="tab261"><a href="shop.php?tab=261">Graphic Novels</a></li>'; 
    
$tabs261.='</ul>';
    
//-----Gizmos-------// 
    



    
$tabs231= '<ul class="yui-navset bd">';
    
$tabs231.='<li class="first selected" id="tab231"><a href="shop.php?tab=231" >Art</a></li>';
    
$tabs231.='<li class="" id="tab232"><a href="shop.php?tab=232" >Design</a></li>';
    
$tabs231.='<li class="last" id="tab236"><a href="shop.php?tab=236">How-to</a></li>';
    
$tabs231.='</ul>';
    


    ?>


  5. Create a php page using your site theme, which will display the tabs, and the store's pages within an iframe. Example code is shown here:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
  <title>Your Store Title</title>
  <link type="text/css" rel="stylesheet" href="css/site2007.css" />
  <link rel="stylesheet" type="text/css" href="/yui/build/fonts/fonts-min.css" />
  <link rel="stylesheet" type="text/css" href="/yui/build/tabview/assets/skins/sam/tabview.css" />
  <script language="JavaScript" type="text/javascript" src="js/querystring.js"></script>
  <script language="JavaScript" type="text/javascript" src="js/toggleChapter.js"></script>
  <script> var gtopic= qsParm['tab'];</script>
<style type="text/css">
  <!--
  html, body, #main {height:auto;}
  #smallTitle{ float:none;position:relative; margin:24px 25px 24px 25px;  }
  iframe {width:100%;height:780px;scroll:auto; }
  .yui-navset {width:100%;} /* IE: width */
  .yui-navset a {text-decoration:none;}
  .yui-navset ul, .navset li {margin:0;padding:0;list-style:none;}
  .yui-navset li {float:left;display:inline;}
  .yui-navset li a:hover {text-decoration:underline;}
  .yui-navset ul:after {clear:both;content:'.';display:block;height:0;visibility:hidden;} /* clear non-IE */
  .yui-navset ul {zoom:1;} /* clear IE */
  .yui-navset .bd ul {border-top-width:1px;border-top-style:solid;font:78%/1.2em verdana;margin:0;padding:.6em 0 .6em .4em;}
  .yui-navset .bd li {border-left-style:solid;border-left-width:1px;display:inline;padding:0 1em;}
  .yui-navset .bd li.first {padding-left:0;border:0;}
  .yui-navset .bd li.selected a {text-decoration:underline;}
  
  -->
  </style>
  <!--[if IE ]>
  <style type="text/css">
iframe{ width:830px;height:800px;  }
  </style>
  <![endif]-->
  <?php 
  require_once('includes_shop/tabs.php');
  if(!$_GET['tab']){$tab=183;} 
  else if($_GET["tab"]){ $tab=($_GET["tab"]); }
  ?>
</head>
<body class=" yui-skin-sam" >
<div id="main" >
  <?php include('navbar.php'); ?>
  
  <div id="smalltitle">
  <span class="style1">Your Site Title <span class="dots">::</span> 
  <span class="st">Your Store Title</span></div>
 
   
  <div class="clear" style="margin-bottom:16px;"></div>
  
  <table id="layoutTable" border="0" style="width:100%;height:100%;">
  <tr valign="top">
  <td id="left2cols"  valign="top" > 
  <ul><h2 style="text-align:left;color:#003366;font-size:16px;">Want to know more about the topics on this site?  </h2></ul>
<div id="level1tabs" class="yui-navset">
  <ul class="yui-nav ">
  <li id="maintab6"><a href="shop.php?tab=6"><em>Web Developers</em></a></li>
  <li id="maintab232"><a href="shop.php?tab=232"><em>Art</em></a></li>
  <li id="maintab7"><a href="shop.php?tab=7"><em>SciFi</em></a></li>
  <li id="maintab260"><a href="shop.php?tab=260"><em>Everything iPod</em></a></li>
  </ul> 
  
  <div class="yui-content bd toggle" id="tab<?php  echo $tab ?>">
  <?php 
  print ${'tabs'.$tab};
  
  ?>
  <iframe src="http://astore.amazon.com/thedesignspac-20?%5Fencoding=UTF8&node=<?php echo $tab ?>"   frameborder="0" name="storeFrame" style="padding-left:-18px;"></iframe>
  
  </div><!--/yui-content bd toggle-->
  
  
  </div><!--/id="level1tabs"-->


     
    
    
    


     
    
  </td>
    
  <!--<td width="1" id="rightCol"  valign="top">
    
  
    
  
    
  </td>-->
    
  </tr></table> 
    
  
    
  </div> <!--end left2col"-->
    
  </div><!--end main-->
    
  
    
    
    
  </body>
    
  </html>



    Ads by Google

Ads by Google

Related Entries:


 RSS   |   Contact Me
Ads by Google