Member Avatar for #tbone

I was wondering if anyone was aware of a script that would reccomend products from a list on another individual products page?

I would like something that will list three products that a customer might be interested in when they are viewing an item on my site.

I have an ecommerce site where I was told that I needed to use javascript to avoid paying alot of money for something very complex and more than what I need.

Does anyone know if this is possible and if so, do you have a script to get me started?

  • 2 Contributors
  • 7 Replies
  • 334 Views
  • 2 Weeks Discussion Span
  • Latest Post Latest Post by essential

Recommended Answers

All 7 Replies

Member Avatar for essential

Hope this will help.
This simple demo will display different product's and item's for every 5 sec.

<html>
<head>
<title>DEMO</title>
<script type="text/javascript">
<!--
var myItems, rotator, rotate, counter = 0;

var products = function ( ) {
function rotator( rotateThis, delays ) {
   return setTimeout( rotateThis, delays );
};

rotate = rotator("products()", 5000); // Showing different items every 5sec. ( or  5000 msec. )

// You can lists all your preferred product's below.
myItems = [ { product : [ 
   "Product 1 &#8212; Item One", 
   "Product 1 &#8212; Item Two",
   "Product 1 &#8212; Item Three" ] }, // Product List #1

{ product : [ 
   "Product 2 &#8212; Item One",
   "Product 2 &#8212; Item Two",
   "Product 2 &#8212; Item Three" ] } // Product List #2 
];

document.getElementById("show").innerHTML = myItems[ Math.floor(Math.random()*2)].product[counter];
counter++;
counter = ( counter == 3 ) ? 0 : counter;
};
window.onload = products;
// -->
</script>
</head>
<body>

<div id="show"><!-- Item will be diplayed here! --></div>
<br />
<br />
<div id="output"></div>
</body>
</html>
Member Avatar for #tbone

Thanks for the reply.

I feel I was a little unclear with what I am looking for.

When a customer views an item on the site, I want 3 other items to be displayed on that page that are similar to it (recommened items).

For each item, I would like to be able to set what items are reccomened and it displays 3 out of the total # I have set for it.

Then for each other item, they have a different set of recommended items to choose from.

Never changing by itself, except when the page is refreshed and a different item is chosen from each list.

Also, I need to attach links to the recommened items.

Does that make sense? Thanks again for the help.

Member Avatar for essential

This is just a partial of the overall function, you can test this entire program by creating a new document, and then save it as test.html. This demo uses a cookie to save the current state for selected link/item-- items passed by the viewer (or user).
If this concept will match your needs, then i'll make the next move. But if not, then i would like to say that i cannot offer any demo asside from this one. Good day...

<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type="text/css href="#internal"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>JavaScript Demo</title>
<style id="internal" type="text/css" media="screen">
/* <![CDATA[ */
table {
  font : bold 80%/1.6 Verdana, Tahoma, Arial, Sans-Serif;
  border-collapse : collapse;
  border-color : #ccc;
  empty-cells : hide;
  margin : 0 auto;
}
hr {
  border : none;
  background-color : #ccc;
  height : 1px;
  width : 100%; }
caption {
   caption-side : top;
   margin-bottom : .300em;
   color : #708090;
   letter-spacing : 1px;
   text-align : left; }
col {
  border-right: 1px solid #ccc;
 }
