이 쿠폰 부분은 프로젝트 맨처음에 구현해서 미숙한 채로 남아있다가 막판에 다 뒤집어 엎었는데 단순 작업이 힘들면서도 마지막에 내 생각대로 잘 구현된 모습을 보니 그 노가다가 헛되지 않았음을 깨닫고 감동의 눈물을 흘렸다.
$.ajax({
type:"get",
url:"/coupon/attrcou",
success:function(coulist){
var htmls=""
var price=""
if(coulist==0){
htmls+="보유한 쿠폰이 없습니다."
} else {
htmls+="<select class=\"coupon-select\" aria-label=\"Default select example\">"
htmls+=" <option selected disabled>쿠폰을 선택해주세요</option>"
htmls+=" <option value=\"0\">쿠폰 사용 안함</option>"
$(coulist).each(function(){
htmls+="<option value="+this.couponNo+">"+this.couponName+" / 할인율 "+this.discountRate+"%</option>"
})
htmls+="</select>"
price+="<div class=\"col-3\"><h5><strong>할인금액</strong></h5></div>"
price+="<div class=\"col-9\"><span id=\"discountPrice\">0</span>원</div>"
}
$("#coupon").html(htmls);
$("#discount").html(price);
}
})
var originalPrice = $("#originalPrice").val();
$("#coupon").change(function(){
if($(".coupon-select option:selected").val()=='0'){
$("#priceSection").hide();
var originPrice = $("#originalPrice").val();
$("#finalprice").html(originPrice);
$("input[name=lastPrice]").val(originPrice);
} else {
$("#priceSection").show();
var discountRate = $(".coupon-select option:selected").text().slice(-3,-1).trim();
var discountPrice = Math.floor(originalPrice*(discountRate/100)/10)*10;
var finalPrice = originalPrice-discountPrice
var couponNo = $("select").val();
$("#discountPrice").html("<strong>-<span style=\"color:red;\">"+discountPrice+"</span></strong>");
$("#finalprice").html(finalPrice+"원");
$("input[name=lastPrice]").val(finalPrice);
$("input[name=\"couponNo\"]").val(couponNo);
}
})
이 부분은 왕초보 개발지망생인 내가 직접 구현한 부분이라 더 간단하고 효율적인 방법이 있을 것이라 생각한다. 구현하면서 고민을 많이 했는데 그 과정자체가 너무 재밌었다