Forums › Forums › Search & Filter Pro › Masonry, infinite scroll and Ajax

Tagged: , ,

Viewing 10 posts - 1 through 10 (of 11 total)
1 2
  • Trevor
    (Private)  March 24, 2020 at 10:31 am #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
    (Private)  March 24, 2020 at 2:53 pm #237698
    This reply has been marked as private.
    Trevor
    (Private)  March 24, 2020 at 4:38 pm #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
    (Private)  March 24, 2020 at 4:49 pm #237724
    This reply has been marked as private.
    Trevor
    (Private)  March 24, 2020 at 5:00 pm #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
    (Private)  March 24, 2020 at 5:10 pm #237731
    This reply has been marked as private.
    Trevor
    (Private)  March 24, 2020 at 5:16 pm #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
    (Private)  March 24, 2020 at 5:27 pm #237735
    This reply has been marked as private.
    Trevor
    (Private)  March 25, 2020 at 11:37 am #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
    (Private)  March 25, 2020 at 12:53 pm #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
Viewing 10 posts - 1 through 10 (of 11 total)
1 2