$(...)slick is not a function -Including jQuery problems

New Member
3 0 0

Hey there, I'm currently trying to add the slick slider to my products-page on the narrative theme. 

Slick slider Link: 

http://kenwheeler.github.io/slick/

I have already included jQuery as well as the CSS files into my assets folder. DOM is loading but I get the error:

"Uncaught TypeError: $(...).slick is not a function
    at HTMLDocument.<anonymous> (copy-of-the-spring-blue:1276)
    at l (jquery.min.js:2)
    at c (jquery.min.js:2)"


<head>
...
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 
  {{ 'slick.css' | asset_url | stylesheet_tag }}
  {{ 'slick-theme.css' | asset_url | stylesheet_tag }}
  
  {{ 'slick.js' | asset_url | script_tag }}
  {{ 'slick.min.js' | asset_url | script_tag }}
</head>

I 've already done some google research, but all the suggestions don't solve my problem. Is it because there is a basic jQuery version installed by Shopfiy? Where is it located? I would really, really appreciate if somebody could help me, I'm freaking out :D 

 

THANKS!

Daniel 

0 Likes
New Member
3 0 0

Nobody?

0 Likes
Shopify Expert
9651 40 1346

I've not use Slick in a while but I would make the assumption that you're including it twice (one normal and one minified).

{{ 'slick.js' | asset_url | script_tag }}
{{ 'slick.min.js' | asset_url | script_tag }}

 

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
0 Likes
New Member
3 0 0

Hey, thanks for ur answer. Removed that but still the same error... ;(

0 Likes
Shopify Expert
1 0 0

Hey Daniel, 

I had the exact same problem and it took me two hours to figure it out !!!!
I hope this will solve it for you as weel : 

In your theme.liquid maybe, look for
<script src="{{ 'vendor.js' | asset_url }}" defer="defer"></script>
Remove the defer="defer". 

Reload. 
You are good to go, Slick will be loaded in jQuery now ! 

Have a good day

0 Likes

Anyone else going down this route & customizing Narrative - the way that it's coded & the fact that jquery is set to defer then you'll need to either initialize the slick slider within a chained event or remove the defer as per answer above.

I strip out the defer.

We also have a liquid version of slick theme: slick-theme.css.liquid - may save you a few mins messing around.  Just upload fonts and ajax loader to assets after and you're good to go.

 

★★★ Need help setting up your Shopify store? Hire me here: https://liquify.design ★★
0 Likes
Shopify Partner
2 0 0

I'm having some trouble getting slick to function on the narrative product page. All the images are loading in code and not showing on the page. I've removed the defer tag on the vendor.js script and still getting an console error ("Uncaught (in promise) TypeError: Cannot read property 'querySelectorAll' of null").

 

Anyone have a suggestion?

0 Likes
Highlighted
Shopify Partner
1305 14 167

I believe there are several unrelated issues here.

@Daniel_Brunner a link to your store would help the forum members debug this.

 

I would say that you have a race condition.

Slick requires jQuery.

 

The defer attribute placed on the jQuery script will "delay" its execution.

That is a good thing, do not remove it.

 

Slick may be initialized before jQuery kicks is.

Send a link and we can figure it out.

 

Thanks  

https://sections.design tips, tricks & Shopify sections
0 Likes