I Need Help

drumthrasher · 06-16-2008, 04:32 PM

Its not really help, I pretty much need someone to do something...

I need a script, a computer configurator, where the customer can customize their PC and it can automatically subtract/add the prices based on what they want, and maybe at the bottom they can see the total combined price, then they can choose to buy it.

**root** · 06-18-2008, 09:28 AM

If I can find the script, (or I might just make it again). I have on of this made already in javascript.

I'll see if I can find it and get back here

drumthrasher · 06-18-2008, 09:31 AM

Dude that would be great!

Also is it easily customizable? Could I put pictures for each option?

hascet · 06-18-2008, 10:01 AM

I'd also be interested in this.

**root** · 06-24-2008, 08:45 AM

Here is one example. -for quickly pricing up systems.

this is OK for a quick shop, assuming all the prices have different values, when they press buy it'll be the prices that are passed to the next page.

a better example would involve some lookup tables in the script for the prices, that way the component names will get passed to the next script.

I'll have a little work at one of those now.

Code:

<html>
<head>
<script type="text/javascript">
function update()
{
var total, mainboard, processor, ram; //declare variables (1 for each component)

mainboard = document.form1.mainboard.value * 1; //get the selected values from the HTML form
processor = document.form1.processor.value * 1; //*1 to ensure string is recognised as a number not var
ram = document.form1.ram.value * 1;

total = mainboard + processor + ram * 1; //add all the values together as numbers

total = Math.round(total*100)/100; //round to make sure accuracy is 2 decimal places for currency

document.form1.price.value=total; //update the total box


}
</script>
</head>
<body onload="update()">

<form name="form1">
Chose your components
<br /><br />
<select name="mainboard" onchange="update()">
<option value="54.60">Mainboard 1</option>
<option value="32.67">Mainboard 2</option>
<option value="32.68">Mainboard 3</option>
<option value="78.90">Mainboard 4</option>
</select>
<br />
<select name="processor" onchange="update()">
<option value="50.00">Processor 1</option>
<option value="75.00">Processor 2</option>
<option value="80.00">Processor 3</option>
<option value="110.00">Processor 4</option>
</select>
<br />
<select name="ram" onchange="update()">
<option value="20.00">RAM 1</option>
<option value="20.00">RAM 2</option>
<option value="25.00">RAM 3</option>
<option value="30.00">RAM 4</option>
</select>


<br />
Total Price : <input type="text" name="price" />

<input type="submit" value="Buy!"


</form>
</body>
</html>

the example with lookup tables is as follows.

Code:

<html>
<head>
<script type="text/javascript">
function update()
{
var total, mainboard, processor, ram; //declare variables (1 for each component)

mainboard = document.form1.mainboard.value; //get the selected values from the HTML form
processor = document.form1.processor.value;
ram = document.form1.ram.value;

if (mainboard=="m1") { mainboard=32.50; }
if (mainboard=="m2") { mainboard=36.57; }
if (mainboard=="m3") { mainboard=65.00; }
if (mainboard=="m4") { mainboard=75.50; }

if (processor=="p1") { processor=34.62; }
if (processor=="p2") { processor=45.67; }
if (processor=="p3") { processor=65.67; }
if (processor=="p4") { processor=85.67; }

if (ram=="r1") { ram=54.60; }
if (ram=="r2") { ram=56.67; }
if (ram=="r3") { ram=65.67; }
if (ram=="r4") { ram=78.67; }

mainboard = mainboard * 1;
processor = processor * 1;
ram = ram *1;

total = mainboard + processor + ram; //add all the values together as numbers

total = Math.round(total*100)/100; //round to make sure accuracy is 2 decimal places for currency

document.form1.price.value=total; //update the total box
}
</script>

</head>
<body onload="update()">

<form name="form1">
Chose your components
<br /><br />
<select name="mainboard" onchange="update()">
<option value="m1">Mainboard 1</option>
<option value="m2">Mainboard 2</option>
<option value="m3">Mainboard 3</option>
<option value="m4">Mainboard 4</option>
</select>
<br />
<select name="processor" onchange="update()">
<option value="p1">Processor 1</option>
<option value="p2">Processor 2</option>
<option value="p3">Processor 3</option>
<option value="p4">Processor 4</option>
</select>
<br />
<select name="ram" onchange="update()">
<option value="r1">RAM 1</option>
<option value="r2">RAM 2</option>
<option value="r3">RAM 3</option>
<option value="r4">RAM 4</option>
</select>


<br />
Total Price : <input type="text" name="price" />

<input type="submit" value="Buy!"


</form>
</body>
</html>

Now, the user see's the price, and when they press buy you are sent a list of component choices, (m1, p4,r3 mainboard1, processor 4 and ram choice 3 for example).

