반응형

장바구니에 등록된 제품을 삭제하는 작업을 해보자. 삭제 버튼을 누르면 화면에서 제품을 빼고 cart테이블에서 해당 제품을 삭제하면 된다. 그리고 전체 가격도 수정해주어야 한다. 소스를 보자.

 

/cart.php

<?php ob_start();
include $_SERVER["DOCUMENT_ROOT"]."/inc/top.php";

if($_SESSION['UID']){
    $user_where = " and c.userid='".$_SESSION['UID']."'";
}else{
    $user_where = " and c.ssid='".session_id()."'";
}


$query = "select *, p.pid, c.cnt
                    from cart c
                    join products p on c.pid=p.pid where 1=1 ".$user_where;
$result = $mysqli->query($query) or die("query error => ".$mysqli->error);
while($rs = $result->fetch_object()){
    $rsc[]=$rs;
}

?>
    <div class="product-big-title-area">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="product-bit-title text-center">
                        <h2>Shopping Cart</h2>
                    </div>
                </div>
            </div>
        </div>
    </div> <!-- End Page title area -->
   
   
    <div class="single-product-area">
        <div class="zigzag-bottom"></div>
        <div class="container">
            <div class="row">
                <div class="col-md-4">
                    <div class="single-sidebar">
                        <h2 class="sidebar-title">Search Products</h2>
                        <form action="#">
                            <input type="text" placeholder="Search products...">
                            <input type="submit" value="Search">
                        </form>
                    </div>
                   
                    <div class="single-sidebar">
                        <h2 class="sidebar-title">Products</h2>
                        <div class="thubmnail-recent">
                            <img src="img/product-thumb-1.jpg" class="recent-thumb" alt="">
                            <h2><a href="single-product.html">Sony Smart TV - 2015</a></h2>
                            <div class="product-sidebar-price">
                                <ins>$700.00</ins> <del>$800.00</del>
                            </div>                            
                        </div>
                        <div class="thubmnail-recent">
                            <img src="img/product-thumb-1.jpg" class="recent-thumb" alt="">
                            <h2><a href="single-product.html">Sony Smart TV - 2015</a></h2>
                            <div class="product-sidebar-price">
                                <ins>$700.00</ins> <del>$800.00</del>
                            </div>                            
                        </div>
                        <div class="thubmnail-recent">
                            <img src="img/product-thumb-1.jpg" class="recent-thumb" alt="">
                            <h2><a href="single-product.html">Sony Smart TV - 2015</a></h2>
                            <div class="product-sidebar-price">
                                <ins>$700.00</ins> <del>$800.00</del>
                            </div>                            
                        </div>
                        <div class="thubmnail-recent">
                            <img src="img/product-thumb-1.jpg" class="recent-thumb" alt="">
                            <h2><a href="single-product.html">Sony Smart TV - 2015</a></h2>
                            <div class="product-sidebar-price">
                                <ins>$700.00</ins> <del>$800.00</del>
                            </div>                            
                        </div>
                    </div>
                   
                    <div class="single-sidebar">
                        <h2 class="sidebar-title">Recent Posts</h2>
                        <ul>
                            <li><a href="#">Sony Smart TV - 2015</a></li>
                            <li><a href="#">Sony Smart TV - 2015</a></li>
                            <li><a href="#">Sony Smart TV - 2015</a></li>
                            <li><a href="#">Sony Smart TV - 2015</a></li>
                            <li><a href="#">Sony Smart TV - 2015</a></li>
                        </ul>
                    </div>
                </div>
               
                <div class="col-md-8">
                    <div class="product-content-right">
                        <div class="woocommerce">
                            <form method="post" action="#">
                                <table cellspacing="0" class="shop_table cart">
                                    <thead>
                                        <tr>
                                            <th class="product-remove">&nbsp;</th>
                                            <th class="product-thumbnail">&nbsp;</th>
                                            <th class="product-name">Product</th>
                                            <th class="product-price">Price</th>
                                            <th class="product-quantity">Quantity</th>
                                            <th class="product-subtotal">Total</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <!-- 제품 리스트 -->
                                        <?php
                                            $cart_total=0;
                                            foreach($rsc as $p){
                                        ?>
                                        <tr class="cart_item" id="cart_<?php echo $p->cartid;?>">
                                            <td class="product-remove">
                                                <a title="Remove this item" class="remove" id="<?php echo $p->cartid;?>" href="#">×</a>
                                            </td>

                                            <td class="product-thumbnail">
                                                <a href="/products.php?pid=<?php echo $p->pid;?>"><img width="145" height="145" alt="poster_1_up" class="shop_thumbnail" src="<?php echo $p->thumbnail;?>"></a>
                                            </td>

                                            <td class="product-name">
                                                <a href="/products.php?pid=<?php echo $p->pid;?>"><?php echo $p->name;?></a>
                                            </td>

                                            <td class="product-price">
                                                <span class="amount"><?php echo number_format($p->sale_price);?></span>
                                            </td>

                                            <td class="product-quantity">
                                                <div class="quantity buttons_added">
                                                    <input type="button" class="minus" id="<?php echo $p->cartid;?>" value="-">
                                                    <input type="number" id="qty_<?php echo $p->cartid;?>" size="4" class="input-text qty text" title="Qty" value="<?php echo $p->cnt;?>" min="0" step="1">
                                                    <input type="button" class="plus" id="<?php echo $p->cartid;?>" value="+">
                                                </div>
                                            </td>
                                            <input type="hidden" name="price" id="price_<?php echo $p->cartid;?>" value="<?php echo $p->sale_price;?>">
                                            <td class="product-subtotal">
                                                <span class="amount" id="amount_<?php echo $p->cartid;?>"><?php echo number_format($p->sale_price*$p->cnt);?></span>
                                            </td>
                                        </tr>
                                        <?php
                                            $cart_total = $cart_total + ($p->sale_price*$p->cnt);
                                    }?>

                                    </tbody>
                                </table>
                            </form>

                            <div class="cart-collaterals">
                            <div class="cart_totals" style="width:100%;">
                                <h2>Cart Totals</h2>
                                <input type="hidden" name="cart_total" id="cart_total" value="<?php echo $cart_total;?>">
                                <table cellspacing="0">
                                    <tbody>
                                        <tr class="cart-subtotal">
                                            <th style="width:200px;">구매 합계</th>
                                            <td><span class="amount" id="amount"><?php echo number_format($cart_total);?></span></td>
                                        </tr>
