How to access Flexslider instance?

  • Resolved leemon

    (@leemon)


    9 months, 1 week ago

    Some time ago, I added to following code to one of my themes to be able to control the Flexslider slider added by WooCommerce to product galleries. It was working with no problems, but recently I’m getting an “Uncaught TypeError: “slider” is undefined” when triggering the “click” events added by my script.

    ( function( $ ) {

	$( function() {
		
		var slider = $( '.woocommerce-product-gallery' ).data( 'flexslider' );

		console.log( $( '.woocommerce-product-gallery' ) ); // The class exists.

		$( '.woocommerce-product-gallery__image' ).on( 'click', function( e ) {
			e.preventDefault();
			var x = e.pageX - $( this ).offset().left;
			var width = $( this ).width();
			if ( x < width / 2 ) {
				slider.flexAnimate( slider.getTarget( 'prev' ) );
			} else {
				slider.flexAnimate( slider.getTarget( 'next' ) );
			}
		});

		$( '.woocommerce-product-gallery-slider-nav .slider-prev' ).on( 'click', function( e ) {
			e.preventDefault();
			slider.flexAnimate( slider.getTarget( 'prev' ) );
		});

		$( '.woocommerce-product-gallery-slider-nav .slider-next' ).on( 'click', function( e ) {
			e.preventDefault();
			slider.flexAnimate( slider.getTarget( 'next' ) );
		});

	});
	
} )( jQuery );

    Has something changed in the Flexslider code shipped with WooCommerce? How can I get the Flexslider instance to be able to attach events to it now?

    Any help would be appreciated?

    • This topic was modified 9 months, 1 week ago by leemon.
Viewing 7 replies - 1 through 7 (of 7 total)

  • Could you give me the website link which includes this gallery. Maybe the HTML structure changed and Javascript can no longer access the DOM.

    Thread Starter leemon

    (@leemon)

    Here it is: https://toniamengual.com/product/devotos-book/

    You can trigger the error in the console when clicking the PREVIOUS and NEXT links.

    Thanks

    Hi there @leemon ??

    Thanks for reaching out to Woo Support!

    Has something changed in the Flexslider code shipped with WooCommerce?

    Based on the changelog (linked here), the most recent change is this one.

    How can I get the Flexslider instance to be able to attach events to it now?

    To get an idea of what you are trying to accomplish, could you please describe the needs that the customization was serving until now, in plain English?

    We await your response to better assist you.

    Thread Starter leemon

    (@leemon)

    I need to attach three click events to control the slider. Two of them on custom prev/next links and the last one on the slider itself so the user is able to slide to the prev/next slide when clicking it.

    Here is the slider having the issue: https://toniamengual.com/product/devotos-book/

    Thread Starter leemon

    (@leemon)

    Sorry, I thought my solution worked, but it only does intermittently. So, I deleted it.

    • This reply was modified 9 months, 1 week ago by leemon.
    Thread Starter leemon

    (@leemon)

    Apparently, since WC 8.3, all frontend scripts (including the FlexSlider one) are loaded using the “defer” loading strategy. Since my script wasn’t enqueued using this strategy, it was executed before the FlexSlider script, so the instance didn’t exist yet.

    Therefore, I solved this issue using this code:

    wp_enqueue_script(
	'child-script',
	get_stylesheet_directory_uri() . '/assets/js/my-script.js',
	array( 'jquery', 'flexslider' ),
	filemtime( get_stylesheet_directory() . '/assets/js/my-script.js' ),
	array(
		'in_footer' => false,
		'strategy'  => 'defer',
	)
);
    anastas10s

    (@anastas10s)

    That’s great to hear! Thank you so much for adding your input, @leemon! Some of our customers might indeed find this guide helpful!

    We appreciate you being an active part of the community ??

    Have a wonderful day!

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘How to access Flexslider instance?’ is closed to new replies.