skip to Main Content

I have this code in elementor custom code, it’s loaded at the end of the body tag.

<script>
jQuery(document).ready(function($){
    var productPrice;
    var finalProductPrice;
    var shippingPrice;
    var servicePrice;
    var result;
    var output;
    //
    $('#ship-price-a').on('click', function(){ 
          if( typeof productPrice === 'undefined' ){
                productPrice = $('#original-price').find('.woocommerce-Price-amount').text();
            }       
            //
          shippingPrice = $(this).attr('data-price');
        if( typeof finalProductPrice === 'undefined' ){    
                //var vat = ( shipPrice * 22 / 100 );
            finalProductPrice = ( parseFloat(productPrice) + parseFloat(shippingPrice) );
                result = finalProductPrice + '€';
            } else {
                var p = ( parseFloat(finalProductPrice) + parseFloat(shippingPrice) );
                result = p + '€';
            }
            output = result.replace('.', ',');
            $('#final-price').text(output);
            console.log('service price a click event - finalProductPrice',finalProductPrice);
    });
    //
    $('#ship-price-b').on('click', function(){
            if( typeof productPrice === 'undefined' ){
                productPrice = $('#original-price').find('.woocommerce-Price-amount').text();
            }       
      shippingPrice = $(this).attr('data-price');
            //var vat = ( shipPrice * 22 / 100 );
      if( typeof finalProductPrice === 'undefined' ){
                finalProductPrice = ( parseInt(productPrice) + parseFloat(shippingPrice) );
                result = finalProductPrice + '€';
            } else {
                var p = ( parseInt(finalProductPrice) + parseFloat(shippingPrice) );                                    
                result = p + '€';
            }
            output = result.replace('.', ',');
          $('#final-price').text(output);
            console.log('ship price b click event - finalProductPrice',finalProductPrice);
    });
    //
    $('#service-price-a').on('click', function(){
            servicePrice = $(this).attr('data-price');
            if( typeof productPrice === 'undefined' ){
                    productPrice = $('#original-price').find('.woocommerce-Price-amount').text(); 
            }
            if( typeof finalProductPrice === 'undefined' ){
                finalProductPrice = ( parseFloat(productPrice) + parseFloat(servicePrice) );
                result = finalProductPrice + '€';
            } else {
                var p = ( parseFloat(finalProductPrice) + parseFloat(servicePrice) );
                result = p + '€';
            }
            output = result.replace('.', ',');
            $('#final-price').text(output);
            console.log('service price a click event - finalProductPrice',finalProductPrice);
    });
    //
    $('#service-price-b').on('click', function(){
            servicePrice = $(this).attr('data-price');
            if( typeof productPrice === 'undefined' ){
                 productPrice = $('#original-price').find('.woocommerce-Price-amount').text();
            }
            if( typeof finalProductPrice === 'undefined' ){
                finalProductPrice = ( parseFloat(productPrice) + parseFloat(servicePrice) );
                result = finalProductPrice + '€';
            } else {
                var p = ( parseFloat(finalProductPrice) + parseFloat(servicePrice) );       
                result = p + '€';
            }
            output = result.replace('.', ',');
            $('#final-price').text(output);
            console.log('service price b click event - finalProductPrice',finalProductPrice);
    });
});
</script>

I’m facing an issue with it, it’s supposed to calculate the final price of a product when the user click on some additional services that can be purchased.

For the #ship-price-a and #ship-price-b the calculation is done correctly. When the user try to add #service-price-a and #service-price-b the calculation will be wrong, only one of both services will be added to the calculation. Is there something wrong into the code and where I need to modify to fix?

2

Answers


  1. jQuery(document).ready(function($){
        var productPrice = null;
        var finalProductPrice = null;
        var shippingPrice = null;
        var servicePrice = 0; // Initialize servicePrice as 0
        var result;
        var output;
    
        function updateFinalPrice() {
            if (productPrice !== null) {
                finalProductPrice = parseFloat(productPrice) + parseFloat(shippingPrice || 0) + servicePrice;
                result = finalProductPrice.toFixed(2).replace('.', ',') + '€';
                $('#final-price').text(result);
            }
        }
    
        function getProductPrice() {
            if (productPrice === null) {
                productPrice = $('#original-price').find('.woocommerce-Price-amount').text();
            }
        }
    
        $('#ship-price-a, #ship-price-b').on('click', function(){ 
            getProductPrice();
            shippingPrice = $(this).attr('data-price');
            updateFinalPrice();
        });
    
        $('#service-price-a, #service-price-b').on('click', function(){
            getProductPrice();
            servicePrice += parseFloat($(this).attr('data-price')); // service prices
            updateFinalPrice();
        });
    });
    
    1. Initialize servicePrice 0 to store services price.
    2. Remove the arguments used to update the final price in a separate updateFinalPrice function.
    3. Creating any shipment or value updates the finalProductPrice, ensuring that all selected transactions are added to the account.

    If this solution works for you, please consider upvoting the answer. Thanks, and happy coding! 😊👨‍💻

    Login or Signup to reply.
  2. @ictdev Yes, you can modify the code to prevent a service from being added multiple times and allow users to switch between different service options

       jQuery(document).ready(function($){
            var productPrice = null;
            var finalProductPrice = null;
            var shippingPrice = null;
            var selectedServices = {}; // Object to keep track of selected services
            var result;
            var output;
        
            function updateFinalPrice() {
                var totalServicePrice = 0;
                for (var key in selectedServices) {
                    totalServicePrice += parseFloat(selectedServices[key]);
                }
        
                if (productPrice !== null) {
                    finalProductPrice = parseFloat(productPrice) + parseFloat(shippingPrice || 0) + totalServicePrice;
                    result = finalProductPrice.toFixed(2).replace('.', ',') + '€';
                    $('#final-price').text(result);
                }
            }
        
            function getProductPrice() {
                if (productPrice === null) {
                    productPrice = $('#original-price').find('.woocommerce-Price-amount').text();
                }
            }
        
            $('#ship-price-a, #ship-price-b').on('click', function(){ 
                getProductPrice();
                shippingPrice = $(this).attr('data-price');
                updateFinalPrice();
            });
        
            $('#service-price-a, #service-price-b').on('click', function(){
                getProductPrice();
                var serviceId = $(this).attr('id');
                selectedServices[serviceId] = $(this).attr('data-price'); // Add or update the selected service
                updateFinalPrice();
            });
        });
    

    If this solution works for you, please consider upvoting the answer. Thanks, and happy coding! 😊👨‍💻

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search