osCommerce jQuery price calculator


Let’s assume that we have to build a price calculator for a osCommerce website, that needs to have price based on dimensions(input from user – length, width), attributes, for each attribute there are more than 1 options with different prices for each option.

For the website that I had to build this calculator i had the attributes displayed in selects(drop downs), and one specific attribute it was displayed in div’s(material), because i needed to show picture for each option.
The attributes prices are not displayed in select options by default so from the code u need to put the prices into hidden input fields so u can use them into calculator.

Once i had that covered i needed a way to get the selected values every time user plays with the drop downs and get their prices to use in the calculator.

Let’s assume the following output code:

<div class="product-options-page">
<span>Optiuni disponibile:</span><br />
<script type="text/javascript">
var options_vector = new Array();
<div class="options">
Actionare: <select name="id[7]" id = "7">
<option value="33" SELECTED>Alege optiunea</option>
<option value="25">De la dreapta la stanga</option>
<option value="24">De la stanga la dreapta</option>
<div class="question-mark">
<a href="images/help/actionare.gif" alt="Actionare">
<img src="images/question_mark.png" border="0" alt="" width="15" height="15">
<script type="text/javascript">
options_vector[0]= "7";
<input type="hidden" id="opt-33" value="" />
<input type="hidden" id="opt-25" value="" />
<input type="hidden" id="opt-24" value="" />
<div class="options">
Sistem de prindere: <select name="id[2]" id = "2">
<option value="4">Pe rama (+2.00RON)</option>
<option value="3">Pe perete (-8.00RON)</option>
<option value="37" SELECTED>Alege optiunea</option>
<div class="question-mark">
<a href="images/help/sistem_de_prindere.gif" alt="Sistem de prindere">
<img src="images/question_mark.png" border="0" alt="" width="15" height="15">
<script type="text/javascript">
options_vector[1]= "2";
<input type="hidden" id="opt-4" value="_2.00" />
<input type="hidden" id="opt-3" value="-8.00" />
<input type="hidden" id="opt-37" value="" />
<div class="options">
Tip inchidere/deschidere:<select name="id[3]" id = "3">
<option value="13">Normala (+1.00RON)</option>
<option value="14">Opusa (+2.00RON)</option>
<option value="15">Cortina (+8.00RON)</option>
<option value="39" SELECTED>Alege optiunea</option>
<div class="question-mark">
<a href="images/help/tip_inchidere_deschidere.gif" alt="Tip inchidere/deschidere">
<img src="images/question_mark.png" border="0" alt="" width="15" height="15">
<script type="text/javascript">
options_vector[2]= "3";
<input type="hidden" id="opt-13" value="_1.00" />
<input type="hidden" id="opt-14" value="_2.00" />
<input type="hidden" id="opt-15" value="_8.00" />
<input type="hidden" id="opt-39" value="" />

Te signs from the input values marks math operators, the “_” is the replacement for “+”, because i had some troubles in JavaScript with it.

Note the array variable from JavaScript, i used it to get the id’s of the attributes so i can get the price value in JavaScript.
The following function is responsible with price grabing for the attributes options:

function get_selects(){
var price = '';
var opt_selected;
for(i = 0; i< options_vector.length; i++){
var id = options_vector[i];
select_id = '#'+id;
opt_selected = $(select_id).val();
price += $('#opt-'+opt_selected).val(); //concat
return price;

Variable “options_vector” is the one defined in the output page earlier. The returned result is a string that i will parse with another function that will replace the signs, with
math operators and will return the final result.
So at the end we have:
dimensions: height, width
price: which is in square meters
attributes prices:
material price: which is also an attribute but since is displayed with div’s each material has it’s value in a hidden input from which the value is taken on click.

The final function returns:

((length * width)/1000000)*price + (material_price*((length * width)/1000000)) + options_price

Dimensions are given in milimeters that’s why i had to divide by 1 million;
height:1500 mm
width: 4000 mm
option 1: -9 eur
option 2: 7 eur
option 3: 2.5 eur
material: 6 eur
price: 160 eur/m2

((1500*4000)/1000000)*160 + ((1500*4000)/1000000)*6)+(-9+7+2.5) =  996.5 eur

Finally, there’s another very important peculiarity of what does Cialis that brings it so high above its alternatives. It is the only med that is available in two versions – one intended for use on as-needed basis and one intended for daily use. As you might know, Viagra and Levitra only come in the latter of these two forms and should be consumed shortly before expected sexual activity to ensure best effect. Daily Cialis, in its turn, contains low doses of Tadalafil, which allows to build its concentration up in your system gradually over time and maintain it on acceptable levels, which, consequently, makes it possible for you to enjoy sex at any moment without having to time it.

  • cristi says:

    dragut calculator. dar cum pasezi mai departe dimensiunile(ca si descriere) si noul pret?

    July 5, 2010 at 5:50 pm
  • Mihai Ionescu says:

    Dimensiunile le concatenez cu x (1000×2300) si le pasesz dintr-un input ascuns apoi le salvez in baza de date atunci cand se adauga produsul, pretul calculat este tot intr-un input ascuns, dar se calculeaza usor pt ca am toate datele si doar folosesc fomula matematica.

    Dimensiunile le trimit asa ca sa fac diferenta intre produse. (200×1200) != (1200×200) ca produs, chiar daca pretul e acelasi.

    July 6, 2010 at 9:31 am
  • It was very interesting for me to read the blog. Thank you for it. I like such topics and everything connected to this matter. I would like to read more on that blog soon.

    Anete Kuree

    July 30, 2010 at 4:11 pm
  • Anonymous says:

    Great post! I want to see a follow up to this topic!

    September 24, 2010 at 12:15 am

Comments are closed.

By continuing to use the site, you agree to the use of cookies. More information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.