用户登录
You are here
ECShop仿淘宝商品详细页 实现尺码颜色关联显示库存
效果如下：
实现方法，修改goods.dwt如下：
<!-- {foreach from=$spec.values item=value key=key} --> <a {if $key eq 0}class="cattsel"{/if} onclick="changeAtt(this,{$value.id},{$goods.goods_id})" href="javascript:;" name="{$value.id}" title="[{if $value.price gt 0}{$lang.plus}{elseif $value.price lt 0}{$lang.minus}{/if} {$value.format_price|abs}]">{$value.label}<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} -->
在显示详细信息合适的地方加
<font style=" color:#CCCCCC;">（库存：<font id="shows_number">{$goods.goods_number} {$goods.measure_unit}</font>）</font>
这是动态加载库存的地方
选择打钩这个样式论坛有人发过 也不是很难 我不在详细贴出
在goods.dwt加js代码：
function changeAtt(t,a,goods_id) { t.lastChild.checked='checked'; for (var i = 0; i<t.parentNode.childNodes.length;i++) { if (t.parentNode.childNodes[i].className == 'cattsel') { t.parentNode.childNodes[i].className = ''; } } t.className = "cattsel"; var formBuy = document.forms['ECS_FORMBUY']; spec_arr = getSelectedAttributes(formBuy); Ajax.call('goods.php?act=get_products_info', 'id=' + spec_arr+ '&goods_id=' + goods_id, shows_number, 'GET', 'JSON'); changePrice(); } function shows_number(result) { if(result.product_number !=undefined) { $('shows_number').innerHTML = result.product_number+'件'; } else { $('shows_number').innerHTML = '未设置' } }
打开goods.php添加70行左右添加
if (!empty($_REQUEST['act']) && $_REQUEST['act'] == 'get_products_info') { include('includes/cls_json.php'); $json = new JSON; // $res = array('err_msg' => '', 'result' => '', 'qty' => 1); $spce_id = $_GET['id']; $goods_id = $_GET['goods_id']; $row = get_products_info($goods_id,explode(",",$spce_id)); //$res = array('err_msg'=>$goods_id,'id'=>$spce_id); die($json->encode($row)); }
通过以上操作便可实现仿淘宝颜色尺码选择功能
来自 http://down.chinaz.com/try/201203/1754_1.htm
ECSHOP 产品介绍页增加尺码、颜色方法详解
发布日期：2013-07-01 浏览次数：1956
ECSHOP 产品介绍页增加尺码、颜色方修改方法
在网站模板目录下打开 goods.dws 查找如下代码：
<!-- {* 开始循环所有可选属性 *} -->
<!-- {foreach from=$specification item=spec key=spec_key} -->
<li class="padd loop">
<strong>{$spec.name}:</strong><br />
<!-- {* 判断属性是复选还是单选 *} -->
<!-- {if $spec.attr_type eq 1} -->
<!-- {if $cfg.goodsattr_style eq 1} -->
<!-- {foreach from=$spec.values item=value key=key} -->
<label for="spec_value_{$value.id}">
<input type="radio" name="spec_{$spec_key}" value="{$value.id}" id="spec_value_{$value.id}" {if $key eq 0}checked{/if} 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}" />
<!-- {else} -->
<select name="spec_{$spec_key}" onchange="changePrice()">
<!-- {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} -->
</li>
<!-- {/foreach} -->
<!-- {* 结束循环可选属性 *} -->
修改为如下代码：
<!-- {* 开始循环所有可选属性 *} -->
<!-- {foreach from=$specification item=spec key=spec_key} -->
<li class="padd">
<!-- {* 判断属性是复选还是单选 *} -->
<!-- {if $spec.attr_type eq 1} -->
<!-- {if $cfg.goodsattr_style eq 1} -->
<div class="catt"><strong class="catb">{$spec.name}:</strong>
<!-- {foreach from=$spec.values item=value key=key} -->
<a {if $key eq 0}class="cattsel"{/if} onclick="changeAtt(this)" href="javascript:;" name="{$value.id}">{$value.label}<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} -->
</div>
<input type="hidden" name="spec_list" value="{$key}" />
<!-- {/if} -->
<!-- {else} -->
<div class="blank10"></div>
<!-- {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}</label>
<!-- {/foreach} -->
<input type="hidden" name="spec_list" value="{$key}" />
<!-- {/if} -->
</li>
<!-- {/foreach} -->
<!-- {* 结束循环可选属性 *} -->
再在网站模板CSS里添加如下CSS
/*--------------颜色选择器CSS添加-------------*/
.catt .catb {
height:auto;
overflow:hidden;
line-height:30px;
float:left;
}
.catt {
width:100%;
height:auto;
overflow:hidden;
padding-bottom:5px;
text-decoration:none;
}
.catt a {
border:#c8c9cd 1px solid;
text-align:center;
background-color:#fff;
margin-left:5px;
margin-top:6px;
padding-left:10px;
padding-right:10px;
display:block;
white-space:nowrap;
color:#000;
text-decoration:none;
float:left;
}
.catt a:hover {
border:#ff6701 2px solid;
margin:-1px;
margin-left:4px;
margin-top:5px;
}
.catt a:focus {
outline-style:none;
}
.catt .cattsel {
border:#ff6701 2px solid;
margin:-1px;
background:url("images/test.gif") no-repeat bottom right;
margin-left:4px;
margin-top:5px;
}
.catt .cattsel a:hover {
border:#ff6701 2px solid;
margin:-1px;
background:url("images/test.gif") no-repeat bottom right;
}
然后在页面内找到<script>,在其后面添加一个js函数
function changeAtt(t) {
t.lastChild.checked='checked';
for (var i = 0; i<t.parentNode.childNodes.length;i++) {
if (t.parentNode.childNodes[i].className == 'cattsel') {
t.parentNode.childNodes[i].className = '';
}
}
t.className = "cattsel";
changePrice();
}
最后如下图片另存为 test.gif 放入网站模板图片文件夹(images)里
预览效果：
来自 http://www.qifanweb.com/news/12/1902.html