Uncaught ReferenceError: jQuery is not defined

newbiehoun
New Member
8 0 0

Hi World!

 

Hope you could help me, i was wondering i have this error Uncaught ReferenceError: jQuery is not defined, I am triying to install: 

 

https://help.shopify.com/themes/customization/products/recommend-related-products#finding-a-relevant...

 

just added 

 

<!doctype html>
<!--[if IE 9]> <html class="ie9 no-js" lang="{{ shop.locale }}"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html class="no-js" lang="{{ shop.locale }}"> <!--<![endif]-->
<head>
  
{{ 'jquery.pick.js' | asset_url | script_tag }}

 

I dont know why that error, Could you help me please?

This is my store

valentinafloristeria.pe

password: help

Thank you so much!

Replies 7 (7)
Mircea_Piturca
Shopify Partner
1493 42 320

You are adding that script before jQuery is loaded.

In theme.liquid find "theme.js" and add {{ 'jquery.pick.js' | asset_url | script_tag }} after that.

Should be something like:

<script src="{{ jquery.pick.js' | asset_url }}" defer="defer">
Finally—Add variant descriptions to your products
newbiehoun
New Member
8 0 0

Thank you.

 

I just added:

 

<!--[if (gt IE 9)|!(IE)]><!--><script src="{{ 'theme.js' | asset_url }}" defer="defer">
  </script>
  
  
  <!--<![endif]-->
  <!--[if lte IE 9]><script src="{{ 'theme.js' | asset_url }}"></script><![endif]-->
  
  
  {{ 'jquery.pick.js' | asset_url | script_tag }}
  

  
  

  {{ content_for_header }}
  
  
</head>
 

but i have same errot and other error (in line 869)

here: https://www.valentinafloristeria.pe/collections/agradecimiento/products/arreglo-cod-ar018

 

----

Uncaught ReferenceError: jQuery is not defined
    at arreglo-cod-ar018:869

 

Thank yoi for your time friend.

Mircea_Piturca
Shopify Partner
1493 42 320

jQuery is loaded defer by your theme, and this is very good. This makes the script execution after the page load.

You need also to load jquery.pick.js defer. In your code you added: {{ 'jquery.pick.js' | asset_url | script_tag }} it is not loaded defer.

The way you should add this is <script src="{{ jquery.pick.js' | asset_url }}" defer="defer">

Doing that will make jquery.pick.js load in order after jQuery.

Whan you initialize this script you need to make sure that this is also done from a defer JS. You can edit jquery.pick.js and at the botton add this:

var howMany = 4;
jQuery(function() {
  jQuery('.related-products > li').pick(howMany);
});

So:

  1. after theme.js add the script the way you see it in my post above
  2. edit jquery.pick.js and add the initialization at the bottom of the file
Finally—Add variant descriptions to your products
newbiehoun
New Member
8 0 0

Thank very much friend.

 

Please look:

  1. after theme.js add the script the way you see it in my post above

 

 <!--[if (gt IE 9)|!(IE)]><!--><script src="{{ 'theme.js' | asset_url }}" defer="defer">
  </script>
  
  
  <!--<![endif]-->
  <!--[if lte IE 9]><script src="{{ 'theme.js' | asset_url }}"></script><![endif]-->
  
  
 
   <script src="{{ 'jquery.pick.js' | asset_url }}" defer="defer"> </script>   
  
  

  
  

  {{ content_for_header }}

 

-----

2.- edit jquery.pick.js and add the initialization at the bottom of the file

 

      }
    });

  };
})( jQuery );

var howMany = 4;
jQuery(function() {
  jQuery('.related-products > li').pick(howMany);
});

 

--

 

And i have this error

 

Uncaught ReferenceError: jQuery is not defined
    at arreglo-cod-ar018:875

 

Thank you so much again my friend.

Mircea_Piturca
Shopify Partner
1493 42 320

Ok,

It looks added right.

If you delete this from the page as you've added it to jquery.pick.js

var howMany = 4;
jQuery(function() {
  jQuery('.related-products > li').pick(howMany);
});

The script wil initiate right but will not do anything as jQuery('.related-products > li') does not find any elements. ".related-products > li" do not exists. The markup for this selector is not on the page.

Wht you you want to do?

 

Finally—Add variant descriptions to your products
newbiehoun
New Member
8 0 0

Thank you bro for all your help!

 

solved!

RumiM
Excursionist
14 1 10

I kept getting jQuery not defined errors while defer="defer" was set. Instead I went with rel="preload" and it worked. Also went with a fixed version from Google's CDN instead of relying on whatever Shopify does for lib management. Added bonus that first-time visitors might already have it loaded from Google instead of having to load it from Shopify's servers.

 

theme.liquid

<script src="{{ 'lazysizes.js' | asset_url }}" async="async"></script>
<script src="{{ 'vendor.js' | asset_url }}" defer="defer"></script>
<script src="{{ 'theme.js' | asset_url }}" defer="defer"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" rel="preload"></script>