在这一篇博客中,我们将介绍Magento jQuery小部件,我们首先讨论的是gallery小部件。您可能知道,gallery小部件在产品页面上用于显示我们通过Magento后台上传的产品图像。

由于不需要初始设置,因为产品图库是开箱即用的,我们可以直接进入小部件默认提供的配置选项。正如Magento文档中所述,这些选项可以在我们的备用主题etc文件夹中的view.xml这个配置文件中设置或完善

将配置文件从我们的后备主题(无论是Blank还是Luma)复制到我们的自定义主题后,app/design/frontend/<Namespace>/<Theme>/etc我们可以开始自定义。最常见的更改包括:

  • 方向 - 指缩略图的方向:水平或垂直
  • thumbnailSize - 顾名思义,这个用于设置图像缩略图的大小
  • 过渡效果和持续时间 - 我们可以选择三种不同的效果:幻灯片,交叉渐变和溶解
  • 标题 - 用于添加图像标题,可以设置为true或false
  • 断点 - 用于设置移动视图的max-with

有更多的选择可以更改,你可以按喜好修改。我们将简要介绍另外两个配置设置——放大镜小部件和javascript捆绑。

 

放大镜

放大镜是一个单独的小部件,Gallery小部件使用它来放大产品页面上的产品图像。它默认是禁用的,但如果您决定启用它,您可以选择哪个用户操作将在产品图像上激活它,单击或鼠标悬停。此外,您可以设置放大镜块的位置和尺寸(高度和宽度),因为放大镜小部件将这个块设置为一个单独的、绝对定位的HTML页面div。

 

Javascript捆绑

关于javascript捆绑,view.xml文件中有两个配置设置。一个是用于控制生成的捆绑包的大小,另一个是用于列出我们不想捆绑的所有资产的排除列表。因此,如果您的网站有一些性能问题(即加载时间),捆绑可能是原因,您应该检查这两个配置。

 

常见用例

现在让我们看看gallery小部件的其他可能用途。因为它的基本目的是构建图像库,我们可以使用它来创建任何其他类型的图像库,它不一定与产品相关。我们来看看怎么做

首先我们需要知道的是在哪里放置我们的图库。假如是我们的主页,那么我们需要创建两个文件:

  • app/design/frontend/<Namespace>/<Theme>/Magento_Cms/template/homepage-gallery.phtml
  • app/design/frontend/<Namespace>/<Theme>/Magento_Cms/layout/cms_index_index.xml

在我们的homepage-gallery.phtml模版文件中,我们将看到以下代码:

<!-- Container for our image gallery --> 
<div class="img-gallery"></div>
 
<!-- Script that calls gallery widget --> 
<script>
require ([
    'jquery',
    'mage/gallery/gallery'
], function ($, Gallery) {
    $(function () {
        $('.img-gallery').each(function (index, element) {
            Gallery({
                options: {
                    "nav": "dots",
                },
                data: [
                    { img: "<full_path_to_image_1>" },
                    { img: "<full_path_to_image_2>" },
                    { img: "<full_path_to_image_3>" }
                    ],
                fullscreen: {},
                breakpoints: {}
            }, element);
        });
    });
});
</script>

让我们来看看这里有什么。首先,我们为gallery定义container,它将是带有class img-gallery的div。接下来,我们初始化gallery 小部件并指定在四个不同组中排序的各种配置设置:optionsdatafullscreenbreakpoints

对于每个组都有一些设置,但是最重要的组是data,因为它为我们的图片库保存图像。实际上它是一个图像数组,每个图像都是一个对象,并且有五个不同的属性:imgthumbfullcaptionisMain。在我们的示例中,我们只指定了一个属性img,它包含图像的完整路径。

我们的布局文件cms_index_index.xml如下所示:

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"; xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <css src="mage/gallery/gallery.css"/>
    </head>
 
    <body>
        <referenceContainer name="columns.top">
            <block class="Magento\Framework\View\Element\Template" name="homepage-gallery" template="Magento_Cms::homepage-gallery.phtml"></block>
        </referenceContainer>
    </body>
</page>

查看上面的文件,我们可以看到两个不同的代码块。在body标签中,我们调用了homepage-gallery.phtml之前创建的模板,并在head标签中添加了gallery.css库运行和正常工作所需的css文件我们的图库是功能性的,我们可以根据项目的视觉风格继续添加一些自定义样式。