.flexslider is not a function error

Hi ReallyGreenJames,
Do you by chance have WooCommerce installed? I have HG Slider on a number of projects and it’s working fine with WP 4.8. I ran some tests and as soon as I install the latest version of WooCommerce, HG Slider stops loading (same as you described above). I haven’t found a solution yet. If I find one, I’ll post it here.
PK

Hi Pat,
I do have WooCommerce installed. That’s interesting.

I found a workaround by simply adding my own call in the site’s header, just before the closing </head>:

`<script type=”text/javascript” charset=”utf-8″>
jQuery(window).load(function() {
jQuery(‘.flexslider’).flexslider();
});
</script> `

Works! Thanks for sharing your workaround ReallyGreenJames!

PK

Thanks guys. I had the same problem. Flexslider in combination with Woocommerce stopped working. But the workaround solved the issue for now.

I had the same issue when I upgraded WooCommerce.

Thanks for the work-around, Pat! Calling the flexslider function again after the document loads did fix my slider, but it didn’t get rid of the console error from the original function call.

I found what I think is the root of the problem. I noticed that the flexslider shortcode PHP function embeds a javascript call to the jQuery.flexslider function directly in the HTML rather than calling it only after the document is ready. Since the WooCommerce updated the version of jQuery flexslider, it gets loaded later and it’s not yet defined when the shortcode HTML gets loaded.

I fixed up the PHP code by adding two lines to the show_flexslider_rotator function to ensure the flexslider function is only called after the document is ready. You can see which lines I added by looking at the two lines of code that begin with a + plus sign. (Don’t copy the plus sign into your PHP code).

Here is the patch:

Index: wp-content/plugins/flexslider-hg/flexslider-hg.php
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
--- wp-content/plugins/flexslider-hg/flexslider-hg.php	(revision 404db2e72def25bde08da3f45dc0922b19301fc0)
+++ wp-content/plugins/flexslider-hg/flexslider-hg.php	(revision )
@@ -271,6 +271,7 @@
 		
 		// INIT THE ROTATOR
 		$rtn .= '<script>';
+		$rtn .= " jQuery(document).ready( function() {";
 		$rtn .= " jQuery('#flexslider_hg_{$slug}').flexslider( ";
 			
 		if(isset($rotators[ $slug ]['options']) AND $rotators[ $slug ]['options'] != "") 
@@ -279,6 +280,7 @@
 		}
 				
 		$rtn .= " ); ";
+		$rtn .= "} );";
 		$rtn .= '</script>';		
 	}
 	wp_reset_postdata();

• This reply was modified 7 years ago by mossyrock.

Hey Mossyrock, great detective work! Thanks for sharing your patch!
PK