关闭

仿淘宝购物车,js选择效果

标签: ajax购物车checkboxjs
1626人阅读 评论(0) 收藏 举报
分类:

先上界面图
跨境商品中不同的仓库,对应淘宝店中不同的店家。
先上界面图,这是仿照淘宝页面做的购物车

其实功能不复杂,关键是checkbox的单选,多选,全选,不同状态ajax返回值的处理,还包括后台的处理


代码块

购物车html

<!-- 宁波保税仓 -->
{if $goods_nb == 1}
<section class="procity">
    <div class="protitle"><input type="checkbox" class="check" name="nb" id="goods_nb" type="checkbox" onclick="checkall(this,'goods_nb');" /><b>宁波保税仓</b></div>
    <ul class="cityul">
    <!-- {foreach from=$goods_list item=goods} -->
    <!-- {if $goods.enter_mode eq 3105} -->
        <li>
            <input class="check pa" name="goods_nb"  id="goods_{$goods.goods_id}" type="checkbox" value="" onclick="check({$goods.rec_id},{$goods.goods_id},'goods_nb');" />
            <img class="img pa" src="./../{$goods.goods_thumb}" />
            <div class="grp">
                <div class="txt">
                    <p>{$goods.goods_name}</p>
                </div>
                <div class="ctrlbox">
                    <div class="numctrl fl">
                        <span class="minus fl" onClick="red_num({$goods.rec_id},{$goods.goods_id},'goods_nb');change_price({$goods.rec_id},{$goods.goods_id},'goods_nb');"></span>

                        <input type="text" id='goods_number_{$goods.rec_id}' name="number" value="{$goods.goods_number}" onblur="change_price({$goods.rec_id},{$goods.goods_id},'goods_nb')" class="text fl"/>

                        <span class="add fl" onClick="add_num({$goods.rec_id},{$goods.goods_id},'goods_nb');change_price({$goods.rec_id},{$goods.goods_id},'goods_nb');"></span>                   
                    </div>

                    <div class="price fl">¥ {$goods.goods_price_raw}</div>
                    <span class="del" onclick="if(confirm('确定要删除吗?'))window.location.href='cart.php?act=drop_goods&id={$goods.rec_id}';">删除</span>         
                </div>
            </div>
        </li>
    <!-- {/if} -->
    <!-- {/foreach} -->
    </ul>
</section>
{/if}

购物车js


// 所有checkbox状态非选中
$(document).ready(function(){ 
    var code_Values = document.getElementsByTagName("input");  
      for (i = 0; i < code_Values.length; i++) {  
          if (code_Values[i].type == "checkbox") {  
            code_Values[i].checked = false;  
          }  
      }
    document.getElementById('raw_price').innerHTML =  '';
    document.getElementById('tax_price').innerHTML = '';
})
function add_num(rec_id,goods_id,cName){
    document.getElementById("goods_number_"+rec_id+"").value++;
    document.getElementById("goods_"+goods_id+"").checked = true;
    var number = document.getElementById("goods_number_"+rec_id+"").value;

    var checkboxs = document.getElementsByName(cName); 
    var all_check = 1; 
    for ( var i = 0; i < checkboxs.length; i+=1) {  
        if(checkboxs[i].checked == false)
        {
            all_check = 0;
        }
    }  
    if(all_check == 1)
    {
        document.getElementById(cName).checked = true;
    }else{
        document.getElementById(cName).checked = false;
    }

    Ajax.call('cart.php?act=update_group_cart', 'rec_id=' + rec_id +'&number=' + number+'&goods_id=' + goods_id, changePriceResponse, 'GET', 'JSON');

}

function red_num(rec_id,goods_id,cName){
    document.getElementById("goods_"+goods_id+"").checked = true;
    var checkboxs = document.getElementsByName(cName); 
    var all_check = 1; 
    for ( var i = 0; i < checkboxs.length; i+=1) {  
        if(checkboxs[i].checked == false)
        {
            all_check = 0;
        }
    }  
    if(all_check == 1)
    {
        document.getElementById(cName).checked = true;
    }else{
        document.getElementById(cName).checked = false;
    }
    if (document.getElementById("goods_number_"+rec_id+"").value>1){
        document.getElementById("goods_number_"+rec_id+"").value--;
    }
    var number = document.getElementById("goods_number_"+rec_id+"").value;
    Ajax.call('cart.php', 'act=update_group_cart&rec_id=' + rec_id +'&number=' + number+'&goods_id=' + goods_id, changePriceResponse, 'GET', 'JSON');
}

