Masonry, infinite scroll and Ajax

Trevor

#237675

Are you able to send me a live link/URL to your search page so I can take a look?

In general, instead of using the content and structure of the HTML to be found in the exemplar results.php file, you would use that inside the exemplar results-infinite-scroll.php file, but the template file that your form is using, should still be named results.php, or be numbered the same as the form ID, all as detailed here:

https://searchandfilter.com/documentation/search-results/using-a-shortcode/#customising-the-results

DO use a child theme when you do this.

Anonymous

#237698

This reply has been marked as private.

Trevor

#237722

The layout does not look good after the first 6 posts. Is this what you mean? If masonry is OF, is it then OK?

Anonymous

#237724

This reply has been marked as private.

Trevor

#237726

The problem is then that Masonry has to be re-applied on each ‘page’ load.

How do/did you apply it when the page first loads?

Anonymous

#237731

This reply has been marked as private.

Trevor

#237733

Maybe add this to the page also then:

<script type="text/javascript">
  $(function(){
    $(document).on("sf:ajaxfinish", ".searchandfilter", function(){
      console.log("ajax finish");
      $('.search-filter-results').masonry({
        itemSelector: '.post',
        columnWidth: '.post',
      });
    });
  }(jQuery));
</script>

Anonymous

#237735

This reply has been marked as private.

Trevor

#237777

I am not overly familiar with the masonry coding. We did once figure a way to do it (our developer did), see here (I have gone back through the thread to reveal most of the posts, redacting sections where needed for privacy, anything still private has nothing important in):

https://support.searchandfilter.com/forums/topic/infinite-scroll-with-masonry

Anonymous

#237796

Hi Trevor,

I finaly found the solution using a part of your code and Masonry documentation.
This is my full process to help other if you have a new request about that :

> I create a search&filter form using shortcode method, ajax load and infinite scroll.
> I used the RESULTS template of Infinite scroll but i delete the div ‘search-filter-results-list’.
> I call the masonry JS file and i use this function to apply the masonry system to my grid :

$container = $('.search-filter-results');		
$container.masonry({
	itemSelector: '.post',
	columnWidth: '.post'
});

$(function(){
	$(document).on("sf:ajaxfinish", ".searchandfilter", function(){
		console.log("ajax finish");
		$container.masonry('reloadItems');
		$container.masonry().append().masonry('appended'); 	
	});
}(jQuery));

Thanks a lot for your help.
Simon.

[Author]

Posts