<?php
    if($_SESSION['UID']){
        $mymileage = my_mileage($_SESSION['UID']);
?>
                                        <!-- <tr class="shipping">
                                            <th style="width:200px;">쿠폰 선택</th>
                                            <td>준비중...</td>
                                        </tr> -->
                                        <tr class="order-total">
                                            <th style="width:200px;">마일리지</th>
                                            <td><input type="number" name="use_mileage" id="use_mileage" value="0" style="text-align:right;">원 [사용 가능 마일리지 : <?php echo number_format($mymileage);?>원]</td>
                                        </tr>
<?php
}
$order_total = $cart_total - $use_mileage;
?>
                                        <tr class="order-total">
                                            <th style="width:200px;">주문 합계</th>
                                            <td><strong><span class="amount" id="total_amount"><?php echo number_format($order_total);?></span></strong> </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>

                            <input type="submit" value="주문하기" name="proceed" class="button">

                            </div>
                        </div>                        
                    </div>                    
                </div>
            </div>
        </div>
    </div>


    <div class="footer-top-area">
        <div class="zigzag-bottom"></div>
        <div class="container">
            <div class="row">
                <div class="col-md-3 col-sm-6">
                    <div class="footer-about-us">
                        <h2>e<span>Electronics</span></h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis sunt id doloribus vero quam laborum quas alias dolores blanditiis iusto consequatur, modi aliquid eveniet eligendi iure eaque ipsam iste, pariatur omnis sint! Suscipit, debitis, quisquam. Laborum commodi veritatis magni at?</p>
                        <div class="footer-social">
                            <a href="#" target="_blank"><i class="fa fa-facebook"></i></a>
                            <a href="#" target="_blank"><i class="fa fa-twitter"></i></a>
                            <a href="#" target="_blank"><i class="fa fa-youtube"></i></a>
                            <a href="#" target="_blank"><i class="fa fa-linkedin"></i></a>
                            <a href="#" target="_blank"><i class="fa fa-pinterest"></i></a>
                        </div>
                    </div>
                </div>
               
                <div class="col-md-3 col-sm-6">
                    <div class="footer-menu">
                        <h2 class="footer-wid-title">User Navigation </h2>
                        <ul>
                            <li><a href="#">My account</a></li>
                            <li><a href="#">Order history</a></li>
                            <li><a href="#">Wishlist</a></li>
                            <li><a href="#">Vendor contact</a></li>
                            <li><a href="#">Front page</a></li>
                        </ul>                        
                    </div>
                </div>
               
                <div class="col-md-3 col-sm-6">
                    <div class="footer-menu">
                        <h2 class="footer-wid-title">Categories</h2>
                        <ul>
                            <li><a href="#">Mobile Phone</a></li>
                            <li><a href="#">Home accesseries</a></li>
                            <li><a href="#">LED TV</a></li>
                            <li><a href="#">Computer</a></li>
                            <li><a href="#">Gadets</a></li>
                        </ul>                        
                    </div>
                </div>
               
                <div class="col-md-3 col-sm-6">
                    <div class="footer-newsletter">
                        <h2 class="footer-wid-title">Newsletter</h2>
                        <p>Sign up to our newsletter and get exclusive deals you wont find anywhere else straight to your inbox!</p>
                        <div class="newsletter-form">
                            <form action="#">
                                <input type="email" placeholder="Type your email">
                                <input type="submit" value="Subscribe">
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div> <!-- End footer top area -->
   
    <div class="footer-bottom-area">
        <div class="container">
            <div class="row">
                <div class="col-md-8">
                    <div class="copyright">
                        <p>&copy; 2015 eElectronics. All Rights Reserved. Coded with <i class="fa fa-heart"></i> by <a href="http://wpexpand.com" target="_blank">WP Expand</a></p>
                    </div>
                </div>
               
                <div class="col-md-4">
                    <div class="footer-card-icon">
                        <i class="fa fa-cc-discover"></i>
                        <i class="fa fa-cc-mastercard"></i>
                        <i class="fa fa-cc-paypal"></i>
                        <i class="fa fa-cc-visa"></i>
                    </div>
                </div>
            </div>
        </div>
    </div> <!-- End footer bottom area -->
