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.
$(document).on('facetwp-loaded', function () { | |
/* | |
* Initialize Soliloquy sliders if they're loaded while filtering. | |
* | |
* If a Soliloquy slider is loaded in by Ajax, such is the case | |
* in the Creative Portfolio section, it won't be initialized. In | |
* order to do so, we need to call some Ajax of our own and output | |
* the neccessary JS. | |
*/ | |
if (FWP.loaded) { // Only after first load. | |
// Find all sliders with data-soliloquy-loaded=0 | |
var soliloquy_sliders = []; | |
$(".soliloquy-outer-container[data-soliloquy-loaded='0']").each(function () { | |
soliloquy_sliders.push($('.soliloquy-container', $(this)).attr('id').replace(/^\D+/g, '')); | |
}); | |
if (soliloquy_sliders.length > 0) { | |
// Send list of Soliloquy slider IDs via AJAX call to project_ajax_init_sliders() | |
$.post( | |
soliloquy_ajax.ajax, | |
{ | |
action: 'project_init_soliloquy_sliders', | |
ajax_nonce: soliloquy_ajax.ajax_nonce, | |
ids: soliloquy_sliders, | |
}, | |
function (response) { | |
if (response !== '-1' && response !== '0') { | |
eval(response); | |
} | |
} | |
); | |
} | |
} | |
}); |
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.
<?php | |
add_action( 'wp_ajax_project_init_soliloquy_sliders', 'project_ajax_init_sliders' ); | |
add_action( 'wp_ajax_nopriv_project_init_soliloquy_sliders', 'project_ajax_init_sliders' ); | |
/** | |
* Grabs JS and executes it for any uninitialised Soliloquy sliders on screen | |
* | |
* Used in `global.js` to initialize any sliders loaded | |
* by AJAX requests e.g. after an Infinite Scroll event. | |
* | |
* @since 1.0.0 | |
*/ | |
function project_ajax_init_sliders() { | |
if ( ! class_exists('Soliloquy' ) || ! isset( $_REQUEST['ids'] )) { | |
die(); | |
} | |
// Run a security check first. | |
check_ajax_referer( 'soliloquy-ajax-nonce', 'ajax_nonce' ); | |
// Setup instance | |
$instance = Soliloquy_Shortcode::get_instance(); | |
$base = Soliloquy::get_instance(); | |
// Build JS for each slider | |
$js = ''; | |
foreach ( $_REQUEST['ids'] as $slider_id ) { | |
if ( $data = $base->get_slider( $slider_id ) ) { | |
$js .= $instance->slider_init_single( $data ); | |
continue; | |
} | |
} | |
// Output JS | |
echo $js; | |
die(); | |
} |
jesper
thanks so much!
added custom js and addes to custom php. worked like charm combining facetwp and soliloquy!!