magento2 产品图片如何开启放大镜

2.99K 浏览开发笔记

magento2 产品图片如何开启放大镜

有很多小伙伴问过我,m2有没有放大镜插件。

m2默认是有的。

https://devdocs.magento.com/guides/v2.3/javascript-dev-guide/widgets/widget_gallery_mg.html?itm_source=devdocs&itm_medium=search_page&itm_campaign=federated_search&itm_term=magnifier

需要修改下vendor/magento/module-catalog/view/frontend/templates/product/view/gallery.phtml。

注意 不要直接改vendor的源代码,你按照这个路径在你主题里重写。

比如 app/design/主题包/主题/Magento_Catalog/templates/product/view/gallery.phtml

我看了下2.3.3里是加了这个功能了。

只是默认没有开启。

所以你需要在你主题下创建etc/view.xml。

在view.xml里开启下

路径app/design/主题包/主题/etc/view.xml

<code><?xml version="1.0"?> <!-- /**  * Copyright © Magento, Inc. All rights reserved.  * See COPYING.txt for license details.  */ --> <view xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/view.xsd"> 
<vars module="Magento_Catalog">     
    <var name="magnifier">             
        <var name="fullscreenzoom">10</var> <!-- Zoom for fullscreen (integer)-->
        <var name="top">500</var> <!-- Top position of magnifier -->
        <var name="left">650</var> <!-- Left position of magnifier -->
        <var name="width">200</var> <!-- Width of magnifier block -->
        <var name="height">200</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 name="mode">outside</var> <!-- Zoom type (outside/inside) -->         
    </var> 
</vars> 
</view></code>

把enabled设为true就行了。

然后清缓存,有必要的话还得deploy下。

当然如果gallery.phtml里没有加放大镜代码的话,你就按照

https://devdocs.magento.com/guides/v2.3/javascript-dev-guide/widgets/widget_gallery_mg.html?itm_source=devdocs&itm_medium=search_page&itm_campaign=federated_search&itm_term=magnifier

这个教程 把代码加进去。

 

0