[Resolved] parametric search – when filters applied, it changes output code.

[Author]

Posts

[staceyz]

I'll send the link in a private message, but if you go to my dev site, click on SEARCH ARTISTS in the menu.

If you don't apply a filter, everything works as expected and as I coded in the templates: results appear and if you click on one of the results the detailed info opens a bootstrap modal with the details in another template. You'll see that the modal has a slider of about 5 images, which is powered by another plugin. It works great as long as a filter is not applied.

If you apply any of the filters on the left, the modal opens fine, but the slider is no longer working.

You can inspect the HTML and see that it strips away some of the slider functionality.
without filter the div includes the following:
<div class="slick-slide" data-slick-index="1" aria-hidden="true" style="width: 375px; position: relative; left: -375px; top:
0px; z-index: 998; opacity: 0; transition: opacity 500ms ease 0s;" tabindex="-1">

with filter, the div is just a div <div>

[Waqar]

Hi,

Thank you for contacting us and I'd be happy to assist.

I've set your next reply as private and you're welcome to share temporary admin login details and link to a page where this view can be seen.

Note: Please make a complete backup copy, before sharing the access details.

regards,
Waqar

[Waqar]

Hi,

Thank you for waiting and for sharing the admin access.

During troubleshooting, I noticed the "We Block" plugin includes the script to initialize the slider, in a way that it works when the page is loaded or reloaded.
( ref: hidden link )

To make it also execute, when the view's results are updated through AJAX (through pagination or through search filters), I included some custom script to also initialize it with "js_event_wpv_pagination_completed" & "js_event_wpv_parametric_search_results_updated" events:
( you'll find it in the "JS editor" tab under the "Search and Pagination" of the view "Search Artists")

jQuery( document ).on( 'js_event_wpv_pagination_completed js_event_wpv_parametric_search_results_updated', function( event, data ) {

jQuery('.imgSlider').slick({
    	autoplay: true,
        autoplaySpeed: jQuery('.imgSlider').attr('data-speed'),
        fade: true,
    });

    if(jQuery('.imgSlider').attr('data-hidecontrol') == 1){
    	jQuery('.imgSlider .slick-arrow').hide();
    }

    jQuery('.testimonialSlider').addClass('style'+jQuery('.testimonialSlider').attr('data-t_style'));

    if(jQuery('.testimonialSlider').attr('data-t_style') != 3){
	    jQuery('.testimonialSlider').slick({
	    	dots: true,
	    	autoplay: true,
	        autoplaySpeed: jQuery('.testimonialSlider').attr('data-t_speed'),
	        slidesToShow: jQuery('.testimonialSlider').attr('data-t_show'),
	   		slidesToScroll: 1,
	   		responsive: [{
		      breakpoint: 900,
		      settings: {
		        slidesToShow: 2,
		      }
		    }, {
		      breakpoint: 600,
		      settings: {
		        slidesToShow: 1,
		      }
		    }]
	    });

	    if(jQuery('.testimonialSlider').attr('data-t_show') > 1){
	    	jQuery('.testimonial').addClass('border');
	    }

	    if(jQuery('.testimonialSlider').attr('data-t_hidecontrol') == 1){
	    	jQuery('.testimonialSlider .slick-arrow').hide();
	    	jQuery('.testimonialSlider .slick-dots').hide();
	    }
	}


	jQuery('.logoSlider').addClass('style'+jQuery('.logoSlider').attr('data-l_style'));

	if(jQuery('.logoSlider').attr('data-l_style') != '2'){
	    jQuery('.logoSlider').slick({
	    	dots: true,
	    	autoplay: true,
	        autoplaySpeed: jQuery('.logoSlider').attr('data-speed'),
	        slidesToShow: jQuery('.logoSlider').attr('data-l_show'),
	   		slidesToScroll: 1,
	   		responsive: [{
		      breakpoint: 1024,
		      settings: {
		        slidesToShow: 4,
		      }
		    }, {
		      breakpoint: 600,
		      settings: {
		        slidesToShow: 2,
		      }
		    }, {
		      breakpoint: 400,
		      settings: {
		        slidesToShow: 1,
		      }
		    }]
	    });

	    if(jQuery('.logoSlider').attr('data-hidecontrol') == 1){
	    	jQuery('.logoSlider .slick-arrow').hide();
	    	jQuery('.logoSlider .slick-dots').hide();
	    }
	}
  
});

I hope this helps and please let me know if you need any further assistance around this.

regards,
Waqar

[staceyz]

My issue is resolved now. Thank you!