Autoptimize conflicts with WP Visual Composer

Resolved bond138
(@bond138)

11 years, 1 month ago
Hi Frank

Thanks for a great plugin it’s helped get my site up to a grade A on YSlow.

I’ve been using Autoptimize since my site went live a week ago.

I have Visual Composer (a drag and drop page builder) installed and came to use it last night for the first time since installing Autoptimize. The front end editor failed to open and the page hung with the VC icon constantly spinning.

I did a search and found this thread relating to a similar drag and drop editor – https://ww.wp.xz.cn/support/topic/autoptimize-conflicts-with-wp-beaver-builder?replies=10#post-6795187

I tried adding the ?ao_noptimize=1 to the URL but this didn’t work.

So I created a new plugin based on your autoptimize_helper.php.

First you load the page you want to edit and click on ‘Edit with Visual Composer’ this calls the front end editor like this:

http://example.com/wp-admin/post.php?vc_action=vc_inline&post_id=23&post_type=page

This is the code I used in the autoptimize_helper.php file based on the thread I linked to earlier.
```
add_filter('autoptimize_filter_noptimize','visual_noptimize',10,0);
function visual_noptimize() {
	if (strpos($_SERVER['REQUEST_URI'],'vc_action')!==false) {
		return true;
	} else {
		return false;
	}
}
```
I activated the plugin, cleared the cache in Autoptimize and Hyper Cache and gave it a try. Unfortunately this didn’t work, assuming what I did was correct.

Can you offer any further advice as I would really like to continue using Autoptimze as I think it’s excellent?

Regards

Peter

https://ww.wp.xz.cn/plugins/autoptimize/

Viewing 15 replies - 1 through 15 (of 27 total)

1 2 →

Plugin Author Frank Goossens
(@futtta)

11 years, 1 month ago

seems correct at first sight. can you check when on a visual-composer-enabled page and looking at the HTML source, if there are any indications AO is active (i.e. are there links to cache/autoptimize/js/autoptimize_*.js or cache/autoptimize/css/autoptimize_*.css?

Thread Starter bond138
(@bond138)

11 years, 1 month ago

Thanks Frank

I’ve had a look at the HTML source when Visual Composer Frontend Editor starts to load and there are no links to AO. But I’m guessing VC loads on top of the page as when I enable Developer Tools in Chrome I see two errors –

1) Uncaught SyntaxError: Unexpected token % in autoptimize_6d7….js:5

2) Uncaught TypeError: vc.frame_window.jQuery is not a function in shortcodes_builder.js:71

Hopefully this may throw some light on the issue.

Thanks

Peter

Plugin Author Frank Goossens
(@futtta)

11 years, 1 month ago

well error (1) clearly refers to autoptimize_xyx.js, but there’s no autoptimize linked in the HTML? or does VC perform other requests for pages, this time without vc_action in the url (but maybe anohter parameter)?

frank

Thread Starter bond138
(@bond138)

11 years, 1 month ago

Yes this is the sequence I found in Developer Tools:

‘http://…/?vc_editable=true&vc_post_id=84
http://…/wp-admin/load-scripts.php?
http://…/wp-admin/load-scripts.php?
http://…/wp-admin/load-styles.php?
http://…/wp-admin/post.php?vc_action=vc_inline&post_id=84&post_type=page’

After this it looks in

wp-content/cache/autoptimize
plugins/…
themes/….
wp-includes/…
etc

I haven’t included the long list of scripts called but I can do if this would help?

Thanks

Peter

Plugin Author Frank Goossens
(@futtta)

11 years, 1 month ago

OK, I think the important one is:
http://.../wp-admin/post.php?vc_action=vc_inline&post_id=84&post_type=page

I guess this post results in a HTTP redirect (302), which fetches the updated page itself again. if the redirect does not have the vc_action parameter in it, the CSS/JS in there would be autoptimized, leading to the JS error.

