Uncaught TypeError: $ is not a function


  • Default avatar
    victor9    
     3 years ago
    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.

  • Your avatar
    seyi    
     3 years ago
    0

    Hello,

    Not sure, did you follow these instructions for setting up the custom field:

    This may be an issue with the template.  Try temporarily changing the template to a default one and see if the problem goes away
  • Default avatar
    victor9    
     3 years ago
    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.

  • Your avatar
    seyi    
     3 years ago
    0

    Can I have a look at the product page?  You can send me private message.
  • Your avatar
    seyi    
     3 years ago
    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;
  • Default avatar
    victor9    
     3 years ago
    0

    I will try that now, thank you!
  • Default avatar
    victor9    
     3 years ago  last edited 3 years ago
    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;


  • Your avatar
    seyi    
     3 years ago
    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;

  • Default avatar
    victor9    
     3 years ago
    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!

  • Your avatar
    seyi    
     3 years ago
    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.
  • Default avatar
    victor9    
     3 years ago
    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.