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(); </script> <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> </select> <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"> </a> </div> <script type="text/javascript"> options_vector[0]= "7"; </script> <input type="hidden" id="opt-33" value="" /> <input type="hidden" id="opt-25" value="" /> <input type="hidden" id="opt-24" value="" /> </div> <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> </select> <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"> </a> </div> <script type="text/javascript"> options_vector[1]= "2"; </script> <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> <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> </select> <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"> </a> </div> <script type="text/javascript"> options_vector[2]= "3"; </script> <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="" /> </div> </div>
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;
e.g.
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
Tags: javascript jQuery osCommerce PHP
Posted in: Javascrip/AJAX, PHP
June 21, 2010
| 
Mihai Ionescu | 
4 Comments
4 Responses
July 5, 2010 1
dragut calculator. dar cum pasezi mai departe dimensiunile(ca si descriere) si noul pret?
July 6, 2010 2
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 30, 2010 3
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
September 24, 2010 4
Great post! I want to see a follow up to this topic!
Leave a Reply