Can you dive into developer tools and check if there is a 302 and if so, to which URL? feel free to copy/paste the first 5 or 10 lines right after the /wp-admin/post.php!

frank

Thread Starter bond138
(@bond138)

11 years, 1 month ago

Hi Frank

I really appreciate your help with this thank you very much.

I’m not a coder or developer so I muddling through this the best I can. I can’t see a 302 redirect but I suppose there must be one as the URL points to the post id rather than the page.

Before I bought Visual Composer they set me up with a preview site to play around with it. I best not post the link here but I’ve sent you the link via the contact page on your blog. Hopefully this will offer more insight if you’re able to take a look.

Thank you.

Peter
Plugin Author Frank Goossens
(@futtta)

11 years, 1 month ago
so let’s try to outsmart VC 😉

I guess you have to be logged in, in order to edit the site with VC? So this:
```
add_filter('autoptimize_filter_noptimize','visual_noptimize',10,0);
function visual_noptimize() {
	if (is_user_logged_in()) {
		return true;
	} else {
		return false;
	}
}
```
should disable AO if the user is logged in. wonder if that would work 🙂

frank
Thread Starter bond138
(@bond138)

11 years, 1 month ago

Thanks Frank I’ll give that a try.

I tried to copy what happens after /wp-admin/post.php in developer tools but I couldn’t figure out how to copy the list so I did a screen dump from IE developer tools output. Here is the link to the photo:

https://www.dropbox.com/s/txxlel5z0sj0c90/scripts%20called.jpg?dl=0

Thanks Peter

Thread Starter bond138
(@bond138)

11 years, 1 month ago

I gave the updated code a try but the issue still persists.

Perhaps the screen dump above may help.

As a workaround I could disable optimising JS save and clear the cache. Clear Hyper Cache so my site visitors still see a working page and re-enable after I’ve finished editing in VC.

Thanks

Peter

Plugin Author Frank Goossens
(@futtta)

11 years, 1 month ago

hmm, I don’t see autoptimize_xyz.js (which is causing the JS error) loaded in the screendump, so I’m afraid I’ll need more than that.

frank

Thread Starter bond138
(@bond138)

11 years, 1 month ago

Here’s a screen dump from developer tools in chrome, this shows the JS file created after clearing the cache’s.

https://www.dropbox.com/s/1noutg92jw6i90v/scripts-called-chrome.jpg?dl=0

Thanks

Peter

Plugin Author Frank Goossens
(@futtta)

11 years, 1 month ago

is “snapwp” a page or post slug on your site, or is this something VC came up with?

oh, and could you, if only for a couple of minutes, disable hypercache & try again? i suspect it might be involved somehow …

Thread Starter bond138
(@bond138)

11 years, 1 month ago

I cleared the cache in Hyper Cache and deactivated the plugin. Cleared AO’s cache and tried VC again but sadly no change.

“snapwp” is the subdirectory WordPress is installed in.

Thanks

Peter

Thread Starter bond138
(@bond138)

11 years, 1 month ago

I don’t really know how WordPress and Visual Composer work together but looking at the demo site (see the link I sent you via email) VC loads the page to be edited into a frame.

So when I look at the source HTML as VC tries to load I guess I’m looking at the frame. So that’s why there is no AO JS in the source HTML.

The page to be edited does get optimised by AO before it’s loaded into the frame. But because VC hangs the AO JS only shows up in the Developer tools.

That’s my guess.

Peter

Thread Starter bond138
(@bond138)

11 years, 1 month ago

The developers of VC have suggested I block all the JS in their plugin folder, over 30 of them!

Do I have to include the .js after each file name in the “Exclude scripts from Autoptimize:” box as I see the default ones don’t include the file extension?

Thanks

Peter

Viewing 15 replies - 1 through 15 (of 27 total)

1 2 →

The topic ‘Autoptimize conflicts with WP Visual Composer’ is closed to new replies.