카운트 기능 추가
본문
안녕하세요
영카트의 상품 소개 페이지에 있는 수량 기능을 동일한 페이지에 추가로 넣고 싶어서 문의드립니다.
아래의 체크한 부분만 추가로 몇개를 더 넣고 싶은데 많은 파일들에 연동이 되어있는 것 같아 일단 간단하게 질문 올립니다.
관리자와 연동되는 부분은 따로 개발을 맡겨야 할 것 같고 일단 증감 기능만 제대로 되게 구현을 하고 싶은데 코드만 긁어온 상태라 당연히 안되네요...ㅠㅠ
반복해서 넣은 코드만 올려놓습니다.
<div class="opt_count">
<label for="ct_qty_<?php echo $i; ?>" class="sound_only">수량</label>
<button type="button" class="sit_qty_minus"><i class="fa fa-minus" aria-hidden="true"></i><span class="sound_only">감소</span></button>
<input type="text" name="ct_qty[<?php echo $it_id; ?>][]" value="<?php echo $it['it_buy_min_qty']; ?>" id="ct_qty_<?php echo $i; ?>" class="num_input" size="5">
<button type="button" class="sit_qty_plus"><i class="fa fa-plus" aria-hidden="true"></i><span class="sound_only">증가</span></button>
<!-- <span class="sit_opt_prc">+0원</span> -->
</div>
전체적으로 수정해야 할 부분이 많을까요?
따로 코드를 찾아서 넣는게 더 나을지 문의드립니다.
도움 주시면 감사하겠습니다.
답변 1
class="sit_qty_minus"
class="sit_qty_plus"
위의 부분을 클릭했을 때 연동되는 자바스크립트가 있습니다.
그 부분들을 맞게끔 바꾸셔야 합니다.
아래를 참고하세요.
<script>
jQuery(function($){
var change_name = "ct_copy_qty";
$(document).on("select_it_option_change", "select.it_option", function(e, $othis) {
var value = $othis.val(),
change_id = $othis.attr("id").replace("it_option_", "it_side_option_");
if( $("#"+change_id).length ){
$("#"+change_id).val(value).attr("selected", "selected");
}
});
$(document).on("select_it_option_post", "select.it_option", function(e, $othis, idx, sel_count, data) {
var value = $othis.val(),
change_id = $othis.attr("id").replace("it_option_", "it_side_option_");
$("select.it_side_option").eq(idx+1).empty().html(data).attr("disabled", false);
// select의 옵션이 변경됐을 경우 하위 옵션 disabled
if( (idx+1) < sel_count) {
$("select.it_side_option:gt("+(idx+1)+")").val("").attr("disabled", true);
}
});
$(document).on("add_sit_sel_option", "#sit_sel_option", function(e, opt) {
opt = opt.replace('name="ct_qty[', 'name="'+change_name+'[');
var $opt = $(opt);
$opt.removeClass("sit_opt_list");
$("input[type=hidden]", $opt).remove();
$(".sit_sel_option .sit_opt_added").append($opt);
});
$(document).on("price_calculate", "#sit_tot_price", function(e, total) {
$(".sum_section .sit_tot_price").empty().html("<span>총 금액 </span><strong>"+number_format(String(total))+"</strong> 원");
});
$(".sit_side_option").on("change", "select.it_side_option", function(e) {
var idx = $("select.it_side_option").index($(this)),
value = $(this).val();
if( value ){
if (typeof(option_add) != "undefined"){
option_add = true;
}
$("select.it_option").eq(idx).val(value).attr("selected", "selected").trigger("change");
}
});
$(".sit_side_option").on("change", "select.it_side_supply", function(e) {
var value = $(this).val();
if( value ){
if (typeof(supply_add) != "undefined"){
supply_add = true;
}
$("select.it_supply").val(value).attr("selected", "selected").trigger("change");
}
});
$(".sit_opt_added").on("click", "button", function(e){
e.preventDefault();
var $this = $(this),
mode = $this.text(), // <span class="sound_only">증가</span> 이 부분의 텍스트를 가지고 와서 증가, 감소, 삭제를 반영하여 계산하는 것입니다.
$sit_sel_el = $("#sit_sel_option"),
li_parent_index = $this.closest('li').index();
if( ! $sit_sel_el.length ){
alert("el 에러");
return false;
}
switch(mode) {
case "증가":
$sit_sel_el.find("li").eq(li_parent_index).find(".sit_qty_plus").trigger("click");
break;
case "감소":
$sit_sel_el.find("li").eq(li_parent_index).find(".sit_qty_minus").trigger("click");
break;
case "삭제":
$sit_sel_el.find("li").eq(li_parent_index).find(".sit_opt_del").trigger("click");
break;
}
});
$(document).on("sit_sel_option_success", "#sit_sel_option li button", function(e, $othis, mode, this_qty) {
var ori_index = $othis.closest('li').index();
switch(mode) {
case "증가":
case "감소":
$(".sit_opt_added li").eq(ori_index).find("input[name^=ct_copy_qty]").val(this_qty);
break;
case "삭제":
$(".sit_opt_added li").eq(ori_index).remove();
break;
}
});
$(document).on("change_option_qty", "input[name^=ct_qty]", function(e, $othis, val, force_val) {
var $this = $(this),
ori_index = $othis.closest('li').index(),
this_val = force_val ? force_val : val;
$(".sit_opt_added").find("li").eq(ori_index).find("input[name^="+change_name+"]").val(this_val);
});
$(".sit_opt_added").on("keyup paste", "input[name^="+change_name+"]", function(e) {
var $this = $(this),
val= $this.val(),
this_index = $("input[name^="+change_name+"]").index(this);
$("input[name^=ct_qty]").eq(this_index).val(val).trigger("keyup");
});
$(".sit_order_btn").on("click", "button", function(e){
e.preventDefault();
var $this = $(this);
if( $this.hasClass("sit_btn_cart") ){
$("#sit_ov_btn .sit_btn_cart").trigger("click");
} else if ( $this.hasClass("sit_btn_buy") ) {
$("#sit_ov_btn .sit_btn_buy").trigger("click");
}
});
if (window.location.href.split("#").length > 1) {
let id = window.location.href.split("#")[1];
$("#btn_" + id).trigger("click");
};
});
</script>
