상품 구매버튼, 주문 오류 질문입니다.
본문
안녕하세요 이번에 하단 상품 구매버튼을 하나 만들게 되었습니다! 아무래도 상세페이지가 길어지다보면 스크롤을 위로 올려서 구매버튼까지 가는것보단 바로 구매하게 만들고 싶었고 모바일에서는 더더욱 중요하다고 생각하여 하단에 구매버튼을 고정시켜 놓았습니다.
잘 구동되고 주문서까지 넘어가는것을 다 확인했으나 어째서인지 상품을 하나만 구매를 해도 주문서에는 2개가 장바구니에 들어가져 있는 현상이 발생했습니다. 1개 구매 -> 2개 주문서, 2개 구매 -> 3개 주문서
이런식으로 넘어가네요...
(구매를 하나만 했는데)
(이렇게 주문서에는 2개가 넘어가져 있습니다...)
또한 하단 구매창에서 추가옵션을 선택하면 기존 페이지에서는 추가된것이 잘 확인이 되지만 하단 구매창에는 표현이 되지 않는 오류가 지속되고 있습니다...
아무래도 초보인 제 실력에서 뭔가를 빼먹거나 넣지 말아야할 소스까지 모두 넣어서 그렇게 된 듯한데 이리저리 수정을 해보면 자꾸 페이지 자체가 깨져버리거나 주문서가 제대로 넘어가지 않는 오류가 계속해서 생겨 이렇게 질문 드립니다 ㅠㅠ
제가 하단 구매창을 만들기 위해 수정한 파일은 style.css 와 item.form.skin.php 입니다
<?php
if($option_item) {
?>
<section class="sit_option">
<h3>선택옵션</h3>
<table class="sit_op_sl">
<colgroup>
<col class="grid_2">
<col>
</colgroup>
<tbody>
<?php // 선택옵션
echo $option_item;
?>
</tbody>
</table>
</section>
<?php
}
?>
<?php
if($supply_item) {
?>
<section class="sit_option">
<h3>추가옵션</h3>
<table class="sit_op_sl">
<colgroup>
<col class="grid_2">
<col>
</colgroup>
<tbody>
<?php // 추가옵션
echo $supply_item;
?>
</tbody>
</table>
</section>
<?php
}
?>
<?php if ($it['it_use'] && !$it['it_tel_inq'] && !$is_soldout) { ?>
<div id="sit_sel_option">
<?php
if(!$option_item) {
if(!$it['it_buy_min_qty'])
$it['it_buy_min_qty'] = 1;
?>
<ul id="sit_opt_added">
<li class="sit_opt_list">
<input type="hidden" name="io_type[<?php echo $it_id; ?>][]" value="0">
<input type="hidden" name="io_id[<?php echo $it_id; ?>][]" value="">
<input type="hidden" name="io_value[<?php echo $it_id; ?>][]" value="<?php echo $it['it_name']; ?>">
<input type="hidden" class="io_price" value="0">
<input type="hidden" class="io_stock" value="<?php echo $it['it_stock_qty']; ?>">
<div class="opt_name">
<span class="sit_opt_subj"><?php echo $it['it_name']; ?></span>
</div>
<div class="opt_count">
<label for="ct_qty_<?php echo $i; ?>" class="sound_only">수량</label>
<button type="button" class="sit_qty_minus"><i class="fa fa-minus" aria-hidden="true"></i><span class="sound_only">감소</span></button>
<input type="text" name="ct_qty[<?php echo $it_id; ?>][]" value="<?php echo $it['it_buy_min_qty']; ?>" id="ct_qty_<?php echo $i; ?>" class="num_input" size="5">
<button type="button" class="sit_qty_plus"><i class="fa fa-plus" aria-hidden="true"></i><span class="sound_only">증가</span></button>
<span class="sit_opt_prc">+0원</span>
</div>
</li>
</ul>
<script>
$(function() {
price_calculate();
});
</script>
<?php } ?>
</div>
<div id="sit_tot_price"></div>
<?php } ?>
<?php if($is_soldout) { ?>
<p id="sit_ov_soldout">상품의 재고가 부족하여 구매할 수 없습니다.</p>
<?php } ?>
<div id="sit_ov_btn">
<?php if ($is_orderable) { ?>
<button type="submit" onclick="document.pressed=this.value;" value="장바구니" id="sit_btn_cart">장바구니</button>
<button type="submit" onclick="document.pressed=this.value;" value="바로구매" id="sit_btn_buy">바로구매</button>
<?php } ?>
<?php if(!$is_orderable && $it['it_soldout'] && $it['it_stock_sms']) { ?>
<a href="javascript:popup_stocksms('<?php echo $it['it_id']; ?>');" id="sit_btn_phone">재입고알림</a>
<?php } ?>
<a href="javascript:item_wish(document.fitem, '<?php echo $it['it_id']; ?>');" id="sit_btn_wish">위시리스트</a>
<a href="javascript:popup_item_recommend('<?php echo $it['it_id']; ?>');" id="sit_btn_rec">추천하기</a>
<?php if ($naverpay_button_js) { ?>
<div class="naverpay-item"><?php echo $naverpay_request_js.$naverpay_button_js; ?></div>
<?php } ?>
</div>
<div class="sns_share">
<button type="button" class="btn_sns_share"><i class="fa fa-share-alt" aria-hidden="true"></i><span class="sound_only">공유</span></button>
<div class="sns_area">
<div class="bg btn_snscl"></div>
<div class="sns_wr">
<h3>SNS공유</h3>
<?php echo get_sns_share_link('facebook', $sns_url, $sns_title, G5_MSHOP_SKIN_URL.'/img/facebook.png'); ?>
<?php echo get_sns_share_link('twitter', $sns_url, $sns_title, G5_MSHOP_SKIN_URL.'/img/twitter.png'); ?>
<?php echo get_sns_share_link('googleplus', $sns_url, $sns_title, G5_MSHOP_SKIN_URL.'/img/gplus.png'); ?>
<?php echo get_sns_share_link('kakaotalk', $sns_url, $sns_title, G5_MSHOP_SKIN_URL.'/img/sns_kakao.png'); ?>
<?php
$href = G5_SHOP_URL.'/iteminfo.php?it_id='.$it_id;
?>
<button type="button" class="btn_snscl btn_close"><i class="fa fa-times"></i></button>
</div>
</div>
</div>
</section>
</div>
</div>
<!-- 다른 상품 보기 시작 { -->
<div id="sit_siblings">
<?php
if ($prev_href || $next_href) {
echo $prev_href.$prev_title.$prev_href2;
echo $next_href.$next_title.$next_href2;
} else {
echo '<span class="sound_only">이 분류에 등록된 다른 상품이 없습니다.</span>';
}
?>
</div>
<!-- } 다른 상품 보기 끝 -->
<div id="sit_buy_op"><button type="button" id="buy_op_btn">구매하기</button></div>
<section id="sit_buy">
<h2> 구매기능</h2>
<button type="button" class="btn_close">닫기</button>
<div class="buy_wr">
<?php
if($option_item) {
?>
<section class="sit_option_wr">
<h3>선택옵션</h3>
<?php // 선택옵션
echo $option_item;
?>
</section>
<?php
}
?>
<?php
if($supply_item) {
?>
<section class="sit_option_wr">
<h3>추가옵션</h3>
<?php // 추가옵션
echo $supply_item;
?>
</section>
<?php
}
?>
<?php if ($it['it_use'] && !$it['it_tel_inq'] && !$is_soldout) { ?>
<div id="sit_sel_option">
<?php
if(!$option_item) {
if(!$it['it_buy_min_qty'])
$it['it_buy_min_qty'] = 1;
?>
<ul id="sit_opt_added">
<li class="sit_opt_list">
<input type="hidden" name="io_type[<?php echo $it_id; ?>][]" value="0">
<input type="hidden" name="io_id[<?php echo $it_id; ?>][]" value="">
<input type="hidden" name="io_value[<?php echo $it_id; ?>][]" value="<?php echo $it['it_name']; ?>">
<input type="hidden" class="io_price" value="0">
<input type="hidden" class="io_stock" value="<?php echo $it['it_stock_qty']; ?>">
<div class="opt_name">
<span class="sit_opt_subj"><?php echo $it['it_name']; ?></span>
</div>
<div class="opt_count">
<label for="ct_qty_<?php echo $i; ?>" class="sound_only">수량</label>
<button type="button" class="sit_qty_minus"><i class="fa fa-minus" aria-hidden="true"></i><span class="sound_only">감소</span></button>
<input type="text" name="ct_qty[<?php echo $it_id; ?>][]" value="<?php echo $it['it_buy_min_qty']; ?>" id="ct_qty_<?php echo $i; ?>" class="num_input" size="5">
<button type="button" class="sit_qty_plus"><i class="fa fa-plus" aria-hidden="true"></i><span class="sound_only">증가</span></button>
<span class="sit_opt_prc">+0원</span>
</div>
</li>
</ul>
<script>
$(function() {
price_calculate();
});
</script>
<?php } ?>
</div>
<div id="sit_tot_price"></div>
<?php } ?>
<?php if($is_soldout) { ?>
<p id="sit_ov_soldout">상품의 재고가 부족하여 구매할 수 없습니다.</p>
<?php } ?>
<div id="sit_ov_btn">
<?php if ($is_orderable) { ?>
<input type="submit" onclick="document.pressed=this.value;" value="장바구니" id="sit_btn_cart">
<input type="submit" onclick="document.pressed=this.value;" value="바로구매" id="sit_btn_buy">
<?php } ?>
<?php if(!$is_orderable && $it['it_soldout'] && $it['it_stock_sms']) { ?>
<a href="javascript:popup_stocksms('<?php echo $it['it_id']; ?>');" id="sit_btn_buy">재입고알림</a>
<?php } ?>
<?php if ($naverpay_button_js) { ?>
<div class="naverpay-item"><?php echo $naverpay_request_js.$naverpay_button_js; ?></div>
<?php } ?>
</div>
</div>
</section>
<script>
$(document).ready(function(){
$("#buy_op_btn").click(function(){
$("#sit_buy").slideToggle("slow");
});
$(".btn_close").click(function(){
$("#sit_buy").slideToggle("slow");
});
});
</script>
item.form.skin.php 는 이렇게 수정했고,
#sit_buy_op{position:fixed;bottom:0px;left:0;background:#eee;z-index:999;width:100%}
#sit_buy_op #buy_op_btn{width:100%;background:#3d3e3e;border:0;height:55px;font-weight:bold;color:#fff;}
#sit_buy_op #buy_op_btn:hover{background:#1e1e1e;}
#sit_buy{display:none;position:fixed;bottom:0px;left:0;z-index:999;width:100%;text-align:center}
#sit_buy h2 {position:absolute;font-size:0;text-indent:-9999em;line-height:0;overflow:hidden}
#sit_buy .btn_close {background:url(./img/m-btn-op.png) no-repeat 50% 50% #eee;border:1px solid #aaa;border-bottom:0;margin-bottom:-1px;z-index:1;position:relative;text-indent:-999px;overflow:hidden;width:70px;height:24px}
.buy_wr{background:#ffffff;border-top:1px solid #aaa;padding:10px;max-height:600px;text-align:left;overflow-y:auto}
.sit_option_wr{background:#fff;padding:10px;margin:0 0 10px }
.sit_option_wr h3{margin:0 0 5px}
.sit_option_wr label{display:block;margin: 0 0 5px}
.sit_option_wr select{width:100%;padding: 0 10px ;border: 1px solid #d1d9e9;background-color: #fff;color: #606975;font-size:1.167em;height:35px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background:url(./img/select_bg.png) no-repeat right 50%}
.get_item_options{margin:5px 0}
#sit_ov_soldout {margin:10px 0;font-size:1.25em ;color:#ff3061;font-weight:bold;text-align:center}
#sit_ov_btn {margin:0;padding:0 ;text-align:center;}
#sit_ov_btn:after {display:block;visibility:hidden;clear:both;content:""}
#sit_btn_cart{ float:left;width:50%;height:40px;border:1px solid #ff0837;color:#ff0837;font-weight:bold;background:#fff;font-weight:bold}
#sit_btn_buy{float:left;width:50%;height:40px;background:#ff0837;font-weight:bold;border:0;color:#fff;font-weight:bold}
#sit_sel_option,#sit_tot_price{margin: 10px 0}
#sit_tot_price{text-align:right;font-size:1.167em}
#sit_tot_price span{float:left}
#sit_tot_price strong{font-size:1.25em;color:#ff0000}
style.css는 해당 코드들을 추가해 넣었습니다.
주문서에 2개가 중복하여 넘어가는 것을 고치고 추가옵션을 제대로 나타나게 하려면 어떻게 수정해야 할까요?
코딩 왕초보이다보니 기능 하나 추가하는것도 제대로 하질 못하네요 ㅜㅠㅜ
답변 1
옵션 선택을 둘다 사용하는건 권하지 않습니다.
그래도 원한다면 둘다 제어를 해야합니다.
값이 2개가 넘어가는건.. </form> 내에 둘다 위치해서 그런거라..
하나만 form 내에 넣고, 나머지는 같이 스크립트로 연동하면 됩니다.
직접 어려우시면, 제작의뢰 하시고..
가능하면 하나만 사용하세요..
답변을 작성하시기 전에 로그인 해주세요.