系统学习magento二次开发，推荐小册：《Magento中文全栈二次开发 》
本小册面向Magento2以上版本，书代码及示例兼容magento2.0-2.4版本。涵盖了magento前端开发，后端开发，magento2主题,magento2重写,magento2 layout,magento2控制器,magento2 block等相关内容,带领您成为magento开发技术专家。
在Magento 2中实现放大镜小部件的步骤：
步骤 1：您可以在媒体库所在的 phtml 文件中编写此代码。在这里，我们在以下路径中添加了代码。
app\design\frontend\Themes\Yourtheme\Vendor_Extension\templates\test.phtml
并添加以下代码
<div class="gallery-placeholder _block-content-loading whatwedo-image" data-gallery-role="gallery-placeholder">
<img
alt="main product photo"
class="gallery-placeholder__image"
src=”<image-path>”
/>
</div>
<script type="text/x-magento-init">
{
".whatwedo-image": {
"mage/gallery/gallery": {
"data": [{
"thumb": "<media_url>/1.png",
"img": "<media_url>/2.png",
"full": "<media_url>/3.png",
"caption": "Media Check",
"isMain": "false"
}],
"mixins": ["magnifier/magnify"],
"magnifierOpts": {
"enabled": true,
"eventType": "hover", // you can use Either click or hover
"width": 10, // You can write anything
"height": 20, // You can write anything
"top": 10, // You can write anything
"left": 20, // You can write anything
"fullscreenzoom": 50, // You can write anything
"mode": "outside" // You can write inside / outside
}
}
}
}
</script>步骤2：从视图中启用放大镜.xml，移动到下面的路径
app\design\frontend\themees\yourtheme\etc\view.xml
并添加以下代码
<var name="magnifier"> <var name="enabled">true</var> <!-- Turn on/off magnifier (true/false) --> </var>
结论：
这样，您可以有效地在Magento 2中实现放大镜控件。