0

I am seeing an issue with jQuery on my woocommerce site. I can see this error when using both Chrome and Safari error consoles.

Can't Find Variable: JQuery

I am having a hard time finding a solution anywhere else. The reason I ask is because I am experiencing an issue at checkout on my Wordpress website and I think it may being caused by this issue but again I do not know a solution. Any guidance would be greatly appreciated!

Some of the troubleshooting I did try are

  1. Switching to a different theme to see if this issue was theme related and it is not.
  2. Deactivate plugins to see if there is a conflict which there wasn't.
  3. Remove any custom CSS work I did
  4. Enable a SCRIPT_DEBUG with no help

This is my checkout page https://www.dailymutt.com/checkout/

Daily Mutt
  • 23
  • 4
  • it's for Facebook. I'm not sure if it's your problem, but please take a look: https://stackoverflow.com/questions/8097121/why-we-need-to-add-div-id-fb-root-div – Bestter Oct 27 '20 at 19:27
  • @Bestter Thank you for your response. So I am not familiar with any JQuery issues and I think I made a mistake. When I was looking at that error I thought it was only in reference to the fb-root line. But I went to other pages on my site without the fb-root line and got the same "Can't Find Variable: JQuery". So I think my issue is more general and not just an fb-root issue. Still cannot figure out why I am getting that error though. – Daily Mutt Oct 28 '20 at 03:11

1 Answers1

0

Your scripts are in the wrong order. You have:

<script type='text/javascript' id='jquery-js-after'>
if( !jQuery( 'body' ).find( '#fb-root' ) ){
                jQuery( 'body' ).append( '<div id="fb-root"></div>' );
            };
</script>
<script type='text/javascript' src='https://www.dailymutt.com/wp-includes/js/jquery/jquery.js?ver=1.12.4-wp' id='jquery-core-js'></script>

The first script is trying to use jQuery before jQuery has been loaded. Swap the order to:

<script type='text/javascript' src='https://www.dailymutt.com/wp-includes/js/jquery/jquery.js?ver=1.12.4-wp' id='jquery-core-js'></script>
<script type='text/javascript' id='jquery-js-after'>
if( !jQuery( 'body' ).find( '#fb-root' ) ){
                jQuery( 'body' ).append( '<div id="fb-root"></div>' );
            };
</script>
Barmar
  • 596,455
  • 48
  • 393
  • 495
  • Thank you so much for your help! At the risk of sounding like a total idiot how do I re-order scripts? I know this is probably a dumb questions so I apologize! – Daily Mutt Oct 28 '20 at 03:52
  • In my editor, is that where I put in extra CSS? Is that the area that you are referring to. I do also have a php snippet plugin I use too. – Daily Mutt Oct 28 '20 at 15:55
  • This has nothing to do with CSS. You just move the line `` up 4 lines in the file, exactly as I showed in my answer. – Barmar Oct 28 '20 at 16:29
  • If you're using some kind of automated tool to create the HTML file, then I can't help you with that. This is just what it's supposed to look like in the result. – Barmar Oct 28 '20 at 16:30
  • I guess my question is when you say just "move the line" does that mean I am editing some file? I do not know what file that is to edit? – Daily Mutt Oct 28 '20 at 16:53
  • The file that contains your web page contents.\ – Barmar Oct 28 '20 at 17:04
  • I clearly have no idea where that is so I will try to search for a better explanation – Daily Mutt Oct 28 '20 at 17:19
  • Well, I clearly have no idea how you're creating your website. If you're using some kind of template, the problem may be there. Or you're just filling in the wrong blanks. – Barmar Oct 28 '20 at 17:26
  • Looks like we are both at a loss. Yes, I am using a theme. The theme dev said the fb-root has nothing to do with the theme itself. There are no "blanks" using the theme that would have an effect on this fb-root JQuery error. So, I will try and find a solution somewhere else. – Daily Mutt Oct 28 '20 at 17:50
  • I don't know woocommerce, I guess this is something you have to do there. – Barmar Oct 28 '20 at 19:31