wp_enqueue_scripts not working with autoptimize

  • Hi everyone,

    I’ve installed autoptimize for WP 4.6.1 and it works great. However, I’ve noticed some scripts stopped working. All script contained in my scripts.php file are not being loaded anymore:

    scripts.php

    <?php 
function scripts() {
  wp_enqueue_script('placeholder-effect', get_bloginfo('template_url') . '/dist/js/placeholderTypewriter.js',array('jquery') , null, true);
  wp_enqueue_script('slick-js', '//cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js',array('jquery', 'main') , null, true);
  wp_enqueue_script('match-height', get_bloginfo('template_url') . '/dist/js/matchHeight.js',array('jquery', 'main') , null, true);
  wp_enqueue_style('slick-css', '//cdn.jsdelivr.net/npm/[email protected]/slick/slick.css');
  wp_localize_script('main', 'MyAjax', array('ajaxurl' => admin_url('admin-ajax.php')));
  wp_enqueue_script('main', get_template_directory_uri() . '/dist/js/all.js',[] , null, true);
}
add_action('wp_enqueue_scripts', 'scripts');

    this script is loaded from the wp_head(). However none of the scripts loaded with wp_enqueue_script are working. So here, MyAjax remains empty, and is breaking my ajax calls, all the sliders based on slick are breaking on the site and so on..

    What is the workaround to make it work?
    Any help is much appreciated thank you.

    EDIT:

    You can have a look at the dev version: https://acceptance-mobiskill.numeria-communication.com/

    • This topic was modified 4 years, 3 months ago by yohanndevo.
    • This topic was modified 4 years, 3 months ago by yohanndevo.
Viewing 14 replies - 1 through 14 (of 14 total)
  • Plugin Author Optimizing Matters

    (@optimizingmatters)

    can you share your site’s URL so I can have a look at the resulting HTML yohanndevo ?

    frank

    Thread Starter yohanndevo

    (@yohanndevo)

    Thank you, please see my edits to the original post. You’ll see the slider at the bottom is broken, and also check the console error messages.

    • This reply was modified 4 years, 3 months ago by yohanndevo.
    Plugin Author Optimizing Matters

    (@optimizingmatters)

    afraid I’m seeing WP Fastest Cache optimized resources, not Autoptimize’s yohanndevo ?

    Thread Starter yohanndevo

    (@yohanndevo)

    I’m sorry I don’t understand your question. I can deactivate WP Fastest Cache if you want. lmk. Thanks

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    well, when looking at the HTML source of your site, I saw that the JS/ CSS was (also) optimized by WP Fastest Cache. Using 2 plugins to combine and/ or minify CSS/ JS can lead to unpredictable results and things breaking, so indeed the first step would be to disable CSS & JS functionality in WPFC and let only AO handle that part?

    Thread Starter yohanndevo

    (@yohanndevo)

    Got it thank you for your follow up.
    Ok I’ve deactivated WP Fastest Cache for now. The slider at the bottom is still broken (using slick) and some css issues are still here as you can see here:
    https://acceptance-mobiskill.numeria-communication.com/entreprise/

    You can compare with the website in prod:
    https://www.mobiskill.fr

    Thank you so much for your help! Premium support!

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    I’m also seeing issues when AO is disabled (by adding ?ao_noptimize=1 to the URL) yohanndevo
    .

    So ideally that is fixed first.

    Re. autoptimize config; can you disable “try/catch wrapping”?

    Thread Starter yohanndevo

    (@yohanndevo)

    Thanks for your prompt response. I have deactivated the try catch wrapping.
    THanks

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    and have you been able to look into the problems when AO is off as well already yohanndevo ? because I’m now seeing the exact same Uncaught TypeError: $ is not a function error when AO is active, so that will need to be fixed on your end?

    Hi Frank,
    Thank you for your continuing support. Much appreciated.

    I have cleaned the code a little bit, and while the css errors have disappeared, the slider is still breaking. I made sure the error is made obvious on the landing page, if you go to the page with our without the plugin activated, you should see the difference now with the slider being broken up.

    Thank you.

    For some reason, I’m getting this error message:
    Uncaught TypeError: $(…).slick is not a function
    at HTMLDocument.<anonymous> (autoptimize_58639ce18a215fd9d0f1141ff7cd5e71.js:43)
    at mightThrow (autoptimize_58639ce18a215fd9d0f1141ff7cd5e71.js:2421)
    at process (autoptimize_58639ce18a215fd9d0f1141ff7cd5e71.js:2423)

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    I saw the same error. Is the slick jQuery plugin loaded?

    It should be, If I deactivate the plugin automptimize, it works just fine. Not sure why. Also I tried pushing the changes live (I hacked the slider gently to make it look ok for now) but the end results are widely different (no incidence at all on prod when I check on google page speed. I’m considering switching to pro to review everything with one of you guys. Is this something you can help with?

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    I see jQuery slick is loaded from a different domain, you’re not asyncing or deferring are you?

    re. “pro”; we don’t have a pro version of AO, but we do offer optimization services including AO configuration, see https://autoptimize.com/

Viewing 14 replies - 1 through 14 (of 14 total)
  • The topic ‘wp_enqueue_scripts not working with autoptimize’ is closed to new replies.