td {  
  border-top : 1px solid #ccc;
  color : #778899; }
th { color : #405060; }
td, th {
  padding : .500em 1em .500em 1em; }
/* ]]> */
</style>
<script type="text/javascript">
// <![CDATA[
var catalogue;
var div, li, ol, a, br, p, h1, mycontent, mydetails;
var products, views, deleteItem, showItem;
var lists, sem;
var expDate;
expDate = new Date();
expDate.setTime( expDate.getTime() + (( 24 * 60 * 60 * 1000 ) * 31 ));

/* CONFIGURATION OF ITEMS */
catalogue = { 
imports : { // The rocommended products for the ( IMPORT class ).

// 1. 
"Mazda RX8" : "Information about Mazda RX8", 
// 2.
"Honda NSX" : "Information about Honda NSX.",
// 3.
"Mitsubishi Evolution 7" : "Information about Mitsubishi Evolution 7" },

muscle : { // Recommended product for the ( MUSCLE class )
// 1.
"Ford GTO" : "More details about the Ford GTO",
// 2.
"Chevrolet Camaro" : "More details about the Chevrolet Camaro", 
// 3.
"Ford Mustang GT" : "More details about the Ford Mustang GTO" } 
};

/* NO NEED TO EDIT THE LINES BELOW */

products = function() {
saveItem = function( items, value, expires, log ) {
   if ( navigator.cookieEnabled ) {
   item = items + "=" + escape( value );
   item += (( expires !== null ) ? "; expires=" + expires.toGMTString() : "" );
   item += (( log !== null ) ? "; path=" + escape( log ) : "" );
   document.cookie = item;
   }
   else {
   return alert( false );
   } 
};

deleteItem = function( items ) {
   if ( items !== null ) {
   exp = new Date();
   exp.setTime( exp.getTime() - (( 24 * 60 * 60 * 1000 ) * 31 ));
   document.cookie = items + "=; expires=" + expDate.toGMTString() + "; path=/";
   }
};

views = function( items ) {
   if ( items !== null ) {
      try {
      lists = document.cookie.match("(^|;) ?" + items + "=([^;]*)(;|$)");
      return (unescape( RegExp.$2 )); 
      } 
      catch( e ) {   
      lists = document.cookie.indexOf( items + "="); 
         if ( lists !== -1 ) {
         lists = lists + items.length+1;
         sem = document.cookie.indexOf(";", lists);
         sem = ( sem == -1 ) ? document.cookie.length : ""; 
         return ( unescape(document.cookie.substr( lists, sem )));
         }
      }
   }
};

recommened = function( thisProduct ) {   

thisProduct = ( document.getElementById ) ? document.getElementById( thisProduct ).title : document.all[thisProduct].title;

saveItem("category", thisProduct, expDate, "/");
};
   
return { 
saveItem : saveItem,
views : views,
showItem : recommened
   }; 
}();

window.onload = function() {
cat = ( products.views("category").toLowerCase() )
div = ( document.getElementById ) ? document.getElementById("showMe") : document.all.showMe;
ol = document.createElement("ol");
   if ( cat !== null ) {
   div.innerHTML = "";
      for ( var x in catalogue[cat] ) {
         try {
         br = document.createElement("br");
         a = document.createElement("a");
         li = document.createElement("li");
         p = document.createElement("p");
         mycontent = document.createTextNode( x + " " ); 
         mydetails = document.createTextNode( catalogue[cat][x] );  
         a.href = "#";
         a.appendChild( mycontent );
         p.appendChild( mydetails );
         p.insertBefore( br, mydetails );
         p.insertBefore( a, br );
         li.appendChild( p );
         ol.appendChild( li );
         div.appendChild( ol );          } 
         catch( error ) {
         (( error.description ) ? alert( error.description ) : alert( error.message ));
         }
      }
   }  
};

// ]]>
</script>
</head>
<body>
<div id="main">
<table frame="box" rules="none" width="100%" summary="JavaScript demo">
<caption>Product Line</caption>
<colgroup align="center">
<col style="background-color : #eee; border-bottom : 1px solid #ccc;" />
<col style="width: 25%;" />
<col style="width: 25%;" />
<col style="width: 25%;" />
</colgroup>
<thead>
<tr>
<th>CLASS</th>
<th colspan="3" Style="background-color : #f0f0f0;">MODELS</th>
</tr>
</thead>
<tfoot>
<tr>
<td style="background-color : #fff; text-align : left; font-weight: normal;" colspan="4"><div id="showMe">All items will be dislayed here!
</div>
<hr />
</td>
</tr>
</tfoot>
<tbody>
<tr>
<th><a id="a1" href="./test.html" title="IMPORTS" onclick="products.showItem( this.id );">IMPORTS</a></th>
<td>Nissan Skyline GTR</td>
<td>Toyota Supra RZ</td>
<td>Honda S2000 Type-<span style="color:#F00">R</span></td>
</tr>
<tr>
<th><a id="a2" href="./test.html" title="MUSCLE" onclick="products.showItem( this.id );">MODERN MUSCLE</a></th>
<td>Dodge Viper GTS</td>
<td>Dodge Challenger</td>
<td>Shelby GT Cobra</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Member Avatar for #tbone

I copied pasted that into a new doc in dreamweaver and saved it but when I previewed it and clicked on the links, nothing happened. Then I tried it on an acutal site but when I clicked the links there, it just took me to page IE couldn't display.

Ill keep trying but I did find a site that has an example of exactly what I am looking for.

http://www.newport-news.com/shop/product_single.aspx?style_id=36357206&index=0&gp_coll_id=7516&gp_cat_id=7517&nav_cat_id=7520&category_id=2624

On the right side they have items say "We also Suggest". I thought it might help understand what I am trying to do.

Thanks for all the help.

Member Avatar for essential

It's just the partial of whole program, i'm just showing how the concept will go.
I've visited the site and i've seen all those products on the right panel. Those items are preloaded and can be achieved using CSS.

Member Avatar for #tbone

Sorry it took me so long to get back to you. For some reason I did not get notified you had responded.

Wow. So do I even need Javascript to accomplish that?

And if not, do you know of a place you can point me to figure out how to do it in CSS?

Member Avatar for essential

Yeah, you don't need javascript to get that, everything can be done using CSS.
So, here's a best place for you--to gather 1000's of free (xHTML/FLASH/CSS) templates.
And i'm sure you'll find all the things you need from there.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.