장바구니 클릭 시 레이어팝업으로 "계속 쇼핑" 띄우기

장바구니 클릭 시 레이어팝업으로 "계속 쇼핑" 띄우기

QA

장바구니 클릭 시 레이어팝업으로 "계속 쇼핑" 띄우기

본문

장바구니 클릭 시 레이어팝업으로 "계속 쇼핑" 띄우기

 

아래 이미지처럼 하고 싶은데, 소스나 예제를 도와 주셨으면 합니다. 

여러 쇼핑몰에서 이렇게 하고 있는데, 어떻게 해야 할지...
옛날 테마를 검색으로 하나 찾긴 했은데, 2014년도 거라 그런지 적용이 안 되네요.

부탁드립니다~

 

3034974783_1532737670.9198.jpg

이 질문에 댓글 쓰기 :

답변 3

1. 해당스킨/item.form.skin.php 파일에 모달창부분을 삽입합니다.

ex)

<div id="modalLayer">
  <div class="mask">
  <div class="modalContent">   
    <button type="button" class="gnb_close_btn"><i class="fa fa-times" aria-hidden="true"></i></button>
<!-- 내용 시작 -->
    <div class="cont">
        <p>선택하신 상품이 장바구니에 담겼습니다.</p>
        <a href="<?php echo G5_SHOP_URL; ?>/list.php?ca_id=<?php echo $it['ca_id']; ?>" class="shopping">계속쇼핑하기</a>
        <a href="<?php echo G5_SHOP_URL; ?>/cart.php" class="carting">장바구니보기</a>
    </div>
<!-- 내용 끝// -->
  </div>
   </div>
</div>


2. 해당스킨/style.css 파일에 모달창 부분 style 추가

ex)
/* 모달창 */
.mask{width:100%; height:100%; position:fixed; left:0; top:0; z-index:10; background:url(/img/box_gh.png);z-index:10000;}

#modalLayer{display:none; }
#modalLayer .modalContent{width:350px; height:200px; padding:40px 10px 10px 10px; border:1px solid #ccc; position:fixed; left:50%; top:45%; z-index:11; background:#fff; }
#modalLayer .modalContent button{position:absolute; right:0; top:0; cursor:pointer;}
#modalLayer .gnb_close_btn{background:#424242;color:#fff;width:50px;height:50px;border:0;vertical-align:top;font-size:18px;position:absolute;top:-50px;right:0}
#modalLayer .cont {margin-top:20px;text-align:center;}
#modalLayer .cont p{font-weight:700;padding:20px;}
#modalLayer .cont .shopping {color:#fff;padding:10px 15px;background:#336600;}
#modalLayer .cont .carting {color:#fff;padding:10px 15px;background:#b3b3b3;}

3. 해당스킨/item.form.skin.php 파일에 ajax용 스크립트 추가

기존 fitem_submit() 부분 제일 하단에  return true; 제거하시고
해당 스크립트로 대체합니다.
ex)

// 바로구매, 장바구니 폼 전송
function fitem_submit(f)
{
    f.action = "<?php echo $action_url; ?>";
    f.target = "";
    if (document.pressed == "장바구니") {
        f.sw_direct.value = 0;
    } else { // 바로구매
        f.sw_direct.value = 1;
    }
    // 판매가격이 0 보다 작다면
    if (document.getElementById("it_price").value < 0) {
        alert("전화로 문의해 주시면 감사하겠습니다.");
        return false;
    }
    if($(".sit_opt_list").size() < 1) {
        alert("상품의 선택옵션을 선택해 주십시오.");
        return false;
    }
    var val, io_type, result = true;
    var sum_qty = 0;
    var min_qty = parseInt(<?php echo $it['it_buy_min_qty']; ?>);
    var max_qty = parseInt(<?php echo $it['it_buy_max_qty']; ?>);
    var $el_type = $("input[name^=io_type]");
    $("input[name^=ct_qty]").each(function(index) {
        val = $(this).val();
        if(val.length < 1) {
            alert("수량을 입력해 주십시오.");
            result = false;
            return false;
        }
        if(val.replace(/[0-9]/g, "").length > 0) {
            alert("수량은 숫자로 입력해 주십시오.");
            result = false;
            return false;
        }
        if(parseInt(val.replace(/[^0-9]/g, "")) < 1) {
            alert("수량은 1이상 입력해 주십시오.");
            result = false;
            return false;
        }
        io_type = $el_type.eq(index).val();
        if(io_type == "0")
            sum_qty += parseInt(val);
    });
    if(!result) {
        return false;
    }
    if(min_qty > 0 && sum_qty < min_qty) {
        alert("선택옵션 개수 총합 "+number_format(String(min_qty))+"개 이상 주문해 주십시오.");
        return false;
    }
    if(max_qty > 0 && sum_qty > max_qty) {
        alert("선택옵션 개수 총합 "+number_format(String(max_qty))+"개 이하로 주문해 주십시오.");
        return false;
    }
       if (document.pressed == "장바구니") {
        $.post(
            "<?php echo G5_SHOP_URL; ?>/ajax.cartupdate.php",
            $(f).serialize(),
            function(error) {
                if(error != "OK") {
                    alert(error.replace(/\\n/g, "\n"));
                    return false;
                }
                var marginLeft = $(".modalContent").outerWidth()/2;
                var marginTop = $(".modalContent").outerHeight()/2; 
                
                $("#modalLayer").fadeIn("slow");
                $(".modalContent").css({"margin-top" : -marginTop, "margin-left" : -marginLeft});
                $(this).blur();
                $(".modalContent > a").focus(); 
                return false;

            }
        );
        return false;
    } else {
        return true;
    }
}
//  모달창 닫기
$(function(){
  $(".gnb_close_btn").click(function(){
    $("#modalLayer").fadeOut("slow");
  });        
});

