- N +

opencart 3.0版本选项图片放大修改

原标题:opencart 3.0版本选项图片放大修改

导读:

opencart选项自带有图片功能,但是它显示图片比较小,看起来不太方便,本篇文章就为大家讲解opencart选项图片放大功能的开发,它只需要从后台添加简单的几行代码就可以解决...

文章目录 [+]

opencart选项自带有图片功能,但是它显示图片比较小,看起来不太方便,本篇文章就为大家讲解opencart选项图片放大功能的开发,它只需要从后台添加简单的几行代码就可以解决

附加:本来我认为它只需要从后台修改模板即可,但是在完成之后我发现了选项图片在主图位置放大时因为放大而模糊了,所以这里还是需要修改它的controller文件给选项增加放大后的图片。

打开catalog\controller\product\product.php文件,找到如下图代码位置(可以在这个文件去查找$option_value['image']代码所在的位置),并增加选项当大后的图片。

添加代码片段

'image_big'                   => $this->model_tool_image->resize($option_value['image'], $this->config->get('theme_' . $this->config->get('config_theme') . '_image_thumb_width'), $this->config->get('theme_' . $this->config->get('config_theme') . '_image_thumb_height')),

示例图

5.png

登录opencart后台 -> Design -> Theme Editor -> product ->product.twig(这是前台商品详情页的模板文件)

1.png

打开product.twig文件后 ,我们先找到src="{{ thumb }}" 这个段代码,然后再它的左边加上 id="product_image"   id名称如如下图。

3.png

然后再找到<div class="radio"> 这个代码的位置,并在下方的<label> 标签中加上 class="radios" 类名。然后再它下面的 img 标签里加上 data-image-big="{{ option_value.image_big }}"如下图。

2.png

最后在我们需要在最底部加上jQuery代码,这段代码是让鼠标悬浮在选项图片时,选项图片的大图可以显示在商品主图上,移除时主图还原, 这段代码要加在{{ footer }} 之前

<script type="text/javascript">
$(document).ready(function() {
var images = '';
var or_image = $("#product_image").attr('src');
$(".radios").mouseover(function(){
images = $(this).find('img').attr('data-image-big');
$("#product_image").attr("src",images);
});
$(".radios").mouseout(function(){
$("#product_image").attr("src",or_image);
});
});
//--></script>


4.png

有好的文章希望我们帮助分享和推广,猛戳这里我要投稿

  • 原文地址:ocxd
  • 温馨提示:文章内容系作者个人观点,不代表OC小店对观点赞同或支持。
  • 版权声明:本文转载mineya版权归原作者所有,欢迎分享本文,转载请保留出处!

返回列表
上一篇:
下一篇:

发表评论中国互联网举报中心

快捷回复:

    评论列表 (已有2条评论,共1011人参与)参与讨论
    网友昵称:访客
    访客游客6个月前 (05-01)回复
    后是不是漏了 ˂!--
    做使用的版本是3.0.3.2,按以上步骤操作,并未成功。
    网友昵称:米哑
    米哑管理员6个月前 (05-06)回复
    @ 访客 很有可能是缓存问题哦,这个方法有测试过是没问题的。