...

View Full Version : Customizable Product Comparison



[Unknown]
05-11-2007, 06:40 AM
Hello,

I understand my title might not make sense, but I'll do my best to explain it.

Basically, I'm looking for a method of comparing software products for my website. I figured JavaScript was the best method of doing this.

What I want:

There will be 5 products.

Product #1
Product #2
Product #3
Product #4
Product #5

Now, before any information on any product is displayed, there will be 3 select fields. Each select field will contain the products. The visitor will select 3 of the products and the below table will vertically organize the products in a table with each products features.

I have done a visual representation of my idea, sorry if it's poorly done.

http://img516.imageshack.us/img516/6463/examplerg6.gif

If anyone has any questions regarding this, feel free to post.

Thank you very much for any assistance anyone can provide! :D

christslove
05-11-2007, 03:06 PM
So baisically you just want to let the user compare up to 3 different products side by side? I'll give it a go when I get home.

[Unknown]
05-11-2007, 03:07 PM
Yes that's exactly it. Thank you very much :)

I look forward to seeing what you make.

glenngv
05-11-2007, 10:54 PM
<html>
<head>
<script type="text/javascript">
var features = [];
features['product1'] = 'These are the features of <b>product 1</b>.';
features['product2'] = 'These are the features of <b>product 2</b>.';
features['product3'] = 'These are the features of <b>product 3</b>.';
features['product4'] = 'These are the features of <b>product 4</b>.';
features['product5'] = 'These are the features of <b>product 5</b>.';
features['product6'] = 'These are the features of <b>product 6</b>.';
features['product7'] = 'These are the features of <b>product 7</b>.';
features['product8'] = 'These are the features of <b>product 8</b>.';
features['product9'] = 'These are the features of <b>product 9</b>.';

function compareProducts(sel, suffix){
if (sel.value!=""){
//header
document.getElementById("header"+suffix).className="selected";
document.getElementById("header"+suffix).innerHTML=sel.options[sel.selectedIndex].text;

//features
document.getElementById("features"+suffix).className="selected";
document.getElementById("features"+suffix).innerHTML=features[sel.value];
}
else { //nothing selected, set to default
//header
document.getElementById("header"+suffix).className="default";
document.getElementById("header"+suffix).innerHTML='Product here';

//features
document.getElementById("features"+suffix).className="default";
document.getElementById("features"+suffix).innerHTML='Product features here';
}
}
</script>
<style type="text/css">
.default {
font-style:italic;
color:gray;
}
.selected {
font-style:normal;
color:black;
}
</style>
</head>
<body>
<form>
<select name="selProduct1" onchange="compareProducts(this, 1);">
<option value="">Select Product</option>
<option value="product1">Product 1</option>
<option value="product2">Product 2</option>
<option value="product3">Product 3</option>
</select>
<select name="selProduct2" onchange="compareProducts(this, 2);">
<option value="">Select Product</option>
<option value="product4">Product 4</option>
<option value="product5">Product 5</option>
<option value="product6">Product 6</option>
</select>
<select name="selProduct3" onchange="compareProducts(this, 3);">
<option value="">Select Product</option>
<option value="product7">Product 7</option>
<option value="product8">Product 8</option>
<option value="product9">Product 9</option>
</select>

<table border="1">
<tr>
<th id="header1" class="default">Product here</th>
<th id="header2" class="default">Product here</th>
<th id="header3" class="default">Product here</th>
</tr>
<tr>
<td id="features1" class="default">Product features here</td>
<td id="features2" class="default">Product features here</td>
<td id="features3" class="default">Product features here</td>
</tr>
</table>
</div>
</form>
</body>
</html>

[Unknown]
05-11-2007, 11:00 PM
Oh wow, thank you very much!!! :D

glenngv
05-12-2007, 05:36 AM
Glad to help. :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum