player no longer works or displays when woocommerce/contact form 7 active

Hi !

Just tested WaveSurfer-WP with WooCommerce and Contact Form 7 installed, and it runs flawlessly.
Generaly, buttons but no waveforms is a sign that the javascript initialization of the script doesn’t run correctly (maybe the .js file is loaded for eg).

Have you tried with another theme ?
Also, have you check the browser JavaScript Console to see if there was an error reported there ?

hey thanks for the reply. im actually working on building this theme, so i am trying to debug the issues im running into. the only wavesurfer js files that are being included are the wavesurfer-wp.js and wavesurfer.min.js that the plugin includes on its own. what would i look for if the js was being initialized at the wrong time? how would enabling CF7 or woocommerce change how wavesurfer loads?

thanks again for the help!

Hi,
If you don’t see any info in the JavaScript console (firefox or chrome), then maybe there is a bad interaction with Ajax page loading, page transition, or any other thing which can prevent the wavesurfer-wp.js init function to run properly.
It seems to be related to your own config (plugins + theme) as I don’t succeed to replicate (and I don’t think woocomerce or cf7 override audio / playlist shortcode).

Maybe to debug, if you don’t have error, put various console.log event on the wavesurfer-wp.js script to see how far the functions run.

Let me know if you succeed !

great idea! thanks!

i found what breaks in the wavesurfer-wp.js when i have woocommerce active;

the on ready function at line 16 fails to fire when woocommerce is active.
heres the function:

$j(document).on('ready ajaxComplete wavesurfer', function(event, request, settings) {
	console.log('ready');
	if (typeof settings !== 'undefined') {
		if (settings.success.name === 'wavesurfer_wp_ajax') return;
	} else {
		WaveSurferInit();
	}
});

i think it is some sort of conflict with the ‘ajaxComplete’ modifier, since i can get a different version of the ready function working great. if i use this instead, it works regardless of other plugins installed:

jQuery(document).ready(function(event, request, settings){
	console.log('ready2');
	if (typeof settings !== 'undefined') {
		if (settings.success.name === 'wavesurfer_wp_ajax') return;
	} else {
		WaveSurferInit();
	}
});

so my question now, since i dont really understand what EXACTLY is happenning, is why does the shorthand version of the on.ready function work great, and the ‘proper’ version not work?

i left the console.logs in to show where im checking in the function. when the woocommerce plugin is active the console.log('ready'); does not log, but if i comment that out, and uncomment the secondary version, the console.log('ready2'); fires and loads everything perfectly.

im not really looking for a change oto the plugin or anything like that, i just want to try and find out why my setup breaks here, when yours doesnt?

• This reply was modified 7 years, 7 months ago by Sk8rSeth.

Ok so it break right at the init. :/

Hmm i don’t know why it break, just know that $j is for jQuery no conflict mod as required by WordPress standard.

var $j = jQuery.noConflict();

are you sure $j isn’t use by another plugin ? (try replacing by another name, and replace initiliaztion too just totest).

ALso, have you try on a fresh install with only woocomerce + contact7form + wavesurfe-wp active with 2016 default theme ?

okay so, it works fine on a different theme, which was expected, and im still seeing the same issues regardless of the variable name for jQuery.noConflict

same if i replace the jQuery on the .ready function;
so this works still

var $portal = jQuery.noConflict();

$portal(document).ready(function(event, request, settings){

but the original does not, and again it works correctly on a different theme. i do not have any other JS files on my theme to conflict (ive removed them all) is it possible im just missing something that a normal theme would have?

is there a way i acn compare the 2016 theme to my theme and see whats missing in my theme? or is there any other things to try?

For theme development, reading basics Theme Developer Handbook | WordPress Developer Resources should be enough to find if something if wrong in your set up. Maybe the solution is in there… ?

Closed because 3 month of inactivity.