4. ajax용 파일생성 (ajax.cartupdate.php)

/shop/cartupdate.php 파일을 /shop/ajax.cartupdate.php 파일이름 바꿔서 카피합니다.

카피하신 ajax.cartupdate.php 파일을 열어서 필요없는 부분은 제거합니다.

if($act == "buy")
else if ($act == "alldelete") // 모두 삭제이면
else if ($act == "seldelete") // 선택삭제

그래서 장바구니에 담는 부분만 남겨두시고

제일 하단에 페이지 이동 부분 제거합니다.

die('OK'); 추가

ex)

<?php
include_once('./_common.php');
// print_r2($_POST); exit;
// 보관기간이 지난 상품 삭제
cart_item_clean();
// cart id 설정
set_cart_id($sw_direct);
if($sw_direct)
    $tmp_cart_id = get_session('ss_cart_direct');
else
    $tmp_cart_id = get_session('ss_cart_id');
// 브라우저에서 쿠키를 허용하지 않은 경우라고 볼 수 있음.
if (!$tmp_cart_id)
{
    alert('더 이상 작업을 진행할 수 없습니다.\\n\\n브라우저의 쿠키 허용을 사용하지 않음으로 설정한것 같습니다.\\n\\n브라우저의 인터넷 옵션에서 쿠키 허용을 사용으로 설정해 주십시오.\\n\\n그래도 진행이 되지 않는다면 쇼핑몰 운영자에게 문의 바랍니다.');
}

