Change Addon Price on Billing Cycle change

[pRieStaKos]

Hello, 

So I'm trying to apply a addon price override to the `configureproduct.tpl`, using javascript. 

• When the page loads, the Billing Cycle is Monthly and when I change a configoption, the addon price is OK.
• If I change Billing Cycle, ex to Annually my js script gets the selected value and returns the addon price as expected.
• The issue: If I choose another configoption option from the droplist, the script returns nothing.
• Same if I choose a third option, or the previous selected.
• If I choose back to Monthly billing cycle, the addon price is wrong again.
• If I reload the page, all the choosen prices for the selected configoption value are correct.

I admit I'm not a javascript guru, but I've wasted all day with this....

$.each(inputConfigOptionList, function (index, inputConfigOption) {
     if (document.getElementById(inputConfigOption)) {
          if ($('#inputBillingcycle').val() === 'monthly') {
               var str = {$AddonMonthlyPrice};
          } else if ($('#inputBillingcycle').val() === 'quarterly') {
               var str = {$AddonQuarterlyPrice};
          } else if ($('#inputBillingcycle').val() === 'semiannually') {
               var str = {$AddonSemiAnnuallyPrice};
          } else if ($('#inputBillingcycle').val() === 'annually') {
               var str = {$AddonAnnuallyPrice};
          } else if ($('#inputBillingcycle').val() === 'biennially') {
               var str = {$AddonBienniallyPrice};
          } else if ($('#inputBillingcycle').val() === 'triennially') {
               var str = {$AddonTrienniallyPrice};
          }
          var addonPrice = parseFloat(str) + ($('#' + inputConfigOption + ' option:selected').data('price') * 0.20);
     
          $('article:contains("Support Packages")').find('div.panel-price').text('$' + parseFloat(addonPrice).toFixed(2) + ' USD');

          $('#inputBillingcycle').on('change', function () {
               $('article:contains("Support Packages")').find('div.panel-price').text('Calculating...');
               setTimeout(function () {
                    if ($('#inputBillingcycle').val() === 'monthly') {
                         var str = {$AddonMonthlyPrice};
                    } else if ($('#inputBillingcycle').val() === 'quarterly') {
                         var str = {$AddonQuarterlyPrice};
                    } else if ($('#inputBillingcycle').val() === 'semiannually') {
                         var str = {$AddonSemiAnnuallyPrice};
                    } else if ($('#inputBillingcycle').val() === 'annually') {
                         var str = {$AddonAnnuallyPrice};
                    } else if ($('#inputBillingcycle').val() === 'biennially') {
                         var str = {$AddonBienniallyPrice};
                    } else if ($('#inputBillingcycle').val() === 'triennially') {
                         var str = {$AddonTrienniallyPrice};
                    }
                    var addonPrice = parseFloat(str) + ($('#' + inputConfigOption + ' option:selected').data('price') * 0.20);
                    $('article:contains("Support Packages")').find('div.panel-price').text('$' + parseFloat(addonPrice).toFixed(2) + ' USD');
               }, 3000);
          });

          $('#' + inputConfigOption).change(function() {
               var str = addonPrice = 0;
               $('article:contains("Support Packages")').find('div.panel-price').text('Calculating...');
               setTimeout(function () {
                    if ($('#inputBillingcycle').val() === 'monthly') {
                         var str = {$AddonMonthlyPrice};
                    } else if ($('#inputBillingcycle').val() === 'quarterly') {
                         var str = {$AddonQuarterlyPrice};
                    } else if ($('#inputBillingcycle').val() === 'semiannually') {
                         var str = {$AddonSemiAnnuallyPrice};
                    } else if ($('#inputBillingcycle').val() === 'annually') {
                         var str = {$AddonAnnuallyPrice};
                    } else if ($('#inputBillingcycle').val() === 'biennially') {
                         var str = {$AddonBienniallyPrice};
                    } else if ($('#inputBillingcycle').val() === 'triennially') {
                         var str = {$AddonTrienniallyPrice};
                    }
                    var addonPrice = parseFloat(str) + ($('#' + inputConfigOption + ' option:selected').data('price') * 0.20);  
                    $('article:contains("Support Packages")').find('div.panel-price').text('$' + parseFloat(addonPrice).toFixed(2) + ' USD');
               }, 500);
          })
     }
});

Any help ? Please dont' ask why I want to override the addon price when I choose a specific configoption. It's a task with predefined request 😄

Thank you in advance.

PS: I came across this old bug from 2018.  Hilarious....

 

Edited December 23, 2020 by pRieStaKos

[steven99]

I believe the "option:selected" you have is messing it up as that will find the element for the option that is by default selected and not the the currently selected option.   Instead I think that should be:

var addonPrice = parseFloat(str) + ($('#' + inputConfigOption).val() * 0.20);  

 

[pRieStaKos]

7 hours ago, steven99 said:

I believe the "option:selected" you have is messing it up as that will find the element for the option that is by default selected and not the the currently selected option.   Instead I think that should be:

var addonPrice = parseFloat(str) + ($('#' + inputConfigOption).val() * 0.20);  

 

Hello @steven99

Thank you for your response.

I want to get the `data('price')` of the selected option. Not the selected value.

Edited December 24, 2020 by pRieStaKos

[pRieStaKos]

So, after a coffee and with clear mind, I managed to resolve this by adding a onchange function on select.

function getPrice(obj) {
     var uid = obj.options[obj.selectedIndex].getAttribute('data-price');
     var str = addonPrice = 0;
     $('article:contains("Support Packages")').find('div.panel-price').text('Calculating...');
     setTimeout(function () {
          if ($('#inputBillingcycle').val() === 'monthly') {
               var str = {$AddonMonthlyPrice};
          } else if ($('#inputBillingcycle').val() === 'quarterly') {
               var str = {$AddonQuarterlyPrice};
          } else if ($('#inputBillingcycle').val() === 'semiannually') {
               var str = {$AddonSemiAnnuallyPrice};
          } else if ($('#inputBillingcycle').val() === 'annually') {
               var str = {$AddonAnnuallyPrice};
          } else if ($('#inputBillingcycle').val() === 'biennially') {
               var str = {$AddonBienniallyPrice};
          } else if ($('#inputBillingcycle').val() === 'triennially') {
               var str = {$AddonTrienniallyPrice};
          }
          var addonPrice = parseFloat(str) + (obj.options[obj.selectedIndex].getAttribute('data-price') * 0.20);
          $('article:contains("Support Packages")').find('div.panel-price').text('$' + parseFloat(addonPrice).toFixed(2) + ' USD');
     }, 500);
}

Thank you anyway.