Woocommerce - jQuery - Wrong price calculation

ICTDEV
January 4, 2024
122 views
0 votes
2 Answers

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?

Answers

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();
    });
});

Initialize servicePrice 0 to store services price.
Remove the arguments used to update the final price in a separate updateFinalPrice function.
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! 😊👨‍💻

@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! 😊👨‍💻

Please signup or login to give your own answer.

Click here to cancel reply.

Woocommerce – jQuery – Wrong price calculation

Answers