Ecshop放大镜插件说明
附送修改的文件goods.dwt和goods_gallery1.lbi以及放大镜效果JS和CSS文件,对应位置都放好了,仅作参考,可以自行修改!不要直接覆盖你得网站模板,放大镜效果要根据你自己的网站模版进行修改的!!ecshop商品属性使用图片替换功能,支持颜色等任何属性替换成图片
Ecshop放大镜插件安装教程
1、将“直接替换的程序”里面的文件传到你网站相对应的目录下。
直接替换的程序包括文件:
admin/product_spec_pic.php admin/templates/product_spec_pic.htm admin/templates/product_spec_pic_info.htm admin/images/guigou_icon.png js/jscolor/arrow.gif js/jscolor/cross.gif js/jscolor/demo.html js/jscolor/hs.png js/jscolor/hv.png js/jscolor/jscolor.js languages/en_us/admin/product_spec_pic.php languages/zh_cn/admin/product_spec_pic.php languages/zh_tw/admin/product_spec_pic.php
2、将images文件夹传到你网站的模板文件夹下。以默认模板为例,就是传到themes/default文件夹下。这个要根据你现在使用的是哪套模板,就传到那个文件夹。当然也可以全部模板文件都放上。
3、打开admin/templates/goods_list.htm文件
找到:(大约在54行)
{if $specifications[$goods.goods_type] neq ''}<a href="goods.php?act=product_list&goods_id={$goods.goods_id}" title="{$lang.item_list}"><img src="images/icon_docs.gif" width="16" height="16" border="0" /></a>{else}<img src="images/empty.gif" width="16" height="16" border="0" />{/if}
在它下面添加一行代码:
{if $specifications[$goods.goods_type] neq ''}<a href="product_spec_pic.php?act=list&goods_id={$goods.goods_id}" title="{$lang.specification_pic}"><img src="images/guigou_icon.png" width="16" height="16" border="0" /></a>{else}<img src="images/empty.gif" width="16" height="16" border="0" />{/if}
4、打开根目录下includes/lib_goods.php文件
找到:
/** * 获得商品的属性和规格 * * @access public * @param integer $goods_id * @return array */ function get_goods_properties($goods_id) { /* 对属性进行重新排序和分组 */ $sql = "SELECT attr_group ". "FROM " . $GLOBALS['ecs']->table('goods_type') . " AS gt, " . $GLOBALS['ecs']->table('goods') . " AS g ". "WHERE g.goods_id='$goods_id' AND gt.cat_id=g.goods_type"; $grp = $GLOBALS['db']->getOne($sql); if (!empty($grp)) { $groups = explode("n", strtr($grp, "r", '')); } /* 获得商品的规格 */ $sql = "SELECT a.attr_id, a.attr_name, a.attr_group, a.is_linked, a.attr_type, ". "g.goods_attr_id, g.attr_value, g.attr_price " . 'FROM ' . $GLOBALS['ecs']->table('goods_attr') . ' AS g ' . 'LEFT JOIN ' . $GLOBALS['ecs']->table('attribute') . ' AS a ON a.attr_id = g.attr_id ' . "WHERE g.goods_id = '$goods_id' " . 'ORDER BY a.sort_order, g.attr_price, g.goods_attr_id'; $res = $GLOBALS['db']->getAll($sql); $arr['pro'] = array(); // 属性 $arr['spe'] = array(); // 规格 $arr['lnk'] = array(); // 关联的属性 foreach ($res AS $row) { $row['attr_value'] = str_replace("n", '<br />', $row['attr_value']); if ($row['attr_type'] == 0) { $group = (isset($groups[$row['attr_group']])) ? $groups[$row['attr_group']] : $GLOBALS['_LANG']['goods_attr']; $arr['pro'][$group][$row['attr_id']]['name'] = $row['attr_name']; $arr['pro'][$group][$row['attr_id']]['value'] = $row['attr_value']; } else { $arr['spe'][$row['attr_id']]['attr_type'] = $row['attr_type']; $arr['spe'][$row['attr_id']]['name'] = $row['attr_name']; $arr['spe'][$row['attr_id']]['values'][] = array( 'label' => $row['attr_value'], 'price' => $row['attr_price'], 'format_price' => price_format(abs($row['attr_price']), false), 'id' => $row['goods_attr_id']); } if ($row['is_linked'] == 1) { /* 如果该属性需要关联,先保存下来 */ $arr['lnk'][$row['attr_id']]['name'] = $row['attr_name']; $arr['lnk'][$row['attr_id']]['value'] = $row['attr_value']; } } return $arr; } 把它修改为:(这个要根据实际情况修改,请不要直接复制修改) /** * 获得商品的属性和规格 * * @access public * @param integer $goods_id * @return array */ function get_goods_properties($goods_id) { /* 对属性进行重新排序和分组 */ $sql = "SELECT attr_group ". "FROM " . $GLOBALS['ecs']->table('goods_type') . " AS gt, " . $GLOBALS['ecs']->table('goods') . " AS g ". "WHERE g.goods_id='$goods_id' AND gt.cat_id=g.goods_type"; $grp = $GLOBALS['db']->getOne($sql); if (!empty($grp)) { $groups = explode("n", strtr($grp, "r", '')); } /* 获得商品的规格 */ $sql = "SELECT a.attr_id, a.attr_name, a.attr_group, a.is_linked, a.attr_type, ". "g.goods_attr_id, g.attr_value, g.attr_price,g.thumb_url,g.img_url,g.img_original, hex_color " . 'FROM ' . $GLOBALS['ecs']->table('goods_attr') . ' AS g ' . 'LEFT JOIN ' . $GLOBALS['ecs']->table('attribute') . ' AS a ON a.attr_id = g.attr_id ' . "WHERE g.goods_id = '$goods_id' " . 'ORDER BY a.sort_order, g.attr_price, g.goods_attr_id'; $res = $GLOBALS['db']->getAll($sql); $arr['pro'] = array(); // 属性 $arr['spe'] = array(); // 规格 $arr['lnk'] = array(); // 关联的属性 foreach ($res AS $row) { $row['attr_value'] = str_replace("n", '<br />', $row['attr_value']); if ($row['attr_type'] == 0) { $group = (isset($groups[$row['attr_group']])) ? $groups[$row['attr_group']] : $GLOBALS['_LANG']['goods_attr']; $arr['pro'][$group][$row['attr_id']]['name'] = $row['attr_name']; $arr['pro'][$group][$row['attr_id']]['value'] = $row['attr_value']; } else { $arr['spe'][$row['attr_id']]['attr_type'] = $row['attr_type']; $arr['spe'][$row['attr_id']]['name'] = $row['attr_name']; $arr['spe'][$row['attr_id']]['values'][] = array( 'label' => $row['attr_value'], 'price' => $row['attr_price'], 'img_url' => $row['img_url'], 'img_original' => $row['img_original'], 'thumb_url' => $row['thumb_url'], 'hex_color' => $row['hex_color'], 'format_price' => price_format(abs($row['attr_price']), false), 'id' => $row['goods_attr_id']); } if ($row['is_linked'] == 1) { /* 如果该属性需要关联,先保存下来 */ $arr['lnk'][$row['attr_id']]['name'] = $row['attr_name']; $arr['lnk'][$row['attr_id']]['value'] = $row['attr_value']; } } return $arr; }
5、关于模板themes/模板路径/goods.dwt修改
找到:
<!-- {* 开始循环所有可选属性 *} --> <!-- {* 结束循环可选属性 *} -->
将这两个注释的之间代码改成如下:
<!-- {* 开始循环所有可选属性 *} --> <script language="javascript"> function changeAtt(t,src,key) { document.getElementById('spec_value_'+src).checked='checked'; var itemObj = document.getElementById("catt_"+key); var elems = itemObj.getElementsByTagName("a"); for (i = 0; i < elems.length; i ++ ) { var prefix = elems[i].name.substr(0, 7); if (prefix == 'spec_a_') { elems[i].className = ''; } } t.className = "cattsel"; changePrice(); } </script> <style type="text/css"> <!-- /*--------------颜色选择器CSS添加-------------*/ .propertySelect{padding:10px 0 10px 10px;} .propertySelect strong{float:left;font-weight:normal;text-align:left;} .propertySelect .catt{height:auto;overflow:hidden;} .propertySelect .catt a{border:1px solid #C8C9CD;text-align:center;background-color:#FFFFFF;display:block;white-space:nowrap;color:#666666;text-decoration:none;float:left;margin-left:2px;margin-right:2px;position:relative;} .propertySelect .catt a p{border:1px solid #FFFFFF;padding:2px 5px;background-color:#FFFFFF;} .propertySelect .catt a p.padd{padding:0px;} .propertySelect .catt a:hover{border:1px solid #FF6701;} .propertySelect .catt a:hover p{border:1px solid #FF6701;} .propertySelect .catt a:focus{outline-style:none;} .propertySelect .catt .cattsel{background:#FF6701;border:1px solid #FF6701;} .propertySelect .catt .cattsel a:hover{border:1px solid #FF6701;} .propertySelect .catt .cattsel p{border:1px solid #FF6701;} .propertySelect .catt em{font-style:normal;} .propertySelect .catt .cattsel i{background:url(images/test.png) no-repeat scroll right bottom transparent;bottom:0;height:16px;position:absolute;right:0;width:16px;} .propertySelect .catt .cattsel a:hover i{background:url(images/test.png) no-repeat scroll right bottom transparent;} --> </style> {if $specification} <div class="propertySelect clearfix" id="propertySelect"> <!-- {foreach from=$specification item=spec key=spec_key} --> <strong>{$spec.name}:</strong> <div class="catt" id="catt_{$spec_key}"> <!-- {* 判断属性是复选还是单选 *} --> <!-- {if $spec.attr_type eq 1} --> <!-- {if $cfg.goodsattr_style eq 1} --> <!-- {foreach from=$spec.values item=value key=key} --> <a class='hover {if $key eq 0}cattsel{/if}{if $value.thumb_url} colorImg{/if}' {if $value.thumb_url} href="{$value.img_original}" rev={$value.img_original} rel=goodsPic {else}href="javascript:"{/if} title="{$value.label}" style="cursor:pointer" name="spec_a_{$value.id}" onclick="changeAtt(this,{$value.id},{$spec_key})"> <p {if $value.thumb_url}class="padd"{elseif $value.hex_color neq ''}style="background:#{$value.hex_color}; height:45px; width:45px"{/if}> {if $value.thumb_url} <img src="{$value.thumb_url}" width="50" height="50" alt="{$value.label}"> {elseif $value.hex_color} {else} <em>{$value.label}</em> {/if} <i></i> </p> <input style="display:none" id="spec_value_{$value.id}" type="radio" name="spec_{$spec_key}" value="{$value.id}" {if $key eq 0}checked{/if} /> </a> <!-- {/foreach} --> <input type="hidden" name="spec_list" value="{$key}" /> <!-- {else} --> <select name="spec_{$spec_key}"> <!-- {foreach from=$spec.values item=value key=key} --> <option label="{$value.label}" value="{$value.id}">{$value.label} {if $value.price gt 0}{$lang.plus}{elseif $value.price lt 0}{$lang.minus}{/if}{if $value.price neq 0}{$value.format_price}{/if}</option> <!-- {/foreach} --> </select> <input type="hidden" name="spec_list" value="{$key}" /> <!-- {/if} --> <!-- {else} --> <!-- {foreach from=$spec.values item=value key=key} --> <label for="spec_value_{$value.id}"> <input type="checkbox" name="spec_{$spec_key}" value="{$value.id}" id="spec_value_{$value.id}" onclick="changePrice()" /> {$value.label} [{if $value.price gt 0}{$lang.plus}{elseif $value.price lt 0}{$lang.minus}{/if} {$value.format_price|abs}] </label> <br /> <!-- {/foreach} --> <input type="hidden" name="spec_list" value="{$key}" /> <!-- {/if} --> </div> <div class="blank"></div> <!-- {/foreach} --> </div> {/if} <!-- {* 结束循环可选属性 *} -->
6、在后台数据库管理->sql查询处执行以下语句(全部一次性):
请将ecs_改成你的网站数据库扩展名,如果你的数据扩展名已经是ecs_了,那就不用改了。
Alter table ecs_goods_attr add column thumb_url varchar(50) not null default ''; Alter table ecs_goods_attr add column img_url varchar(50) not null default ''; Alter table ecs_goods_attr add column img_original varchar(50) not null default ''; Alter table ecs_goods_attr add column hex_color varchar(50) not null default ''; ALTER TABLE `ecs_goods_attr` CHANGE `img_url` `img_url` VARCHAR( 80 ) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL , CHANGE `img_original` `img_original` VARCHAR( 80 ) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL , CHANGE `hex_color` `hex_color` VARCHAR( 80 ) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL; ALTER TABLE `ecs_goods_attr` CHANGE `thumb_url` `thumb_url` VARCHAR( 255 ) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL;
7、data目录下建一个category目录
8、根据需要修改您的模版商品详情页实现放大镜效果,见附送的放大镜效果实现示例。
- 帝国CMS7.5仿《酷8》动态图片网站模板 [2024-10-24]
- Images Tool v3.0在线图片视频编辑源码 [2022-08-15]
- 织梦CMS站长图片素材下载站模板 [2022-03-31]
- 图片相册社区类型小程序模板 [2022-01-06]
- 帝国CMS7.5仿千图网图片素材下载模板升级版 [2021-11-30]