- This topic has 17 replies, 2 voices, and was last updated 4 years, 1 month ago by
.
-
Posts
-
I’m using GeneratePress, WP Show Posts and FacetsWP to create a searchable posts page.
https://couchfilmcollective.org/hire-us/
I’m using masonry, but when I search any facet, the masonry stops working– any idea on to keep the masonry working when searching?
Thanks so much as always!
Hi there,
We likely need to reload masonry once FacetWP does its thing. Can you ask them if there’s a JS trigger we can use to reload masonry?
Let me know 🙂
A quick search on FacetWP shows that you are correct. I’ve asked them the question and also found some examples, but I am not sure which of these would apply best to WP Show Posts:
https://gist.facetwp.com/?_keywords=masonryAccording to FacetWP help desk, masonry or other js scripts that need to reload can be done on the facetwp-loaded js hook
https://facetwp.com/documentation/developers/javascript/facetwp-loaded/However, I have no Javascript skills. I’ve tried this, but it doesn’t work:
<script> jQuery(document).on('facetwp-loaded', function() { jQuery( '.masonry-container' ).masonry( 'layout' ); }); </script>Any better ideas? Much thanks!
Let’s try this:
<script> jQuery( document ).on( 'facetwp-loaded', function() { jQuery( '.wp-show-posts-masonry' ).masonry( 'layout' ); } ); </script>Let me know 🙂
No luck, but could certainly be user error on my part. I’m putting the script in Elements– wp_footer and I’ve checked execute PHP, with a display rule of entire site. Is that correct?
Screenshot of Element:
https://couchfilmcollective.org/wp-content/uploads/Screen-Shot-2019-03-22-at-6.16.06-PM.pngScreenshot of a facet search with the masonry not quite working right:
https://couchfilmcollective.org/wp-content/uploads/Screen-Shot-2019-03-22-at-6.25.19-PM.pngAppreciate your help, Tom!
Looks good – you don’t need to execute PHP in this case though.
Can we try this?:
<script> jQuery( document ).on( 'facetwp-loaded', function() { console.log( 'loaded!' ); jQuery( '.wp-show-posts-masonry' ).masonry( 'layout' ); } ); </script>Now right click your page, click “Inspect” and go to the “Console” tab. Then load FacetWP – does the word “loaded!” appear in the console?
I tried that, and I do see “loaded!”, but still not working. It does show an error “cannot call methods on masonry prior to initialization; attempted to call ‘layout'”
Here’s a screenshot of the full console:
https://couchfilmcollective.org/wp-content/uploads/Screen-Shot-2019-03-23-at-7.00.04-PM.pngAh, so that code is firing before the core masonry code. Can you try giving your Hook Element a high priority? Something like
100maybe?I tried adding a priority of 100, but still not working. Same error. Addition things I can try? Grateful for any ideas…also happy to send you admin access if you want to try some things in real time.
Let’s try one more thing before I go in to check it out:
<script> jQuery( document ).on( 'facetwp-loaded', function() { var container = jQuery( '.wp-show-posts-masonry' ); container.imagesLoaded( function() { container.masonry( 'layout' ); } ); } ); </script>Ah, hopefully we’re close. Feel free to send me temp admin login details and I’ll take a look: https://wpshowposts.com/contact/
- You must be logged in to reply to this topic.