I would like to initialize a jQuery carousel plugin on the product details page, the slide carousel.
I've found two ways to do it, but am wondering if there is a better way.
First off, I added the script to the plugin to my theme's require-config.js file with:
// app/design/frontend///require-config.js var config = {
// When load 'requirejs' always load the following files also
deps: [
"js/main" // path to main.js script
],
paths: {
'slick': 'js/vendor/jquery/slick.min' // path to script in my theme
},
shim: {
'slick': {
deps: ['jquery'],
exports: 'jQuery.fn.slick'
}
}
};
Then I found that I could initialise the carousel in my main.js with:
define([
"jquery",
"slick"
],
function($) {
"use strict";
$('.products-related .product-items').slick();
return;
}
);
But this approach means the slick.min.js file is loaded on every page, and $('.products-related .product-items').slick();
is executed on every page.
I could initialize the script only on the product details page by adding the following <script>
tag to app/code/Magento/Catalog/view/frontend/templates/product/list/items.phtml
<script>
require([
"jquery",
"slick"
], function ($) {
$('.products-related .product-items').slick();
});
</script>
But this means I need to override a template file and use an inline script, is there a better way? Where I would load an external script just on the product details page?
It probably has little performance impact if I just add it to main.js which is easier but I'm just curious.
Thanks!