Search Results for 'ajaxfinish masonry'

[Ross]

Hi again

So I tried to solve this issue without having to revert to you but it looks like I may need your help.

Essentially we need to find out the Javascript that is being used to give your products the masonry / grid type layout.

What happens is, when you search with S&F, the new results are loaded in with Ajax, but, they are not visible (you can check the html markup).

What we need to do is, after S&F results are loaded (we have a JS event for this), then we need to run your themes javascript (that handles the display of hte shop).

If you could contact your theme author to find out, even what library is being used to do this layout then we can do the rest.

Although, I think your theme author could quite easily give us the exact javascript we need to “re-layout” the shop.

Then we would add this to your child theme:

//detects when the ajax request has finished and the content has been updated
// - add scripts that apply to your results here
$(document).on("sf:ajaxfinish", ".searchandfilter", function(){
	console.log("ajax complete");
	//so add the script from your theme, to do the layout of your products again
});

Thanks

[Anonymous]

My blog with a filter is using Jquery Isotope for it’s layout. I’m using the infinite scroll feature to ajax load more posts.

		$(document).on("sf:ajaxfinish", ".searchandfilter", function(){
			console.log('ajax complete');
	                $grid.isotope('reloadItems');
		});

Is there an array of the next posts to load so that I can the isotope append feature instead of reload? The reload method means the pages jumps whereas the append method just flows from the bottom of the last post.
https://isotope.metafizzy.co/v2/methods.html#appended

[Anonymous]

For those who may be interested,
I find my way with this

$j(document).on(“sf:ajaxfinish”, “.searchandfilter”, function(){
//console.log(“ajax complete”);
/* Masonry */
$j(‘.posts-container’).masonry(‘reload’);
});

[Trevor]

It appears to be this #index-702374, but I can see isotope bits everywhere, and that means this grid is made using Masonry, and that may be very hard to get working with Ajax content refreshing, as the Masonry script needs to be re-triggered using a javascript, which we give details at the top of our FAQ page.

Your theme author may be able to give you the code needed to fit into the ajaxfinish version of the scripts shown.

[Anonymous]

Found it!

$(document).on("sf:ajaxfinish", ".searchandfilter", function(){
        'use strict';
        console.log("ajax complete");
$('#masonry-container').masonry('reloadItems');
        $('#masonry-container').masonry({
            itemSelector: '#masonry-container .grid-item'
        });  
		
});

[Anonymous]

Hi thanks for the reply

I used a custom theme based on foundation (joints wp).

I tried

$( document ).on(“sf:ajaxfinish”, “.searchandfilter”, function() {
$(‘#masonry-container’).masonry({
itemSelector: ‘#masonry-container .grid-item’
});
});

But no effect…

[Trevor]

Hi

Infinite scroll uses Ajax to load the ‘next’ posts, and so you need to do two things:

#1 Detect when our ajax has finished, for which we have a script snippet
#2 Re-run the masonry script on the posts/posts container

Your major problem will be #2 therefore. Each theme seems to implement masonry differently (assuming your theme actually uses Masonry, and not a look-a-like script like Salvattore). Some themes sensibly create a function to do this, and then run that on document ready. That makes life easier. Some simply run a long script on document ready, part of which does the actual masonry bit on the posts. That makes it very hard. You will need the help of your theme author.

I will give an example here, in this case for the Divi theme (which uses Salvattore):

<script>(function ( $ ) {
  "use strict";
  $(document).on("sf:ajaxfinish", ".searchandfilter", function(){
    console.log("ajax complete");
    var grids = document.getElementsByClassName('et_pb_blog_grid');
    salvattore['register_grid'](grids[0]);
  });
}(jQuery));</script>

In the above, the part that re-runs the Salvattore script in Divi is these two lines:

var grids = document.getElementsByClassName('et_pb_blog_grid');
salvattore['register_grid'](grids[0]);

Which is relatively easy.

In essence, it boils down to what theme you are using and if the author of it can help you with this. In the above example, Elegant Themes (the author of Divi) could not help, but as Salvattore is so easy to implement, we figured it ourselves with the help of a third party web site code snippet.

[Ross]

Hi Veronika

Apologies for the delay, I’ve been looking into this.

I think I’ve figured the issue.

It seems that when your shop page is loaded, a script is called to show your products (that nice fade effect where the products appear 1 by 1), this means they are initially set to invisible by your theme, and made visible with your themes Javascript.

What happens when you do an ajax search with S&F is, the results do get loaded in but they are not visible, as initially set by your theme.

If you use your browsers inspector, to look at the HTML you will see the results there hidden.

What you need to do, is detect when an ajax request has finished, then run the scripts to show the item in your shop (I guess this could be some sort of masonry script?)

Fortunately, we have a javascript event for this (sf:ajaxfinish) – https://gist.github.com/rmorse/b157004c68870dbd9fb9#file-sf-pro-ajax-events-js

I hope that makes sense.

Best

[Trevor]

About grids. I would need you to find some information out about the Flatsome UX Builder. It is possible a new feature in Search Filter Pro would allow a grid made by it to work directly with our filter, but …

I assume that the grid that it builds has ‘masonry’-like behaviour. Masonry/Isotope and Salvattore are the most popular commercial scripts out there used by WordPress themes. For example, Divi uses Salvattore and Avada uses Masonry. I cannot see that Flatsome uses either.

The issue with grids is when you trigger a ‘posts reload’ with our filter and Ajax, the grid script needs to re-trigger. This requires the theme author to provide that code. Then you load a script on to the page to do that. This is an example of the script required for Divi with Search & Filter pro:

<script>(function ( $ ) {
  "use strict";
  $(document).on("sf:ajaxfinish", ".searchandfilter", function(){
    console.log("ajax complete");
    var grids = document.getElementsByClassName('et_pb_blog_grid');
    salvattore['register_grid'](grids[0]);
  });
}(jQuery));</script>

Where these lines are what we worked out were required to re-trigger Salvattore in Divi (Divi could not tell us, but we managed to work it out for ourselves):

var grids = document.getElementsByClassName('et_pb_blog_grid');
salvattore['register_grid'](grids[0]);

Masonry is far harder to figure and really needs the theme author to help.

[Trevor]

The previous solution did not use Masonry?

If not, then you need to add some extra javascript to the page to re-trigger the masonry, like this:

<script>(function ( $ ) {
  "use strict";
  $(document).on("sf:ajaxfinish", ".searchandfilter", function(){
    console.log("ajax complete");
    \\ your script to re-trigger masonry
  });
}(jQuery));
</script>

X Theme may be able to answer that. It might be something like:

jQuery('.x-main').Masonry(); or jQuery('.x-main').masonryReset();, or ….