yudiz/bannerslider

Magento 2 广告横幅滑块模块

1.0.0 2023-12-04 10:01 UTC

This package is auto-updated.

Last update: 2024-09-04 11:34:17 UTC


README

Magento 2 广告横幅滑块是一款出色的营销工具,使在线商店所有者能够在他们的电子商务网站上展示无限数量的引人入胜的广告横幅滑块。这个令人愉悦的扩展程序以其用户友好的界面,吸引顾客的注意并增强他们的在线购物体验。

Magento 2 广告横幅滑块模块不仅允许您创建引人入胜的广告横幅滑块,还提供了包含各种媒体类型的灵活性。使用此模块,您可以轻松添加图片、视频,包括外部视频,到您的广告横幅滑块中。这个功能为您的网站添加了动态和交互性元素,使其成为展示内容并吸引观众的灵活工具。

BannerSlider 扩展程序配备了其自己的 GraphQL 功能,可在名称 "YudizBannerSlider" 下识别。

1. 关键点

  • 安装
  • Magento 2 广告横幅滑块的主要功能
  • 附加功能
  • 横幅滑块的全部功能
  • Magento 2 广告横幅滑块用户指南(管理后台)
  • Magento 2 广告横幅滑块用户指南(前端)

2. 安装

您可以使用以下两种方法之一安装 Yudiz BannerSlider 扩展程序:1. 通过 Composer 2. 直接从可用的源下载。

2.1 通过 Composer 安装

在安装 Yudiz BannerSlider 扩展程序之前,必须安装 Yudiz Core 模块。您可以使用以下代码获取 Yudiz Core 模块。

运行以下命令

composer require yudiz/module-core

现在,要在 Magento 2 根目录下通过 Composer 安装 Yudiz BannerSlider 扩展程序,请按照以下步骤操作

运行以下命令

composer require yudiz/bannerslider

安装成功后,执行以下命令

php bin/magento setup:upgrade
php bin/magento setup:static-content:deploy -f
php bin/magento c:c

完成这些步骤后,您就可以开始使用 Yudiz BannerSlider 扩展程序了。

2.2 直接下载

在下载 Yudiz BannerSlider 扩展程序之前,必须拥有 Yudiz Core 模块。您可以直接从以下链接下载模块

https://github.com/yudiz-ritikapatel/yudiz-core

下载 zip 文件后,将其内容提取到 'app/code/Yudiz/Core' 目录中。

现在,要安装 Yudiz BannerSlider 扩展程序,您可以从以下链接下载扩展程序

https://github.com/yudiz-ritikapatel/bannerslider-extension

成功下载模块后,按照以下步骤安装

1. 解压下载的文件夹。

2. 将解压的扩展程序文件夹放置在以下路径

project-root-directory/app/code/Yudiz/BannerSlider

确实,在将扩展程序文件夹放置在指定目录后,按照以下 Magento 命令完成安装

php bin/magento setup:upgrade
php bin/magento setup:static-content:deploy -f
php bin/magento c:c

通过这两种方法,您可以轻松获取和安装模块。有关其使用的详细说明,请参阅本文件内的用户指南。

3. Magento 2 广告横幅滑块的主要功能

无限横幅和滑块选项

横幅滑块扩展程序为商店所有者提供了上传无限数量的横幅的令人难以置信的能力。这个多功能工具支持广泛的图像格式,如 .jpg、.jpeg、.gif、.mp4 和 .png,确保您的设计选择具有灵活性。

此外,此扩展程序还进一步允许您上传视频,包括 .mp4 和 .gif 文件,为您的网站访客提供引人入胜的多媒体体验。您还可以将外部链接无缝集成到您的内容中。这个全面的特性集允许您创建引人入胜且交互式的横幅滑块,增强您网站的魅力和参与度。

可选的滑块动画效果

动画效果可以显著提升滑块的视觉效果,使其更具吸引力。Yudiz BannerSlider 模块支持以下9种可用的滑块效果,包括:

  • 滑块
  • 自动滑动
  • 从右到左滑动
  • 设置自动播放超时时间(秒)
  • 反向滑动(从左到右)
  • 显示上一页/下一页按钮
  • 显示导航点按钮
  • 设置滑块边距
  • 淡入
  • 淡出
  • 启用视频控制

4. 其他特性

基于网格的管理

在管理网格中轻松查看和编辑横幅。

横幅中的URL

将URL与每个横幅关联,点击时在新标签页中无缝导航。

滑块时间持续设置

调整特定横幅在切换到下一页之前显示的时间。

启用悬停触发自动播放

实现一个在鼠标悬停在视频或外部视频上时触发自动播放的功能,当鼠标不再悬停在视频上时自动暂停。

5. 横幅滑块完整功能

对于商店管理员

常规配置

  • 启用/禁用模块

横幅配置

  • 添加新横幅
  • 识别横幅
  • 横幅名称
  • 横幅描述
  • 启用/禁用横幅
  • 可选的媒体类型:图片/视频/外部视频
  • 将媒体类型插入横幅
  • 通过编辑器编辑或添加横幅的图片/视频/外部视频
  • 将URL添加到横幅
  • 在横幅网格中点击图片/视频/外部视频时将跳转到新页面
  • 在网格中添加/更新/删除所有横幅

滑块配置

  • 添加新滑块
  • 启用/禁用滑块
  • 滑块名称
  • 滑块描述
  • 设置动画效果
  • 根据您的需求设置动画选项,包括自动播放、设置自动播放超时时间(秒)、反向滑动(从左到右)、显示上一页/下一页按钮、设置滑块边距、淡入/淡出效果
  • 为滑块选择横幅(只能选择启用的横幅)
  • 在网格中添加/更新/删除所有滑块