<script>
    $('.remove').click(function(){
        var cid = $(this).attr("id");//cart 테이블 고유번호 cartid
        var qty = parseInt($("#qty_"+cid).val());//plus이므로 기존 값 가져와서 1을 더해줌
        var price = parseInt($("#price_"+cid).val());//제품마다 가격이 다르므로 가격 가져옴.
        var amount = parseInt($("#amount").text().replace(/,/gi, ""));//구매합계.
        var total_amount = parseInt($("#total_amount").text().replace(/,/gi, ""));//주문합계.

        if(!confirm('해당 상품을 삭제하시겠습니까?')){
            return false;
        }
       
        var data = {
            cid : cid
        };
            $.ajax({
                async : false,
                type : 'post' ,
                url : 'cart_del.php' ,
                data  : data ,
                dataType : 'json' ,//json으로 받음.
                error : function() {} ,
                success : function(return_data) {
                    if(return_data.result==true){
                        $("#cart_"+cid).remove();//해당 제품의 테이블의 tr값을 지운다.
                        $("#amount").text(number_format(amount-(price*qty)));//구매합계수정
                        $("#total_amount").text(number_format(total_amount-(price*qty)));//주문합계수정
                        $("#cart_total").val(total_amount-(price*qty));
                    }else{
                        alert('다시 시도해주십시오.');
                        return;
                    }
                }
        });
       
    });

    $('.plus').click(function(){
        var cid = $(this).attr("id");//cart 테이블 고유번호 cartid
        var qty = parseInt($("#qty_"+cid).val())+1;//plus이므로 기존 값 가져와서 1을 더해줌
        var price = parseInt($("#price_"+cid).val());//제품마다 가격이 다르므로 가격 가져옴.
        var amount = parseInt($("#amount").text().replace(/,/gi, ""));//구매합계.
        var total_amount = parseInt($("#total_amount").text().replace(/,/gi, ""));//주문합계.

        var data = {
            cid : cid,
            qty : qty,
            price : price
        };
            $.ajax({
                async : false,
                type : 'post' ,
                url : 'cart_edit.php' ,
                data  : data ,
                dataType : 'json' ,//json으로 받음.
                error : function() {} ,
                success : function(return_data) {
                    $("#amount_"+cid).text(number_format(return_data.amount)+"원");
                    $("#qty_"+cid).val(return_data.qty);
                    $("#amount").text(number_format(parseInt(return_data.price)+amount));//구매합계수정
                    $("#total_amount").text(number_format(parseInt(return_data.price)+total_amount));//주문합계수정
                    $("#cart_total").val(parseInt(return_data.price)+total_amount);
                }
        });
       
    });

    $("#use_mileage").keyup(function() {
        var use_mileage = $("#use_mileage").val();
        var cart_total = $("#cart_total").val();
        var my_mileage = <?php echo $mymileage??0;?>;
        if(use_mileage>my_mileage){
            alert('사용가능한 마일리지를 초과하였습니다.');
            $("#use_mileage").val(0)
            $("#total_amount").text(number_format(cart_total));
            return false;
        }
        var ta = parseInt(cart_total) - parseInt(use_mileage);
        $("#total_amount").text(number_format(ta));
    });

    function number_format(num){
        return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g,',');
    }
