Posted on: Tuesday, 24-Mar-15 19:43:05 EDT
Hide Empty Listings Results Set from Agent Bio Page

Let's talk about something for a minute. You have a team of agents on your IDX Broker Roster page and you have some users browsing around checking out your agents. What happens when your users are clicking through several agents who do not have any active listings and keep seeing "0 Active Listings" on their bio pages. Quickly, your reputation as a brokerage could be hurt as potential clients believe your agents are not top producers. In the real world, we know how hard it can be to get a good set of listings in a very competitive market, but, the end user probably doesn't care as they are only looking to have the best representation possible. So, let us take a minute and write just a little bit of code to remove that empty result set.

Where Do I see This?

Like I mentioned before, this only applies to office accounts and specifically the agents on the Roster page. You can see this result in the thumbnail of this post. I cannot give you a live link to preview as I remove these sections on client sites in production. The point is, it is a little muddy and is just irrelevant information clogging up the page. Let's get rid of that.

Coding the Code

To remove this unwanted block of code is quite simple and only requires a few lines of javascript to cut it out. The one thing I found that you had to be careful of: When targeting elements using jQuery, make sure you don't remove the global result set wrapper content. This would be bad and would be applied globally across your IDX results whenever you had no listings returned from a search result or saved link. Luckily, IDX Broker does a pretty good job of defining classes and IDs for their divisions so targeting this area is quite simple.

To get started if you open up Chrome Developer Tools on a agent Bio PAge, you can see the Bio Page has a wrapper class of

<div class="IDX-bioWrapper"></div>

Using that selector with jQuery and using the html() method on that selector, we can verify that we are on the Bio page when....

// returns true when
// on the bio page
console.log('On the Bio page!  Yippeee!!!');

returns TRUE.

The second step of the process is to verify that the result set is empty and that there are no listings. We combine our first conditional to test the bio page with another conditional to verify an empty listing result set.

if($('.IDX-bioWrapper').html() && ($('.IDX-resultsCount').html() == 0)){
//returns true for both elements
// only when on the bio page
// and results equal 0
console.log('On the Bio Page and agent has no results');

Now that we have the conditional returning true for both targeted elements, the last step is to just empty the html of the container holding the pagination and text for the listings. So, all combined your final code block to accomplish this task will look something like this:

if($('.IDX-bioWrapper').html() && ($('.IDX-resultsCount').html() == 0)){
console.log('On the Bio Page and agent has no results');
// Empty the inner html from the div containing the pagination and resuts count.

With this code applied to your global JS file, you will get a result that will look something like this with only the Bio of the agent and no muddy content showing no listings.

hidden empty result set IDX Broker

As always, if you have any questions, please feel free to contact us or post any questions to the IDX Broker Mastermind Facebook Group.

Posted in Tags:

  • Education

Wordpress Themes for IDX Broker
Learn Web Design, Coding & More. No Risk. No Contracts. Learn More