Magento2 产品放大镜效果的实现

产品放大镜效果指的是类似下图这样的功能:

Magento 2 安装好后一般是没有看到这个功能的。注意,我说的是没有看到,因为实际上他是有的。

当然如果你使用了非内置的主题(blank 或者 luma 之外的),那么你很可能会发现有这个功能,而且有的还可以进行效果配置呢。

这篇文章想要讨论的是放大镜功能实现层面的事情,对于主题开发者来说,可能更有用,对于纯使用者来说,可能就没有必要了解了。

首先,要实现这样的功能一定是涉及到 js 的,为了让 js 工作,需要相应的模板文件(就是 html 代码片段)。Magento 2 自带了实现该功能的 js 和 模板文件,所以你只需要配置,就可以启用这个功能了。

假设你已经会创建前端主题了,如果你不清楚的话,请参考如何创建 Magneto 2 前端主题

然后我们也介绍过 view.xml 的,如果不清楚,请参考关于 view.xml

关于 view.xml 的 part-2 说的就是产品图片的放大镜效果,只是当时没有具体说。

Luma 主题 magnifier 部分在 view.xml 中是这样配置的:

<var name="magnifier">
            <var name="fullscreenzoom">20</var>  <!-- Zoom for fullscreen (integer)-->
            <var name="top"></var> <!-- Top position of magnifier -->
            <var name="left"></var> <!-- Left position of magnifier -->
            <var name="width"></var> <!-- Width of magnifier block -->
            <var name="height"></var> <!-- Height of magnifier block -->
            <var name="eventType">hover</var> <!-- Action that atcivates zoom (hover/click) -->
            <var name="enabled">false</var> <!-- Turn on/off magnifier (true/false) -->
        </var>

看到了吗? enabledfalse,所以自然看不到效果啦~

下面请自行创建子主题,继承 blank 或者 luma ,然后将 luma 的 /etc/view.xml 拷贝到你的主题下,修改相应的内容为:

<var name="magnifier">
            <var name="fullscreenzoom">20</var>  <!-- Zoom for fullscreen (integer)-->
            <var name="top"></var> <!-- Top position of magnifier -->
            <var name="left"></var> <!-- Left position of magnifier -->
            <var name="width">500</var> <!-- Width of magnifier block -->
            <var name="height">500</var> <!-- Height of magnifier block -->
            <var name="eventType">hover</var> <!-- Action that atcivates zoom (hover/click) -->
            <var name="enabled">true</var> <!-- Turn on/off magnifier (true/false) -->
        </var>

然后启用你的主题,一定会发现已经有产品图片的放大镜效果了。
就像下面这样:

博主刚开始并不知道 Magento 2 自带这样的功能,所以到处找插件,当然找着一个免费的当然有点粗糙,不过核心已经完整了,博主已上传到 github 上,地址:https://github.com/PiscesThankIT/ktree-zoom

原文的参考地址:https://ktree.com/blog/Zoom-Extension-for-Magento2.html

感兴趣的可以自行研究。他使用的 js 插件是 elevateZoom 。博主粗略的看了下,大多数实现产品放大镜效果的插件都是使用的该插件,而且他的功能还是很全面的,也比较健壮。官网:http://www.elevateweb.co.uk/image-zoom/examples

如果你对配置 Magento 2 自带的放大镜功能感兴趣,可以去看看这个 issue,地址: https://github.com/magento/magento2/issues/4977 ,问题中指出了他基于哪个插件。

发表评论

电子邮件地址不会被公开。 必填项已用*标注