Create a dropdown to show branches
Ever encountered the need to create a dropdown that would show and update to show a map of a store’s branch? Well here is a simple way, sort of complicated way to do it.
- First we would create a short code that generates the province/region
- From the first dropdown, the second dropdown generates cities within the first dropdown that have branches.
- after choosing from the second dropdown, the google map will update to show the current store’s google map.
What we first need to do in preparation.
- We need to create 2 tables, yes you can insert the two tables in your wordpress database.
- Table one would contain the provinces/regions that have branches. (for our example, this table is named “wpmain_52_etn_region”.)
- Table two would contain the address, and region id (from the first table). and the google map embed code from google maps of the particular branch. (for our example, this table is named “wpmain_52_etn_map”.)
- We create the two tables (if you can do this in phpmyadmin the better)
- List all the provinces/regions then insert them in to your first table.
- List all branches, get their google map embed codes then insert these into the second table.
- We need copy and paste the code below to your theme’s function.php.
- You need to create a file named “ajaxpro.php”, but you need to also edit the database details to match yours. Once you have done this, upload this to the theme or child-theme folder.
- Copy the shortcode “[text]” onto your page, and also copy the google maps embed code for the main branch. This will be your initial map.
Please see working sample below.
########################################################
#copy this code onto your function.php
########################################################
function text_shortcode(){
$con=mysqli_connect(DB_HOST, DB_USER , DB_PASSWORD ,DB_NAME);
// Check connection
if (mysqli_connect_errno())
{
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}else{
//echo "Success..";
}
// Perform queries
$result =mysqli_query($con,"SELECT * FROM wp_etn_region");
if (!$result)
die("Database access failed : " . mysqli_error());
//output error message if query execution failed
$rows = mysqli_num_rows($result);
// get number of rows returned
if ($rows) { ?>
<div class="form-group">
<strong>Region:</strong><br />
<select name="state" class="select-css">
<option value="">Select Region ⇢ </option>
<?php
while ($row = mysqli_fetch_array($result)) {
echo "<option value='".$row['id']."'>".$row['region']."</option>";
}
?>
</select>
</div><br />
<div class="form-group">
<strong>Dealers:</strong><br />
<select name="city" class="select-css" style="min-width:150px" ONCHANGE="document.getElementById('youriframe').src = this.options[this.selectedIndex].value" >
</select>
</div>
<?Php
}
mysqli_close($con);?>
<script>
jQuery( "select[name='state']" ).change(function () {
var stateID = jQuery(this).val();
if(stateID) {
jQuery.ajax({
url: "<?php echo get_stylesheet_directory_uri(); ?>/ajaxpro.php",
dataType: 'Json',
data: {'id':stateID},
success: function(data) {
jQuery('select[name="city"]').empty();
jQuery.each(data, function(key, value) {
jQuery('select[name="city"]').append("<option value='"+ key + "'>"+ value +'</option>');
});
}
});
}else{
jQuery('select[name="store"]').empty();
}
});
</script>
<?php
}
add_shortcode('text', 'text_shortcode');
<?php
//update this with your database settings
$mysqli = new mysqli('localhost', 'my_user', 'my_password', 'my_db');
$sql = "SELECT * FROM wp_etn_map WHERE `regionid`= ".$_GET['id'];
if ($result = $mysqli->query($sql)) {
$json = [];
/* fetch associative array */
$json["https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d7723.663436309859!2d121.058757!3d14.551613999999999!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x4ae7bb29c8ae77ed!2sTreston%20International%20College!5e0!3m2!1sen!2sph!4v1574113839702!5m2!1sen!2sph"] = 'Select Dealer ⇢ ';
while ($row = $result->fetch_assoc()) {
$json[$row[‘mapurl’]] = $row[‘store’];
}
/* free result set */
$result->free();
echo json_encode($json);
}
?>