영카트 선택옵션 셀렉트박스를 버튼으로 변환
kooky
2년 전
조회 1,916
안녕하세요!!
영카트로 쇼핑몰 제작중인데 선택옵션 셀렉트박스를 버튼으로 변경하려고 합니다.
지금 버튼으로 변경은 되었는데
버튼 클릭 시 값이 넘어가지 않고 선택하라는 알림창이 뜹니다.
어떻게 해야 할까요..?
shop.lib.php
</p>
<p>function get_item_options($it_id, $subject, $is_div='', $is_first_option_title='')
{
global $g5;</p>
<p> if(!$it_id || !$subject)
return '';</p>
<p> $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 '';</p>
<p> $str = '';
$subj = explode(',', $subject);
$subj_count = count($subj);</p>
<p> if($subj_count > 1) {
$options = array();</p>
<p> // 옵션항목 배열에 저장
for($i=0; $row=sql_fetch_array($result); $i++) {
$opt_id = explode(chr(30), $row['io_id']);</p>
<p> for($k=0; $k<$subj_count; $k++) {
if(! (isset($options[$k]) && is_array($options[$k])))
$options[$k] = array();</p>
<p> if(isset($opt_id[$k]) && $opt_id[$k] && !in_array($opt_id[$k], $options[$k]))
$options[$k][] = $opt_id[$k];
}
}</p>
<p> // 옵션선택목록 만들기
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"';</p>
<p> 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;</p>
<p> $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;</p>
<p> 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;
}</p>
<p> $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']).'원';</p>
<p> 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.'
';*/
$select .= '<option value="'.$row['io_id'].','.$row['io_price'].','.$row['io_stock_qty'].'">'.$row['io_id'].$price.$soldout.'</option>'.PHP_EOL;</p>
<p> }
$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;
}</p>
<p> }</p>
<p> return $str;
}</p>
<p>
shop.js
</p>
<p> $(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();</p>
<p> option_add = false;
if(code == 13 && sel_count == idx + 1) {
if(val == "")
return;</p>
<p> sel_option_process(true);
}
});</p>
<p> if(isAndroid) {
$(document).on("touchend", "select.it_option", function() {
option_add = true;
});
} else {
var it_option_events = isSafari ? "mousedown" : "mouseup";</p>
<p> $(document).on(it_option_events, "select.it_option", function(e) {
option_add = true;
});
}</p>
<p> $(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();</p>
<p> // 선택값이 없을 경우 하위 옵션은 disabled
if(val == "") {
$("select.it_option:gt("+idx+")").val("").attr("disabled", true);
return;
}</p>
<p> $this.trigger("select_it_option_change", [$this]);</p>
<p> // 하위선택옵션로드
if(sel_count > 1 && (idx + 1) < sel_count) {
var opt_id = "";</p>
<p> // 상위 옵션의 값을 읽어 옵션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();
});</p>
<p> opt_id += chr(30)+val;
} else if(idx == 0) {
opt_id = val;
}</p>
<p> $.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);</p>
<p> // select의 옵션이 변경됐을 경우 하위 옵션 disabled
if(idx+1 < sel_count) {
var idx2 = idx + 1;
$("select.it_option:gt("+idx2+")").val("").attr("disabled", true);
}</p>
<p> $this.trigger("select_it_option_post", [$this, idx, sel_count, data]);
}
);
} else if((idx + 1) == sel_count) { // 선택옵션처리
if(option_add && val == "")
return;</p>
<p> var info = val.split(",");
// 재고체크
if(parseInt(info[2]) < 1) {
alert("선택하신 선택옵션상품은 재고가 부족하여 구매할 수 없습니다.");
return false;
}</p>
<p> if(option_add)
sel_option_process(true);
}
});</p>
<p>
댓글을 작성하려면 로그인이 필요합니다.
답변 2개
2년 전
radio로 구성해서 css를 구성해 보는 것도 좋을 듯 합니다.
참고 : https://stackoverflow.com/questions/16242980/making-radio-buttons-look-like-buttons-instead
로그인 후 평가할 수 있습니다
답변에 대한 댓글 2개
k
kooky
2년 전
radio로 바꾸는건 가능한가요..?
�
개노미
2년 전
지금 버튼으로 만드신 구간에 input radio로 바꾸고 name으로 묶으시고 css를 버튼느낌으로 하시면 될 듯 한데요;;
지금 올려주신 내용을 짐작해보면 shop.js구간하고 물리는 것도 없을듯하구요
지금 올려주신 내용을 짐작해보면 shop.js구간하고 물리는 것도 없을듯하구요
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인