Woocommerce - Cookies is not defined

Question

Well,

I'm getting JS error "Cookies is not defined", but "js.cookie.min.js" is loaded before "woocommerce.min.js".

I check apache log to see if there's any error, but has none. I don't have caching plugins.

I don't know how to track this error to find the root cause, everything seems OK.

waitForImages is another JS that is loaded but I'm getting a error.

Am I missing something? Tips to find the bug?

EDIT*********

Further investigation

This is the code from js-cookie, for some reason I don't understand js-cookie is setting "registeredInModuleLoader" to true, but the variable "Cookies" is not defined yet.

;(function (factory) {
    var registeredInModuleLoader = false;
    if (typeof define === 'function' && define.amd) {
        define(factory);
        registeredInModuleLoader = true;
    }
    if (typeof exports === 'object') {
        module.exports = factory();
        registeredInModuleLoader = true;
    }
    if (!registeredInModuleLoader) {
        var OldCookies = window.Cookies;
        var api = window.Cookies = factory();
        api.noConflict = function () {
            window.Cookies = OldCookies;
            return api;
        };
    }
} /* ... */

EDIT 2

I think I found the issue, but don't know why yet.

Monday I put a singup form from MailChimp which needs this code. I think that the problem is with "embed.js", because in the condition "define.amd" (above) points to "embed.js". After remove this script the error is gone.

Any thoughts?

<script type="text/javascript" src="//s3.amazonaws.com/downloads.mailchimp.com/js/signup-forms/popup/embed.js" data-dojo-config="usePlainJson: true, isDebug: false"></script>

<script type="text/javascript">require(["mojo/signup-forms/Loader"], function(L) { L.start({"baseUrl":"mc.us14.list-manage.com","uuid":"xxxxxxxxxxxxxxxxxxxxxxxxx","lid":"xxxxxxxxxx"}) })</script>

SOLVED

I change the position of Mailchimp script to the last item before , no more issues.

Thanks.

Answer 1

I change the position of Mailchimp script to the last item before </body>, no more issues.

Maybe mailchiump script tried to load something that aren't load yet..

Answer 2

This usually happens when you have 2 versions of jquery being loaded on your page, commonly caused by trying to use google for jquery or themes. This needs to be removed. You cannot reproduce this one with a clean install.

After checking that and confirming jquery is loaded correctly, once, see https://docs.woocommerce.com/document/jquery-cookie-fails-to-load/

Answer 3

Rename files and update functions.php

wp-content/plugins/woocommerce/assets/js/jquery-cookie/jquery.cookie.js
wp-content/plugins/woocommerce/assets/js/jquery-cookie/jquery.cookie.min.js

to:

wp-content/plugins/woocommerce/assets/js/jquery-cookie/jquery_cookie.js
wp-content/plugins/woocommerce/assets/js/jquery-cookie/jquery_cookie.min.js

And add the following to your theme’s functions.php file:

add_action( 'wp_enqueue_scripts', 'custom_frontend_scripts' );function custom_frontend_scripts() {global $post, $woocommerce;

$suffix = defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ? : '.min';
wp_deregister_script( 'jquery-cookie' );
wp_register_script( 'jquery-cookie', $woocommerce->plugin_url() . '/assets/js/jquery-cookie/jquery_cookie' . $suffix . '.js', array( 'jquery' ), '1.3.1', true );
}

Answer 4

Issue affected us, too, just after implementing the MailChimp popup on our WordPress WooCommerce site. We had issues with adding gift certificates to the cart, being able to enable or disable shipping to a different address than billing on the checkout page, drag & drop uploading of files, etc. - essentially anything else using jQuery/javascript further down the page ...

Though I'd loaded this script in the footer, I hadn't taken steps to put it at the very bottom of the footer / load it last.

So, for those that might need specific help with how, exactly, to load just the MailChimp List Signup Popup at the bottom of the footer, may I suggest the following:

add_action('wp_footer', 'so45956946_mailchimp_popup', PHP_INT_MAX);

function so45956946_mailchimp_popup(){ ?>
<script type="text/javascript" src="//downloads.mailchimp.com/js/signup-forms/popup/embed.js" data-dojo-config="usePlainJson: true, isDebug: false"></script><script type="text/javascript">require(["mojo/signup-forms/Loader"], function(L) { L.start({"baseUrl":"mc.usXX.list-manage.com","uuid":"YOUR_UUID","lid":"YOUR_LID"}) })</script>
<?php }

By putting the PHP_INT_MAX (the largest integer supported in this build of PHP) as the priority in the add_action() call, it's sure to load last.