function change_price(rec_id,goods_id,cName){
    var checkboxs = document.getElementsByName(cName); 
    var all_check = 1; 
    for ( var i = 0; i < checkboxs.length; i+=1) {  
        if(checkboxs[i].checked == false)
        {
            all_check = 0;
        }
    }  
    if(all_check == 1)
    {
        document.getElementById(cName).checked = true;
    }else{
        document.getElementById(cName).checked = false;
    }
    document.getElementById("goods_"+goods_id+"").checked = true;
    var number = document.getElementById("goods_number_"+rec_id+"").value;
    Ajax.call('cart.php','act=update_group_cart&rec_id=' + rec_id +'&number=' + number+'&goods_id=' + goods_id, changePriceResponse, 'GET', 'JSON');
}

function check(rec_id,goods_id,cName){

    var checkboxs = document.getElementsByName(cName); 

    // alert(checkboxs.length);

    var all_check = 1; 
    for ( var i = 0; i < checkboxs.length; i+=1) {  
        if(checkboxs[i].checked == false)
        {
            all_check = 0;
        }
    }  
    if(all_check == 1)
    {
        document.getElementById(cName).checked = true;
    }else{
        document.getElementById(cName).checked = false;
    }


    // document.getElementById("goods_number_"+rec_id+"").value++;
    var number = document.getElementById("goods_number_"+rec_id+"").value;
    // alert(number);
    // alert(rec_id);
    Ajax.call('cart.php?act=update_cart_check', 'rec_id=' + rec_id +'&number=' + number+'&goods_id=' + goods_id, changePriceResponse, 'GET', 'JSON');

}

function checkall(obj,cName){
    var state = obj.checked;
    // alert(state);
    var checkboxs = document.getElementsByName(cName);  
    if(state == true)
    {
        for ( var i = 0; i < checkboxs.length; i+=1) 
        {  
            if(checkboxs[i].checked == false)
            {
                checkboxs[i].onclick();
            }
        }
    }
    else if(state == false)
    {
        for ( var i = 0; i < checkboxs.length; i+=1) 
        {  
            checkboxs[i].onclick();
        }

    } 

    for ( var i = 0; i < checkboxs.length; i+=1) {  
        checkboxs[i].checked = state;  
    } 
    obj.checked = state;
}

function changePriceResponse(result){
    // alert(result.no_buy);
    // alert(result);

    document.getElementById("go_buy").disabled = false;
    document.getElementById('prompt').innerHTML = "";
    document.getElementById('raw_price').innerHTML =  "";
    document.getElementById('tax_price').innerHTML = "";
    if(result.count > 0)
    {
        document.getElementById("go_buy").className = "jsbtn";
    }else{
        document.getElementById("go_buy").className = "njsbtn";
        document.getElementById("go_buy").disabled = true;
        document.getElementById('prompt').innerHTML = "¥0.00元";
    }
    document.getElementById("go_buy").value = "结算(" + result.count + ")";

    if(result.tax_all > 50 && result.tax_more > 0 && result.no_buy != 1)
    {
        document.getElementById('prompt').innerHTML = "¥" + result.tax_all + "元(补税)";
        document.getElementById('raw_price').innerHTML =  "(" + result.goods_amount;
        document.getElementById('tax_price').innerHTML = "+" + result.tax_more + ")";

        var goods_all = result.goods_amount + result.tax_more;
        result.cart_amount_desc = "¥" + goods_all + "元";
    }else if((result.tax_all > 0 && result.tax_all <=50) || (result.tax_all > 50 && result.tax_more == 0))
    {
        document.getElementById('prompt').innerHTML = "¥" + result.tax_all + "元(免税)";
    }

    if(result.no_buy == 1){
        document.getElementById("go_buy").disabled = true;
        document.getElementById("go_buy").className = "njsbtn";
        document.getElementById('prompt').innerHTML = result.cart_amount_desc;     
        document.getElementById("cart_amount_desc").innerHTML = "";//'多件总价<1000';
    }else{    
        if(result.error == 1){
            alert(result.content);
            document.getElementById("goods_number_"+result.rec_id+"").value =result.number;
        }else{
            document.getElementById('cart_amount_desc').innerHTML = result.cart_amount_desc;//购物车商品总价说明
        }
    }

}


后台php处理