6. Magento 2横幅滑块用户指南(管理端)

本指南提供逐步说明,介绍如何将横幅滑块集成到您的Magento 2商店的首页。

6.1 配置

登录到 Magento管理后台,导航到 Yudiz横幅滑块 -> 配置 -> 常规 启用模块。

6.1.1 常规

GeneralConfiguration

模块启用:选择 以激活模块,选择 以禁用模块。

6.2 管理横幅

如何创建新横幅

管理面板,导航到 Yudiz横幅滑块 -> 管理横幅,在右侧,点击 添加新横幅 按钮。

6.2.1 横幅信息

  • 状态:将 启用 设置为激活横幅。
  • 名称:设置横幅的名称。
  • 描述:设置横幅的描述。
  • 选择媒体类型:选择横幅的类型

示例横幅信息

BannerInformation

6.2.1.1 选择横幅的媒体类型

要开始,请按照以下步骤操作

访问管理面板并导航到 Yudiz横幅滑块 -> 管理横幅。

在页面右侧点击 添加新横幅 按钮。

您将提示选择媒体类型。有两种选项可供选择

  • 图片/视频(从您的设备):此选项允许您直接从您的设备上传图片或视频文件。
  • 外部视频:选择此选项,通过提供链接来包含外部视频。

选择媒体类型并填写其他字段后,保存横幅。

保存后,您可以查看横幅的网格。在这个网格中,您会看到一个标注为“名称图片/视频/外部视频”的列。点击此列将跳转到与横幅相关的特定图片或视频。

6.3 管理滑块

如何创建新的滑块

管理面板,导航到 Yudiz 横幅滑块 -> 管理滑块,在右侧,点击 添加新滑块 按钮。

6.3.1 滑块信息

在滑块信息部分,您会发现三个标签页:主标签、效果和选择滑块横幅。

1. 主标签

  • 状态:通过将其设置为“启用”来激活滑块。
  • 名称:为滑块提供名称。
  • 描述:添加滑块的描述。
  • 使用方法:包括如何使用此横幅滑块扩展的说明。

1.1 示例:主标签

MainTab

2. 效果

  • 自动滚动:为滑块启用自动滚动。
  • 设置自动播放超时时间(秒):如果启用自动播放,则定义每个幻灯片的间隔时间。
  • 反向滚动(从左到右):启用此选项以实现从左到右的反向滚动效果。
  • 显示上一页/下一页按钮:启用/禁用此选项以显示上一页下一页按钮。
  • 显示点导航按钮:启用/禁用此选项以显示点导航按钮。
  • 设置滑块边距:设置滑块的边距。
  • 淡入/淡出效果:选择是否在滑块中包含淡入/淡出效果。
  • 在外部视频中启用控件:启用/禁用此选项以在外部视频中启用控件。

2.1 示例:效果标签

EffectsTab

3. 选择横幅

  • 在本节中,您将遇到一个显示横幅信息的网格。您可以使用此网格选择要包含在滑块中的横幅。寻找标记为“已启用”的横幅并选择您要在滑块中展示的横幅。

3.1 示例:选择横幅标签

SelectBannersTab

7. Magento 2 横幅滑块用户指南(前端)

在完成 Magento 管理面板中的必要步骤后,现在您已准备好在网站的前端实施此扩展。

有两种方法可用于集成,如下所述

  1. CMS 页面/静态块
    {{block class="Yudiz\BannerSlider\Block\Showdata" slider_id="Slider Id" template="Yudiz_BannerSlider::index.phtml"}}
    您可以将上述行粘贴到 Magento 2 中的任何页面中,并设置滑块 ID。

  2. 模板 .phtml 文件
    $block = $this->getLayout()->createBlock('Yudiz\BannerSlider\Block\ShowData');
    $block->setData('slider_id', Slider Id);
    echo $block->setTemplate('Yudiz_BannerSlider::index.phtml')->toHtml();
    打开 .phtml 文件并在您想显示横幅滑块的位置插入。

A. 如果您想在“联系我们”等特定页面上显示滑块,可以按照以下步骤操作

  1. 访问管理面板并转到内容 > 块 > 联系我们信息(已创建)。点击“编辑”。

  2. 在页面编辑器中,选择“使用页面构建器编辑”。然后,粘贴以下代码(假设您正在使用滑块 ID 1)

{{block class="Yudiz\BannerSlider\Block\Showdata" slider_id="1" template="Yudiz_BannerSlider::index.phtml"}}

示例 CMS 页面/静态块

SelectBannersTab

  • 保存您的更改,然后执行以下命令
php bin/magento c:c

清除缓存后,导航到您的“联系”页面,您将注意到滑块已集成并显示在那里。

B. 要在自定义或现有模块的 template.phtml 文件中显示滑块,请按照以下程序操作

  1. 在您想添加滑块的模块中找到 template.phtml 文件。
  2. 插入提供的代码片段
$block = $this->getLayout()->createBlock('Yudiz\BannerSlider\Block\ShowData');
$block->setData('slider_id', 1); //(assuming slider id is 1)
echo $block->setTemplate('Yudiz_BannerSlider::index.phtml')->toHtml();
  • 保存您的修改后,运行后续命令
php bin/magento c:c

清除缓存后,访问您网站的首页并导航到指定的模板路由。在那里,您将发现滑块已集成并突出显示。