Result Counter

Hi there!

Displaying a count of results should be easy with jQuery, but bear in mind that the result list is dynamically updated with an AJAX call, so you will probably want to use ajaxComplete to make something that would work like a callback. As you probably know, this function allows to run code after the AJAX call that grabs the results has finished.

You will need to count the number of <li> items inside of the <div id="wpsl-stores"> element, and print this number somewhere.

I hope this points you in the right direction.
Regards!

• This reply was modified 2 years, 4 months ago by farroyo.

Thanks @farroyob ! I’ll paste the code here once I finish it up.

Also have a few more questions. I’ll put up another thread. Thanks again

You are welcome!

jeng22, could you share the code please? ??

Hi!

Please consider this code snippet, to be inserted in your active theme’s functions.php file:

add_action( 'wp_footer', function () { ?>
<script type='text/javascript'>
    jQuery( document ).ajaxComplete(function( event, xhr, settings ) {
        counter = jQuery('div#wpsl-stores ul li:not(".wpsl-no-results-msg")').length;
        console.log('Found '+counter+' stores');
    });
</script>

<?php } );

This will output the string “Found X stores” in your javascript console. If you want to write this number inside of an element in your DOM so it is visible (for instance, imagine you have a <div id="store-counter"></div>, you could use something like:

add_action( 'wp_footer', function () { ?>
<script type='text/javascript'>
    jQuery( document ).ajaxComplete(function( event, xhr, settings ) {
        counter = jQuery('div#wpsl-stores ul li:not(".wpsl-no-results-msg")').length;
         jQuery('div#store-counter').html('Found '+counter+' stores');
    });
</script>

<?php } );

I hope that helps.

Regards ??

Thats absolutely perfect!! Thank you so much ??