Auto Update Price on Option Change

[mlong]

Hey gang,

Just wanted to let everyone know that there is a great tutorial on how to auto update the price of things when the option changes on the product page. http://www.jackwdavis.com/2012/02/22/auto-update-price-in-opencart-product-page-on-option-selection/.

this tutorial is great but it does not work so well with multiple options. I thought i would share the code i came up with.

enjoy.

this goes in header.tpl in replace of the stuff jack had put there. you still need to read his tutorial to set up product.tpl

Code: Select all

<script type="text/javascript">
$(document).ready(function() {
   $('.option').change(function() {
   var OriginalPrice = $('#thisIsOriginal').text();
   var OriginalCurrency = OriginalPrice.substring(0, 1);
   OriginalPrice = OriginalPrice.substring(1);
OriginalPrice = OriginalPrice.replace(",","");
   var newPriceValue = $('.option :selected').text();
 
   
   var iChars = "$";
   if(newPriceValue.match(/\d+\./g) != null){

      
   
   var position1 = newPriceValue.indexOf("(");
   var position2 = newPriceValue.indexOf(")");
   position1 = position1+3;
   var finalPriceValue = newPriceValue.substring(position1, position2);
      var txt = newPriceValue;
    

txt = txt.replace(/,/g, '');

array=txt.match(/(?!$)\d+(\.\d+)/g);

var total = 0;
for (var ii = 0; ii < array.length; ii++) {
 total += array[ii];
 }
 
 if(1 < array.length)
{

 var newtotalfinal = eval(array.join('+'));



if(newPriceValue.match(/\d+\./g)== null)
   {
   newtotalfinal = "0";

   }
OriginalPrice = Number(OriginalPrice);
newtotalfinal = Number(newtotalfinal);

newtotalfinal = newtotalfinal + OriginalPrice
   newtotalfinal = newtotalfinal.toFixed(2);
   newtotalfinal = newtotalfinal.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
   $('#priceUpdate').text(OriginalCurrency + newtotalfinal);
} else
{

   if(newPriceValue.match(/\d+\./g)== null)
   {
   finalPriceValue = "0";

   }
   finalPriceValue = parseFloat(finalPriceValue.replace(",", "")) + parseFloat(OriginalPrice.replace(",", ""));
   finalPriceValue = finalPriceValue.toFixed(2);
      newtotalfinal = finalPriceValue.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
   $('#priceUpdate').text(OriginalCurrency + newtotalfinal);
}

   }
   
   else {

    var finalPriceValue = "0";
   OriginalPrice = OriginalPrice.replace(",","");
   OriginalPrice = Number(OriginalPrice);
   newtotalfinal = Number(finalPriceValue);
   newtotalfinal = newtotalfinal + OriginalPrice;
      newtotalfinal = newtotalfinal.toFixed(2);

   newtotalfinal = newtotalfinal.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
     $('#priceUpdate').text(OriginalCurrency + newtotalfinal);
   
   }
 




 });
});
</script>


[JAY6390]

Very nice. I've edited the title because the "FREE CODE!!!!" on both ends of it was a bit excessive don't you think?

[mlong]

Let me know if u have qs

[JAY6390]

I've moved this to the Free Contributions area since you've edited your title again to make people aware your mod is free...now the forum it's in speaks for itself

[ecoleman]

This is good, but also flawed.
Not all currencies only have one symbol and some currencies display the symbol at the end of the price and not before.

This javascript will only work for currencies with a single symbol before the price such as £9.99 or $9.99.
9.99€ will fail.

-- EDITED LINK AS COMMERCIAL --

[mlong]

thats a quick fix....
change

Code: Select all

 var position1 = newPriceValue.indexOf("(");
   var position2 = newPriceValue.indexOf(")");
   position1 = position1+3;
   var finalPriceValue = newPriceValue.substring(position1, position2);
      var txt = newPriceValue;


to

