Archived topic
masonry, load more and ajax filtering with facetwp
8 replies · Started by Aaron on March 22, 2022
I try to implement facetwp filtering on my archive pages, which use the masonry layout with a load more button. After filtering, the posts are lined up in one small column instead of 3, and the "load more" button is missing. A page refresh will fix it, so I guess I have to run some javascript after the content has changed via ajax? I guess I could do so by using
(function($) {
document.addEventListener('facetwp-loaded', function() {
//Your code here
});
})(jQuery);
What scripts should I run in the event-listener, assuming my approach is valid?
Hi Aaron,
Sounds like this would require a custom solution which might be out of the scope of this forum.
Have you checked with Facetwp's support team first?
Hey Leo, no I did not check the facetwp's support team, because I only got a demo version for testing purposes - to check if I will buy - which they don't offer support for. I noticed that the masonry script is part of the WordPress core. So maybe you could push me in the right direction? If you are willing to help, you may take a look on my staging area wich I put a link to in the privat aera. Just click on Movies in the navigation, and you will see the facetwp filter integration.
I found this statement: and since you are utilizing .../wp-includes/js/masonry.min.js in generatepress, I thought you could mention how I could retrigger scripts that are associated with load more and masonry.
Hi there,
another user posted this - it may provide some pointers:
https://generatepress.com/forums/topic/call-methods-on-masonry-prior-to-initialization/#post-694806
Regarding the columns that maybe because FacetWP inserts its container inside the generate-columns-container which breaks the columns, see my reply here to a similar issue:
https://generatepress.com/forums/topic/facet-wp-with-blog-archive/#post-2118241
Hi there,
another user posted this – it may provide some pointers:
https://generatepress.com/forums/topic/call-methods-on-masonry-prior-to-initialization/#post-694806
Thank you David, that's it for the Layout. What I missed was the script source, it is coming from gp-premium/blog/functions/js/scripts.js
However, I am still struggling with the "Load more" button, which should not be available if the query results are below the post per page value. Could you show to me which script in generatepress is handling that?
I thinks it part of the infinite scroll:
blog/functions/js/infinite-scroll.pkgd.min.js
As far as I analyzed it, the load button logic is set in php in the generate_blog_load_more()function, wich has a guard clause
if ( $wp_query->max_num_pages < 2 ) {
return;
}
I don't see how I can handle this with Ajax.
I think I am going to need another "load more" solution. I will report if I came up with something that may be of help to others.
I found a solution:
I disabled pagination with
add_action('wp',function(){
remove_action( 'generate_after_loop', 'generate_do_post_navigation' );
});
and used a "load more" button from facetwp which has its own short code.
Glad to hear you found a solution - and thanks for sharing.