I guess the only thing left to do for this script is write it in an active lanagage (php/asp etc) so that it pulls data from a database rather than having to edit to script on the webpage to update prices.

and have the choices get filtered so that you have an inteligent script that won't let you match an intel processor to a mainboard with an AMD socket of something.

edit - yes, you can add pictures to the site, it's just plain HTML with javascript.

if you wanted to get really clever you could write custom drop down menus in javascript that actually have the pictures of the components on them.

drumthrasher · 06-25-2008, 03:56 PM

That's actually a pretty good start (look at it here: http://drum.co.nr/files/test.html).

It's kind of plain then again you could spruce it up a bit...but as I don't have a whole lot of scripting skills it could be a while...

**root** · 06-26-2008, 08:00 AM

Well, I couldn't be bothered to do the active page stuff that goes along withit...

though I did revise the script to include a games machine rating score that colours a little bar...

here's the code

Code:

<html>
<head>
<script type="text/javascript">
function update()
{
var total, mainboard, processor, ram; //declare variables (1 for each component)
var mgscore, pgscore, rgscore, gamescore; //new vars for gaming scores


mainboard = document.form1.mainboard.value; //get the selected values from the HTML form
processor = document.form1.processor.value;
ram = document.form1.ram.value;

if (mainboard=="m1") { mainboard=32.50; mgscore=1; }
if (mainboard=="m2") { mainboard=36.57; mgscore=2; }
if (mainboard=="m3") { mainboard=65.00; mgscore=1; }
if (mainboard=="m4") { mainboard=75.50; mgscore=3; }

if (processor=="p1") { processor=34.62; pgscore=0; }
if (processor=="p2") { processor=45.67; pgscore=1; }
if (processor=="p3") { processor=65.67; pgscore=3; }
if (processor=="p4") { processor=85.67; pgscore=3; }

if (ram=="r1") { ram=54.60; rgscore=1; }
if (ram=="r2") { ram=56.67; rgscore=1; }
if (ram=="r3") { ram=65.67; rgscore=2; }
if (ram=="r4") { ram=78.67; rgscore=2; }

mainboard = mainboard * 1;
processor = processor * 1;
ram = ram *1;

mgscore = mgscore * 1;
pgscore = pgscore * 1;
rgscore = rgscore * 1;

total = mainboard + processor + ram; //add all the values together as numbers

score = mgscore + pgscore + rgscore;

total = Math.round(total*100)/100; //round to make sure accuracy is 2 decimal places for currency

document.form1.price.value=total; //update the total box

//reset scoreboard
document.getElementById('game1').style.background = "white";
document.getElementById('game2').style.background = "white";
document.getElementById('game3').style.background = "white";
document.getElementById('game4').style.background = "white";
document.getElementById('game5').style.background = "white";
document.getElementById('game6').style.background = "white";
document.getElementById('game7').style.background = "white";
document.getElementById('game8').style.background = "white";
document.getElementById('game9').style.background = "white";
document.getElementById('game10').style.background = "white";

if (score>="1") {
document.getElementById('game1').style.background = "lightgreen";
}
if (score>="2") {
document.getElementById('game2').style.background = "lightgreen";
}
if (score>="3") {
document.getElementById('game3').style.background = "lightgreen";
}
if (score>="4") {
document.getElementById('game4').style.background = "lightgreen";
}
if (score>="5") {
document.getElementById('game5').style.background = "lightgreen";
}
if (score>="6") {
document.getElementById('game6').style.background = "lightgreen";
}
if (score>="7") {
document.getElementById('game7').style.background = "lightgreen";
}
if (score>="8") {
document.getElementById('game8').style.background = "lightgreen";
}
if (score>="9") {
document.getElementById('game9').style.background = "lightgreen";
}
if (score>="10") {
document.getElementById('game10').style.background = "lightgreen";
}

}

</script>

</head>
<body onload="update()">

<form name="form1">
Chose your components
<br /><br />
<select name="mainboard" onchange="update()">
<option value="m1">Mainboard 1</option>
<option value="m2">Mainboard 2</option>
<option value="m3">Mainboard 3</option>
<option value="m4">Mainboard 4</option>
</select>
<br />
<select name="processor" onchange="update()">
<option value="p1">Processor 1</option>
<option value="p2">Processor 2</option>
<option value="p3">Processor 3</option>
<option value="p4">Processor 4</option>
</select>
<br />
<select name="ram" onchange="update()">
<option value="r1">RAM 1</option>
<option value="r2">RAM 2</option>
<option value="r3">RAM 3</option>
<option value="r4">RAM 4</option>
</select>

<br />
Total Price : <input type="text" name="price" />

