كيفية حساب تكلفة المسافة لطلبات الاستلام في ووردبريس

إن إنشاء نظام لحساب المسافات والأسعار في ووردبريس يعتبر خطوة مهمة للعديد من الأعمال التجارية التي تعتمد على خدمات التوصيل والشحن. يتيح لك هذا النظام تقدير المسافة بين موقعين، مما يسهل تحديد تكلفة الخدمة بدقة. في هذا المقال، سنتناول كيفية إنشاء نظام لحساب المسافات والأسعار باستخدام ووردبريس.

الخطوة الأولى: إعداد نموذج الإدخال

لبدء العمل على حساب المسافة بين موقعين، نحتاج إلى إنشاء نموذج إدخال HTML يُمكنه جمع بيانات العنوانين. هذا النموذج سيمكن المستخدم من إدخال موقع الالتقاط (pickup) والوجهة (destination). هنا هو نموذج بسيط:

<div class="distance-calculator-form">
    <label for="pickup">موقع الالتقاط:</label>
    <input type="text" id="pickup" placeholder="ادخل موقع الالتقاط">
    <label for="destination">الوجهة:</label>
    <input type="text" id="destination" placeholder="ادخل الوجهة">
    <button id="calculate-button">احسب المسافة</button>
    <p>المسافة: <span id="distance"></span></p>
    <p>التكلفة الإجمالية: <span id="total-cost"></span></p>
</div>

الخطوة الثانية: استخدام واجهة برمجة تطبيقات خرائط Google

لتحقيق حساب المسافة، سنستخدم واجهة برمجة تطبيقات خرائط Google. يتضمن ذلك إنشاء كود جافا سكريبت يقوم باستدعاء هذه الواجهة ويقوم بحساب المسافة بين موقعين. إليك مثال على كيفية القيام بذلك:

document.addEventListener('DOMContentLoaded', function() {
    let map;
    let directionsService;
    let directionsRenderer;
    function initMap() {
        directionsService = new google.maps.DirectionsService();
        directionsRenderer = new google.maps.DirectionsRenderer();
        map = new google.maps.Map(document.getElementById('map'), {
            center: { lat: -34.397, lng: 150.644 },
            zoom: 8
        });
        directionsRenderer.setMap(map);
    }
    function calculateDistance() {
        const pickup = document.getElementById('pickup').value;
        const destination = document.getElementById('destination').value;
        if (pickup && destination) {
            const request = {
                origin: pickup,
                destination: destination,
                travelMode: 'DRIVING'
            };
            directionsService.route(request, function(result, status) {
                if (status == 'OK') {
                    directionsRenderer.setDirections(result);
                    const distance = result.routes[0].legs[0].distance.value / 1000; // المسافة بالكيلو متر
                    const cost = distance * 2; // مثال: 2 دولار لكل كيلومتر
                    document.getElementById('distance').textContent = distance.toFixed(2) + ' كم';
                    document.getElementById('total-cost').textContent = "$" + cost.toFixed(2);
                } else {
                    alert('تعذر حساب المسافة: ' + status);
                }
            });
        } else {
            alert('يرجى إدخال كل من موقع الالتقاط والوجهة.');
        }
    }
    document.getElementById('calculate-button').addEventListener('click', calculateDistance);
    initMap();
});

الخطوة الثالثة: إضافة السكريبت إلى ووردبريس

لتتمكن من تشغيل كود جافاسكريبت في ووردبريس، تحتاج إلى تحميل سكريبت خرائط Google. يمكنك القيام بذلك عبر إضافة الكود التالي في ملف functions.php الخاص بموضوع ووردبريس:

function enqueue_google_maps_script() {
    wp_enqueue_script('google-maps', 'https://maps.googleapis.com/maps/api/js?key=YOUR_GOOGLE_MAPS_API_KEY&libraries=places', null, null, true);
}
add_action('wp_enqueue_scripts', 'enqueue_google_maps_script');

الخطوة الرابعة: تنسيق النموذج باستخدام CSS

للتحسين من تجربة المستخدم، يمكنك إضافة بعض التنسيقات باستخدام CSS. إليك مثال بسيط:

.distance-calculator-form {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 8px;
}
.distance-calculator-form label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
}
.distance-calculator-form input[type="text"] {
    width: 100%;
    padding: 8px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}
#calculate-button {
    background-color: #007cba;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
#calculate-button:hover {
    background-color: #005f8d;
}
#distance, #total-cost {
    font-weight: bold;
}

استنتاج

إنشاء نظام لتقدير المسافات والأسعار في ووردبريس يعد خيارًا مثاليًا لتعزيز خدمات التوصيل الخاصة بك. من خلال استخدام واجهة برمجة تطبيقات خرائط Google، يمكنك تقديم تجربة استخدام متكاملة، حيث يمكن للمستخدمين إدخال مواقعهم والحصول على تقديرات للمسافة والتكلفة بسهولة. اتبع الخطوات المذكورة لتكون قادرًا على تطوير هذه الميزة بشكل فعال في موقعك.