/    Sign up×
Community /Pin to ProfileBookmark

How do I make an interactive price builder for customers?

It’s been quite a while since I’ve done any web dev. so I’m completely lost.

I’m looking to create an automatically updating builder for custom orders, a good example (although extreme) would be alienware.com:

[url]http://www.alienware.com/Configurator_Pages/mj-12_5500.aspx?SysCode=PC-MJ12-5500-R1&SubCode=SKU-DEFAULT[/url]

I don’t need something extravagent, but some basic code/directions would be greatly appreciated.

to post a comment
JavaScript

3 Comments(s)

Copy linkTweet thisAlerts:
@mityaDec 17.2005 — The concept is merely storing a whole load of variables depending on input selection. If done on one page this is via javascript; if done over several pages - i.e. clicks and page transitions - this is done via session variables or variables carried over into the url each time (clumsy).

So a radio button, for example, has a checked value, with the price in it represents. onClick = call a function, which adds that price to the total price (itself a variable), and deletes the price of the previously selected radio button if necessary.

It's all just about constant variable redefinition and constant updating, via onClick/onChange events on your fields. The grand total on the alienware example is simply a span/div whose innerHTML (document.getElementById('myspan').innerHTML) is redefined on change.

An alternative way to the onClick/onChange events is to run a script which checks the entire form and gets all the current selections to generate the total. This could be done with setInterval in the body's onLoad tag, i.e. onLoad="javascript:setInterval('recalculate()', '100');" where 100 is the number of milliseconds after which a recalculation should be done.

If you're any good with Flash that's pretty useful for these - again it's just var redefinition across frames/scenes. I built one a while back at http://www.vpoint.tv/content/interact/est_gen.php?action=main

Hope that gets you off the mark.
Copy linkTweet thisAlerts:
@hpram99authorDec 17.2005 — thank you, I'll update you with some code if I have any issues.
Copy linkTweet thisAlerts:
@hpram99authorDec 17.2005 — ok, here is the code:

http://www.rotaryrepair.com/pricebuilder/engine.html

I adopted a few functions from a public script somewhere, I need to get something more specific, what exactly do I do now? How do I add the price in here?

Any suggestions for a good javascript editor? I own a copy of UltraEdit-32 and it works great for code highlighting, but is there something better out there?
×

Success!

Help @hpram99 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 3.29,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,

tipper: Anonymous,
tipped: article
amount: 10 SATS,
)...