静态商品专题页面+动态显示价格及库存信息

前两天工作中需要做一个商品的专题页面，需求：当商品下架或库存为0时提示'商品已售罄'，没有此商品时提示'商品不存在'，正常情况下显示商品价格[登陆后若是会员则显示会员价]

效果图：

 

html页面代码：

//因商品及价格摆放不规则故采用map标签

        <ul class="list">
            <li>
                <img src="themes/mall/default/images/event/star/baileng1.jpg" usemap="#text1" target="_blank" alt="白领气质范"/>
                <map name="text1" id="text1">   
                    <area shape="rect" coords="36,20,165,263" href ="http://www.maynear.com/index.php?app=goods&id=8745" target="_blank" />
                    <area shape="rect" coords="208,83,309,205" href ="http://www.maynear.com/index.php?app=goods&id=8746" target="_blank" />
                    
                    <area shape="rect" coords="380,30,536,185" href ="http://www.maynear.com/index.php?app=goods&id=8747" target="_blank" />
                    <area shape="rect" coords="446,192,558,412" href ="http://www.maynear.com/index.php?app=goods&id=8748" target="_blank" />
                    
                    <area shape="rect" coords="722,34,872,175" href ="http://www.maynear.com/index.php?app=goods&id=8749" target="_blank" />
                    <area shape="rect" coords="835,180,905,415" href ="http://www.maynear.com/index.php?app=goods&id=8750" target="_blank"/>                
                </map>
                <span class="bl blsp1" goods_id="8745">loading...</span>
                <span class="bl blsp2" goods_id="8746">loading...</span>
                <span class="bl blsp3" goods_id="8747">loading...</span>
                <span class="bl blsp4" goods_id="8748">loading...</span>
                <span class="bl blsp5" goods_id="8749">loading...</span>
                <span class="bl blsp6" goods_id="8750">loading...</span>         
            </li>                                             
        </ul>

 

php方法：getGoodsInfoByIDs()根据商品ID获取商品详细信息并以json格式返回，若传过去的商品ID不存在则不会返回此ID相关的信息

    //根据ID列表获得商品信息
    public function getGoodsInfoByIDs() {
        $ids = $_POST[ 'ids' ];
        if( $ids )
        {
            $sql = "SELECT goods_id, retail_price, wholesale_price
                    ,(select sum( stock ) from shang_goods_spec as b where a.goods_id = b.goods_id ) as stock
                    ,if_show
                    FROM shang_goods as a
                    WHERE goods_id IN ( $ids ) AND closed = 0 AND sale_type > 0";
            $data = $this->getAll( $sql );
            echo json_encode( $data );
        }        
    }

 

JS：

<script type="text/javascript">
//获取专题页面中所有商品ID[获取span元素的goods_id属性值]
function getGoodsIDs() {
    var ids = [];
    $( 'span[goods_id]' ).each( function() {
        ids.push( $( this ).attr( 'goods_id' ) );
    } );
    return ids;
}

//根据goodsID返回对应的span标签
function getPriceSpan( goodsID ) {
    return $( 'span[goods_id="'+ goodsID +'"]' );  //返回属性goods_id是某个特定值的span元素
}

/**
 * @superSet　所有参加活动的goodsID　[既AJAX请求所传递参数]
 * @subSet  　AJAX请求响应的goodsID
 * @返回数组：不存在的goodsID
 */
function searchNotExistsID( superSet, subSet ) {
    var hash = {};
    for( var i = 0; i < superSet.length; i++ ) {
        hash[ superSet[ i ] ] = 'exists';
    }
    for( var i = 0; i < subSet.length; i++ ) {
        if( hash[ subSet[ i ] ] ) {
            delete hash[ subSet[ i ] ];　　//若存在则删除对象元素
        }
    }
    var result = [];
    for( var key in hash ) {
        result.push( key );
    }
    return result;
}

 

seajs.use( 'common', function( common ) {
    var islogin = common.islogin();　//是否登陆
    var ids = getGoodsIDs();   　　 //所有goodsID
    var ajaxOption = new Object;
    ajaxOption.url = 'index.php?app=goods&act=getGoodsInfoByIDs';
    ajaxOption.dataType = 'JSON';
    ajaxOption.type = 'POST';
    ajaxOption.data = { ids: ids.join( ',' ) }　　　//以,隔开的字符串
    ajaxOption.success = function( response ) {
        var subSet = [];
        for( var i = 0; i < response.length; i++ ) {
            subSet.push( response[ i ].goods_id ); 　//subSet AJAX返回的goodsID[一维数组]
            
            var item = response[ i ];
            var spanEl = getPriceSpan( item.goods_id );　//根据goodsID返回对应的span元素
            if( item.stock > 0 && item.if_show == 1) {
                if( islogin ) {
                    spanEl.html( '￥' + item.wholesale_price );　//若登陆则显示会员价
                } else {
                    spanEl.html( '￥' + item.retail_price );
                }
            } else {
                spanEl.html( '商品已售罄' );
            }
        }


        //处理未找到的商品
        var notFound = searchNotExistsID( ids, subSet );
        for( var i = 0; i < notFound.length; i++ ) {
            getPriceSpan( notFound[ i ] ).html( '商品不存在' );
        }


    }　//success function end


    $.ajax( ajaxOption );    
} );


</script>