영카트 선택옵션 셀렉트박스를 버튼으로 변환

영카트 선택옵션 셀렉트박스를 버튼으로 변환

QA

영카트 선택옵션 셀렉트박스를 버튼으로 변환

본문

안녕하세요!!

 

영카트로 쇼핑몰 제작중인데 선택옵션 셀렉트박스를 버튼으로 변경하려고 합니다.

1935338123_1673915200.9407.png

지금 버튼으로 변경은 되었는데

버튼 클릭 시 값이 넘어가지 않고 선택하라는 알림창이 뜹니다.

어떻게 해야 할까요..?

 

shop.lib.php


function get_item_options($it_id, $subject, $is_div='', $is_first_option_title='')
{
    global $g5;
    if(!$it_id || !$subject)
        return '';
    $sql = " select * from {$g5['g5_shop_item_option_table']} where io_type = '0' and it_id = '$it_id' and io_use = '1' order by io_no asc ";
    $result = sql_query($sql);
    if(!sql_num_rows($result))
        return '';
    $str = '';
    $subj = explode(',', $subject);
    $subj_count = count($subj);
    if($subj_count > 1) {
        $options = array();
        // 옵션항목 배열에 저장
        for($i=0; $row=sql_fetch_array($result); $i++) {
            $opt_id = explode(chr(30), $row['io_id']);
            for($k=0; $k<$subj_count; $k++) {
                if(! (isset($options[$k]) && is_array($options[$k])))
                    $options[$k] = array();
                if(isset($opt_id[$k]) && $opt_id[$k] && !in_array($opt_id[$k], $options[$k]))
                    $options[$k][] = $opt_id[$k];
            }
        }
        // 옵션선택목록 만들기
        for($i=0; $i<$subj_count; $i++) {
            $opt = $options[$i];
            $opt_count = count($opt);
            $disabled = '';
            if($opt_count) {
                $seq = $i + 1;
                if($i > 0)
                    $disabled = ' disabled="disabled"';
                if($is_div === 'div') {
                    $str .= '<div class="get_item_options">'.PHP_EOL;
                    $str .= '<label for="it_option_'.$seq.'" class="label-title">'.$subj[$i].'</label>'.PHP_EOL;
                } else {
                    $str .= '<tr>'.PHP_EOL;
                    $str .= '<th><label for="it_option_'.$seq.'" class="label-title">'.$subj[$i].'</label></th>'.PHP_EOL;
                }
                
                
                $select = '<ul id="it_option_'.$seq.'" class="it_option"'.$disabled.'>'.PHP_EOL;
                $first_option_title = $is_first_option_title ? $subj[$i] : '선택';
                
                /*$select .= '<option value="">'.$first_option_title.'</option>'.PHP_EOL;*/
                for($k=0; $k<$opt_count; $k++) {
                    $opt_val = $opt[$k];
                    if(strlen($opt_val)) {
                        $select .= '<button value="'.$opt_val.'">'.$opt_val.'</button>'.PHP_EOL;
                    }
                }
                $select .= '</ul>'.PHP_EOL;
                if($is_div === 'div') {
                    $str .= '<span>'.$select.'</span>'.PHP_EOL;
                    $str .= '</div>'.PHP_EOL;
                } else {
                    $str .= '<td>'.$select.'</td>'.PHP_EOL;
                    $str .= '</tr>'.PHP_EOL;
                }
            }
        }
    } else {
        if($is_div === 'div') {
            $str .= '<div class="get_item_options">'.PHP_EOL;
            $str .= '<label for="it_option_1">'.$subj[0].'</label>'.PHP_EOL;
        } else {
            $str .= '<tr>'.PHP_EOL;
            $str .= '<th><label for="it_option_1">'.$subj[0].'</label></th>'.PHP_EOL;
        }
        $select = '<select id="it_option_1" class="it_option">'.PHP_EOL;
        $select .= '<option value="">선택</option>'.PHP_EOL;
        for($i=0; $row=sql_fetch_array($result); $i++) {
            if($row['io_price'] >= 0)
                $price = '  + '.number_format($row['io_price']).'원';
            else
                $price = '   '.number_format($row['io_price']).'원';
            if($row['io_stock_qty'] < 1)
                $soldout = '  [품절]';
            else
                $soldout = '';
            /*$select .= '<input type="radio" name="it_supply" id="it_supply" value="'.$row['io_id'].','.$row['io_price'].','.$row['io_id'].$price.$soldout.'<br>';*/ 
            $select .= '<option value="'.$row['io_id'].','.$row['io_price'].','.$row['io_stock_qty'].'">'.$row['io_id'].$price.$soldout.'</option>'.PHP_EOL;
        }
        $select .= '</select>'.PHP_EOL;
        
        if($is_div === 'div') {
            $str .= '<span>'.$select.'</span>'.PHP_EOL;
            $str .= '</div>'.PHP_EOL;
        } else {
            $str .= '<td>'.$select.'</td>'.PHP_EOL;
            $str .= '</tr>'.PHP_EOL;
        }
    }
    return $str;
}

 

