Uncaught TypeError: $ is not a function

victor9
3 years ago
0 +0 / -0

I am trying to create Gift Certificates for a client and this is how the setup will work.

Product: Gift Certificate
Child Product 1: $20 Gift Certificate
Child Product 2: $25 Gift Certificate
And so on until $100 Gift Certificate

When you select Gift Certificate in the shop you will be able to select which gift card you want from the variants

The problem is that when you select the variant you get the following

The loading overaly stays on and Chrom displays the following errors:

Uncaught (in promise) TypeError: Failed to fetch
Promise.then (async)
(anonymous) @ widget_app_base_1618076062028.js:2
setTimeout (async)
e.run @ widget_app_base_1618076062028.js:2
i @ widget_app_base_1618076062028.js:2
(anonymous) @ widget_app_base_1618076062028.js:2
setInterval (async)
(anonymous) @ widget_app_base_1618076062028.js:2
L.o.onload @ widget_app_base_1618076062028.js:2
load (async)
L @ widget_app_base_1618076062028.js:2
n @ widget_app_base_1618076062028.js:2
(anonymous) @ widget_app_base_1618076062028.js:2
Promise.then (async)
e @ widget_app_base_1618076062028.js:2
(anonymous) @ widget_app_base_1618076062028.js:3
(anonymous) @ widget_app_base_1618076062028.js:3

10-gift-certificate-detail:319 Uncaught TypeError: $ is not a function
at HTMLBodyElement.test (10-gift-certificate-detail:319)
at HTMLBodyElement.dispatch (jquery.min.js?335798a6b183c947bf3972eb3e4bacda:2)
at HTMLBodyElement.v.handle (jquery.min.js?335798a6b183c947bf3972eb3e4bacda:2)
at Object.trigger (jquery.min.js?335798a6b183c947bf3972eb3e4bacda:2)
at Object.a.event.trigger (jquery-migrate.min.js?335798a6b183c947bf3972eb3e4bacda:2)
at HTMLBodyElement.<anonymous> (jquery.min.js?335798a6b183c947bf3972eb3e4bacda:2)
at Function.each (jquery.min.js?335798a6b183c947bf3972eb3e4bacda:2)
at a.fn.init.each (jquery.min.js?335798a6b183c947bf3972eb3e4bacda:2)
at a.fn.init.trigger (jquery.min.js?335798a6b183c947bf3972eb3e4bacda:2)
at Object.Virtuemart.updateCartListener (dynupdate.js?vmver=94653811:88)

It looks like this is happening because of the Custom Fields I have added for Recipient's Name, Recipient's Email, Sender's Name, and Message. When I remove the custom fields the variants work perfectly fine but then the system won't know who to send the Gift Certificates to.

Here is the setup of one of the custom fields

Please let me know what I am doing wrong or if I missed something in the setup. Thank you.
seyi
3 years ago
0 +0 / -0

Hello,

Not sure, did you follow these instructions for setting up the custom field:
http://dev.virtuemart.net/projects/virtuemart/wiki/Product_custom_fields_Plugin_Customer_Text_Input

This may be an issue with the template. Try temporarily changing the template to a default one and see if the problem goes away
Regards
victor9
3 years ago
0 +0 / -0

Hello! Thank you for getting back to me.

I did try a new template but I still get that error. The only difference is that there is no loading screen but after selecting a variant I do not get the option to add it to the cart. I created a new product without the custom fields and I am able to add it to my cart. I did follow the instructions you provided and the I see that my custom fields are set up properly.
I tried the protostar template from Joomla to see if it would work. but the Uncaught error still occurs.
seyi
3 years ago
0 +0 / -0

Can I have a look at the product page? You can send me private message.
Regards
seyi
3 years ago
0 +0 / -0

Looks like it is an issue with the vmcustom texinput plugin using $ instead of jQuery.

You can try this, in the file:
\plugins\vmcustom\textinput\textinput\tmpl\default.php around line 40 is this:
Virtuemart.checkCharCount = function(obj, event){ var charCount;
Right after that add this
$ = jQuery;
Regards
victor9
3 years ago
0 +0 / -0

I will try that now, thank you!
victor9
3 years ago last edited 3 years ago
0 +0 / -0

seyi @ Apr 12, 2021, 4:36:46 PM
Looks like it is an issue with the vmcustom texinput plugin using $ instead of jQuery.

You can try this, in the file:
\plugins\vmcustom\textinput\textinput\tmpl\default.php around line 40 is this:
Virtuemart.checkCharCount = function(obj, event){ var charCount;
Right after that add this
$ = jQuery;

This is what my code looks like. I made your addition to line 43 and I am still not getting the Add To Cart to load properly.

Virtuemart.checkCharCount = function(obj, event){
var charCount;
$ = jQuery;
var addToCart = true;
seyi
3 years ago
0 +0 / -0

Ah sorry, that was the wrong place. You can keep that where it is, it does not hurt, but you also need to add it higher up, around line 35 is this:
$(".vmcustom-textinput").keyup(function(event) {

Right BEFORE that add the code
$ = jQuery;

Regards
victor9
3 years ago
0 +0 / -0

We are almost there! I no longer see any TypeErrors but I am not getting the Add To Cart button to show up. Take a look at this image

Every time I switch to a different option the Add To Cart button just shows "Choose a product variant first." Once we have this fixed then I think this issue will be resolved.

Thank you!
seyi
3 years ago
0 +0 / -0

Hello,

When setting up the parent product, you set the minimum required letters to greater than 0:

Meaning that each field, recipient name, email, message,...etc is required. The problem is even after you fill them out, there is no ajax that updates the add to cart function. So I went into your parent product and sett all the min required letters to 0. Now add to cart is available.
Regards
victor9
3 years ago
0 +0 / -0

Thank you so very much for all of your help! I'll test it later today but I think we will be all set.