README

在这里，我们将一步步学习如何在 Magento 2 中使用 Slick Slider。

我们可以在 app/code/ 目录下创建新的模块。

步骤 - 1 - 为模块创建一个目录

• 在 Magento 2 中，模块名称分为两部分，即 Vendor_Module（例如 Magento_Theme, Magento_Catalog）。
• 我们将在此处创建 Mage2sk_SlickSlider，因此 Mage2sk 是供应商名称，SlickSlider 是此模块的名称。
• 因此，首先创建您的命名空间目录（Mage2sk）并进入该目录。
• 然后创建模块名称目录（SlickSlider）

现在转到： app/code/Mage2sk/SlickSlider

步骤 - 2 - 创建 module.xml 文件以声明新模块。

• Magento 2 在每个模块的 etc 目录中查找模块的配置信息，因此我们需要在我们的模块 app/code/Mage2sk/SlickSlider/etc/module.xml 中添加 module.xml 文件，并且它的内容如下

<?xml version="1.0"?>
<!--
/**
 * Mage2sk Use Slick slider in Magento 2
 *
 * @package      Mage2sk_SlickSlider
 * @author       Kishan Savaliya <kishansavaliyakb@gmail.com>
 */
-->
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
	<module name="Mage2sk_SlickSlider" setup_version="1.0.0" />
</config>

在此文件中，我们使用名称 Mage2sk_SlickSlider 和版本 1.0.0 注册了一个模块。

步骤 - 3 - 创建 registration.php

• 所有 Magento 2 模块都必须通过 magento 的 ComponentRegistrar 类在 Magento 系统中注册。此文件将放置在模块的根目录中。

在此步骤中，我们需要创建此文件

app/code/Mage2sk/SlickSlider/registration.php

并且我们模块的内容如下

<?php
/**
 * Mage2sk Use Slick slider in Magento 2
 *
 * @package      Mage2sk_SlickSlider
 * @author       Kishan Savaliya <kishansavaliyakb@gmail.com>
 */
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    'Mage2sk_SlickSlider',
    __DIR__
);

步骤 - 4 - 启用 Mage2sk_SlickSlider 模块。

• 完成以上步骤后，您已创建了一个空模块。现在我们将在 Magento 环境中启用它。
• 在启用模块之前，我们必须检查确保 Magento 已经识别了我们的模块，可以通过在命令行中输入以下内容来检查

php bin/magento module:status

如果您遵循以上步骤，您将在结果中看到以下内容

List of disabled modules:
Mage2sk_SlickSlider

这意味着模块已被系统识别，但尚未启用。运行此命令以启用它

php bin/magento module:enable Mage2sk_SlickSlider

如果您看到此结果，则表示模块已成功启用

The following modules has been enabled:
- Mage2sk_SlickSlider

这是您第一次启用此模块，因此 Magento 需要检查并升级模块数据库。我们需要运行此命令

php bin/magento setup:upgrade

步骤 - 5 - 创建 requirejs-config.js 文件

在此模块中创建 requirejs-config.js 文件。

app/code/Mage2sk/SlickSlider/view/frontend/requirejs-config.js

此文件的内容如下

var config = {
    paths: {
        slick: 'Mage2sk_SlickSlider/js/slick'
    },
    shim: {
        slick: {
            deps: ['jquery']
        }
    }
};

步骤 - 6 - 添加 slick.js 和 slick.min.js 文件

您可以从 slick 这里下载

下载该文件并解压 .zip 文件，然后从其中复制 slick.js 和 slick.min.js 文件，并将它们粘贴在此处..

app/code/Mage2sk/SlickSlider/view/frontend/web/js/slick.js

和

app/code/Mage2sk/SlickSlider/view/frontend/web/js/slick.min.js

步骤 - 7 - 现在添加 slick.less 和 slick-theme.less 文件

将下载目录中的 .less 文件复制到以下路径..

app/code/Mage2sk/SlickSlider/view/frontend/web/css/source/slick.less

和

app/code/Mage2sk/SlickSlider/view/frontend/web/css/source/slick-theme.less

步骤 - 8 - 创建 _module.less 文件

现在在此处创建 _module.less 文件。

app/code/Mage2sk/SlickSlider/view/frontend/web/css/source/_module.less

这是一个重要的文件，可在 Magento 2 中正常运行 slick slider 而无任何问题。

此文件的内容如下

@import 'slick.less';
@import 'slick-theme.less';

• 我们将在此模块的一个自定义操作中显示所有滑块。

步骤 - 9 - 创建前端路由

• 在此创建 routes.xml 文件。

app/code/Mage2sk/SlickSlider/etc/frontend/routes.xml

此文件的内容如下

<?xml version="1.0"?>
<!--
/**
 * Mage2sk Use Slick slider in Magento 2
 *
 * @package      Mage2sk_SlickSlider
 * @author       Kishan Savaliya <kishansavaliyakb@gmail.com>
 */
-->
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:App/etc/routes.xsd">
    <router id="standard">
        <route id="magehelper_slickslider" frontName="magehelper_slickslider">
            <module name="Mage2sk_SlickSlider" />
        </route>
    </router>
</config>

• 因此，我们可以运行以下URL来检查输出结果。（http://www.example.com/magehelper_slickslider）

步骤 - 10 - 创建控制器和操作

• 现在我们将创建控制器和操作来显示所有Slick滑块演示。我们将在以下位置创建控制器和操作

app/code/Mage2sk/SlickSlider/Controller/Index/Index.php 

此文件的内容如下

<?php
/**
 * Mage2sk Use Slick slider in Magento 2
 *
 * @package      Mage2sk_SlickSlider
 * @author       Kishan Savaliya <kishansavaliyakb@gmail.com>
 */

namespace Mage2sk\SlickSlider\Controller\Index;

class Index extends \Magento\Framework\App\Action\Action
{
    protected $resultPageFactory;

    public function __construct(
        \Magento\Framework\App\Action\Context $context,
        \Magento\Framework\View\Result\PageFactory $resultPageFactory
    ){
        $this->resultPageFactory = $resultPageFactory;
        return parent::__construct($context);
    }
     
    public function execute()
    {
        $resultPage = $this->resultPageFactory->create();
        $resultPage->getConfig()->getTitle()->prepend(__('Mage2sk Slick slider demo'));
 
        return $resultPage;
    }
}

步骤 - 11 - 创建布局和模板文件

• 在此创建布局文件。

app/code/Mage2sk/SlickSlider/view/frontend/layout/magehelper_slickslider_index_index.xml

此文件的内容是...

<?xml version="1.0"?>
<!--
/**
 * Mage2sk Use Slick slider in Magento 2
 *
 * @package      Mage2sk_SlickSlider
 * @author       Kishan Savaliya <kishansavaliyakb@gmail.com>
 */
-->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd">       
    <referenceContainer name="content">
        <block
            template="Mage2sk_SlickSlider::slick-slider.phtml"
            class="Magento\Framework\View\Element\Template"
            name="magento-2-slick-slider-demo"/>
    </referenceContainer>
</page>

• 在此创建模板文件...

app/code/Mage2sk/SlickSlider/view/frontend/templates/slick-slider.phtml

在phtml文件中添加内容。

步骤 - 12 - 运行以下命令

• 我们需要运行以下命令来正确检查输出

php bin/magento setup:upgrade
php bin/magento cache:clean
php bin/magento cache:flush
php bin/magento setup:static-content:deploy -f

希望这篇文章对您有所帮助！！