Using WPGridBuilder facets with OxyExtras components

WPGridBuilder has recently added further support for Oxygen by adding some new components for adding both Facet’s & Grids. It means we no longer need to add shortcodes and makes it a bit more convenient to work when inside the builder, especially when using together with Repeaters or Easy Posts.

WPGridBuilder with Repeaters

If you’re using a repeater for your posts and using WPGridBuilder to filter and add more posts, one thing you may notice is that if you’re adding some dynamic Oxygen components that use JS inside of the repeater or are adding your own with code blocks, the new content that is appended onto the page may not pick up the same functionality. You may need to adapt your code slightly to account for new elements that didn’t exist on the page when the page first loaded.

This is the case with both the Lightbox & the Read More / Less components.

WPGridBuilder documentation provides JS events that trigger when specific things occur. We can use the event ‘appended’ to listen for when the facets have been used to append new content inside the repeater and make surer these components function as they’re supposed to.

Support for Lightboxes & Read More components

You can add the following code to a code block. (Make sure the code block isn’t actually inside of the repeater that WPGridBuilder is using)..

window.WP_Grid_Builder && WP_Grid_Builder.on( 'init', onInit );

function onInit( wpgb ) {
    wpgb.facets.on( 'appended', onAppended );
}

function onAppended( content ) {
    
    /* Lightbox */
    if (typeof doExtrasLightbox == 'function') {
    	doExtrasLightbox(jQuery(content));
    }
  
    /* Read More / Less */
    if (typeof doExtrasReadmore == 'function') {
    	doExtrasReadmore(jQuery(content));
    }
}

Should this just be built-in?

If WPGridbuilder starts to gain a lot of popularity for OxyExtras users (they’re currently offering Oxygen users a discount for their LTD), it may be a good idea in the future to add support for it out of the box. For now, as there are a few different methods for adding Oxygen components to a page dynamically, the priority was to make sure there was a way to use these components in AJAX loaded content regardless of which method you’re using.

These two new functions doExtrasLightbox($content) and doExtrasReadmore($content) provide a way to do that. You just need to pass the new AJAX-loaded content as the parameter ($content).

doExtrasLightbox(jQuery('.my-new-content'));

Where you add this will depend on the plugin you’re using to add the content, you’d need to refer to the plugin documentation.

Note – if you’re using our own Infinite Scroller component, then this is already working out of the box.