//购物车选中
elseif($act==’update_cart_check’){
include(‘includes/cls_json.php’);

// $result = array('error' => 0, 'message' => '', 'content' => '', 'goods_id' => '');
$json = new JSON;
$rec_id = isset($_REQUEST['rec_id']) ? intval($_REQUEST['rec_id']) : 0;
$number = isset($_REQUEST['number']) ? intval($_REQUEST['number']) : 0;
$goods_id = isset($_REQUEST['goods_id']) ? intval($_REQUEST['goods_id']) : 0;

$result = array('rec_id' => $rec_id, 'number' => 1);
$arr_return = check_goods_store($rec_id, $number);
if ($rec_id <= 0 || $number <= 0){
    $result['content'] = '参数错误';
    $result['error']  = 1;
}else if (!empty($arr_return['mes'])){
    $result['content'] = $arr_return['mes'];
    $result['error']  = 1;
    $result['number'] =$arr_return['number'];
}else{

    $sql = "SELECT is_check FROM " . $GLOBALS['ecs']->table('cart').
    " WHERE rec_id = '$rec_id'" ;
    $is_check = $GLOBALS['db']->getOne($sql);
    $is_check = ($is_check == 0) ? 1 : 0;
    $db->query("UPDATE " . $GLOBALS['ecs']->table('cart') . " set goods_number = '$number',is_check='$is_check' where rec_id ='$rec_id'");

    $cart_goods = get_cart_goods_check();      
    foreach($cart_goods['goods_list'] as $rec_goods)
    {
        if($rec_goods['rec_id'] == $rec_id)
        {
            $subtotal = $result['subtotal'] = $rec_goods['subtotal'];
            @$subtotal_exchange_integral = $rec_goods['subtotal_exchange_integral'];
        }

    }

    $subtotal = isset($subtotal) ? $subtotal : 0;
    //购物车的描述的格式化
    $result['subtotal'] = $subtotal;
    $result['subtotal_exchange_integral'] = empty($subtotal_exchange_integral) ? 0 : $subtotal_exchange_integral;
    $result['cart_amount_desc'] = $cart_goods['total']['goods_price'];
    $result['market_amount_desc'] = $cart_goods['total']['market_price'].$cart_goods['total']['saving'].$cart_goods['total']['save_rate'];



    $cart_goods = get_cart_goods();
    $cart_goods['total']['goods_price']  = price_format(0, false);
    $smarty->assign('goods_list', $cart_goods['goods_list']);
    $smarty->assign('total', $cart_goods['total']);
}

$cart_goods = get_cart_goods_check();
$usual = 0;
$border = 0;
$tax_all=0;
$tax_more=0;

foreach ($cart_goods['goods_list'] as $id => $value) {
    if($value['enter_mode'] == CUSTOMS_IMPORT)
    {
        $usual = 1;
    }
    if($value['enter_mode'] == CUSTOMS_STOCK_UP || $value['enter_mode'] == CUSTOMS_SHIPPING)
    {
        $border = 1;
    }
}
foreach ($cart_goods['goods_list'] as $key => $value) {
    $tax_all += $value['tax'] * $value['goods_number'];
    if($value['tax'] <= 50)
    {
        $tax_more += $value['tax'] * $value['goods_number'];
    }
}
/*跨境商品和普通商品不能一起购买*/
if($usual == 1 && $border == 1)
{
    $result['no_buy'] = 1;
    $result['cart_amount_desc'] = '跨境商品和普通商品不能一起购买';
}
//保健品类单件多件商品购买,价格不能超过1000
elseif($border == 1 && (count($cart_goods['goods_list']) > 1 || $cart_goods['goods_list'][0]['goods_number'] > 1 ) && $cart_goods['total']['goods_amount'] > 1000)
{
    $result['no_buy'] = 1;
    $result['cart_amount_desc'] = '多件跨境总价<1000';

}
/*多件商品税额计算,拆单or补税*/
elseif($tax_all > 50 && $border == 1 && (count($cart_goods['goods_list']) > 1 || $cart_goods['goods_list'][0]['goods_number'] > 1 ))
{
    $result['cart_amount_desc'] = "拆单or补税";
    $result['goods_amount'] = $cart_goods['total']['goods_amount'];
}

$result['tax_all'] = $tax_all;
$result['tax_more'] = $tax_more;
$result['count'] = count($cart_goods['goods_list']);


die($json->encode($result));
// die($json->encode($cart_goods));

}
“`

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:3427次
    • 积分:53
    • 等级:
    • 排名:千里之外
    • 原创:2篇
    • 转载:0篇
    • 译文:0篇
    • 评论:0条
    文章分类
    文章存档