Ask your WordPress questions! Pay money and get answers fast! (more info)

Help me debug my checkout page WordPress

  • SOLVED

When using Autoptimize ([[LINK href="https://wordpress.org/plugins/autoptimize/"]]wordpress.org/plugins/autoptimize[[/LINK]]/) on our Woocommerce store, logged-in customers cannot enable the pop-out dialogue for using voucher-codes.

[[LINK href="https://www.dropbox.com/s/exziofaoouts5wv/popout.gif?dl=0"]]See how it's supposed to work here[[/LINK]]

I am getting a javascript error which I suspect is the cause, and this only happens when a customer is logged-in.

If I disable Autoptimize everything works fine.

<strong>I would like to exclude the specific script from being minified by Autoptimize, I'm just not sure which one it is.
Please help me find out.</strong>

I have created a temporary customer test account here:
user: testuser
passwd: MIiMwee%4WtIJ7RewIAX%*Ny

Steps to reproduce
1) Login with test account [[LINK href="https://purelyprofessional.dk/min-konto/"]]purelyprofessional.dk/min-konto[[/LINK]]
2) Add something to cart
3) Go to checkout page ([[LINK href="https://purelyprofessional.dk/check-ud/"]]https://purelyprofessional.dk/check-ud/[[/LINK]]) and try to click on "Har du en kupon? Klik her for at indtaste din kode" ([[LINK href="https://www.dropbox.com/s/vki55cmnd4lwj9a/Screenshot_120215_062434_PM.jpg?dl=0
"]]see this image[[/LINK]])

(The site is in Danish)

I don't want any solutions that require hacking core or plugin files and isn't a long lasting fix.

Answers (3)

2015-12-02

dimadin answers:

You need to compare both before and after and since Autoptimize is turned on we can only see before. Error is looks like it is in last file, something about "parallax map".


dimadin comments:

Sorry, sentence should start "We need to compare" and should end "we can only see after".


cruiseback comments:

True, I will see if I can set up a version of the site without Autoptimize enabled (we need to have it on our live site for performance reasons).


cruiseback comments:

I have set up a fresh copy of our site on our staging server https://purelypro.staging.wpengine.com/check-ud/, and have disabled Autoptimize.

The user account works on that one as well.


dimadin comments:

Are you sure you site wasn't hacked? Because end of minified file contains code that is not in last file nor I found it in other files, while it uses some hashing so code is unreadable (common in hacks).

Try deleting that plugin and installing again.


dimadin comments:

Ah, sorry, found source of this. It seems that inline scripts are using base64_encode and then are minified. Put this code somewhere to try stopping minification of inline scripts:

add_filter( 'autoptimize_js_include_inline', '__return_false' );


cruiseback comments:

@dimadin

This actually works, although I get a new js error upon applying your code, with jQuery not being defined.

Secdonly, can it be made so that this filter is only applied on checkout page?


dimadin comments:

Reason for this is because Autoptimize place inline script before concatenated one which hold jQuery, which is needed for this inline script. So you need to exclude jQuery.

All in all, I don't think that Autoptimize (or any tool which does automatic concatenation of scripts and styles) is good, the only way to properly do this is to do it manually after review of what files, in what order, and in what pages are used.


cruiseback comments:

Yes, but that is not an option for us at this point in time.

Can you make it so that inline scripts only get excluded on checkout page?


dimadin comments:

Try this code. If this doesn't work, then the only option is to try something on server you are actually using (because it may have different code) but that doesn't mean this is solvable.

Problem is that Autoptimize is poorly coded while JavaScript from WooCommerce isn't injected in standard way, so very bad combination.


function md_remove_inline_woo_js() {
remove_action( 'wp_footer', 'wc_print_js', 25 );
add_action( 'wp_footer', 'md_global_woo_js', 26 );
}
add_action( 'wp_footer', 'md_remove_inline_woo_js', 1 );

function md_ao_html_after_minify( $content ) {
global $md_global_woo_js;

$content .= str_replace( "</body>", $md_global_woo_js . "</body>", $content );

return $content;
}
add_filter( 'autoptimize_html_after_minify', 'md_ao_html_after_minify', 1 );

function md_global_woo_js() {
global $md_global_woo_js;

ob_start();

wc_print_js();

$content = ob_get_clean();

$md_global_woo_js = $content;
}


cruiseback comments:

The first small snippet you posted works just fine, isn't it possible to add a something simple such as

if is pageslug (check-ud) {
add_filter( 'autoptimize_js_include_inline', '__return_false' );
}

We only have this problem on our checkout page.


dimadin comments:

Try this:


function md_inline_woo_js_on_checkout() {
if ( is_checkout() ) {
add_filter( 'autoptimize_js_include_inline', '__return_false' );
}
}
add_action( 'template_redirect', 'md_inline_woo_js_on_checkout' );


cruiseback comments:

Thanks, I will choose this as best solution for this situation.

2015-12-02

Jayaram Y answers:

Hi,

I noticed one thing. When you are logged in, you have a points to be used while checking out. when you use the points, the points section goes away and the apply coupon is working as you needed. So i think there is conflict with the points system plugin and woocommerce.

If you want, you can have a jQuery tweak to show / hide the coupon. Let me know if you want that fix. Will be happy to help


cruiseback comments:

That seems to be the case yes, but whenever I disable Autoptimize that conflict goes away, so I am led to believe that something with the minifcation is also going wrong somehow.


cruiseback comments:

I have set up a fresh copy of our site on our staging server https://purelypro.staging.wpengine.com/check-ud/, and have disabled Autoptimize.

The user account works on that one as well.

2015-12-03

Reigel Gallarde answers:

maybe we could just disable AO on checkout page?

add_filter('autoptimize_filter_noptimize','visual_noptimize',10,0);
function visual_noptimize() {
if (is_checkout()) {
return true;
} else {
return false;
}
}


cruiseback comments:

@Reigel

I found that script too, and it is a possibility but for performance reasons I would much rather like to only exclude the script that breaks.


Reigel Gallarde comments:

that's the only thing I can suggest right now.
It's hard to debug on my part where all I can see is that AO is the one breaking...

[[LINK href="http://i.imgur.com/gKzjPEt.png"]]see this image[[/LINK]]