Assalamualaikum,
As previous post, i mentioned that i wanted to create a simple distance calculator for own usage.
Of course i didn't do it by myself. I watched this tutorial and download the code to start coding.
And obviously i need to customize and do a little tweaks to get the result that i wanted. Plus i apply the code into Wordpress framework by extending the Child Theme
What i did was, i separate the JS function from the html code. Adding the JS script and enqueued it.
Steps.
Introduce JS script,
sudo vim assets/js/calculate_distance.js
script content
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $(function() { | |
| // add input listeners | |
| google.maps.event.addDomListener(window, 'load', function () { | |
| var from_places = new google.maps.places.Autocomplete(document.getElementById('from_places')); | |
| var to_places = new google.maps.places.Autocomplete(document.getElementById('to_places')); | |
| google.maps.event.addListener(from_places, 'place_changed', function () { | |
| var from_place = from_places.getPlace(); | |
| var from_address = from_place.formatted_address; | |
| $('#origin').val(from_address); | |
| }); | |
| google.maps.event.addListener(to_places, 'place_changed', function () { | |
| var to_place = to_places.getPlace(); | |
| var to_address = to_place.formatted_address; | |
| $('#destination').val(to_address); | |
| }); | |
| }); | |
| // calculate distance | |
| function calculateDistance() { | |
| var origin = $('#origin').val(); | |
| var destination = $('#destination').val(); | |
| var service = new google.maps.DistanceMatrixService(); | |
| service.getDistanceMatrix( | |
| { | |
| origins: [origin], | |
| destinations: [destination], | |
| travelMode: google.maps.TravelMode.DRIVING, | |
| unitSystem: google.maps.UnitSystem.IMPERIAL, // miles and feet. | |
| // unitSystem: google.maps.UnitSystem.metric, // kilometers and meters. | |
| avoidHighways: false, | |
| avoidTolls: true | |
| }, callback); | |
| } | |
| // get distance results | |
| function callback(response, status) { | |
| if (status != google.maps.DistanceMatrixStatus.OK) { | |
| $('#result').html(err); | |
| } else { | |
| var origin = response.originAddresses[0]; | |
| var destination = response.destinationAddresses[0]; | |
| if (response.rows[0].elements[0].status === "ZERO_RESULTS") { | |
| $('#result').html("Better get on a plane. There are no roads between " + origin + " and " + destination); | |
| } else { | |
| var distance = response.rows[0].elements[0].distance; | |
| var duration = response.rows[0].elements[0].duration; | |
| console.log(response.rows[0].elements[0].distance); | |
| var distance_in_kilo = distance.value / 1000; // the kilom | |
| var distance_in_mile = distance.value / 1609.34; // the mile | |
| var duration_text = duration.text; | |
| var duration_value = duration.value; | |
| var delivery_rate = 0.8; | |
| var delivery_charge = 3; | |
| if (distance_in_kilo >3){ | |
| delivery_charge = distance_in_kilo * delivery_rate; | |
| delivery_charge = Math.round(delivery_charge.toFixed(2)*10)/10; | |
| } | |
| $('#in_mile').text(distance_in_mile.toFixed(2)); | |
| $('#in_kilo').text(distance_in_kilo.toFixed(2)); | |
| $('#delivery_charge').text("RM "+ delivery_charge.toFixed(2)); | |
| } | |
| } | |
| } | |
| // print results on submit the form | |
| $('#distance_form').submit(function(e){ | |
| e.preventDefault(); | |
| calculateDistance(); | |
| }); | |
| }); |
the additional changes that i did was, adding delivery charge calculation
for the front end, i create a page template that later loaded in Wordpress page, checkout my previous post
the page template content
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?php | |
| /** Template Name: Page Delivery Calculator | |
| * | |
| * This is the template that displays all pages by default. | |
| * Please note that this is the WordPress construct of pages | |
| * and that other 'pages' on your WordPress site will use a | |
| * different template. | |
| * | |
| * @package WordPress | |
| * @subpackage Storefront Child | |
| * @since Storefront Child 1.0 | |
| */ | |
| ?> | |
| <html> | |
| <?php get_header(); ?> | |
| <head> | |
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script defer src="https://maps.googleapis.com/maps/api/js?libraries=places&language=en&key=yY" type="text/javascript"></script> | |
| <link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" id="bootstrap-css" rel="stylesheet" /> | |
| </head> | |
| <body> | |
| <div id="primary" class="content-area"> | |
| <div class="container"> | |
| <div class="row"> | |
| <div class="col-md-6"> | |
| <form id="distance_form"> | |
| <div class="form-group"><label>Store Location: </label> <input class="form-control" id="from_places" placeholder="Jalan USJ 6/4, Usj 6, Subang Jaya, Selangor, Malaysia" disabled /> <input id="origin" name="origin" required="" type="hidden" value="Jalan USJ 6/4, Usj 6, Subang Jaya, Selangor, Malaysia" /></div> | |
| <div class="form-group"><label>Delivery Destination: </label> <input class="form-control" id="to_places" placeholder="Enter a location" /> <input id="destination" name="destination" required="" type="hidden" /></div> | |
| <input class="btn btn-primary" type="submit" value="Calculate" /></form> | |
| <div id="result"> | |
| <ul class="list-group"> | |
| <li class="list-group-item d-flex justify-content-between align-items-center">Distance in KM: <label id="in_kilo"> </label> </li> | |
| <li class="list-group-item d-flex justify-content-between align-items-center">Delivery charge estimation, accurate address accurate calculation: <label id="delivery_charge"> </label></li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <?php get_footer(); ?> | |
| </body> | |
| </html> |
the changes that i made is on the Google Places API key value, include new labels that displays the result after the user submit the form / click "Calculate" button, preset the input value for "from_places" and disabled the input entry.
you can try the calculator live on our website :P https://4nutz.tk/hand-delivery-calculator/
below is the screenshot of our Hand Delivery Calculator!
Comments
Post a Comment