get_listings_list_ajax is a macro method provided by the Placester Blueprint theme framework. It is the AJAX equivalent of get_listings described in this article. It’s a little more work to get this version to work compared to get_listings, but the effort is definitely worth it. If you are new to the Placester Blueprint theme framework, we recommend getting started with the get_listings article.

Bethesda AJAX Listings

Minimum Code Required

The first step to using the get_listings_list_ajax macro method in your theme is to install the Placester IDX Plugin and add a few lines to the functions.php file. To find out how to do this, review the Custom Theme Quick Start Guide.

Now switch over to the page template you wish to add the listings to and add the following code:

<script type="text/javascript">
var search_bootloader;
jQuery(document).ready(function($){
  search_bootloader=new SearchLoader ({
    list: {
      context: "listings_search",
      limit_default: 5,
      limit_choices: [[5,10,15,25,50,-1],[5,10,15,25,50,"All"]]
    }
  });
});
</script>

<?php echo PLS_Partials::get_listings_list_ajax("context=listings_search"); ?>

If you save this and refresh your browser, you should see 5 listings show up. Now lets explain a little of what just happened. For anything to appear, you need a little javascript to perform the search. The javascript we are using is actually pretty simple, just creating a new SearchLoader object and limiting the listings to 5, and setting the choices to 5, 10, 15, 25, 50, or all listings. Below that was the get_listings_list_ajax PHP. If you skip the Javascript, nothing will load, so be sure to include that..

Other List Parameters

  • dom_id – ID of the DOM element the list should appear in.
  • filter
  • class

Customizing the HTML Generated

The HTML that gets generated here is pretty nice. You can come up with some nice CSS to make it much more attractive, but sometimes you want to modify what gets displayed. Maybe you want to add latitude and longitude, or change the wording of the link to more information. To do that, we need to add a hook.

We add hooks the same way we did for the get_listings method, but use the filter *pls_listings_list_ajax_item_html_[your context goes here]. Although in the get_listings article we put the hook code in the same file as the rest of the php code, it really should go in functions.php. In order to get the AJAX version to work, we really need to use that functions.php file.

So add the following code to the functions.php file just below the Placester_Blueprint code:

add_filter('pls_listings_list_ajax_item_html_listings_search', 'demo_method', 10, 3);
function demo_method($return, $raw, $html) {
    ob_start();
    error_log(print_r($raw, true));
    echo "Address:".$raw['location']['address'];
    return ob_get_clean();
}

You might notice the ob_start and ob_get_clean. If you aren’t familiar with the object buffer, it’s definitely worth a read.

When you refresh the browser, you’ll see 5 addresses in a list where we saw 5 complete listings before. If you look at your PHP log, you’ll also see a dump of all the values you can use here. Let’s modify the code to show some basic information:

add_filter('pls_listings_list_ajax_item_html_listings_search', 'demo_method', 10, 3);
function demo_method($return, $raw, $html) {
    ob_start();
    // error_log(print_r($raw, true));
    $location=$raw['location'];
    $cur_data=$raw['cur_data'];
echo "
<div>Address: ".$location['address'].", ".$location['locality'].", ".$location['region']." ".$location['postal'];
 echo "<a href=".$cur_data">Click Here to View Property</a> | <a href="https://maps.google.com/maps?q=".$location['full_address']"."&hl=en&z=15'> View on a map</a></div>";
    return ob_get_clean();
}

Setting Sort Type and Direction

You can easily set the initial sort direction and type using the sort_by and sort_type parameters when instantiating your list. These parameter are passed in via javascript during the initial instantiation of the list object. Here’s some sample code setting the sort type to beds, decending:

<script type="text/javascript">
var search_bootloader;
jQuery(document).ready(function($){
  search_bootloader=new SearchLoader ({
    list: {
      context: "listings_search",
      limit_default: 5,
      limit_choices: [[5,10,15,25,50,-1],[5,10,15,25,50,"All"]],
      sort_by: "cur_data.beds",
      sort_type: "desc"
    }
  });
});
</script>

<?php echo PLS_Partials::get_listings_list_ajax("context=listings_search"); ?>

You can sort on any field. By either using the cur_data.{field_name} or location.{field_name} sort_by values. For example, to sort on city you would set “sort_by” to “location.locality” or to sort on price you would using “cur_data.price”