Code: Select all

 var position1 = newPriceValue.indexOf("(");
   var position2 = newPriceValue.indexOf(")");
   position1 = position1+2;
   position2 = position2-1;
   var finalPriceValue = newPriceValue.substring(position1, position2);
      var txt = newPriceValue;


[CorySncl]

Hi,
Any idea if this could be modified slightly to show a second price that has the auto update of options + the product price?

SO I would have a static price that says: 'Starting at: $30.00'
Then under the options it would have the automatically updated price... Aka: 'Total: 35.00ea'.


Any help would be appreciated! Thanks!!!

[mlong]

the original price is contained the variable originalprice

[CorySncl]

I was able to figure it out. Thank your help and your awesome script!!!

PS; I figured out how to make it work properly with a item that is on special:
On product page, Change
From:

Code: Select all

<div id="thisIsOriginal" style="visibility: hidden;"><?php echo $price; ?></div>

To:

Code: Select all

<div id="thisIsOriginal" style="visibility: hidden;"><?php if (!$special) { ?><?php echo $price; ?><?php } else { ?><?php echo $special; ?><?php } ?></div>

[richwelle11]

will this codes work on the version. 1.5.3.1?



-

[CorySncl]

Yes, My site is running 1.5.3.1 and it's working fine

will this codes work on the version. 1.5.3.1?



-

[richwelle11]

hi CorySncl Thanks now i have different plan i would like to make my option price being updated with the price + the additional on options
ex
the main price is 20$

option price:
(Large +15)
(Medium+10)
(small+5)

i would like this to happen below

option price:
(Large $35)
(Medium $30)
(small $5)

can you help me?
i found this vqmod code but it doesnt seems to work

Code: Select all

<!-- Created using vQmod XML Generator by UKSB - http://www.opencart-extensions.co.uk //-->
<modification>
   <id><![CDATA[Show resulting price in product options - 1.5.1.3]]></id>
   <version><![CDATA[2.0.2]]></version>
   <vqmver><![CDATA[1.0.9]]></vqmver>
   <author><![CDATA[haydent]]></author>
   <file name="catalog/controller/product/product.php">
      <operation>
         <search position="replace" offset="11"><![CDATA[foreach ($option['option_value'] as $option_value) {]]></search>
         <add><![CDATA[               foreach ($option['option_value'] as $option_value) {
                  if (!$option_value['subtract'] || ($option_value['quantity'] > 0)) {
                  $x = '';
               
                     if($option_value['price'] != '0.0000'){
                     if((float)$product_info['special']) {
                     
                           if ($option_value['price_prefix'] == '+') {
                              $option_price = $product_info['special'] + $option_value['price'];
                           } elseif ($option_value['price_prefix'] == '-') {
                              $option_price = $product_info['special'] - $option_value['price'];
                           }                     

                           
                        
                       } else {
                      
                             if ($option_value['price_prefix'] == '+') {
                              $option_price = $product_info['price'] + $option_value['price'];
                           } elseif ($option_value['price_prefix'] == '-') {
                              $option_price = $product_info['price'] - $option_value['price'];
                           }                      

                           
                        
                       }
                      
                                             
                         $x = $this->currency->format(
                           $this->tax->calculate(
                              $option_price,
                              $product_info['tax_class_id'],
                              $this->config->get('config_tax')));
                      }
                  
                     $option_value_data[] = array(
                        'product_option_value_id' => $option_value['product_option_value_id'],
                        'option_value_id'         => $option_value['option_value_id'],
                        'name'                    => $option_value['name'],
                        'image'                   => $this->model_tool_image->resize($option_value['image'], 50, 50),
                        'price'                   => $x,
                        'price_prefix'            => ''
                     );
                  }
               }]]></add>
      </operation>
   </file>
</modification>

or you have another way ? Please im using v1.5.3.1 Thanks

[CorySncl]

The way I would do this is to set the item price to $0.00 then set the option prices to the price you want them to say.

Then, I would change the code on the product page from <?php echo $price; ?> to say the price of your cheapest option.

Note that this setup will not work of you have more then one set of options.

And it should be a simple mod to remove the '+' from the options.

[libertad]

Hi there,

Does anyone know of an extension that will auto increase the price of all products based on the sales volume.

All products 1 -25 base sale value is $35., so Product 1 -25 all cost $35 until the first product is sold.
So whether you buy product 1 or 25 the first product sold will be $35.

After product 1 is sold, product 2 auto increases to $36 and so it carries on until product 25 is sold for $60.

Thanks in advance for the help

[hudbarnett]

Hi

I have been trying to add this into my page but i don't quite understand where to put the code for the product.tpl. Would someone who has already done this please paste the code here so that i can see where the changes were made.

Thank you

Hud

[CorySncl]

It doesn't Have an exact position, just anywhere near the top.

Hi

I have been trying to add this into my page but i don't quite understand where to put the code for the product.tpl. Would someone who has already done this please paste the code here so that i can see where the changes were made.

Thank you

Hud

[andersonnarciso]

here dont work, return "NaN".. Why guys?

[cartamodello]

This works perfectly! Big thanks to the original poster :-)

