Add custom code and libraries to all pages automatically

Wishlist
1

Is it possible to add this on the wishlist to integrate this so we can just add JS libraries and scripts to a website and in the background Divhunt makes sure that it’s only loaded once per page?

2

@corneromme

If you are using plugins, that’s already included and it’s how it works. It doesn’t get loaded until it’s needed.

For future we will add some UI helper to make this process much easier.

As for now, you can do following.

Include the library (in this case swiper.js) in global custom code (for entire website)

mdLibraries.ItemAdd({
    id: 'swiperjs',
    js: ['https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js'],
    css: ['https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css']
  });

Then to use it, do something like this in embed for specific tag/page.

mdLibraries.Fn('load', ['swiperjs'], () =>
  {
    // Once library has been loaded, we can proceed

    new Swiper(`.swiper-slider-target`, {
      // ... Swiper Settings
    });
  });

You can call “load” function as many times as you would like, however it will load only once.

To sum it, push library first into global custom code, and then use embed to on specific page load library and perform actions from that specific library, so in this way, library will only be loaded when specific page loads.

2 Likes