Shopify 上的 Slick.js 滑块答案

【问题标题】：Slick.js slider on ShopifyShopify 上的 Slick.js 滑块
【发布时间】：2021-08-23 14:03:58
【问题描述】：

我在 Shopify 上使用 Slick.js 苦苦挣扎。

我在本地服务器的 VisualCode 上测试了一个滑块，Slick 效果很好。

但是当我将相同的代码放到 Shopify 中时，jQuery 似乎看不到这一点。

我已经粘贴了所有的 CDN 和脚本。

有趣的是，如果我将相同的 Slick jQuery 代码粘贴到开发者工具 > 控制台上，那么 Slick 就可以工作了。

这是在本地工作的简单代码，但不适用于 shopify：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js" integrity="sha512-XtmMtDEcNz2j7ekrtHvOVR4iwwaD6o/FUJe6+Zq+HgcCsk3kj4uSQQR8weQ2QVj1o0Pk6PwYLohm206ZzNfubg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css" integrity="sha512-wR4oNhLBHf7smjy0K4oqzdWumd+r5/+6QO/vDda76MW5iug4PT7v86FoEkySIJft3XA0Ae6axhIvHrqwm793Nw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css" integrity="sha512-6lLUdeQ5uheMFbWm3CP271l14RsX1xtx+J5x2yeIDkkiBpeVTNhTqijME7GgRKKi6hCqovwCoBTlRBEC20M8Mg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <!-- <link rel="stylesheet" type="text/css" href="slick/slick.css"/>
    <link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/> -->
</head>
<body>
    
    <div class="collection-slider">
        <div>your content</div>
        <div>your content</div>
        <div>your content</div>
        <div>your content</div>
        <div>your content</div>
        <div>your content</div>
        <div>your content</div>
        <div>your content</div>
        <div>your content</div>
        <div>your content</div>
        <div>your content</div>
        <div>your content</div>
        <div>your content</div>
        <div>your content</div>
        <div>your content</div>
      </div>
<style>
  .slick-prev, .slick-next{
    border: 2px solid green;

  }
    .collection-slider{
        width: 60%;
        margin: 0 auto;
        border: 1px solid black;
        background-color: gray;
    }
    .collection-slider div{
        margin: 5px;
        background-color: lightcyan;
        border:1px solid red;
    }
</style>
 <script>
$(document).ready(function(){
$('.collection-slider').slick({
  dots: false,
  infinite: false,
  speed: 300,
  slidesToShow: 4,
  slidesToScroll: 4,
  responsive: [
    {
      breakpoint: 1024,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 3,
        infinite: true,
        dots: true
      }
    },
    {
      breakpoint: 600,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2
      }
    },
    {
      breakpoint: 480,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1
      }
    }
    // You can unslick at a given breakpoint now by adding:
    // settings: "unslick"
    // instead of a settings object
  ]
});
});                 
    </script>
</body>
</html>

请问有什么建议吗？

我正在开发“Expanse”主题。

谢谢

【问题讨论】：

相同的代码在工作，您需要分享页面URL才能在现场网站上调试代码
t1e3igr2nwqxzwzn-4368138340.shopifypreview.com 不幸的是它的预览主题，所以你想进入任何产品页面（只需选择一个产品），在那里你会看到“客户也查看过”元素。如果你在 DevTools 控制台中粘贴这段代码：``$('.collection-slider').slick() ```你会看到这个元素变成了滑块。 Shopify 上的“编辑代码”无法使用相同的代码
好的，谢谢分享。您的内容是使用 AJAX 调用和 Shopify 推荐 API 加载的。因此，当您的代码运行时，元素不会附加到网站上。您需要检查元素加载，然后添加 JS 代码。

标签： jquery slider shopify slick

【解决方案1】：

您需要在一段时间后尝试使用setInterval 运行代码并检查页面上的 HTML 元素，一旦找到 HTML 元素，使用 clearInterval 清除间隔您还可以在 setInterval、clearInterval 阅读有关这些功能的更多信息

$(document).ready(function () {
    var found = setInterval(function(){
        if( $(".collection-slider").length ){
            clearInterval(found);
        }
        // slick slider code
        $(".collection-slider").slick({
            dots: !1,
            infinite: !1,
            speed: 300,
            slidesToShow: 4,
            slidesToScroll: 4,
            responsive: [{
                    breakpoint: 1024,
                    settings: {
                        slidesToShow: 3,
                        slidesToScroll: 3,
                        infinite: !0,
                        dots: !0
                    }
                }, {
                    breakpoint: 600,
                    settings: {
                        slidesToShow: 2,
                        slidesToScroll: 2
                    }
                }, {
                    breakpoint: 480,
                    settings: {
                        slidesToShow: 1,
                        slidesToScroll: 1
                    }
                }
            ]
        })
        
    }, 200);
});

【讨论】：