</script>
<?php
include $_SERVER["DOCUMENT_ROOT"]."/inc/bot.php";
?>    

기존 소스에 삭제하는 소스를 추가했으며 기존에 있던 제품 주문 수량을 변경시의 소스도 조금 수정했다.

 

장바구니 디비에서도 삭제해야 하므로 ajax를 이용한다. ajax용 파일을 만들어보자.

 

/cart_del.php

<?php session_start();
include $_SERVER["DOCUMENT_ROOT"]."/inc/dbcon.php";
ini_set( 'display_errors', '0' );

$cid = $_POST['cid'];

$sql="delete from cart where cartid=".$cid;//테이블에 업데이트 해줌.
$result=$mysqli->query($sql) or die($mysqli->error);

if($result){
    $data = array("result"=>true);
}else{
    $data = array("result"=>false);
}
echo json_encode($data);

?>
       

이런식으로 만들어주면 된다. 

 

/cart_edit.php

<?php session_start();
include $_SERVER["DOCUMENT_ROOT"]."/inc/dbcon.php";
ini_set( 'display_errors', '0' );

$cid = $_POST['cid'];
$qty = $_POST['qty'];
$price = $_POST['price'];
$amount = $price * $qty;//합계

$sql="update cart set cnt=".$qty." where cartid=".$cid;//테이블에 업데이트 해줌.
$result=$mysqli->query($sql) or die($mysqli->error);

$data = array("qty"=>$qty,"amount"=>$amount,"price"=>$price);
echo json_encode($data);

?>
       

기존에 사용했던 cart_edit.php를 조금 수정했다.

반응형

+ Recent posts