shop.js


 $(document).on("click", "select.it_option", function(e) {
        var sel_count = $("select.it_option").length;
        var idx = $("select.it_option").index($(this));
        var code = e.keyCode;
        var val = $(this).val();
        option_add = false;
        if(code == 13 && sel_count == idx + 1) {
            if(val == "")
                return;
            sel_option_process(true);
        }
    });
    if(isAndroid) {
        $(document).on("touchend", "select.it_option", function() {
            option_add = true;
        });
    } else {
        var it_option_events = isSafari ? "mousedown" : "mouseup";
        $(document).on(it_option_events, "select.it_option", function(e) {
            option_add = true;
        });
    }
    $(document).on("click", "select.it_option button", function() {
        var sel_count = $("select.it_option").length,
            idx = $("select.it_option button").index($(this)),
            val = $(this).val(),
            it_id = $("input[name='it_id[]']").val(),
            post_url = (typeof g5_shop_url !== "undefined") ? g5_shop_url+"/itemoption.php" : "./itemoption.php",
            $this = $(this),
            op_0_title = $this.find("option:eq(0)").text();
        // 선택값이 없을 경우 하위 옵션은 disabled
        if(val == "") {
            $("select.it_option:gt("+idx+")").val("").attr("disabled", true);
            return;
        }
        $this.trigger("select_it_option_change", [$this]);
        // 하위선택옵션로드
        if(sel_count > 1 && (idx + 1) < sel_count) {
            var opt_id = "";
            // 상위 옵션의 값을 읽어 옵션id 만듬
            if(idx > 0) {
                $("select.it_option:lt("+idx+")").each(function() {
                    if(!opt_id)
                        opt_id = $(this).val();
                    else
                        opt_id += chr(30)+$(this).val();
                });
                opt_id += chr(30)+val;
            } else if(idx == 0) {
                opt_id = val;
            }
            $.post(
                post_url,
                { it_id: it_id, opt_id: opt_id, idx: idx, sel_count: sel_count, op_title : op_0_title },
                function(data) {
                    $("select.it_option").eq(idx+1).empty().html(data).attr("disabled", false);
                    // select의 옵션이 변경됐을 경우 하위 옵션 disabled
                    if(idx+1 < sel_count) {
                        var idx2 = idx + 1;
                        $("select.it_option:gt("+idx2+")").val("").attr("disabled", true);
                    }
                    $this.trigger("select_it_option_post", [$this, idx, sel_count, data]);
                }
            );
        } else if((idx + 1) == sel_count) { // 선택옵션처리
            if(option_add && val == "")
                return;
            var info = val.split(",");
            // 재고체크
            if(parseInt(info[2]) < 1) {
                alert("선택하신 선택옵션상품은 재고가 부족하여 구매할 수 없습니다.");
                return false;
            }
            if(option_add)
                sel_option_process(true);
        }
    });

이 질문에 댓글 쓰기 :

답변 2

스크립트 옵션 체크부분을 select방식으로 된걸 버튼옵션으로 변경하시고 체크처리되는 부분을 디버깅으로 체크하셔서 수정처리 해야 합니다.

radio로 구성해서 css를 구성해 보는 것도 좋을 듯 합니다.

참고 : https://stackoverflow.com/questions/16242980/making-radio-buttons-look-like-buttons-instead

지금 버튼으로 만드신 구간에 input radio로 바꾸고 name으로 묶으시고 css를 버튼느낌으로 하시면 될 듯 한데요;;
지금 올려주신 내용을 짐작해보면 shop.js구간하고 물리는 것도 없을듯하구요

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

회원로그인

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