A-A+

Ecshop单品页面仿淘宝(实现显示价格区间和商品规格属性方形框)

2011年06月28日 Ecshop 评论 1 条

 

首先请看效果截图:

功能一:

对有商品属性且属性有附加价格的商品显示为价格区间

代码修改:

1.在 includes/lib_goods.php 文件中找到function get_goods_info($goods_id)

在此函数中找到代码:

/* 获得商品的销售价格 */

        $row['market_price']        = price_format($row['market_price']);

        $row['shop_price_formated'] = price_format($row['shop_price']);

然后在此代码下面加上如下一段代码即可实现:

/* 获得有规格属性的商品的销售价格范围 */

$sql = "SELECT SUM(max_attr_price) AS max_price FROM (SELECT MAX(attr_price+0) AS max_attr_price FROM " . $GLOBALS['ecs']->table('goods_attr') .

                    " WHERE goods_id = '".$goods_id."' GROUP BY attr_id) AS a";

$max_price = $GLOBALS['db']->getOne($sql);

if(intval($max_price) > 0)

{

$goods_max_price = intval($max_price) + intval($row['shop_price']);

$row['shop_price_formated'] = "¥".number_format($row['shop_price'], 2)." - ".number_format($goods_max_price, 2)."元";

}

功能二:

商品的单选属性仿淘宝的方形框样式

1.增加方形框样式代码

在 goods.dwt 文件中找到<!-- {* 开始循环所有可选属性 *} -->

在其上一行加入如下样式代码:

      <style type="text/css">

        /*--------------单品页面商品属性颜色选择器CSS添加-------------*/

        .catt{width:100%;height:auto;overflow:hidden;padding-bottom:5px;}

        .catt a{border: #c8c9cd 1px solid;  text-align: center; background-color: #fff; margin-left:5px; margin-top:6px; padding:0px 6px; 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("themes/newlanzone/images/select_signed.gif") no-repeat bottom right; margin-left:4px;margin-top:5px;}

        .catt .cattsel a:hover {border: #FF6701 2px solid;margin:-1px;background: url("themes/newlanzone/images/select_signed.gif") no-repeat bottom right;}

      </style>

2.替换原来的单选显示模板

在 goods.dwt 文件中找到<!-- {if $cfg.goodsattr_style eq 1} -->

<!-- {if $cfg.goodsattr_style eq 1} --> 到 <!-- {else} --> 的代码替换为如下代码:

                        <!-- {if $cfg.goodsattr_style eq 1} -->

                       <div class="catt">

                        <!-- {foreach from=$spec.values item=value key=key} -->

&nbsp;<a {if $key eq 0}class="cattsel"{/if} onclick="changeAtt(this)" href="javascript:calcTotalPrice();" name="{$value.id}">{$value.label}{if $value.price} ({if $value.price gt 0}{$lang.plus}{elseif $value.price lt 0}{$lang.minus}{/if}{$value.price|abs}元){/if}<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>

<input type="hidden" name="spec_price_{$spec_key}_{$value.id}" value="{$value.price}">

                        <!-- {/foreach} -->

                        <input type="hidden" name="spec_list" value="{$key}" />

                        </div>

                      <!-- {else} -->

3.增加JS脚本实现选中功能

在 goods.dwt 文件中找到function changePrice()

在这个函数的上面增加一个如下函数:

/**

 * 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();

}

 

OK完成,请后台清除缓存,刷新页面,即可看到效果了

最后提供一个需要用的图片素材吧!请直接右击另存为:

  

1 条留言  访客:1 条  博主:0 条

  1. simon

    你好,请问有兴趣做 ECSHOP 的二次开发吗?

    谢谢!

    Simon

给我留言

Copyright © 破晓Web实验室 保留所有权利.   Theme  Ality 沪ICP备14044094号

用户登录