반응형
지나번에 장바구니 페이지를 만들어 봤는데 빠진 부분이 수량을 변경하는 부분이었다. 그걸 해보자.
cart.php를 아래와 같이 수정한다.
/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"> </th>
<th class="product-thumbnail"> </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
foreach($rsc as $p){
?>
<tr class="cart_item">
<td class="product-remove">
<a title="Remove this item" class="remove" 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 }?>
<tr>
<td class="actions" colspan="6">
<input type="submit" value="Update Cart" name="update_cart" class="button">
<input type="submit" value="Proceed to Checkout" name="proceed" class="checkout-button button alt wc-forward">
</td>
</tr>
</tbody>
</table>
</form>
<div class="cart-collaterals">
<div class="cross-sells">
<h2>You may be interested in...</h2>
<ul class="products">
<li class="product">
<a href="single-product.html">
<img width="325" height="325" alt="T_4_front" class="attachment-shop_catalog wp-post-image" src="img/product-2.jpg">
<h3>Ship Your Idea</h3>
<span class="price"><span class="amount">£20.00</span></span>
</a>
<a class="add_to_cart_button" data-quantity="1" data-product_sku="" data-product_id="22" rel="nofollow" href="single-product.html">Select options</a>
</li>
<li class="product">
<a href="single-product.html">
<img width="325" height="325" alt="T_4_front" class="attachment-shop_catalog wp-post-image" src="img/product-4.jpg">
<h3>Ship Your Idea</h3>
<span class="price"><span class="amount">£20.00</span></span>
</a>
<a class="add_to_cart_button" data-quantity="1" data-product_sku="" data-product_id="22" rel="nofollow" href="single-product.html">Select options</a>
</li>
</ul>
</div>
<div class="cart_totals ">
<h2>Cart Totals</h2>
<table cellspacing="0">
<tbody>
<tr class="cart-subtotal">
<th>Cart Subtotal</th>
<td><span class="amount">£15.00</span></td>
</tr>
<tr class="shipping">
<th>Shipping and Handling</th>
<td>Free Shipping</td>
</tr>
<tr class="order-total">
<th>Order Total</th>
<td><strong><span class="amount">£15.00</span></strong> </td>
</tr>
</tbody>
</table>
</div>
<form method="post" action="#" class="shipping_calculator">
<h2><a class="shipping-calculator-button" data-toggle="collapse" href="#calcalute-shipping-wrap" aria-expanded="false" aria-controls="calcalute-shipping-wrap">Calculate Shipping</a></h2>
<section id="calcalute-shipping-wrap" class="shipping-calculator-form collapse">
<p class="form-row form-row-wide">
<select rel="calc_shipping_state" class="country_to_state" id="calc_shipping_country" name="calc_shipping_country">
<option value="">Select a country…</option>
<option value="AX">Åland Islands</option>
<option value="AF">Afghanistan</option>
<option value="AL">Albania</option>
<option value="DZ">Algeria</option>
<option value="AD">Andorra</option>
<option value="AO">Angola</option>
<option value="AI">Anguilla</option>
<option value="AQ">Antarctica</option>
<option value="AG">Antigua and Barbuda</option>
<option value="AR">Argentina</option>
<option value="AM">Armenia</option>
<option value="AW">Aruba</option>
<option value="AU">Australia</option>
<option value="AT">Austria</option>
<option value="AZ">Azerbaijan</option>
<option value="BS">Bahamas</option>
<option value="BH">Bahrain</option>
<option value="BD">Bangladesh</option>
<option value="BB">Barbados</option>
<option value="BY">Belarus</option>
<option value="PW">Belau</option>
<option value="BE">Belgium</option>
<option value="BZ">Belize</option>
<option value="BJ">Benin</option>
<option value="BM">Bermuda</option>
<option value="BT">Bhutan</option>
<option value="BO">Bolivia</option>
<option value="BQ">Bonaire, Saint Eustatius and Saba</option>
<option value="BA">Bosnia and Herzegovina</option>
<option value="BW">Botswana</option>
<option value="BV">Bouvet Island</option>
<option value="BR">Brazil</option>
<option value="IO">British Indian Ocean Territory</option>
<option value="VG">British Virgin Islands</option>
<option value="BN">Brunei</option>
<option value="BG">Bulgaria</option>
<option value="BF">Burkina Faso</option>
<option value="BI">Burundi</option>
<option value="KH">Cambodia</option>
<option value="CM">Cameroon</option>
<option value="CA">Canada</option>
<option value="CV">Cape Verde</option>
<option value="KY">Cayman Islands</option>
<option value="CF">Central African Republic</option>
<option value="TD">Chad</option>
<option value="CL">Chile</option>
<option value="CN">China</option>
<option value="CX">Christmas Island</option>
<option value="CC">Cocos (Keeling) Islands</option>
<option value="CO">Colombia</option>
<option value="KM">Comoros</option>
<option value="CG">Congo (Brazzaville)</option>
<option value="CD">Congo (Kinshasa)</option>
<option value="CK">Cook Islands</option>
<option value="CR">Costa Rica</option>
<option value="HR">Croatia</option>
<option value="CU">Cuba</option>
<option value="CW">CuraÇao</option>
<option value="CY">Cyprus</option>
<option value="CZ">Czech Republic</option>
<option value="DK">Denmark</option>
<option value="DJ">Djibouti</option>
<option value="DM">Dominica</option>
<option value="DO">Dominican Republic</option>
<option value="EC">Ecuador</option>
<option value="EG">Egypt</option>
<option value="SV">El Salvador</option>
<option value="GQ">Equatorial Guinea</option>
<option value="ER">Eritrea</option>
<option value="EE">Estonia</option>
<option value="ET">Ethiopia</option>
<option value="FK">Falkland Islands</option>
<option value="FO">Faroe Islands</option>
<option value="FJ">Fiji</option>
<option value="FI">Finland</option>
<option value="FR">France</option>
<option value="GF">French Guiana</option>
<option value="PF">French Polynesia</option>
<option value="TF">French Southern Territories</option>
<option value="GA">Gabon</option>
<option value="GM">Gambia</option>
<option value="GE">Georgia</option>
<option value="DE">Germany</option>
<option value="GH">Ghana</option>
<option value="GI">Gibraltar</option>
<option value="GR">Greece</option>
<option value="GL">Greenland</option>
<option value="GD">Grenada</option>
<option value="GP">Guadeloupe</option>
<option value="GT">Guatemala</option>
<option value="GG">Guernsey</option>
<option value="GN">Guinea</option>
<option value="GW">Guinea-Bissau</option>
<option value="GY">Guyana</option>
<option value="HT">Haiti</option>
<option value="HM">Heard Island and McDonald Islands</option>
<option value="HN">Honduras</option>
<option value="HK">Hong Kong</option>
<option value="HU">Hungary</option>
<option value="IS">Iceland</option>
<option value="IN">India</option>
<option value="ID">Indonesia</option>
<option value="IR">Iran</option>
<option value="IQ">Iraq</option>
<option value="IM">Isle of Man</option>
<option value="IL">Israel</option>
<option value="IT">Italy</option>
<option value="CI">Ivory Coast</option>
<option value="JM">Jamaica</option>
<option value="JP">Japan</option>
<option value="JE">Jersey</option>
<option value="JO">Jordan</option>
<option value="KZ">Kazakhstan</option>
<option value="KE">Kenya</option>
<option value="KI">Kiribati</option>
<option value="KW">Kuwait</option>
<option value="KG">Kyrgyzstan</option>
<option value="LA">Laos</option>
<option value="LV">Latvia</option>
<option value="LB">Lebanon</option>
<option value="LS">Lesotho</option>
<option value="LR">Liberia</option>
<option value="LY">Libya</option>
<option value="LI">Liechtenstein</option>
<option value="LT">Lithuania</option>
<option value="LU">Luxembourg</option>
<option value="MO">Macao S.A.R., China</option>
<option value="MK">Macedonia</option>
<option value="MG">Madagascar</option>
<option value="MW">Malawi</option>
<option value="MY">Malaysia</option>
<option value="MV">Maldives</option>
<option value="ML">Mali</option>
<option value="MT">Malta</option>
<option value="MH">Marshall Islands</option>
<option value="MQ">Martinique</option>
<option value="MR">Mauritania</option>
<option value="MU">Mauritius</option>
<option value="YT">Mayotte</option>
<option value="MX">Mexico</option>
<option value="FM">Micronesia</option>
<option value="MD">Moldova</option>
<option value="MC">Monaco</option>
<option value="MN">Mongolia</option>
<option value="ME">Montenegro</option>
<option value="MS">Montserrat</option>
<option value="MA">Morocco</option>
<option value="MZ">Mozambique</option>
<option value="MM">Myanmar</option>
<option value="NA">Namibia</option>
<option value="NR">Nauru</option>
<option value="NP">Nepal</option>
<option value="NL">Netherlands</option>
<option value="AN">Netherlands Antilles</option>
<option value="NC">New Caledonia</option>
<option value="NZ">New Zealand</option>
<option value="NI">Nicaragua</option>
<option value="NE">Niger</option>
<option value="NG">Nigeria</option>
<option value="NU">Niue</option>
<option value="NF">Norfolk Island</option>
<option value="KP">North Korea</option>
<option value="NO">Norway</option>
<option value="OM">Oman</option>
<option value="PK">Pakistan</option>
<option value="PS">Palestinian Territory</option>
<option value="PA">Panama</option>
<option value="PG">Papua New Guinea</option>
<option value="PY">Paraguay</option>
<option value="PE">Peru</option>
<option value="PH">Philippines</option>
<option value="PN">Pitcairn</option>
<option value="PL">Poland</option>
<option value="PT">Portugal</option>
<option value="QA">Qatar</option>
<option value="IE">Republic of Ireland</option>
<option value="RE">Reunion</option>
<option value="RO">Romania</option>
<option value="RU">Russia</option>
<option value="RW">Rwanda</option>
<option value="ST">São Tomé and Príncipe</option>
<option value="BL">Saint Barthélemy</option>
<option value="SH">Saint Helena</option>
<option value="KN">Saint Kitts and Nevis</option>
<option value="LC">Saint Lucia</option>
<option value="SX">Saint Martin (Dutch part)</option>
<option value="MF">Saint Martin (French part)</option>
<option value="PM">Saint Pierre and Miquelon</option>
<option value="VC">Saint Vincent and the Grenadines</option>
<option value="SM">San Marino</option>
<option value="SA">Saudi Arabia</option>
<option value="SN">Senegal</option>
<option value="RS">Serbia</option>
<option value="SC">Seychelles</option>
<option value="SL">Sierra Leone</option>
<option value="SG">Singapore</option>
<option value="SK">Slovakia</option>
<option value="SI">Slovenia</option>
<option value="SB">Solomon Islands</option>
<option value="SO">Somalia</option>
<option value="ZA">South Africa</option>
<option value="GS">South Georgia/Sandwich Islands</option>
<option value="KR">South Korea</option>
<option value="SS">South Sudan</option>
<option value="ES">Spain</option>
<option value="LK">Sri Lanka</option>
<option value="SD">Sudan</option>
<option value="SR">Suriname</option>
<option value="SJ">Svalbard and Jan Mayen</option>
<option value="SZ">Swaziland</option>
<option value="SE">Sweden</option>
<option value="CH">Switzerland</option>
<option value="SY">Syria</option>
<option value="TW">Taiwan</option>
<option value="TJ">Tajikistan</option>
<option value="TZ">Tanzania</option>
<option value="TH">Thailand</option>
<option value="TL">Timor-Leste</option>
<option value="TG">Togo</option>
<option value="TK">Tokelau</option>
<option value="TO">Tonga</option>
<option value="TT">Trinidad and Tobago</option>
<option value="TN">Tunisia</option>
<option value="TR">Turkey</option>
<option value="TM">Turkmenistan</option>
<option value="TC">Turks and Caicos Islands</option>
<option value="TV">Tuvalu</option>
<option value="UG">Uganda</option>
<option value="UA">Ukraine</option>
<option value="AE">United Arab Emirates</option>
<option selected="selected" value="GB">United Kingdom (UK)</option>
<option value="US">United States (US)</option>
<option value="UY">Uruguay</option>
<option value="UZ">Uzbekistan</option>
<option value="VU">Vanuatu</option>
<option value="VA">Vatican</option>
<option value="VE">Venezuela</option>
<option value="VN">Vietnam</option>
<option value="WF">Wallis and Futuna</option>
<option value="EH">Western Sahara</option>
<option value="WS">Western Samoa</option>
<option value="YE">Yemen</option>
<option value="ZM">Zambia</option>
<option value="ZW">Zimbabwe</option>
</select>
</p>
<p class="form-row form-row-wide"><input type="text" id="calc_shipping_state" name="calc_shipping_state" placeholder="State / county" value="" class="input-text"> </p>
<p class="form-row form-row-wide"><input type="text" id="calc_shipping_postcode" name="calc_shipping_postcode" placeholder="Postcode / Zip" value="" class="input-text"></p>
<p><button class="button" value="1" name="calc_shipping" type="submit">Update Totals</button></p>
</section>
</form>
</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>© 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>
$('.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 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.price)+"원");
$("#qty_"+cid).val(return_data.qty);
}
});
});
function number_format(num){
return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g,',');
}
</script>
<?php
include $_SERVER["DOCUMENT_ROOT"]."/inc/bot.php";
?>
위 그림에서 +를 눌렀을때만 작업했다. plus를 크릭하면 1개씩 증가시키고 디비에도 ajax를 이용해서 업데이트해준다. 그리고 리턴값을 화면에 뿌려준다.
cart_edit.php도 만들어보자.
/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'];
$price = $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);
?>
ajax 작동용 파일 이름에는 ajax를 붙이는 것이 좋다. 깜빡했다. 마음같지 않네.
minus는 안했다. 직접 해보도록 하자.반대로 해주면 된다.
반응형
'PHP강좌 > 쇼핑몰만들기강좌' 카테고리의 다른 글
| php+mysql 쇼핑몰 만들기 강좌 - #33. 마일리지의 사용 (0) | 2022.09.13 |
|---|---|
| php+mysql 쇼핑몰 만들기 강좌 - #33. 마일리지(를 얻을때) (0) | 2022.09.02 |
| php+mysql 쇼핑몰 만들기 강좌 - #31. 장바구니 페이지 (1) | 2022.08.31 |
| php+mysql 쇼핑몰 만들기 강좌 - #30. 다국어 (0) | 2022.08.26 |
| php+mysql 쇼핑몰 만들기 강좌 - #29. 제품 상세 페이지 (0) | 2022.08.08 |