Tengo un sitio web de Shopify y agregué un archivo .js que contiene algunas funciones de javascript , ¿cómo puedo decirle a un <script> qué función llamar a pedido?
He agregado el archivo a <head> así:
<script src="/urls/for/custom-scripts.js" defer="defer"></script> Y quiero ejecutar diferentes funciones en diferentes páginas cuando la página está cargada, por ejemplo, dentro main-product.liquid quiero ejecutar solo ".aone-slide" y en blog.liquid quiero ejecutar solo ".ul.accordion" , ¿cómo es esto posible?
He intentado hacer algo como eso:
<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>Pero no sé cómo continuar porque el nombre de la función o el activador es una clase div/css.
Este es el archivo:
(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 } }] }) })Creo que estás confundiendo qué es una función de Javascript.
En su archivo .js solo tiene una función. Esta función particular está aplicando un control deslizante (usando la biblioteca slick) a diferentes elementos html. Y lo hace automáticamente cuando jQuery ($) está listo.
Por ejemplo, la primera llamada .slick es crear el control deslizante en los elementos con clase aone-slide .
Entonces, el primer problema es este, si el .js está cargado (y el código que está mostrando parece ser correcto), ya debería funcionar. Ya debería crear los controles deslizantes, en todas las páginas. Si no es así, falta algo (pero no tengo suficientes elementos para decirlo).
Si desea ejecutar slick solo en las páginas seleccionadas, debe crear funciones dentro de su archivo .js y llamarlas en las páginas.
Entonces tu .js se convertiría en algo como esto
function slickAone(){ $(".aone-slide").slick({ dots: !0, infinite: !1, arrows: !1, speed: 300, slidesToShow: 2, slidesToScroll: 2, }); } (sin function ($)... )
y luego en tu página pones
<script> function($){ slickAone(); } </script>