firstgarden/firstgarden-web-gnu
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Activity

쇼핑몰: #195 상품상세 선택/추가 옵션 마크업 작업 중 임시보류, 구조 구상 중

Browse Source
This commit is contained in:
whitedot
2013-05-24 14:40:20 +09:00
parent f594b2ec66
commit d10746b126
2 changed files with 164 additions and 160 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
css/default_shop.css
View File

@ -485,10 +485,10 @@ input.required:focus {border:1px solid #b8c9c2;background:#21272e !important;col
/* 상품 상세보기 - 간략정보 및 구매기능 */ /* 상품 상세보기 - 간략정보 및 구매기능 */
#sit_ov {position:relative;float:right;padding:50px 15px 15px;width:358px;height:auto !important;height:355px;min-height:355px} #sit_ov {position:relative;float:right;padding:50px 15px 15px;width:358px;height:auto !important;height:355px;min-height:355px}
#sit_ov h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}
#sit_title {display:inline-block;margin:0 0 5px;font-size:1.3em} #sit_title {margin:0 0 5px;font-size:1.3em}
#sit_desc {display:inline-block;margin:0 0 10px;color:#999} #sit_desc {margin:0 0 5px;padding:0;color:#999}
#sit_opt_info {/* sound_only 처리 필요 */}
.sit_icon {display:block;margin:5px 0 0} .sit_icon {display:block;margin:5px 0 0}
.sit_icon img {margin:0 1px 0 0;border:1px solid #fff} .sit_icon img {margin:0 1px 0 0;border:1px solid #fff}

318
shop/item.php
View File

@ -238,9 +238,14 @@ else
<?php //echo it_name_icon($it, false, 0); ?> <?php //echo it_name_icon($it, false, 0); ?>
<section id="sit_ov"> <section id="sit_ov">
<h2>상품간략정보 및 구매기능</h2> <h2 id="sit_title"><?php echo stripslashes($it['it_name']); ?></h2>
<strong id="sit_title"><?php echo stripslashes($it['it_name']); ?></strong><br> <p id="sit_desc"><?php echo $it['it_basic']; ?></p>
<span id="sit_desc"><?php echo $it['it_basic']; ?></span> <!-- ########## 선택옵션/추가옵션 갯수를 사전에 알려줍니다. - 지운아빠 2013-05-24 -->
<!-- 스크린리더에서만 출력되도록 할 예정 -->
<p id="sit_opt_info">
상품 기본옵션 n 가지, <!-- 추가옵션이 있을 때만 -->추가옵션 n 가지<!-- 끝 -->
</p>
<!-- ########## 선택옵션/추가옵션 알려주기 끝 -->
<?php if ($score = get_star_image($it['it_id'])) { ?> <?php if ($score = get_star_image($it['it_id'])) { ?>
<div id="sit_star_sns"> <div id="sit_star_sns">
<?php <?php
@ -283,6 +288,7 @@ else
</tr> </tr>
<?php } else { // 전화문의가 아닐 경우?> <?php } else { // 전화문의가 아닐 경우?>
<?php if ($it['it_cust_price']) { // 1.00.03?> <?php if ($it['it_cust_price']) { // 1.00.03?>
<tr> <tr>
<th scope="row"><label for="disp_cust_price">시중가격</label></th> <th scope="row"><label for="disp_cust_price">시중가격</label></th>
@ -290,7 +296,7 @@ else
<input type="text" name="disp_cust_price" value="<?php echo number_format($it['it_cust_price']); ?>" id="disp_cust_price" readonly class="sit_ov_ro" size="8"> 원 <input type="text" name="disp_cust_price" value="<?php echo number_format($it['it_cust_price']); ?>" id="disp_cust_price" readonly class="sit_ov_ro" size="8"> 원
</td> </td>
</tr> </tr>
<?php } // 전화문의 끝?> <?php } ?>
<tr> <tr>
<th scope="row"><label for="disp_sell_price">판매가격</label></th> <th scope="row"><label for="disp_sell_price">판매가격</label></th>
@ -327,157 +333,7 @@ else
echo get_item_supply($it['it_id'], $it['it_supply_subject']); echo get_item_supply($it['it_id'], $it['it_supply_subject']);
?> ?>
<tr> <!-- ########## 삭제될 내용 - 지운아빠 2013-05-24 -->
<td colspan="2">
<div id="sit_sel_option"></div>
<script>
$(function() {
// 선택옵션
$("select[name='it_option[]']").change(function() {
var sel_count = $("select[name='it_option[]']").size();
var idx = $("select[name='it_option[]']").index($(this));
var val = $(this).val();
// 선택값이 없을 경우 하위 옵션은 disabled
if(val == "") {
$("select[name='it_option[]']:gt("+idx+")").val("").attr("disabled", true);
return;
}
// 하위선택옵션로드
if(sel_count > 1 && (idx + 1) < sel_count) {
var opt_id = "";
// 상위 옵션의 값을 읽어 옵션id 만듬
if(idx > 0) {
$("select[name='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(
"<?php echo G4_SHOP_URL; ?>/itemoption.php",
{ it_id: "<?php echo $it['it_id']; ?>", opt_id: opt_id, idx: idx, sel_count: sel_count },
function(data) {
$("select[name='it_option[]']").eq(idx+1).empty().html(data).attr("disabled", false);
// select의 옵션이 변경됐을 경우 하위 옵션 disabled
if(idx+1 < sel_count) {
var idx2 = idx + 1;
$("select[name='it_option[]']:gt("+idx2+")").val("").attr("disabled", true);
}
}
);
} else if((idx + 1) == sel_count) { // 선택옵션처리
var info = val.split(",");
// 재고체크
if(parseInt(info[2]) < 1) {
alert("선택하신 선택옵션상품은 재고가 부족하여 구매할 수 없습니다.");
return false;
}
var id = "";
var value, sel_opt, item, price, stock, run_error = false;
var option = sep = "";
$("select[name='it_option[]']").each(function(index) {
value = $(this).val();
item = $(this).closest("tr").find("th label").text();
if(!value) {
run_error = true;
return false;
}
// 옵션선택정보
sel_opt = value.split(",")[0];
if(id == "") {
id = sel_opt;
} else {
id += chr(30)+sel_opt;
sep = " / ";
}
option += sep + item + ":" + sel_opt;
});
if(run_error) {
alert(item+"을(를) 선택해 주십시오.");
return false;
}
price = info[1];
stock = info[2];
add_sel_option(0, id, option, price, stock);
}
});
// 추가옵션
$("select[name='it_supply[]']").change(function() {
var val = $(this).val();
var info = val.split(",");
// 재고체크
if(parseInt(info[2]) < 1) {
alert("선택하신 추가옵션상품은 재고가 부족하여 구매할 수 없습니다.");
return false;
}
var item = $(this).closest("tr").find("th label").text();
var id = item+chr(30)+info[0];
var option = item+":"+info[0];
var price = info[1];
var stock = info[2];
add_sel_option(1, id, option, price, stock);
});
});
function add_sel_option(type, id, option, price, stock)
{
var opt = "";
var li_class = "sit_opt_list";
if(type)
li_class = "sit_spl_list";
var opt_prc;
if(parseInt(price) >= 0)
opt_prc = "(+"+number_format(String(price))+"원)";
else
opt_prc = "("+number_format(String(price))+"원)";
opt += "<li class=\""+li_class+"\">\n";
opt += "<input type=\"hidden\" name=\"io_type[]\" value=\""+type+"\">\n";
opt += "<input type=\"hidden\" name=\"io_id[]\" value=\""+id+"\">\n";
opt += "<input type=\"hidden\" name=\"io_value[]\" value=\""+option+"\">\n";
opt += "<input type=\"hidden\" name=\"io_price[]\" value=\""+price+"\">\n";
opt += "<input type=\"hidden\" name=\"io_stock[]\" value=\""+stock+"\">\n";
opt += "<span class=\"sit_opt_subj\">"+option+"</span>\n";
opt += "<span class=\"sit_opt_prc\">"+opt_prc+"</span>\n";
opt += "<input type=\"text\" name=\"ct_qty[]\" value=\"1\" size=\"5\">\n";
opt += "<button type=\"button\" class=\"sit_qty_plus\">증가</button>\n";
opt += "<button type=\"button\" class=\"sit_qty_minus\">감소</button>\n";
opt += "<button type=\"button\" class=\"sit_opt_del\">삭제</button>\n";
opt += "</li>\n";
if($("#sit_sel_option > ul").size() < 1) {
$("#sit_sel_option").html("<ul></ul>");
$("#sit_sel_option > ul").html(opt);
} else{
$("#sit_sel_option > ul li:last").after(opt);
}
}
</script>
</td>
</tr>
<tr> <tr>
<th scope="row">수량</th> <th scope="row">수량</th>
<td> <td>
@ -486,12 +342,160 @@ else
<button type="button" onclick="javascript:qty_add(-1);" class="btn_frmline"><span class="sound_only">수량 1개 </span>감소</button> <button type="button" onclick="javascript:qty_add(-1);" class="btn_frmline"><span class="sound_only">수량 1개 </span>감소</button>
</td> </td>
</tr> </tr>
<?php } ?> <!-- ########## 삭제될 내용 끝 -->
<?php } // 전화문의 아닐 때 끝 ?>
<?php } ?> <?php } // 갤러리 형식이 아닐 때 끝 ?>
</tbody> </tbody>
</table> </table>
<div id="sit_sel_option"></div>
<script>
$(function() {
// 선택옵션
$("select[name='it_option[]']").change(function() {
var sel_count = $("select[name='it_option[]']").size();
var idx = $("select[name='it_option[]']").index($(this));
var val = $(this).val();
// 선택값이 없을 경우 하위 옵션은 disabled
if(val == "") {
$("select[name='it_option[]']:gt("+idx+")").val("").attr("disabled", true);
return;
}
// 하위선택옵션로드
if(sel_count > 1 && (idx + 1) < sel_count) {
var opt_id = "";
// 상위 옵션의 값을 읽어 옵션id 만듬
if(idx > 0) {
$("select[name='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(
"<?php echo G4_SHOP_URL; ?>/itemoption.php",
{ it_id: "<?php echo $it['it_id']; ?>", opt_id: opt_id, idx: idx, sel_count: sel_count },
function(data) {
$("select[name='it_option[]']").eq(idx+1).empty().html(data).attr("disabled", false);
// select의 옵션이 변경됐을 경우 하위 옵션 disabled
if(idx+1 < sel_count) {
var idx2 = idx + 1;
$("select[name='it_option[]']:gt("+idx2+")").val("").attr("disabled", true);
}
}
);
} else if((idx + 1) == sel_count) { // 선택옵션처리
var info = val.split(",");
// 재고체크
if(parseInt(info[2]) < 1) {
alert("선택하신 선택옵션상품은 재고가 부족하여 구매할 수 없습니다.");
return false;
}
var id = "";
var value, sel_opt, item, price, stock, run_error = false;
var option = sep = "";
$("select[name='it_option[]']").each(function(index) {
value = $(this).val();
item = $(this).closest("tr").find("th label").text();
if(!value) {
run_error = true;
return false;
}
// 옵션선택정보
sel_opt = value.split(",")[0];
if(id == "") {
id = sel_opt;
} else {
id += chr(30)+sel_opt;
sep = " / ";
}
option += sep + item + ":" + sel_opt;
});
if(run_error) {
alert(item+"을(를) 선택해 주십시오.");
return false;
}
price = info[1];
stock = info[2];
add_sel_option(0, id, option, price, stock);
}
});
// 추가옵션
$("select[name='it_supply[]']").change(function() {
var val = $(this).val();
var info = val.split(",");
// 재고체크
if(parseInt(info[2]) < 1) {
alert("선택하신 추가옵션상품은 재고가 부족하여 구매할 수 없습니다.");
return false;
}
var item = $(this).closest("tr").find("th label").text();
var id = item+chr(30)+info[0];
var option = item+":"+info[0];
var price = info[1];
var stock = info[2];
add_sel_option(1, id, option, price, stock);
});
});
function add_sel_option(type, id, option, price, stock)
{
var opt = "";
var li_class = "sit_opt_list";
if(type)
li_class = "sit_spl_list";
var opt_prc;
if(parseInt(price) >= 0)
opt_prc = "(+"+number_format(String(price))+"원)";
else
opt_prc = "("+number_format(String(price))+"원)";
opt += "<li class=\""+li_class+"\">\n";
opt += "<input type=\"hidden\" name=\"io_type[]\" value=\""+type+"\">\n";
opt += "<input type=\"hidden\" name=\"io_id[]\" value=\""+id+"\">\n";
opt += "<input type=\"hidden\" name=\"io_value[]\" value=\""+option+"\">\n";
opt += "<input type=\"hidden\" name=\"io_price[]\" value=\""+price+"\">\n";
opt += "<input type=\"hidden\" name=\"io_stock[]\" value=\""+stock+"\">\n";
opt += "<span class=\"sit_opt_subj\">"+option+"</span>\n";
opt += "<span class=\"sit_opt_prc\">"+opt_prc+"</span>\n";
opt += "<input type=\"text\" name=\"ct_qty[]\" value=\"1\" size=\"5\">\n";
opt += "<button type=\"button\" class=\"sit_qty_plus\">증가</button>\n";
opt += "<button type=\"button\" class=\"sit_qty_minus\">감소</button>\n";
opt += "<button type=\"button\" class=\"sit_opt_del\">삭제</button>\n";
opt += "</li>\n";
if($("#sit_sel_option > ul").size() < 1) {
$("#sit_sel_option").html('<ul id="sit_opt_added"></ul>');
$("#sit_sel_option > ul").html(opt);
} else{
$("#sit_sel_option > ul li:last").after(opt);
}
}
</script>
<ul id="sit_ov_btn"> <ul id="sit_ov_btn">
<?php if (!$it['it_tel_inq'] && !$it['it_gallery']) { ?> <?php if (!$it['it_tel_inq'] && !$it['it_gallery']) { ?>
<li><a href="javascript:fitemcheck(document.fitem, 'direct_buy');" id="sit_btn_buy">바로구매</a></li> <li><a href="javascript:fitemcheck(document.fitem, 'direct_buy');" id="sit_btn_buy">바로구매</a></li>