// 레벨(권한)이 상품구입 권한보다 작다면 상품을 구입할 수 없음.
if ($member['mb_level'] < $default['de_level_sell'])
{
    alert('상품을 구입할 수 있는 권한이 없습니다.');
}
    $count = count($_POST['it_id']);
    if ($count < 1)
        alert('장바구니에 담을 상품을 선택하여 주십시오.');
    $ct_count = 0;
    for($i=0; $i<$count; $i++) {
        // 보관함의 상품을 담을 때 체크되지 않은 상품 건너뜀
        if($act == 'multi' && !$_POST['chk_it_id'][$i])
            continue;
        $it_id = $_POST['it_id'][$i];
        $opt_count = count($_POST['io_id'][$it_id]);
        if($opt_count && $_POST['io_type'][$it_id][0] != 0)
            alert('상품의 선택옵션을 선택해 주십시오.');
        for($k=0; $k<$opt_count; $k++) {
            if ($_POST['ct_qty'][$it_id][$k] < 1)
                alert('수량은 1 이상 입력해 주십시오.');
        }
        // 상품정보
        $sql = " select * from {$g5['g5_shop_item_table']} where it_id = '$it_id' ";
        $it = sql_fetch($sql);
        if(!$it['it_id'])
            alert('상품정보가 존재하지 않습니다.');
        // 바로구매에 있던 장바구니 자료를 지운다.
        if($i == 0 && $sw_direct)
            sql_query(" delete from {$g5['g5_shop_cart_table']} where od_id = '$tmp_cart_id' and ct_direct = 1 ", false);
        // 최소, 최대 수량 체크
        if($it['it_buy_min_qty'] || $it['it_buy_max_qty']) {
            $sum_qty = 0;
            for($k=0; $k<$opt_count; $k++) {
                if($_POST['io_type'][$it_id][$k] == 0)
                    $sum_qty += $_POST['ct_qty'][$it_id][$k];
            }
            if($it['it_buy_min_qty'] > 0 && $sum_qty < $it['it_buy_min_qty'])
                alert($it['it_name'].'의 선택옵션 개수 총합 '.number_format($it['it_buy_min_qty']).'개 이상 주문해 주십시오.');
            if($it['it_buy_max_qty'] > 0 && $sum_qty > $it['it_buy_max_qty'])
                alert($it['it_name'].'의 선택옵션 개수 총합 '.number_format($it['it_buy_max_qty']).'개 이하로 주문해 주십시오.');
            // 기존에 장바구니에 담긴 상품이 있는 경우에 최대 구매수량 체크
            if($it['it_buy_max_qty'] > 0) {
                $sql4 = " select sum(ct_qty) as ct_sum
                            from {$g5['g5_shop_cart_table']}
                            where od_id = '$tmp_cart_id'
                              and it_id = '$it_id'
                              and io_type = '0'
                              and ct_status = '쇼핑' ";
                $row4 = sql_fetch($sql4);
                if(($sum_qty + $row4['ct_sum']) > $it['it_buy_max_qty'])
                    alert($it['it_name'].'의 선택옵션 개수 총합 '.number_format($it['it_buy_max_qty']).'개 이하로 주문해 주십시오.', './cart.php');
            }
        }
        // 옵션정보를 얻어서 배열에 저장
        $opt_list = array();
        $sql = " select * from {$g5['g5_shop_item_option_table']} where it_id = '$it_id' and io_use = 1 order by io_no asc ";
        $result = sql_query($sql);
        $lst_count = 0;
        for($k=0; $row=sql_fetch_array($result); $k++) {
            $opt_list[$row['io_type']][$row['io_id']]['id'] = $row['io_id'];
            $opt_list[$row['io_type']][$row['io_id']]['use'] = $row['io_use'];
            $opt_list[$row['io_type']][$row['io_id']]['price'] = $row['io_price'];
            $opt_list[$row['io_type']][$row['io_id']]['stock'] = $row['io_stock_qty'];
            // 선택옵션 개수
            if(!$row['io_type'])
                $lst_count++;
        }
        //--------------------------------------------------------
        //  재고 검사, 바로구매일 때만 체크
        //--------------------------------------------------------
        // 이미 주문폼에 있는 같은 상품의 수량합계를 구한다.
        if($sw_direct) {
            for($k=0; $k<$opt_count; $k++) {
                $io_id = preg_replace(G5_OPTION_ID_FILTER, '', $_POST['io_id'][$it_id][$k]);
                $io_type = preg_replace('#[^01]#', '', $_POST['io_type'][$it_id][$k]);
                $io_value = $_POST['io_value'][$it_id][$k];
                $sql = " select SUM(ct_qty) as cnt from {$g5['g5_shop_cart_table']}
                          where od_id <> '$tmp_cart_id'
                            and it_id = '$it_id'
                            and io_id = '$io_id'
                            and io_type = '$io_type'
                            and ct_stock_use = 0
                            and ct_status = '쇼핑'
                            and ct_select = '1' ";
                $row = sql_fetch($sql);
                $sum_qty = $row['cnt'];
                // 재고 구함
                $ct_qty = $_POST['ct_qty'][$it_id][$k];
                if(!$io_id)
                    $it_stock_qty = get_it_stock_qty($it_id);
                else
                    $it_stock_qty = get_option_stock_qty($it_id, $io_id, $io_type);
                if ($ct_qty + $sum_qty > $it_stock_qty)
                {
                    alert($io_value." 의 재고수량이 부족합니다.\\n\\n현재 재고수량 : " . number_format($it_stock_qty - $sum_qty) . " 개");
                }
            }
        }
        //--------------------------------------------------------
        // 옵션수정일 때 기존 장바구니 자료를 먼저 삭제
        if($act == 'optionmod')
            sql_query(" delete from {$g5['g5_shop_cart_table']} where od_id = '$tmp_cart_id' and it_id = '$it_id' ");
        // 장바구니에 Insert
        // 바로구매일 경우 장바구니가 체크된것으로 강제 설정
        if($sw_direct) {
            $ct_select = 1;
            $ct_select_time = G5_TIME_YMDHIS;
        } else {
            $ct_select = 0;
            $ct_select_time = '0000-00-00 00:00:00';
        }
        // 장바구니에 Insert
        $comma = '';
        $sql = " INSERT INTO {$g5['g5_shop_cart_table']}
                        ( od_id, mb_id, it_id, it_name, it_sc_type, it_sc_method, it_sc_price, it_sc_minimum, it_sc_qty, ct_status, ct_price, ct_point, ct_point_use, ct_stock_use, ct_option, ct_qty, ct_notax, io_id, io_type, io_price, ct_time, ct_ip, ct_send_cost, ct_direct, ct_select, ct_select_time )
                    VALUES ";
        for($k=0; $k<$opt_count; $k++) {
            $io_id = preg_replace(G5_OPTION_ID_FILTER, '', $_POST['io_id'][$it_id][$k]);
            $io_type = preg_replace('#[^01]#', '', $_POST['io_type'][$it_id][$k]);
            $io_value = $_POST['io_value'][$it_id][$k];
            // 선택옵션정보가 존재하는데 선택된 옵션이 없으면 건너뜀
            if($lst_count && $io_id == '')
                continue;
            // 구매할 수 없는 옵션은 건너뜀
            if($io_id && !$opt_list[$io_type][$io_id]['use'])
                continue;
            $io_price = $opt_list[$io_type][$io_id]['price'];
            $ct_qty = $_POST['ct_qty'][$it_id][$k];
            // 구매가격이 음수인지 체크
            if($io_type) {
                if((int)$io_price < 0)
                    alert('구매금액이 음수인 상품은 구매할 수 없습니다.');
            } else {
                if((int)$it['it_price'] + (int)$io_price < 0)
                    alert('구매금액이 음수인 상품은 구매할 수 없습니다.');
            }
            // 동일옵션의 상품이 있으면 수량 더함
            $sql2 = " select ct_id, io_type, ct_qty
                        from {$g5['g5_shop_cart_table']}
                        where od_id = '$tmp_cart_id'
                          and it_id = '$it_id'
                          and io_id = '$io_id'
                          and ct_status = '쇼핑' ";
            $row2 = sql_fetch($sql2);
            if($row2['ct_id']) {
                // 재고체크
                $tmp_ct_qty = $row2['ct_qty'];
                if(!$io_id)
                    $tmp_it_stock_qty = get_it_stock_qty($it_id);
                else
                    $tmp_it_stock_qty = get_option_stock_qty($it_id, $io_id, $row2['io_type']);
                if ($tmp_ct_qty + $ct_qty > $tmp_it_stock_qty)
                {
                    alert($io_value." 의 재고수량이 부족합니다.\\n\\n현재 재고수량 : " . number_format($tmp_it_stock_qty) . " 개");
                }
                $sql3 = " update {$g5['g5_shop_cart_table']}
                            set ct_qty = ct_qty + '$ct_qty'
                            where ct_id = '{$row2['ct_id']}' ";
                sql_query($sql3);
                continue;
            }
            // 포인트
            $point = 0;
            if($config['cf_use_point']) {
                if($io_type == 0) {
                    $point = get_item_point($it, $io_id);
                } else {
                    $point = $it['it_supply_point'];
                }
                if($point < 0)
                    $point = 0;
            }
            // 배송비결제
            if($it['it_sc_type'] == 1)
                $ct_send_cost = 2; // 무료
            else if($it['it_sc_type'] > 1 && $it['it_sc_method'] == 1)
                $ct_send_cost = 1; // 착불
            $sql .= $comma."( '$tmp_cart_id', '{$member['mb_id']}', '{$it['it_id']}', '".addslashes($it['it_name'])."', '{$it['it_sc_type']}', '{$it['it_sc_method']}', '{$it['it_sc_price']}', '{$it['it_sc_minimum']}', '{$it['it_sc_qty']}', '쇼핑', '{$it['it_price']}', '$point', '0', '0', '$io_value', '$ct_qty', '{$it['it_notax']}', '$io_id', '$io_type', '$io_price', '".G5_TIME_YMDHIS."', '$REMOTE_ADDR', '$ct_send_cost', '$sw_direct', '$ct_select', '$ct_select_time' )";
            $comma = ' , ';
            $ct_count++;
        }
        if($ct_count > 0)
            sql_query($sql);
    }

die('OK');
?>

참고로 모달창 마스크용 이미지는 하나 준비하세요..

ex) http://125.130.145.221/img/box_gh.png
 

2014년도면 이걸 말씀하시는 것 같은데 예전 자료라서 파일을 그대로 사용하는건 안 되겠지만 관련 코드 참고해서 적용하면 최근 영카트에서도 가능할 거라 예상합니다.

https://sir.kr/yc5_skin/193
예전에 저거 참고해서 다른 스킨에 적용해봤었는데 분량이 많아서 QA에서 저걸 일일이 설명하는 건 어렵고 직접 코드를 분석해서 하셔야 합니다.

http://125.130.145.221/shop/item.php?it_id=1532673660

이렇게 구현되면 되는건가요?

확인해보시고 맞다면 제가 작업과정 설명드리도록 하겠습니다.

 

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

회원로그인

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