[Support request] Preserve Masonry when using facets to search posts

Please login to receive premium support.

Support for the free plugin can be found here.

Home Forums Pro Support Preserve Masonry when using facets to search posts

Tagged: ,

This topic contains 17 replies, has 2 voices, and was last updated by  Heidi 4 months ago.

Viewing 15 posts - 1 through 15 (of 18 total)
  • Author
    Posts
  • #8304

    Heidi
    Participant

    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!

    #8307

    Tom
    Keymaster

    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 🙂

    #8308

    Heidi
    Participant

    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=masonry

    #8321

    Heidi
    Participant

    According 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!

    #8323

    Tom
    Keymaster

    Let’s try this:

    <script>
        jQuery( document ).on( 'facetwp-loaded', function() {
            jQuery( '.wp-show-posts-masonry' ).masonry( 'layout' );
        } );
    </script>

    Let me know 🙂

    #8329

    Heidi
    Participant

    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.png

    Screenshot 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.png

    Appreciate your help, Tom!

    #8337

    Tom
    Keymaster

    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?

    #8338

    Heidi
    Participant

    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.png

    #8348

    Tom
    Keymaster

    Ah, so that code is firing before the core masonry code. Can you try giving your Hook Element a high priority? Something like 100 maybe?

    #8368

    Heidi
    Participant

    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.

    #8374

    Tom
    Keymaster

    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>
    #8376

    Heidi
    Participant

    Error is gone, but still not working….

    #8380

    Tom
    Keymaster

    Ah, hopefully we’re close. Feel free to send me temp admin login details and I’ll take a look: https://wpshowposts.com/contact/

    #8382

    Heidi
    Participant

    I’ve sent it via message– thanks for your help!

    #8396

    Tom
    Keymaster

    Been playing with it, but still no luck. It’s like masonry isn’t firing even though the trigger is. I wonder if FacetWP has a masonry-specific example of how to use their trigger?

Viewing 15 posts - 1 through 15 (of 18 total)

You must be logged in to reply to this topic.