[Update: I'm randomly getting $NaN issues now! I've reversed all changes made between previous working status and now, and I simply can't get it to work consistently. I just can't work out why it's suddenly acting up.]

I don't know if I'm missing something, but is there ANY way for the price to auto update INCLUDING any checkbox options I have? It works great with the drop down select boxes, but it doesn't update the price when checkboxes (or radio buttons for that matter) are selected.

Any help would be greatly appreciated!

Cheers,

Laura

[newenglanddog]

FYI, I found that if you have parenthesis in an options field, you'll get NaN errors.

For example, I have dog collars in my store which have three options categories:
- Color: pink or green
- Size: small, medium, large, or extra large
- Item: collar, leash, or collar and leash.

The Item category adjusts the price, but the others do not. Previously when I had the values for the Size category as Small (11"-15"), I was getting NaN errors. When I replaced the "(" and ")" with brackets, for example Small [11"-15"], the NaN errors were gone.

[megli]

Hi,

I needed exactly that for my store. But because my store uses euro valute (and decimal point is marked with , not with .) i modified code a little. I only have 2 years of java background, so solution is not pretty but it works.

This code works with multiple selection boxes, only thing you have to watch to not put , in option. For example option should be 5.000 pieces of paper (+12,00€). If you put 5,000 pieces of paper (+12,00€) tho code will not work.

You can follow above instructions, products.tpl stays the same as above tutorial, you only use my code (instead of code above) in header.

Code: Select all

<script type="text/javascript">
$(document).ready(function() {
   $('.option').change(function() {
   var OriginalPrice = $('#thisIsOriginal').text();
   var dolzina = OriginalPrice.length;
   var OriginalCurrency = OriginalPrice.substring(dolzina-1);
   OriginalPrice = OriginalPrice.substring(0,dolzina-1);

   var newPriceValue = $('.option :selected').text();
      
      var koncnaCena = OriginalPrice.replace(",",".");;
      var posameznaCena;
         
      
   while (newPriceValue.indexOf(',') != -1){
      var position1 = newPriceValue.indexOf("(");
     var position2 = newPriceValue.indexOf(")");
     posameznaCena = newPriceValue.substring(position1+1,position2-1);
     posameznaCena=posameznaCena.replace(",",".");
     koncnaCena = (parseFloat(posameznaCena) + parseFloat(koncnaCena)).toFixed(2);
     newPriceValue = newPriceValue.substring(position2+1);
   }
   
   
   $('#priceUpdate').text(koncnaCena.replace(".",",")+OriginalCurrency);
   
   

   
   });
});
</script>

I hope this code will save someone some time.