ecshop仿淘宝加入购物车弹框效果,购买此宝贝的用户还购买了。

昨天接了一个活儿在ecshop上仿淘宝加入购物车弹框的功能,还要有购买过此宝贝的用户还购买了。感觉做这样仿淘宝加入购物车的弹框还不能麻烦,主要就是购买过此产品的用户还购买了。这个有点麻烦,因为ecshop本身没有记录购买的功能。所以我让它从数据库中随机取出4条数据,作为这个同类购买。

要求做一个仿淘宝那样的弹窗:

ecshop仿淘宝加入购物车弹窗框,购买此宝贝的用户还购买了。

ecshop仿淘宝加入购物车弹窗框,购买此宝贝的用户还购买了。

觉得不麻烦,接下来了。挺简单的,只要在加入购物车的回调函数里面增加一个弹出框,把弹出框的内容写成这样就ok了。

下面是我做的效果

ecshop仿淘宝加入购物车弹窗框,购买此宝贝的用户还购买了。

ecshop仿淘宝加入购物车弹窗框,购买此宝贝的用户还购买了。

先得让加入购物车以后,有一个弹出框,然后再从数据库里面把数据给取出来,再通加入购物车的回调函数把数据给显示到这个框里面就ok了。

下面是代码:

    先在js/common.js里面增加下面这段代码。

    function addMessage(html)
    {
        creatediv('','div','message_div','message_div flowBox flowBox1');
    	var obj = document.getElementById('addtocartbutton');
    	var newobj = document.getElementById('message_div');
    	newobj.innerHTML = html;
    	newobj.style.left    = (getbuttonLeft(obj) - 50) + "px";
        newobj.style.top     = (getbuttonTop(obj) - 200) + "px";
    }
    function creatediv(parent , element , id , css)
    {
        var newObj = document.createElement(element);
    
        if(id && id != "")
        {
            newObj.id = id;
        }
        if(css && css != "")
        {
            newObj.className = css;
        }
        if(parent && parent!="")
        {
            var theObj = getobj(parent);
            var parent = theObj.parentNode;
            if(parent.lastChild == theObj)
            {
                theObj.appendChild(newObj);
            }
            else
            {
                theObj.insertBefore(newObj, theObj.nextSibling);
            }
        }
        else
        {
            document.body.appendChild(newObj);
        }
    }
    function getbuttonLeft(obj)
    {
        var s_el = 0;
        var el   = obj;
        while(el)
        {
            s_el = s_el + el.offsetLeft;
            el   = el.offsetParent;
        }
        return s_el;
    }
    
    function getbuttonTop(obj)
    
        var s_el = 0;
        var el   = obj;
        while(el)
        {
            s_el = s_el + el.offsetTop;
            el   = el.offsetParent;
        }
        return s_el;
    }
    
    function close_message_div()
    {
        var obj = document.getElementById('message_div');
    	document.body.removeChild(obj);
    }

    修改js/conmmon.js大概110行的switch,把swtich这一块的代码给删掉。改为addMessage(result.html);

          //这一块swtich的注释调或者删掉
    	  switch(result.confirm_type)
          {
               ……………………
          }
          //修改为
          addMessage(result.html);

    在flow.php底部增加下面这段代码。用来取得购物车信息和商品信息,这些商品用来作为“购买过此宝贝的用户还购买了”的商品,是从所有商品中随机出去4件商品。

    >function get_cart_show_goods(){
        $sql = "SELECT COUNT(goods_id) FROM " . $GLOBALS['ecs']->table('goods');
        $max_id = $GLOBALS['db']->getOne($sql);
        //$sql = "SELECT g.goods_id,g.goods_name,g.goods_thumb,g.shop_price,count(og.order_id) AS amount FROM ".$GLOBALS['ecs']->table('goods') . "AS g,".$GLOBALS['ecs']->table('order_goods')." AS og WHERE g.goods_id = og.goods_id  ORDER BY g.goods_id LIMIT ".rand(1,$max_id - 5).", 4";
        $sql = "SELECT goods_id,goods_name,goods_thumb,shop_price FROM".$GLOBALS['ecs']->table('goods') . "ORDER BY goods_id LIMIT ".rand(1,$max_id - 5).", 4";
    	$show_goods = $GLOBALS['db']->getAll($sql);
    
    	$sql = 'SELECT SUM(goods_number) AS number, SUM(goods_price * goods_number) AS amount' .
               ' FROM ' . $GLOBALS['ecs']->table('cart') .
               " WHERE session_id = '" . SESS_ID . "' AND rec_type = '" . CART_GENERAL_GOODS . "'";
        $cart_info = $GLOBALS['db']->GetRow($sql);
    	$goods_html = ""; 
    	$goods_html .= "<span class="close"><a href="javascript:close_message_div()">关闭</a></span>"; $goods_html .= "
    <div class='ok'></div>
    <h4>宝贝已成功添加到购物车!</h4>
    "; $goods_html .= " 购物车共有<strong>".$cart_info['number']."</strong>件宝贝,合计:<strong class="price">".$cart_info['amount']."</strong>元 "; $goods_html .= "<a title="去购物车结算" href="flow.php?act=cart"><img style="margin: 10px 50px;" src="./themes/quwan/images/gocart.gif" alt="" /></a>"; $goods_html .= "<a title="再逛逛" href="javascript:close_message_div()"><img style="margin: 10px 20px;" src="./themes/quwan/images/zgg.gif" alt="" /></a>"; $goods_html .="[/PHP]
    <div class="othersbuy">购买过此产品的用户还购买了:</div>
    [PHP]"; foreach($show_goods as $row) { $goods_html .= "[/PHP]
    <div class="goodsItem">"; $goods_html .= '<a href="goods.php?id=203">'; $goods_html .= '<img class="goodsimg" src="'.$row['goods_thumb'].'" alt="" /></a>'; $goods_html .= '
    <p class="name"><a title="'.$row['goods_name'].'" href="goods.php?id=203">"'.$row['goods_name'].'"</a></p>
    '; $goods_html .= '
    <p class="price">'; $goods_html .= '<span class="shop">售价:¥'.$row['shop_price'].'</span></p>
    '; $goods_html .= "
    
    </div>
    "; } return $goods_html; }

    在flow.php大概333行增加下面这段代码。返回输出的html

    	$result['html'] = get_cart_show_goods();

    在themes/default/style.css里面增加以下代码以控制显示样式

    .message_div  h4{height:30px;padding-top:10px;padding-left:70px;}
    .message_div  .goodsItem {width:100px;height:150px;padding:15px 10px;border:1px solid #CCCCCC;margin:2px 2px;}
    .message_div  .goodsItem .name {height:38px;line-height:19px;display:block; overflow:hidden}
    .message_div  .goodsItem .name a{ color:#666}
    .message_div  .goodsItem .name a:hover{ color:#c90809; text-decoration:underline}
    .message_div  .goodsItem .price {font-size:12px;color:#999;line-height:25px;}
    .message_div  .goodsItem .price font {font-size:12px;}
    .message_div  .goodsItem .goodsimg {width:100px;height:100px;margin-bottom:4px;}
    .message_div  .goodsItem p {color:#666;font-size:12px;}
    .message_div  .goodsItem span.hot {background:url(images/bg.gif) no-repeat -161px -304px;}
    .message_div .ok{width:50px;height:50px;float:left;background:url('./images/addtocartinfo.png') -127px 0px; ;}
    .message_div strong{font-size:14px;font-weight:bold;color:#C60C0D;padding:0px 5px;}
    .message_div .close{float:right;margin-right:20px;}
    .message_div .othersbuy{clear:both;height:20px;padding:2px 20px;border-top:#CCCCCC 1px dashed;}

    在themes/default/goods.dwt里面大概385行代码修改为

    <a href="javascript:addToCart({$goods.goods_id})"> <img id="addtocartbutton" style="vertical-align: middle;" src="images/bnt_cat.gif" alt="" /> </a>

因为模板函数不一样,所以代码行数也会不一样。要做这个功能的的看情况改吧。

如果有需要代为安装或定制其他功能的,可以到这儿来。收费,混口饭吃。

打包下载http://pan.baidu.com/s/1kTp619P

 

 

由于这篇文章垃圾评论太多,已关闭评论功能。您可以在其他页面留言。

» 标签: , , ,
  1. 12/08/16

    博客加油!支持

  2. 12/08/22

    路过,希望博客也回访

  3. ecshop
    12/10/11

    为什么都不能用