FindGTAHomes.com just got a huge face lift! This was originally not my project but due to unforeseen circumstances I came aboard to help finish the project. Integrating a brand new version of our IDX tool that pulls listings directly from MLS and saves them on the clients WordPress site.

All in all the project turned out great and is a much more responsive and impressive site than it’s previous design.

Challenges

For this project we had to completely rework our listings plugin to work faster and more efficiently. Utilizing AJAX auto-complete for the Neighborhoods search field we were able to cut back on DB calls on load and provide a smoother user experience when searching for listings.

This project is also our first leap into Bootstrap so there was a slight learning curve there but a good one in the long run.

IE support has always been an issue, it seems most of our clients have friends with computers from the stone ages and always seem to find the issues while browsing on earlier versions of Internet Explorer. This was the first site that we opted to save ourselves the headache and redirect users of IE8 and under to a support page letting them know that they’re browser is out of date offering links to newer browsers.

Take Aways

I like to try to take a least one little code snippet from each project as a ‘take away’ that we can use going forward. For this site the big one was the Neighborhood search auto-complete feature. I’ll let you think about how you can rewrite it to work for you (maybe a category/tag search tool?) but here it is:


var searchOptions = $.ajax({
url: “/wp-admin/admin-ajax.php”,
type:’POST’,
global: false,
async:false,
data: “action=search_terms&term=Community”,
success: function( data ) {
return data;
}
}).responseText;

var list = $.parseJSON(searchOptions);
list = $.map(list, function(item) {
return {
label: item,
value: item
}
});

$(“#search-hoods”).autocomplete({
source: list,
select: function(event, ui) {
this.value = ui.item.value;
}
});

This is the Javascript for the auto-complete feature, as you can see first we use ajax to get the values and parse them into a list that jquery’s autocomplete funtion can handle. I had tried many times to include the ajax inside the autocomplete function but did not have any success, this way does not seem to impact load times so we stuck with it.

This of course won’t do much without the php function to go with it:


//get meta values for search function
function af_get_meta_values( $key = ”, $type = ‘listings’, $status = ‘publish’ ) {
global $wpdb;
if( empty( $key ) )
return;
$r = wp_cache_get( ‘af_’.$key );
if ( false === $r ) {
$r = $wpdb->get_col( $wpdb->prepare( ”
SELECT DISTINCT pm.meta_value FROM {$wpdb->postmeta} pm
LEFT JOIN {$wpdb->posts} p ON p.ID = pm.post_id
WHERE pm.meta_key = ‘%s’
AND p.post_status = ‘%s’
AND p.post_type = ‘%s’
“, $key, $status, $type ) );
wp_cache_set( ‘af_’.$key, $r );
}
return $r;
}

function af_search_terms(){
$term = $_POST[‘term’];
$r = af_get_meta_values( $term );
print json_encode($r);
exit;
}

add_action(‘wp_ajax_search_terms’, ‘af_search_terms’); // for logged in user
add_action(‘wp_ajax_nopriv_search_terms’, ‘af_search_terms’); // if user not logged in

The first function finds all of the meta values for the supplied key. The second outputs them in json format so that our javascript function can handle them.

So that’s my take away from this project, like I said it is pretty specific to this project but with some creativity it could easily be turned into a live category/tag finder.

All in all this was a fun project with it’s fair share of bumps along the way.

Check out the new site at http://findgtahomes.com