Slick是一个很棒的滑动插件,适用于任何产品列表,如Most Popular,Featured,Upsell,Cross sell产品或者任何其他定制的产品列表。我将指导您如何添加Slick滑动插件并将其应用于首页上的产品列表小部件。

让我们开始吧!

 

安装Slick

  1. 博客中用到的Slick版本为1.6.0
  2. 解压下载的文件夹并将slick.min.js复制到
    app/design/frontend/_YOUR_VENDOR_/_YOUR_THEME_/web/js/
  3. 在下面路径中创建或编辑requirejs-config.js文件
    app/design/frontend/_YOUR_VENDOR_/_YOUR_THEME_/web/
  4. 打开requirejs-config.js并复制/粘贴此代码:
    var config = {
        paths: {
            slick:        'js/slick'
        },
        shim: {
            slick: {
                deps: ['jquery']
            }
        }
    };
  5. 在下面路径中创建“vendor”文件夹
    app/design/frontend/_YOUR_VENDOR_/_YOUR_THEME_/web/css/source/

    将slick.less和slick-theme.less复制到其中。

  6. 清除缓存和部署文件
  7. 打开前端,查看源代码并在代码下面的<head>标签中找到
    <script type="text/javascript" src="http://_YOURDOMAIN_/pub/static/_VERSION_/_requirejs/frontend/_YOUR_VENDOR_/_YOUR_THEME_/en_US/requirejs-config.js"></script>

    在文档的底部,您应该看到我们在步骤4中添加的代码。

 

将Slick应用于产品列表小部件

在下面的步骤中,我们将初始化Slick到产品列表小部件模板文件。

  1. 在主题的根目录中创建“Magento_CatalogWidget”文件夹,并将其复制到下面的文件夹中
    vendor/magento/module-catalog-widget/view/frontend/templates
  2. 打开
    app/design/frontend/_YOUR_VENDOR_/YOUR_THEME/Magento_CatalogWidget/templates/product/widget/content/grid.phtml
  3. 在下面示例代码的<?php endif; ?>结束之前,初始化Slick Carousel
    <script>
        require([
            'jquery',
            'slick'
        ], function ($) {
            jQuery(document).ready(function () {
                jQuery(".widget-product-grid").slick({
                    dots: true,
                    infinite: true,
                    speed: 300,
                    slidesToShow: 4,
                    slidesToScroll: 4,
                    responsive: [
                        {
                            breakpoint: 1280,
                            settings: {
                                slidesToShow: 3,
                                slidesToScroll: 3
                            }
                        },
                        {
                            breakpoint: 768,
                            settings: {
                                slidesToShow: 2,
                                slidesToScroll: 2
                            }
                        },
                        {
                            breakpoint: 600,
                            settings: {
                                slidesToShow: 1,
                                slidesToScroll: 1
                            }
                        }
                    ]
                });
            });
        });
    </script>

 

在首页中创建并插入产品列表小部件

  1. 打开Magento Admin→Content Pages Home Page
  2. 内容→显示/隐藏编辑器→插入窗口小部件→窗口小部件类型(目录产品列表)→填充字段并选择条件(选择您想要的类别或产品)
  3. 保存小部件并保存页面
  4. 检查您的首页,您应该有Slick轮播产品列表小部件
  5. 最后一步是根据您的需求自定义Slicks样式!