I have a Shopify website and I've added a .js file which holds few javascript functions, how can I tell a <script> which function to call on demand?
I've added the file to <head> like so:
<script src="/urls/for/custom-scripts.js" defer="defer"></script>
And I want to run different functions on different pages when the page is loaded, for example, inside main-product.liquid I want to run only ".aone-slide" and on blog.liquid I want to run only ".ul.accordion", how is this possible?
I've tried to do something like that:
<script>
!function(o) {
console.log("theme.liquid last </body> script -> DOMContentLoaded");
o.addEventListener("DOMContentLoaded", function() {
console.log("DOMContentLoaded event listener added successfully!");
$(document).on('ready', function() {
});
});
}(document);
</script>
But I don't know how to continue because the name of the function or the trigger is a div/css class.
This is the file:
(function($) {
$(".aone-slide").slick({
dots: !0,
infinite: !1,
arrows: !1,
speed: 300,
slidesToShow: 2,
slidesToScroll: 2,
}), $("ul.accordion").accordion(), $(".slider-for").slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: !1,
fade: !0,
asNavFor: ".slider-nav"
}), $(".slider-nav").slick({
slidesToShow: 8,
slidesToScroll: 1,
asNavFor: ".slider-for",
dots: !1,
centerMode: !1,
focusOnSelect: !0,
responsive: [{
breakpoint: 992,
settings: {
slidesToShow: 6,
slidesToScroll: 1
}
}]
})
})
I think you're confusing what a Javascript function is.
In your .js file you have only one function. This particular function is applying a slider (using the slick library) to different html elements. And it is doing that automatically when jQuery ($) is ready.
For example the first .slick call is creating the slider on the elements with class aone-slide.
So the first problem is this, if the .js is loaded (and the code you're showing seems to be correct) it should already work. It should already create the sliders, on all the pages. If it doesn't there is something missing (but I don't have enough elements to tell).
If you want to run slick only on the selected pages you should create functions inside your .js file and call them in the pages.
So your .js would become something like this
function slickAone(){
$(".aone-slide").slick({
dots: !0,
infinite: !1,
arrows: !1,
speed: 300,
slidesToShow: 2,
slidesToScroll: 2,
});
}
(without function ($)...)
and then in your page yout put
<script>
function($){
slickAone();
}
</script>