How to create a "Custom swiper Slider Widget" with required swiperjs lib from elementor core?

[datgausaigon]

Hi,
I want create "Custom Slider Widget" (Elementor Widget Addon Plugin). This Slider is created by swiperjs.
How do I declare the slider to depend on swiperjs in elementor core? When widget add to a page/post it will check available of elementor swiperjs and add it.
Thanks

[WebsiteDons]

Use get_script_depends()
See details at https://developers.elementor.com/docs/scripts-styles/widget-scripts/

[datgausaigon]

Hi @WebsiteDons
Thank for your answer.
I know the "get_script_depends()". But how use "get_script_depends()" to call swiperjs in elementor core? I don't want call swiperjs 2 times (one on my plugin, one on elementor).
Thanks

[WebsiteDons]

The method will only (or should) load the script if it is not loaded in the document when the specific widget is on the page. I use it in a widget to load flatpickr.js from elementor library

public function get_script_depends() {
  wp_register_script('elem-flatpickr',ELEMENTOR_ASSETS_URL.'lib/flatpickr/flatpickr.min.js');
  return ['elem-flatpickr'];
}
public function get_style_depends() {
  wp_register_style('elem-flatpickr',ELEMENTOR_ASSETS_URL.'lib/flatpickr/flatpickr.min.css');
  return ['elem-flatpickr'];
}

[datgausaigon]

Hi,
Thank for your answer.
I think the code for me should be:

// In foo.php
public function widget_scripts() {
    wp_register_script( 'swiper', ELEMENTOR_ASSETS_URL . '/lib/swiper/swiper.js', [ 'jquery' ], false, true );
}

// bar.php

public function get_script_depends() {
    return ['swiper'];
}

I will try and testing with this.
Thank

[datgausaigon]

Hi @avivu
I think we need "description" more about:

• "get_script_depends()" in "\Elementor\Widget_Base"
• "get_style_depends()" in "\Elementor\Widget_Base"
  It's help us load the script/style in elementor core only one time?

Thanks

[rami-elementor]

You can find more info at https://developers.elementor.com/docs/widgets/widget-dependencies/

[rami-elementor]

You can also see a full widget example on

https://developers.elementor.com/docs/controls/frontend-available/

This docs is talking about frontend-available argument, but is has a good example with script dependencies.

[datgausaigon]

Hi @rami-elementor,
Thank for your answer.
But in my question is about call the script from Elementor Core. In this case is "ELEMENTOR_ASSETS_URL + /lib/swiper/swiper.js".
We're wondering when call "Elementor swiper.js" to a Custom Widget by "get_script_depends()". Does it's being call 2 times? One by Default Elementor "Slider" Widget, one by my Custom Widget? And this case is not in Elementor documents.
Thanks

[rami-elementor]

Elementor registers the Swiper script in here: https://github.com/elementor/elementor/blob/master/includes/frontend.php#L1470-L1476

Try the following in your widget:

public function get_script_depends() {
  return ['swiper'];
}