Problem/Motivation

If you install the module and try to call
$('.selectore').slick();
You ll get Uncaught TypeError: $(...).slick is not a function

Of course you are suposed to create your slick through Drupal administration, but sometimes you'd like to apply a slick to something that is not covered by the module.

I can see slick.min.js is not loaded in the page I try to create my slick (and is on pages with slicks I created through the module)

Proposed resolution

Provide a documented example on how to do that cleanly

Comments

Thony created an issue. See original summary.

gausarts’s picture

Assumed you have read:

https://git.drupalcode.org/project/slick/blob/8.x-2.x/slick.api.php

The assets, JS and CSS, will be loaded once you define a skin.

If no skin called, at least the basic assets loaded.

The only needed is to follow the designated API, because that is the only way to do it without UI.

No need Drupal UI. It was first designed without UI since 2014. And since D8, mostly defined by settings array.

Feel free to suggest any betterment. Thanks.

paulocs’s picture

You can only do this directly using JS if the page you are calling the function has the library attached.

Why don't you use the slick API?
See: https://git.drupalcode.org/project/slick/blob/8.x-2.x/slick.api.php

paulocs’s picture

@gausarts answered 1 minute before me :)

gausarts’s picture

Status: Active » Fixed

A friendly housekeeping before a new release.

@paulocs, thank you :)

Yes. I am not sure what to do without the API.

It was designed to cut-off many steps, such as loading automatically the library, or calling even a fake or empty skin named "default" to trigger loading the basic CSS assets by just adding a skin name, etc.

Most importantly to avoid your particular issue since you are guaranteed to have Slick when using the API.

This section of skin will make your life easy:
https://git.drupalcode.org/project/slick/blob/8.x-2.x/slick.api.php#L380

You can put your custom override script in your theme, no problem.

If you meant to replace slick.load.js with yours, you can also do it via theme override option.
There are at least 2 issues here mentioning this. Please try the search box for more. Here is one:
https://www.drupal.org/project/slick/issues/3197933#comment-13997104

That rule applies to other assets type: JS. This way you are also guaranteed to have Slick in the page as needed.

The last but worst option is to put your Slick globally via hook_page_attachments or theme.info. never recommended.

Beyond the three options above, extra check must be done by JS before calling any function.

If anyone is kind to provide a documentation, I will be happy and grateful to include it.

Feel free to re-open if still an issue, or would like propose better docs.

Patches are welcome, comments are fine, too, just need better English wordings I can copy/ paste into the existing docs.

Thanks.

gausarts’s picture

Category: Support request » Feature request
Status: Fixed » Active

I think it deserves a feature.

I understand the potential needs such as at CKEditor body texts which are currently unreachable by the provided API, consider Shortcode-like slideshows ala WordPress. For regular needs with fields or entities, the provided API suffice. We are trying to address hard-coded slick contents like seen at CKEditor body text, or anywhere else I am not aware of.

FYI, I hardly initialize Slick like this $("#slick-container").slick();, I normally let the module initialize it, and I listen to the provided events, and react or add more features accordingly based on those events, like seen at slick.load.js for media player, mousewheel, lightbozes, blazy, css background, etc. even with 3d carousel integration with Slicebox like seen in the sample pages.

None of my sample Slicks do initializations other than what the module already did.

I did re-initialize and destroy once as needed after AJAX-loaded contents like seen at Slick Browser grep -r ".slick(" ./slick_browser/js. It is not like regular initializations though since it is already initialized in the first place. Meaning Slick is already in place, not manually called like what you intend to do.

In case misunderstood, all slick methods look like initialization script, but obviously not.

What I meant, no need to do manual initialization as proven by tons of different Slick usages unless really necessary.
We are trying to address "unless really necessary" here.

There are few potential solutions:

  • The easiest route. As mentioned at #5: The last but worst option is to put your Slick globally via hook_page_attachments or theme.info. never recommended. We may need to provide an option at Slick UI to toggle it. This is not recommended due to waste of bandwidth. Do the math yourself with 10 or 100 or 10000 popular pages which force the users to download unneeded jQuery + Slick costs roughly 100KB multiplied by 1000 or 100000 visitors a day multiplied by 30 days. You got megs or gigas of bandwidth wasted. But likely forgiven for less traffic or non-pro websites.
  • The more themer-friendly. Provide a custom Twig extension to pack all is needed whether with or without Slick's module initializer.
  • The least priority. Provide a custom shortcode plugin which may require Shortcode.module likely as a soft dependency.

Patches are welcome. Thanks.

gausarts’s picture

Status: Active » Fixed

This will do for now with shortcodes in Slick Filter for quite a while.
Twig extensions need real projects or backers.

Status: Fixed » Closed (fixed)

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