Ecshop模板开发（四）：商品详情页的显示配置

1、本店售价+市场价格

{$goods.shop_price} <del>{$good.market_price}</del>

2、促销价格

<!--{if $goods.is_promote and $goods.gmt_end_time } 促销-->
{insert_scripts files='lefttime.js'}
<li class="padd loop" style="margin-bottom:5px; border-bottom:1px dashed #ccc;">
<strong>{$lang.promote_price}</strong><font class="shop">{$goods.promote_price}</font><br />
<strong>{$lang.residual_time}</strong>
<font class="f4" id="leftTime">{$lang.please_waiting}</font><br />
</li>
<!--{/if}-->
<script>
var gmt_end_time = {$goods.gmt_end_time};
var hour="时";
var day="天";
var minute="分";
var second="秒";
onload_leftTime();
</script>

4、不同用户类型显示不同价格

{foreach from=$rank_prices key=key item=abc}
<p>
{$abc.rank_name}   {$abc.price}<br>
</p>
{/foreach}

5、商品点击数

{$goods.click_count}

6、人气和评分

<img src="images/stars{$goods.comment_rank}.gif" alt="">
   
<span style="color: red">{$goods.comment_rank} 分</span>

7、商品属性

层级关系如下：

单选—-radio、select

多选—-checkbox

{foreach from=$specification item=spec key=key}
<div class="clearfix"></div>
<p>{$spec.name}</p>
{if $spec.attr_type eq 1}
{if $cfg.goodsattr_style eq 1}
{foreach from=$spec.values key=key_attr item=value}
<div class="attr_radio">
<label for="" title="{if $value.price gt 0}加{else /}减{/if}{$value.format_price}">{$value.label}</label>
</div>
{/foreach}

{else /}
<select name="" id="">
{foreach from=$spec.values key=key_attr item=value}
<div class="attr_select">
<option value="">{$value.label}--{if $value.price gt 0}加{else /}减{/if}{$value.format_price}</option>
</div>
{/foreach}
</select>

{/if}
{else /}

{foreach from=$spec.values key=key_attr item=value}
<div class="attr_checkbox">

<label for="" title="{if $value.price gt 0}加{else /}减{/if}{$value.format_price}"><input
type="checkbox">{$value.label}</label>
</div>
{/foreach}
{/if}
<br>
{/foreach}

7、商品属性的改变引起价格动态变化

html

<div class="attr-form">
{foreach from=$specification item=spec key=key}
<div class="clearfix"></div>
<p>{$spec.name}</p>
{if $spec.attr_type eq 1}
{if $cfg.goodsattr_style eq 1}
<div class="attr-radio-area">
{foreach from=$spec.values key=key_attr item=value}
<div class="attr_radio {if $key_attr eq 0}attr_radio_checked{/if}">
<label for="" title="{if $value.price gt 0}加{else /}减{/if}{$value.format_price}">{$value.label}
<input  value="{$value.id}"  type="radio" {if $key_attr eq 0}checked{/if} class="hn-hide"></label>
</div>
{/foreach}
</div>
{else /}
{*<select name="" id="">
{foreach from=$spec.values key=key_attr item=value}
<div class="attr_select">
&
10d93
lt;option value="">{$value.label}--{if $value.price gt 0}加{else /}减{/if}{$value.format_price}</option>
</div>
{/foreach}
</select>*}

{/if}
{else /}

{foreach from=$spec.values key=key_attr item=value}
<div class="attr_radio  {if $key_attr eq 0}attr_radio_checked{/if}">

<label for="" title="{if $value.price gt 0}加{else /}减{/if}{$value.format_price}"><input
value="{$value.id}" type="checkbox" class="hn-hide" {if $key_attr eq 0}checked{/if} >{$value.label}</label>
</div>
{/foreach}
{/if}
<br>
{/foreach}
</div>

js

<script>
var goodsid={$goods.goods_id};//获取商品id

//点击属性label时执行的函数
$('.attr_radio label').click(function () {

if($(this).children('input').attr('type')=='radio'){
$(this).parents('.attr-radio-area').children('.attr_radio').removeClass('attr_radio_checked');
$(this).parents('.attr-radio-area').find(':input').attr('checked',false);
}

if($(this).children('input').attr('type')=='checkbox' && $(this).parent().is('.attr_radio_checked')) {

$(this).parent().removeClass('attr_radio_checked');
$(this).children('input').attr('checked', false);
changePrice();
return false;
}
$(this).children('input').attr('checked',true);
$(this).parent().addClass('attr_radio_checked');
changePrice();
return false;
});

//获得商品属性选定的值并转化为字符串
function getAttrValue() {

var attr_arr=[];
$('.attr-form :input:checked').each(function () {
attr_arr.push($(this).val());
});
return attr_arr.join(',');
}

//商品数量input框失去焦点时候
$('#buy_num').blur(function () {
changePrice();
});

//发送ajax请求
function changePrice() {
$.get('goods.php',{"act":"price","id":goodsid,"attr":getAttrValue(),"number":$('#buy_num').val()},execTotalPrice,'json');

}

//接收ajax返回值并处理
function execTotalPrice(data) {
if(data.err_msg.length>0){
alert(data.err_msg);
}else{

$('#buy_num').val(data.qty);
$('#total_price').html(data.result)

}

}

</script>