<input type="submit" value="Buy!"
</form>
<br />
<br />
<table cellspacing="0" border="0">
<tr>
<td>Gaming suitability : </td>
<td>0</td>
<td width="20" height="20" id="game1"></td>
<td width="20" height="20" id="game2"></td>
<td width="20" height="20" id="game3"></td>
<td width="20" height="20" id="game4"></td>
<td width="20" height="20" id="game5"></td>
<td width="20" height="20" id="game6"></td>
<td width="20" height="20" id="game7"></td>
<td width="20" height="20" id="game8"></td>
<td width="20" height="20" id="game9"></td>
<td width="20" height="20" id="game10"></td>
<td>10</td>
</tr>
</table>
</body>
</html>

OK. so sprucing up the look of it is clearly something that needs to be done. but I'm not sure as I'll bother doing that since it'll really depend on how your page looks as to what how and where you'll want things...

if you want anything included then let me know and I'll see if I can extend the javascript or HTML to be more useful.

drumthrasher, that page is down... but I love the custom 404 message.

drumthrasher · 06-26-2008, 09:17 AM

Updated: http://drum.co.nr/files/test.html

I like the original one better, I'm not just going to offer custom gaming machines but machines for all types of people, mainly for businesses in need of workstations.

dksinghh · 07-01-2008, 12:09 AM

w3 School(www.w3schools.com) is one of the best site for beginners

06-16-2008, 04:32 PM	#1
drumthrasher Fully Optimized Join Date: Oct 2005 Posts: 2,606	I Need Help Its not really help, I pretty much need someone to do something... I need a script, a computer configurator, where the customer can customize their PC and it can automatically subtract/add the prices based on what they want, and maybe at the bottom they can see the total combined price, then they can choose to buy it. __________________ Gateway GT4016 Desktop \| CPU: AMD Athlon 64 3700+ @ 2.2GHz \| RAM: 2GB (4x512MB) \| HDD: 1x200GB, 1x120GB \| Video: ATI HD Radeon 4850 512MB \| OS: Vista Home Premium x86 SP1, Mac OS X Leopard 10.5.6

06-18-2008, 09:28 AM	#2
root Site Team Join Date: Mar 2004 Posts: 6,945	Re: I Need Help If I can find the script, (or I might just make it again). I have on of this made already in javascript. I'll see if I can find it and get back here __________________ I didn’t fight my way to the top of the food chain to be a vegetarian… Im sick of people saying 'dont waste paper'. If trees wanted to live, they'd all carry guns. "The inherent vice of capitalism is the unequal sharing of blessings; The inherent vice of socialism is the equal sharing of miseries."

06-18-2008, 09:31 AM	#3
drumthrasher Fully Optimized Join Date: Oct 2005 Posts: 2,606	Re: I Need Help Dude that would be great! Also is it easily customizable? Could I put pictures for each option? __________________ Gateway GT4016 Desktop \| CPU: AMD Athlon 64 3700+ @ 2.2GHz \| RAM: 2GB (4x512MB) \| HDD: 1x200GB, 1x120GB \| Video: ATI HD Radeon 4850 512MB \| OS: Vista Home Premium x86 SP1, Mac OS X Leopard 10.5.6

06-18-2008, 10:01 AM	#4
hascet Fully Optimized Join Date: Jul 2006 Posts: 3,225	Re: I Need Help I'd also be interested in this. __________________ www.crazycomputers.org

06-25-2008, 03:56 PM	#6
drumthrasher Fully Optimized Join Date: Oct 2005 Posts: 2,606	Re: I Need Help That's actually a pretty good start (look at it here: http://drum.co.nr/files/test.html). It's kind of plain then again you could spruce it up a bit...but as I don't have a whole lot of scripting skills it could be a while... __________________ Gateway GT4016 Desktop \| CPU: AMD Athlon 64 3700+ @ 2.2GHz \| RAM: 2GB (4x512MB) \| HDD: 1x200GB, 1x120GB \| Video: ATI HD Radeon 4850 512MB \| OS: Vista Home Premium x86 SP1, Mac OS X Leopard 10.5.6

06-26-2008, 09:17 AM	#8
drumthrasher Fully Optimized Join Date: Oct 2005 Posts: 2,606	Re: I Need Help Updated: http://drum.co.nr/files/test.html I like the original one better, I'm not just going to offer custom gaming machines but machines for all types of people, mainly for businesses in need of workstations. __________________ Gateway GT4016 Desktop \| CPU: AMD Athlon 64 3700+ @ 2.2GHz \| RAM: 2GB (4x512MB) \| HDD: 1x200GB, 1x120GB \| Video: ATI HD Radeon 4850 512MB \| OS: Vista Home Premium x86 SP1, Mac OS X Leopard 10.5.6

07-01-2008, 12:09 AM	#9
dksinghh Beta Member Join Date: Jun 2008 Posts: 4	Re: I Need Help w3 School(www.w3schools.com) is one of the best site for beginners

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode