Initialise Soliloquy sliders loaded by AJAX

I was working on a site recently where Soliloquy was used along with FacetWP, and in this case, clicking to go to the next or previous post would load in a Soliloquy slider dynamically. The problem I faced was that the slider being loaded was not automatically initialised.

Now my search for answers led me to a post on the Soliloquy Blog which suggested that I could use a neat JS function they’d already provided called soliloquyInitManually(). The problem was, that although the JavaScript part existed, the PHP code required to initialise each slider had not been completed, so the function was more or less useless.

I was able to write my own JavaScript and PHP callback to get around the issue.

 1$(document).on('facetwp-loaded', function () {
 2    /*
 3     * Initialize Soliloquy sliders if they're loaded while filtering.
 4     *
 5     * If a Soliloquy slider is loaded in by Ajax, such is the case
 6     * in the Creative Portfolio section, it won't be initialized. In
 7     * order to do so, we need to call some Ajax of our own and output
 8     * the neccessary JS.
 9     */
10 
11    if (FWP.loaded) { // Only after first load.
12        // Find all sliders with data-soliloquy-loaded=0
13        var soliloquy_sliders = [];
14        $(".soliloquy-outer-container[data-soliloquy-loaded='0']").each(function () {
15            soliloquy_sliders.push($('.soliloquy-container', $(this)).attr('id').replace(/^\D+/g, ''));
16        });
17 
18        if (soliloquy_sliders.length > 0) {
19            // Send list of Soliloquy slider IDs via AJAX call to project_ajax_init_sliders()
20            $.post(
21                soliloquy_ajax.ajax,
22                {
23                    action: 'project_init_soliloquy_sliders',
24                    ajax_nonce: soliloquy_ajax.ajax_nonce,
25                    ids: soliloquy_sliders,
26                },
27                function (response) {
28                    if (response !== '-1' && response !== '0') {
29                        eval(response);
30                    }
31                }
32            );
33        }
34    }
35});

The JS will run after FacetWP has loaded, search for un-initialised Soliloquy sliders, and call our PHP function project_init_soliloquy_sliders for each. The following PHP function is what’s called by AJAX, and should be placed in your theme functions.php file.

 1add_action( 'wp_ajax_project_init_soliloquy_sliders', 'project_ajax_init_sliders' );
 2add_action( 'wp_ajax_nopriv_project_init_soliloquy_sliders', 'project_ajax_init_sliders' );
 3/**
 4 * Grabs JS and executes it for any uninitialised Soliloquy sliders on screen
 5 *
 6 * Used in `global.js` to initialize any sliders loaded
 7 * by AJAX requests e.g. after an Infinite Scroll event.
 8 *
 9 * @since 1.0.0
10 */
11function project_ajax_init_sliders() {
12 
13    if ( ! class_exists('Soliloquy' ) || ! isset( $_REQUEST['ids'] )) {
14        die();
15    }
16 
17    // Run a security check first.
18    check_ajax_referer( 'soliloquy-ajax-nonce', 'ajax_nonce' );
19 
20    // Setup instance
21    $instance = Soliloquy_Shortcode::get_instance();
22    $base     = Soliloquy::get_instance();
23 
24    // Build JS for each slider
25    $js = '';
26    foreach ( $_REQUEST['ids'] as $slider_id ) {
27        if ( $data = $base->get_slider( $slider_id ) ) {
28            $js .= $instance->slider_init_single( $data );
29            continue;
30        }
31    }
32 
33    // Output JS
34    echo $js;
35    die();
36 
37}

Initialise Soliloquy sliders loaded by AJAX

One comment

Leave a Reply Cancel reply