How to set minimum fare for distance-based pricing calculator in WordPress

Other Questions Wordpress
1

I have a functioning distance calculator for my WordPress site that computes delivery fees based on the miles traveled. While the current setup works, I need to implement a minimum charge feature.

At the moment, my calculator displays whatever price is generated from the distance calculation. However, I want to guarantee that customers pay at least $40, even if the calculated cost is lower. For instance, if the distance only results in a $25 fee, it should show $40 instead.

Here is the code I’m currently using:

document.addEventListener('DOMContentLoaded', function() {
    let mapInstance;
    let routeService;
    let routeDisplay;

    function setupMap() {
        routeService = new google.maps.DirectionsService();
        routeDisplay = new google.maps.DirectionsRenderer();
        mapInstance = new google.maps.Map(document.getElementById('route-map'), {
            center: { lat: 40.7128, lng: -74.0060 },
            zoom: 10
        });
        routeDisplay.setMap(mapInstance);
    }

    function computeRoute() {
        const startPoint = document.getElementById('start-location').value;
        const endPoint = document.getElementById('end-location').value;

        if (startPoint && endPoint) {
            const routeRequest = {
                origin: startPoint,
                destination: endPoint,
                travelMode: 'DRIVING'
            };

            routeService.route(routeRequest, function(response, status) {
                if (status == 'OK') {
                    routeDisplay.setDirections(response);

                    const totalDistance = response.routes[0].legs[0].distance.value / 1609.34; // convert to miles
                    const finalPrice = totalDistance * 3.5; // $3.50 per mile

                    document.getElementById('route-distance').textContent = totalDistance.toFixed(2) + ' miles';
                    document.getElementById('final-price').textContent = '$' + finalPrice.toFixed(2);
                } else {
                    alert('Route calculation failed: ' + status);
                }
            });
        } else {
            alert('Both locations must be filled out.');
        }
    }

    document.getElementById('calc-route').addEventListener('click', computeRoute);

    setupMap();
});

I’ve been trying to add some conditional logic, but I can’t seem to get it to work right. Any advice on how to add this minimum price feature?

2

Pretty straightforward logic, but there’s a few ways to handle this - depends if you want to show both values or just the final amount. I calculate everything first, then apply the minimum right before displaying.

Try this for your calculation section:

const basePrice = totalDistance * 3.5;
const adjustedPrice = basePrice >= 40 ? basePrice : 40;

document.getElementById('route-distance').textContent = totalDistance.toFixed(2) + ' miles';
document.getElementById('final-price').textContent = '$' + adjustedPrice.toFixed(2);

This keeps your original calculation but ensures the minimum gets applied. I store the base calculation separately in case I need it later for analytics or customer service. The ternary operator keeps it clean without messing up your existing code structure.

3

Just add a check after calculating finalPrice. Something like const displayPrice = finalPrice < 40 ? 40 : finalPrice; then use displayPrice instead of finalPrice when updating the text. Works every time for me.

4

You need to tweak the price calculation in your computeRoute function. After calculating finalPrice, wrap it with Math.max() so it can’t drop below your minimum.

Replace your current finalPrice calculation with:

const calculatedPrice = totalDistance * 3.5;
const finalPrice = Math.max(calculatedPrice, 40);

Math.max() picks whichever’s higher - your calculated price or the $40 minimum. I’ve used this on tons of client projects and it’s way more reliable than if/else statements. Handles weird edge cases better too. Everything else in your code stays the same.