영카트 선택옵션 셀렉트박스를 버튼으로 변환
본문
안녕하세요!!
영카트로 쇼핑몰 제작중인데 선택옵션 셀렉트박스를 버튼으로 변경하려고 합니다.
지금 버튼으로 변경은 되었는데
버튼 클릭 시 값이 넘어가지 않고 선택하라는 알림창이 뜹니다.
어떻게 해야 할까요..?
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
radio로 바꾸는건 가능한가요..?
지금 버튼으로 만드신 구간에 input radio로 바꾸고 name으로 묶으시고 css를 버튼느낌으로 하시면 될 듯 한데요;;
지금 올려주신 내용을 짐작해보면 shop.js구간하고 물리는 것도 없을듯하구요
답변을 작성하시기 전에 로그인 해주세요.
