We are using slick extensively and are very happy with it. Today, we've upgraded to version 2.1 on a Drupal 8.8.2 installation and all went really smooth. Thanks for all that.

Then we started a new optionset with the thumbnail skin and ran into a javascript error: TypeError: l.options is undefined in slick.min.js:1:36484 - this gets fired when clicking either on one of the errors or one of the dots.

What can we do to track this down and hopefully fix this?

What we want to achieve is a view that list 4-5 nodes that get rendered by slick into horizontal tabs and we thought that the thumbnails could actually be those tabs - unless you have a better suggestion.

CommentFileSizeAuthor
#16 views.view_.nodes_sub_navigation.yml7.83 KBjurgenhaas
#16 slick.optionset.sub_navigation_tabs.yml1.38 KBjurgenhaas
#16 slick.optionset.sub_navigation.yml1.36 KBjurgenhaas
#5 Screenshot views formatter settings.png38.06 KBjurgenhaas
#12 Screenshot from 2020-02-22 12-06-11.png214.92 KBjurgenhaas
#5 Screenshot optionset form.png92.23 KBjurgenhaas
#9 Screenshot from 2020-02-22 10-48-24.png72.36 KBjurgenhaas
#5 slick.optionset.sub_navigation.yml1.34 KBjurgenhaas

Comments

jurgenhaas created an issue. See original summary.

gausarts’s picture

gausarts commented
Status: Active » Postponed (maintainer needs more info)

Thank you!

Could you provide more details:
1. What Slick library version? FYI v1.9+ is broken, or not working with this module, yet.
2. Could you install Slick Development for a while, and enable the first option non-minified/ development version (/admin/config/media/slick/devel) so we can track the accurate line? And please provide the exact line once found.
3. Slick form screenshot.
4. Optionsets exports so I can reproduce it locally.
5. Does it persist after switching to core Bartik for a while?
6. Anything else I am not aware of?

...horizontal tabs

If you meant something like this:
https://www.drupal.org/files/issues/thumbnail-caption-or-any-text-as-nav...
You can provide Thumbnail caption with text field, and leave Thumbnail style empty.

gausarts’s picture

gausarts commented

FYI, Slick Devel assumed this path: /libraries/slick/slick/slick.js
I haven't updated to support /libraries/slick-carousel/slick/slick.js.

jurgenhaas’s picture

jurgenhaas
he/him
Primary language German
Location Gottmadingen
commented
Status: Postponed (maintainer needs more info) » Active

I'm on this version

            "type": "package",
            "package": {
                "name": "kenwheeler/slick",
                "version": "1.8.0",
                "type": "drupal-library",
                "dist": {
                    "url": "https://github.com/kenwheeler/slick/archive/1.8.0.zip",
                    "type": "zip"
                }
            }

Will try all your other suggestions and report back with additional findings.

jurgenhaas’s picture

jurgenhaas
he/him
Primary language German
Location Gottmadingen
commented
StatusFileSize
new slick.optionset.sub_navigation.yml1.34 KB
new Screenshot optionset form.png92.23 KB
new Screenshot views formatter settings.png38.06 KB

OK, the error message is now much clearer:

TypeError: navTarget.options is undefined in slick.js:2550:18

Does it mean that I have not configured the navTarget properly? The used optionset is attached as well as screenshots of the optionset form and the views formatter settings.

Switching to Bartik does not make any difference.

jurgenhaas’s picture

jurgenhaas
he/him
Primary language German
Location Gottmadingen
commented

I have disabled the code in slick.js like this:

            /*if (navTarget.slideCount <= navTarget.options.slidesToShow) {
                navTarget.setSlideClasses(_.currentSlide);
            }*/

Then it's working without a problem. I guess my mistake is that navTarget is not defined properly and therefore it doesn't have the options property. Hope you can point me to the correct way of defining it.

gausarts’s picture

gausarts commented
Title: TypeError: l.options is undefined » Support asNavFor for Vanilla slick, else TypeError: l.options is undefined
Category: Bug report » Feature request

