2026, 새로운 도약을 시작합니다.

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

안녕하세요!!

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

1935338123_1673915200.9407.png

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

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

어떻게 해야 할까요..?

shop.lib.php

Copy


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= 0)

                $price = '  + '.number_format($row['io_price']).'원';

            else

                $price = '   '.number_format($row['io_price']).'원';

            if($row['io_stock_qty']  1)

                $soldout = '  [품절]';

            else

                $soldout = '';

            /*$select .= '

shop.js

Copy


 $(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개

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

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

로그인 후 평가할 수 있습니다

답변에 대한 댓글 2개

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

댓글을 작성하려면 로그인이 필요합니다.

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

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인
🐛 버그신고