상품 구매버튼, 주문 오류 질문입니다.

상품 구매버튼, 주문 오류 질문입니다.

QA

상품 구매버튼, 주문 오류 질문입니다.

본문

안녕하세요 이번에 하단 상품 구매버튼을 하나 만들게 되었습니다! 아무래도 상세페이지가 길어지다보면 스크롤을 위로 올려서 구매버튼까지 가는것보단 바로 구매하게 만들고 싶었고 모바일에서는 더더욱 중요하다고 생각하여 하단에 구매버튼을 고정시켜 놓았습니다.

 

잘 구동되고 주문서까지 넘어가는것을 다 확인했으나 어째서인지 상품을 하나만 구매를 해도 주문서에는 2개가 장바구니에 들어가져 있는 현상이 발생했습니다. 1개 구매 -> 2개 주문서, 2개 구매 -> 3개 주문서

이런식으로 넘어가네요...

1994045597_1631870236.4847.png

(구매를 하나만 했는데)

 

1994045597_1631870303.0373.png

 

(이렇게 주문서에는 2개가 넘어가져 있습니다...)

 

 

또한 하단 구매창에서 추가옵션을 선택하면 기존 페이지에서는 추가된것이 잘 확인이 되지만 하단 구매창에는 표현이 되지 않는 오류가 지속되고 있습니다...

 

1994045597_1631870400.3556.png

 

아무래도 초보인 제 실력에서 뭔가를 빼먹거나 넣지 말아야할 소스까지 모두 넣어서 그렇게 된 듯한데 이리저리 수정을 해보면 자꾸 페이지 자체가 깨져버리거나 주문서가 제대로 넘어가지 않는 오류가 계속해서 생겨 이렇게 질문 드립니다 ㅠㅠ

 

제가 하단 구매창을 만들기 위해 수정한 파일은 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 내에 넣고, 나머지는 같이 스크립트로 연동하면 됩니다.

직접 어려우시면, 제작의뢰 하시고..

가능하면 하나만 사용하세요..

답변을 작성하시기 전에 로그인 해주세요.
전체 16,737
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT