WP Theme / WooCommerce / JS Issue - Cannot read property of undefined.
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

Here's the info that I know.. Plus am I limited with JS (far from a expert so bear with me).

Running my own designed custom theme "newiam" designed by myself.
Integrating WooCommerce 2.0.9. and upon testing there is an issue adding variable products to the cart. Basically the add to cart button is hidden and doesn't appear once a variant is selected .

If I switch to the TwentyEleven theme, the issue resolves itself.

Home URL: http://iam-online.co.uk
Variant product URL: http://iam-online.co.uk/shop/uncategorized/fish-stars/
WC Version: 2.0.9
WC Database Version: 2.0.9
WP Version: WP 3.5.1
Web Server Info: Apache
PHP Version: 5.2.17
MySQL Version: 5.1.67-log
WP Memory Limit: 40MB

Thanks in advance

But 'add to cart' button doesn't appear when I select size and color?
ocanal over 5 years ago
Yes that's right, the price is dictated by the variants and the add to cart is supposed to be shown once they are selected. The code exists "" and if I delete the word none the button shows but it won't allow the item to be added to the cart as the variants / options are not selected??
Twayne over 5 years ago
So what do you want from us, to write code that shows the "add to cart button" when variants are selected?
ocanal over 5 years ago
Yes please, I can't work it out why the woocommerce plugin isn't working with my theme?
Twayne over 5 years ago
Seems it's working perfectly fine now.
alixaxel over 5 years ago
Hi sorry that wasn't my theme you seen, I had a default one on as I was running some tests. Current errors are saying; add-to-cart-variation.js:61 TypeError: 'undefined' is not a function (evaluating 'this.on') // On clicking the reset variation button .on') add-to-cart-variation.mini.js:3 TypeError: 'undefined' is not a function (evaluating 'this.on') add-to-cart.mini.js:1 TypeError: 'undefined' is not a function (evaluating 'e(document).on') When my theme is in use. I have switched all my plugins off too????
Twayne over 5 years ago
@Twayne: Ah, I see... Care to revert to the problematic setup so I can have a go at it?
alixaxel over 5 years ago
No problem, I have switched back - I think its definitely my themes js conflicting with the woo commerce plugin. Your help is appreciated.
Twayne over 5 years ago
Humm... I'm getting a Error 105 (net::ERR_NAME_NOT_RESOLVED): Unable to resolve the server's DNS address. error in Chrome for the past 10 minutes. Could you confirm if everything is okay on your side?
alixaxel over 5 years ago
No sorry, just getting: [10:02:04.534] Use of Mutation Events is deprecated. Use MutationObserver instead. @ http://iam-online.co.uk/wp-content/themes/New%20I%20am/sg_jscripts/eventlistener.js:5 [10:02:04.942] TypeError: this.on is not a function @ http://iam-online.co.uk/wp-content/plugins/woocommerce/assets/js/frontend/add-to-cart-variation.js?ver=1.0:43 [10:02:05.055] TypeError: this.on is not a function @ http://iam-online.co.uk/wp-content/plugins/woocommerce/assets/js/frontend/add-to-cart-variation.min.js?ver=2.0.9:3 [10:02:05.137] TypeError: e(...).on is not a function @ http://iam-online.co.uk/wp-content/plugins/woocommerce/assets/js/frontend/add-to-cart.min.js?ver=2.0.9:1
Twayne over 5 years ago
The above was in firefox
Twayne over 5 years ago
Ok, seems to be back up now. I will have a look. =)
alixaxel over 5 years ago
awarded to alixaxel

Crowdsource coding tasks.

2 Solutions

Think I had the version number wrong? Not sure if I have sorted this correctly? (Not sure about the add this part), but the button still isn't revealing after selecting the options?
Twayne over 5 years ago
Winning solution

After lots of debugging (only to uncover new unseen bugs) on Javascript minified files I think I've nailed it!

You have 2 jQuery versions being loaded. =P

Line #16:
http://iam-online.co.uk/wp-includes/js/jquery/jquery.js?ver=1.8.3

Line #38:
http://iam-online.co.uk/wp-content/themes/New I am/sg_jscripts/jquery_1.5.2_min.js


If you remove the oldest one (line 38, version 1.5.2), the problem is gone (demo on jsFiddle).

Bare in mind that the form submit won't work on jsFiddle, due to Access-Control-Allow-Origin limitations.

Thank you, thank you and thank you! Your a true life saver!!!!!! I couldn't work it out as I don't have any js skills, your help was appreciated.
Twayne over 5 years ago
@Twayne: You are welcome. =)
alixaxel over 5 years ago
@Twayne: You are welcome. =)
alixaxel over 5 years ago
Facing the same issue and host says its not their problem, just a quick Q where do i have to change the line? Local server running fine and i'm using a basic twenty twelve custom theme. Thank for the help ahead.
Vik83 almost 5 years ago
Hi there, it's an annoying situation isn't it? Basically you'll need to locate the lines that call for the java script to be loaded. Then I suggest you delete the line with the lowest version number keeping the line with the highest version number. For example, if there is a line ending is jquery.1.3.5 and the woo commerce code is providing a higher version like jquery.1.5.5 for example, then simply delete the line with the lower code. So I would delete line: j_query.1.3.5 for example hope that helps?
Twayne almost 5 years ago
Makes sense, I see my error is 404 of the J.query1.3.1. It might sound really amateur but i dont do coding, which file should i locate the following line what calls the script? I found forums what pointing to the server and their mod_security role but server says they dont see anything wrong! I really appreciate your help..
Vik83 almost 5 years ago
Usually it would be on the template page you may of renamed woo commerce.php. Or maybe a general template page not sure on how your theme works, not much of a coder myself. ??
Twayne almost 5 years ago
View Timeline