Thank you for detailed info. I think we found the culprit: Vanilla slick.

Basically this module doesn't support asNavFor for when Vanilla slick is checked.
The reason, without any extra fields to work with (no fields are available with vanilla checked), this module is clueless to proceed with asNavFor which requires info such as Thumbnail image style, and Thumbnail caption.

Here is relevant code which disabled asNavFor for Field formatters:
https://git.drupalcode.org/project/slick/blob/8.x-2.x/src/SlickFormatter...

Or Slick Views:
https://git.drupalcode.org/project/slick_views/blob/8.x-2.x/src/Plugin/v...

In the current state, it is this module, or actually my own, limitation to deal with limited field data.

The next question is is it possible to have asNavFor and Vanilla slick? After 5-year dev of Slick, I am still not confident enough to say Yes. However it is doable. This requires extra legs which I currently cannot afford, either.

The best I can do so far is to provide warning at Vanilla slick option description:
Things may be broken! You are on your own.

Changing this to feature in case anyone is pursuing this.
It is likely doable, by revealing related thumbnail options: Optionset thumbnail, Thumbnail style, and Thumbnail caption, etc. Then update $settings['nav'] to accept this thumbnail options, etc.

Current potential solutions:
1. Disable Vanilla slick, then it should be a snap.
2. Create 2 different Views with Vanilla slick enabled, and sync them manually via asNavFor option at each optionset:
https://git.drupalcode.org/project/slick/blob/8.x-2.x/docs/FAQS.md#html-...
asNavFor should target slick-initialized class/ID attributes. Basically inputting IDs into asNavFor options which are normally taken care of by this module for convenience.

Let me know which works best to your needs? Thanks.

gausarts’s picture

gausarts commented

Does it mean that I have not configured the navTarget properly?

Specific for Options #2 from above solutions, yes. The asNavFor must be filled with opposite IDs to sync for. Based on your slick.optionset.sub_navigation.yml, it is still empty.

jurgenhaas’s picture

jurgenhaas
he/him
Primary language German
Location Gottmadingen
commented
Category: Feature request » Bug report
StatusFileSize
new Screenshot from 2020-02-22 10-48-24.png72.36 KB

This is amazing support @gausarts, thank you so much.

Option 2 is actually what I'm looking for. I have 2 views, both with slick vanilla enabled and both are showing 5 elements. The first one shows the title field of the 5 selected nodes, and the second one shows the rendered nodes, one at a time. Here is a screenshot of that:

The first view has the id mobimosubnavtab and the optionset has #mobimosubnav .slick-initialized in asNavFor, it shows all elements.

The second view has the id mobimosubnav and the optionset has #mobimosubnavtab .slick-initialized in asNavFor, it shows one element at a time.

So far so good. What's now missing is the click event on one of the 5 tabs to then open the according node in the second view. But there are no click events bound to any of those 5 tabs.

I hope there is a simple solution to this?

gausarts’s picture

gausarts commented

#mobimosubnavtab .slick-initialized
Perhaps because this is not understood by Slick since slick-initialized is actually output later by Slick. Slick needs to know the actual ID which is already printed on the page, not the one it adds later.

Please screenshot Slick selectors which show slick-initialized after pressing regular F12. We need to know the actual IDS.
I am guessing you want something like:
#mobimosubnavtab-slider for the thumbnail optionset.
#mobimosubnavtab-thumbnail-slider for the main optionset.

gausarts’s picture

gausarts commented

Be sure the IDs are input correctly at Slick Views UI accordingly, for the above guessing, I assumed:

Main views: mobimosubnavtab
Thumbnail views: mobimosubnavtab-thumbnail

jurgenhaas’s picture

jurgenhaas
he/him
Primary language German
Location Gottmadingen
commented
Category: Bug report » Feature request
StatusFileSize
new Screenshot from 2020-02-22 12-06-11.png214.92 KB

Here is the HTML code with the IDs that I have set according to your last 2 comments:

