javascript - How to solve "Uncaught TypeError: Cannot read property of undefined" for slick.js

Question

I'm trying to make some customization in a Shopify theme (the Brooklyn one). In this theme, there is a file theme.js.liquid in which they import the slicker:

/*
     _ _      _       _
 ___| (_) ___| | __  (_)___
/ __| | |/ __| |/ /  | / __|
\__  | | (__|   < _ | \__ 
|___/_|_|\___|_|\_(_)/ |___/
                   |__/

 Version: 1.8.1
  Author: Ken Wheeler
 Website: http://kenwheeler.github.io
    Docs: http://kenwheeler.github.io/slick
    Repo: http://github.com/kenwheeler/slick
  Issues: http://github.com/kenwheeler/slick/issues

 */

!function(i){"use strict";"function"==typeof define&&define.amd?define(["jquery"],i):"undefined"!=typeof exports?module.exports=i(require("jquery")):i(jQuery)}(function(i){"use strict";var e=window.Slick||{};(e=function(){var e=0;return function(t,o){var s,n=this;n.defaults={accessibility:!0,adaptiveHeight:!1,appendArrows:i(t),appendDots:i(t),arrows:!0,asNavFor:null,prevArrow:

I cut the end of the line because it's way too long.

Then in the chrome console, if I do:

$('.slick-slider').slick('slickUnfilter');

It returns:

Uncaught TypeError: Cannot read property 'slickUnfilter' of undefined at n.fn.init.i.fn.slick

And I got this error for any slick function (like 'slickFilter', 'slickAdd', 'slickRemove', ...). I searched for this error and from what I understood it's because those methods are defined but not initialized, or because there are initialized twice. However the slicker is imported within the theme and it should have been done correctly. What can I do then?

Any help will be greatly appreciated.

EDIT: As it was pointed out, there was 2 sliders (one on the home page and one on another page). And when I was coding in the chrome console, I was on the other page. This is why I got the last error, because I guess the slider was already initialized in the main page. The solution was to give them distinct names.

Answer 1

This error over the Shopify Brooklyn theme product page due to slick-slider class mix-up, and if you want to you the slick function called slickUnfilter.

You need to use a separate class rath then slick-slider over the product page because the same class is added by slick.JS and it presents all slick instances on the page.

So like the Brooklyn theme you need to find another class that is added to the parent slider element.

You can use $('.product-single__media-group').slick('slickUnfilter');, it work well.

Thanks