When triggering a change in the main content, then this is working correct as the function _.getNavTarget() is searching for #mobimosubnavtab-thumbnail-slider which is successful.

The other way round doesn't work yet. The function _.getNavTarget() is searching for #mobimosubnavtab--thumbnail-thumbnail-slider which doesn't exist.

But we're getting close, I'm doing some more test and will report back what I found.

gausarts’s picture

gausarts commented

It appears you inputted similar IDs. Please try:
At Main optionset asNavFor input: #mobimosubnavtab-thumbnail-slider
At Thumbnail optionset asNavFor input: #mobimosubnavtab-slider

gausarts’s picture

gausarts commented

In case another gotcha, be sure infinite option has similar value for both, else out of sync.

jurgenhaas’s picture

jurgenhaas
he/him
Primary language German
Location Gottmadingen
commented

It doesn't work I'm afraid. The 2 option sets and the view are attached and the IDs are as you defined. The problem remains that clicking on a tab, it is looking for an element #mobimosubnavtab-thumbnail-thumbnail-slider

I'm wondering, both option sets use the skin asfornav. Should the main view probably using something else?

jurgenhaas’s picture

jurgenhaas
he/him
Primary language German
Location Gottmadingen
commented
StatusFileSize
new slick.optionset.sub_navigation.yml1.36 KB
new slick.optionset.sub_navigation_tabs.yml1.38 KB
new views.view_.nodes_sub_navigation.yml7.83 KB

Now with the attachments.

gausarts’s picture

gausarts commented

I think, it should be the other way round:
Sub-Navigation, slick.optionset.sub_navigation.yml:
asNavFor: '#mobimosubnavtab-thumbnail-slider'
At Main views, select this optionset (Sub-Navigation), Skin: Default and input the ID: mobimosubnavtab. Only Skin is the issue at Views UI.

Sub-Navigation-Tabs, slick.optionset.sub_navigation_tabs.yml:
asNavFor: '#mobimosubnavtab-slider'
At Thumbnail views, select this optionset (Sub-Navigation-Tabs)), Skin: asNavFor , and input the ID: mobimosubnavtab-thumbnail.
Also change slidesPerRow: 6, to 1. Keep slidesToShow: 6.

Currently, yours is the opposite.

I understand the potential confusion, that is why I changed the asNavFor to be asNavFor target to better express its purpose. The Thumbnail targets the Main display, and vice versa.

gausarts’s picture

gausarts commented

Also, be sure to uncheck Vanilla slick first, and empty the following options:

optionset_thumbnail: default
skin_thumbnail: asnavfor

Then enable Vanilla slick again.

AFAIK they are ignored, but who knows, we got a leak.

jurgenhaas’s picture

jurgenhaas
he/him
Primary language German
Location Gottmadingen
commented

Yeah ! That was it: disable **Vanilla slick**, cleanup values and then re-enable it again. Now, this is working just as expected. Can't thank you enough for your help, really great.

gausarts’s picture

gausarts commented

Ok, glad that it is resolved. On the other hand, it appears we got a leak.

I haven't been able to verify it, though. Feel free to create a Bug issue for the leak issue part. And perhaps keep this as Feature for the Vanilla thumbnail request rather than changing the title again.

jurgenhaas’s picture

jurgenhaas
he/him
Primary language German
Location Gottmadingen
commented

Have now reported the vanilla issue in #3116079: Vanilla Slick not properly ignoring previously set properties in the slick views module.

gausarts’s picture

gausarts commented
Category: Feature request » Bug report
Status: Active » Fixed

I could make it for Splide where things are fresh, but I don't think I could make it for Slick where things are not so fresh :)

I meant I was worried it would add complication I cannot afford to fix since this module was already installed by many. While Splide was new, and less risky to mess around.

However since the original issue was resolved, we'll close it for now as fixed, and changed it back as Bug instead.

If anyone are interested to bring this feature in, feel free to provide patches. Should you need samples, please check out Splide.
Truly sorry for this and my own current limitation. And thanks for persistence and kind words.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.