1607 lines
73 KiB
Plaintext
1607 lines
73 KiB
Plaintext
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
|
|
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
|
|
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
|
|
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
|
|
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
|
|
<%@ taglib prefix="ui" uri="http://www.winbit.kr/ctl/ui"%>
|
|
<%@ taglib prefix="f" uri="/WEB-INF/tlds/f.tld"%>
|
|
|
|
<%--
|
|
Class Name : SpbkPtinR.jsp.jsp
|
|
Description : 장바구니 조회
|
|
Modification Information
|
|
|
|
수정일 수정자 수정내용
|
|
------- -------- ---------------------------
|
|
2024-04-11 김혜인 최초 생성
|
|
--%>
|
|
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
<head>
|
|
<spring:eval expression="@environment.getProperty('spring.profiles.active')" var="profiles"/>
|
|
<c:if test="${profiles eq 'stage' && originalHost eq 'new.chamdahan.com'}">
|
|
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" />
|
|
</c:if>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>장바구니 조회</title>
|
|
|
|
<%-- 공통 include --%>
|
|
<jsp:include page="/WEB-INF/views/comm/Include.jsp"/>
|
|
|
|
<!--************************************ 네이버페이 시작 *********************************-->
|
|
<!--[ 네이버 구매하기버튼 스크립트 ]-->
|
|
<c:if test="${profiles eq 'stage'}">
|
|
<script type="text/javascript" src="https://test-pay.naver.com/customer/js/naverPayButton.js" charset="UTF-8"></script>
|
|
</c:if>
|
|
<c:if test="${profiles ne 'stage'}">
|
|
<script type="text/javascript" src="http://test-pay.naver.com/customer/js/naverPayButton.js" charset="UTF-8"></script>
|
|
</c:if>
|
|
<!--************************************ 네이버페이 종료 *********************************-->
|
|
|
|
<script>
|
|
$(document).ready(function() {
|
|
fn_init();
|
|
|
|
fn_event();
|
|
});
|
|
|
|
/* ********************************************************
|
|
* 초기 설정
|
|
**********************************************************/
|
|
const fn_init = function() {
|
|
localStorage.clear();
|
|
|
|
fn_get_spbk_goods_list();
|
|
}
|
|
|
|
/* ********************************************************
|
|
* 이벤트 설정
|
|
**********************************************************/
|
|
const fn_event = function() {
|
|
/* 많이 구매한 상품 슬라이드 이벤트 */
|
|
$('.four-row-slick').slick({
|
|
slidesToShow: 4,
|
|
slidesToScroll: 4,
|
|
speed: 900,
|
|
infinite: true,
|
|
prevArrow: $('.four-row-slick__prev'),
|
|
nextArrow: $('.four-row-slick__next'),
|
|
});
|
|
|
|
/* 장바구니 전체 선택 이벤트 */
|
|
$('#cartCheckAll').on('click', function () {
|
|
if ($('#cartCheckAll').is(':checked')) {
|
|
$('.cartCheck').prop('checked', true);
|
|
} else {
|
|
$('.cartCheck').prop('checked', false);
|
|
}
|
|
});
|
|
|
|
/* 장바구니 상품 선택 이벤트 */
|
|
$(document).on('click', '.cartCheck', function() {
|
|
if ($('.cartItem').length === $('.cartCheck:checked').length) {
|
|
$('#cartCheckAll').prop('checked', true);
|
|
} else {
|
|
$('#cartCheckAll').prop('checked', false);
|
|
}
|
|
});
|
|
|
|
/* 선택 삭제 버튼 선택 이벤트 */
|
|
$('#btnChoiceDeleteGoods').on('click', function () {
|
|
let goodsList = [];
|
|
|
|
$('.cartCheck:checked').each(function(){
|
|
const tr = $(this).closest('tr');
|
|
|
|
const goodsInnb = $(tr).find('.goodsInnb').val();
|
|
const goodsOptnInnb = $(tr).find('.goodsOptnInnb').val();
|
|
|
|
let goods = {
|
|
'goodsInnb':parseInt(goodsInnb),
|
|
'goodsOptnInnb':parseInt(goodsOptnInnb)
|
|
};
|
|
|
|
goodsList.push(goods);
|
|
});
|
|
|
|
if (goodsList.length === 0) {
|
|
alert('삭제하실 상품을 선택해 주십시요.');
|
|
|
|
return false;
|
|
}
|
|
|
|
if (!confirm('선택하신 상품' + goodsList.length + '개를 <spring:message code="confirm.common.delete"/>')) {
|
|
return false;
|
|
}
|
|
|
|
fn_delete_spbk_goods(goodsList);
|
|
});
|
|
|
|
/* 삭제 버튼 선택 이벤트 */
|
|
$(document).on('click', '.delete-goods', function() {
|
|
if (!confirm('상품을 <spring:message code="confirm.common.delete"/>')) {
|
|
return false;
|
|
}
|
|
|
|
const tr = $(this).closest('tr');
|
|
|
|
const goodsInnb = $(tr).find('.goodsInnb').val();
|
|
const goodsOptnInnb = $(tr).find('.goodsOptnInnb').val();
|
|
const optnTy = $(tr).find('.optnTy').val();
|
|
const optnEssntlAt = $(tr).find('.optnEssntlAt').val();
|
|
|
|
let goods = {
|
|
'goodsInnb': parseInt(goodsInnb),
|
|
'goodsOptnInnb': parseInt(goodsOptnInnb)
|
|
};
|
|
|
|
const addOptn = $('#cartOrderList').find('tr input[class="optnRelateNb"][value="' + goodsInnb + '"]');
|
|
|
|
//추가구성옵션이 존재하고 삭제하는 대상이 추가구성옵션이 아닐 경우
|
|
if (!fn_is_empty(addOptn) && fn_nvl(addOptn.val().trim(),0) === goodsInnb && optnTy !== '03') {
|
|
alert('해당 상품을 삭제 시 연관되는 추가상품도 같이 삭제됩니다.');
|
|
|
|
const tr = $(addOptn).closest('tr');
|
|
|
|
const goodsInnb = $(tr).find('.goodsInnb').val();
|
|
|
|
|
|
let deleteGoodsArr = []
|
|
tr.each(function () {
|
|
let goods = {
|
|
'goodsInnb': parseInt(goodsInnb),
|
|
'goodsOptnInnb': parseInt($(this).find('.goodsOptnInnb').val())
|
|
};
|
|
|
|
deleteGoodsArr.push(goods)
|
|
})
|
|
|
|
|
|
fn_delete_spbk_goods(deleteGoodsArr, true);
|
|
|
|
addOptn.closest('tr').remove();
|
|
}
|
|
|
|
//삭제하는 대상이 추가구성옵션일 경우
|
|
// 필수 아닐 경우 삭제가능
|
|
// 필수 일 경우 alert
|
|
if(optnTy ==='03' && optnEssntlAt ==='Y'){
|
|
alert('해당 상품은 필수추가옵션으로 본상품을 먼저 삭제해 주세요')
|
|
return false;
|
|
}
|
|
|
|
fn_delete_spbk_goods([goods]);
|
|
});
|
|
|
|
/* 수량 변경 버튼 선택 이벤트 */
|
|
$(document).on('blur', '.product-count__amount-number', function () {
|
|
const tr = $(this).closest('tr');
|
|
const goodsQy = $(this)
|
|
if(fn_is_empty(goodsQy.val()) || isNaN(goodsQy.val())){
|
|
goodsQy.val('1');
|
|
return false;
|
|
}
|
|
|
|
const qy = parseInt(goodsQy.val());
|
|
|
|
if (qy <= 0) {
|
|
alert('상품의 최소수량은 1개 입니다.');
|
|
// fn_call_alert_modal('상품의 최소수량은 1개 입니다.');
|
|
goodsQy.val('1');
|
|
return false;
|
|
}
|
|
|
|
const goodsInnb = $(tr).find('.goodsInnb').val();
|
|
const goodsOptnInnb = $(tr).find('.goodsOptnInnb').val();
|
|
|
|
let goods = {
|
|
'goodsInnb': parseInt(goodsInnb),
|
|
'goodsOptnInnb': parseInt(goodsOptnInnb),
|
|
'qy': qy
|
|
};
|
|
|
|
fn_post_spbk_goods_qy(goods);
|
|
});
|
|
|
|
|
|
/* 수량 변경 버튼 선택 이벤트 */
|
|
$(document).on('click', '.product-count__amount-btn', function() {
|
|
const tr = $(this).closest('tr');
|
|
const dvCd = $(this).attr('id');
|
|
|
|
let qy = $(tr).find('.qy').val();
|
|
|
|
if ('plus' === dvCd) {
|
|
qy = parseInt(qy) + 1
|
|
} else {
|
|
qy = parseInt(qy) - 1
|
|
}
|
|
|
|
if (qy === 0) {
|
|
alert('상품의 최소수량은 1개 입니다.');
|
|
|
|
return false;
|
|
}
|
|
|
|
const goodsInnb = $(tr).find('.goodsInnb').val();
|
|
const goodsOptnInnb = $(tr).find('.goodsOptnInnb').val();
|
|
|
|
let goods = {
|
|
'goodsInnb': parseInt(goodsInnb),
|
|
'goodsOptnInnb': parseInt(goodsOptnInnb),
|
|
'qy': qy
|
|
};
|
|
|
|
fn_post_spbk_goods_qy(goods);
|
|
});
|
|
|
|
/* 옵션 변경 버튼 선택 이벤트 */
|
|
$(document).on('click', '.change-optn', function () {
|
|
const optn = $(this);
|
|
|
|
$.ajax({
|
|
type: 'post',
|
|
contentType: 'application/json',
|
|
data: JSON.stringify({}),
|
|
url: '<c:url value="/sopmal/ordr/selectSpbkOptnChangePopupForm"/>',
|
|
success: function (html) {
|
|
$('#option-change-pop').remove();
|
|
$('#option-change-pop-div').html(html);
|
|
|
|
const popup = $('#option-change-pop');
|
|
|
|
$(popup).modal();
|
|
$(popup).find('.select-box select').niceSelect();
|
|
|
|
fn_get_goods_optn_list(optn);
|
|
}
|
|
});
|
|
});
|
|
|
|
/* 옵션변경 팝업 > 옵션 변경 버튼 선택 이벤트 */
|
|
$(document).on('click', '#btnChangeOptn', function() {
|
|
const popup = $('#option-change-pop');
|
|
const item = $(popup).find('.product-count');
|
|
|
|
if ($(item).length === 0) {
|
|
alert('상품옵션을 선택해 주십시요.');
|
|
|
|
return false;
|
|
}
|
|
|
|
let spbkGoodsList = [];
|
|
|
|
$(item).each(function(){
|
|
const goodsInnb = $(this).find('.goodsInnb').val();
|
|
const goodsOptnInnb = $(this).find('.goodsOptnInnb').val();
|
|
const optnTy = $(this).find('.optnTy').val();
|
|
const qy = $(this).find('.qy').val();
|
|
|
|
|
|
const inputOptn = $(this).find('.inputOptn').val();
|
|
const inputOptnText = $(this).find('.inputOptnText').val();
|
|
|
|
spbkGoodsList.push({
|
|
'optnTy': optnTy,
|
|
'goodsOptnInnb': goodsOptnInnb,
|
|
'goodsInnb': goodsInnb,
|
|
'qy': parseInt(qy),
|
|
'inputOptn': inputOptn,
|
|
'inputOptnText': inputOptnText
|
|
});
|
|
});
|
|
|
|
fn_post_spbk_goods(spbkGoodsList);
|
|
});
|
|
|
|
/* 구매하기 버튼 선택 이벤트 */
|
|
$('#btnBuy').on('click', function () {
|
|
const itemCnt = $('.cartOrder__list').find('.cartItem').length;
|
|
|
|
if (0 === itemCnt) {
|
|
alert('장바구니에 담긴 상품이 없습니다.');
|
|
|
|
return false;
|
|
}
|
|
|
|
const checkedItemCnt = $('.cartCheck:checked').length;
|
|
|
|
if (0 === checkedItemCnt) {
|
|
alert('구매하실 상품을 선택해 주십시요.');
|
|
|
|
return false;
|
|
}
|
|
|
|
|
|
let cartInnbs = [];
|
|
$('.cartCheck:checked').each(function() {
|
|
const cartInnb = $(this).closest('.cartItem').siblings('.cartInnb').val();
|
|
|
|
cartInnbs.push(cartInnb);
|
|
});
|
|
|
|
const data = {
|
|
'cartInnbs' : cartInnbs
|
|
}
|
|
|
|
$.ajax({
|
|
type: 'POST',
|
|
contentType: 'application/json',
|
|
url: '<c:url value="/sopmal/ordr/updateSpbkCartDvCd"/>',
|
|
data: JSON.stringify(data),
|
|
success: function (data) {
|
|
const message = JSON.parse(data.resBody.result).message
|
|
if(message ==='success') {
|
|
|
|
window.location.href = '<c:url value="/sopmal/ordr/selectMbrPurchsForm"/>';
|
|
}
|
|
}
|
|
});
|
|
|
|
});
|
|
}
|
|
|
|
|
|
/* ********************************************************
|
|
* function
|
|
**********************************************************/
|
|
/* 장바구니 상품 목록 조회 */
|
|
const fn_get_spbk_goods_list = function() {
|
|
$.ajax({
|
|
type : 'post',
|
|
contentType: 'application/json',
|
|
url : '<c:url value="/sopmal/ordr/selectSpbkGoodsList"/>',
|
|
data : JSON.stringify({
|
|
'cartDvCd': '01'
|
|
}),
|
|
success : function(html) {
|
|
|
|
$('#cartOrderList').empty().html(html);
|
|
|
|
const itemCnt = $('.cartOrder__list').find('.cartItem').length;
|
|
|
|
if (0 === itemCnt ) {
|
|
$('#_naverPayArea').hide();
|
|
}else{
|
|
|
|
let naverCheck = false;
|
|
$('.cartOrder__list').find('.cartItem').each(function(){
|
|
const tr = $(this).closest('tr');
|
|
const _price = $(tr).find('.cartItem__afterPrice').text().trim();
|
|
|
|
/* *
|
|
if( "${naverPayYn}" == "N" || _price === "0원" ) {
|
|
naverCheck = true;
|
|
}
|
|
*/
|
|
|
|
// 네이버페이 검수용 'npay2024' 아이디만 검수 가능하도록 하기위해 임시
|
|
const mbrId = $('#mbrId').val();
|
|
console.log("mbrId: " + mbrId);
|
|
if(mbrId == "npay2024"){
|
|
console.log("naverCheck false");
|
|
naverCheck = false;
|
|
}else{
|
|
console.log("naverCheck true");
|
|
if( "${naverPayYn}" == "N" || _price === "0원" ) {
|
|
naverCheck = true;
|
|
}else{
|
|
naverCheck = false;
|
|
}
|
|
}
|
|
});
|
|
|
|
if(naverCheck){
|
|
$('#_naverPayArea').hide();
|
|
}else{
|
|
$('#_naverPayArea').show();
|
|
}
|
|
|
|
|
|
//장바구니 전체 선택 되도록 변경 - 옵션변경시에도 전체선택됨
|
|
const cartCheckLength = $('.cartCheck').length
|
|
let cartCheckCnt = 0;
|
|
$('.cartCheck').each(function () {
|
|
|
|
if($(this).prop('checked')){
|
|
cartCheckCnt ++;
|
|
}
|
|
})
|
|
|
|
if(cartCheckLength === cartCheckCnt){
|
|
$('#cartCheckAll').prop('checked', true)
|
|
}
|
|
|
|
|
|
}
|
|
|
|
}
|
|
});
|
|
}
|
|
|
|
/* 결제금액 조회 */
|
|
const fn_get_setle_amt = function(data) {
|
|
/*
|
|
if (0 === Object.keys(data).length) {
|
|
return false;
|
|
}
|
|
*/
|
|
|
|
data['sopmalCd'] = $('#sopmalCd').val();
|
|
|
|
$.ajax({
|
|
type : 'post',
|
|
contentType: 'application/json',
|
|
url : '<c:url value="/sopmal/ordr/selectSetleExpectAmt"/>',
|
|
data : JSON.stringify(data),
|
|
dataType: 'json',
|
|
success : function(data) {
|
|
if (data.resBody != null) {
|
|
const result = JSON.parse(data.resBody.result);
|
|
|
|
fn_set_setle_amt(result.setleExpectAmt);
|
|
}
|
|
},
|
|
error: function(data) {
|
|
alert('<spring:message code="error.internal-server"/>');
|
|
}
|
|
});
|
|
}
|
|
|
|
/* 결제금액 세팅 */
|
|
const fn_set_setle_amt = function(data) {
|
|
if (!fn_is_empty(data)) {
|
|
const ul = $('.cartOrderBox__list');
|
|
|
|
$(ul).find('#goodsAmtSapn').text((data.goodsAmt).toLocaleString());
|
|
$(ul).find('#dlvyAmtSapn').text((data.dlvyAmt).toLocaleString());
|
|
$(ul).find('#dscntAmtSapn').text((data.dscntAmt).toLocaleString());
|
|
|
|
$('#setleAmtSapn').text((data.setleAmt).toLocaleString());
|
|
|
|
let li = '';
|
|
|
|
if (data.evtDscntAmt > 0) {
|
|
li += '<li class="cartOrderBox__miscItem first">';
|
|
li += ' <span class="cartOrderBox__miscTh">이벤트</span>';
|
|
li += ' <span class="cartOrderBox__miscTd"><span class="comma">' + (data.evtDscntAmt).toLocaleString() + '</span><span class="priceUnit">원</span></span>';
|
|
li += '</li>';
|
|
}
|
|
|
|
if (data.goodsCouponDscntAmt > 0) {
|
|
li += '<li class="cartOrderBox__miscItem">';
|
|
li += ' <span class="cartOrderBox__miscTh">상품 쿠폰</span>';
|
|
li += ' <span class="cartOrderBox__miscTd"><span class="comma">' + (data.goodsCouponDscntAmt).toLocaleString() + '</span><span class="priceUnit">원</span></span>';
|
|
li += '</li>';
|
|
}
|
|
|
|
if (data.dlvyCouponDscntAmt > 0) {
|
|
li += '<li class="cartOrderBox__miscItem">';
|
|
li += ' <span class="cartOrderBox__miscTh">배송비 쿠폰</span>';
|
|
li += ' <span class="cartOrderBox__miscTd"><span class="comma">' + (data.dlvyCouponDscntAmt).toLocaleString() + '</span><span class="priceUnit">원</span></span>';
|
|
li += '</li>';
|
|
}
|
|
|
|
if (data.cartCouponDscntAmt > 0) {
|
|
li += '<li class="cartOrderBox__miscItem">';
|
|
li += ' <span class="cartOrderBox__miscTh">장바구니 쿠폰</span>';
|
|
li += ' <span class="cartOrderBox__miscTd"><span class="comma">' + (data.cartCouponDscntAmt).toLocaleString() + '</span><span class="priceUnit">원</span></span>';
|
|
li += '</li>';
|
|
}
|
|
|
|
if (data.useMlgAmt > 0) {
|
|
li += '<li class="cartOrderBox__miscItem">';
|
|
li += ' <span class="cartOrderBox__miscTh">마일리지 할인</span>';
|
|
li += ' <span class="cartOrderBox__miscTd"><span class="comma">' + (data.useMlgAmt).toLocaleString() + '</span><span class="priceUnit">원</span></span>';
|
|
li += '</li>';
|
|
}
|
|
|
|
$(ul).find('.cartOrderBox__miscItem').remove();
|
|
$(ul).append(li);
|
|
}
|
|
}
|
|
|
|
/* 장바구니 상품 삭제 */
|
|
const fn_delete_spbk_goods = function(data, addOptndeleteAt = false) {
|
|
$.ajax({
|
|
type: 'post',
|
|
contentType: 'application/json',
|
|
url: '<c:url value="/sopmal/ordr/deleteSpbkGoods"/>',
|
|
data: JSON.stringify(data),
|
|
dataType: 'json',
|
|
success: function (data) {
|
|
if (data.resBody != null) {
|
|
const result = JSON.parse(data.resBody.result);
|
|
|
|
console.log("result 1 > " + result);
|
|
|
|
if (!fn_is_empty(result.message)) {
|
|
if ('0' === result.status) {
|
|
if(!addOptndeleteAt){
|
|
alert('<spring:message code="success.common.delete"/>');
|
|
}
|
|
|
|
} else {
|
|
alert(result.message);
|
|
}
|
|
console.log("result 2");
|
|
|
|
if(!addOptndeleteAt){
|
|
fn_reflesh_cart_cnt();
|
|
fn_get_spbk_goods_list();
|
|
}
|
|
|
|
|
|
return false;
|
|
}
|
|
}
|
|
},
|
|
error: function (data) {
|
|
alert('<spring:message code="error.internal-server"/>');
|
|
}
|
|
});
|
|
}
|
|
|
|
/* 장바구니 상품 수량 변경 */
|
|
const fn_post_spbk_goods_qy = function(data) {
|
|
$.ajax({
|
|
type: 'post',
|
|
contentType: 'application/json',
|
|
url: '<c:url value="/sopmal/ordr/updateSpbkGoodsQy"/>',
|
|
data: JSON.stringify(data),
|
|
dataType: 'json',
|
|
success: function (data) {
|
|
if (data.resBody != null) {
|
|
const result = JSON.parse(data.resBody.result);
|
|
|
|
if (!fn_is_empty(result.message)) {
|
|
if ('0' === result.status) {
|
|
fn_get_spbk_goods_list();
|
|
} else {
|
|
alert(result.message);
|
|
}
|
|
|
|
return false;
|
|
}
|
|
}
|
|
},
|
|
error: function (data) {
|
|
alert('<spring:message code="error.internal-server"/>');
|
|
}
|
|
});
|
|
}
|
|
|
|
/* 옵션 변경 목록 조회 */
|
|
const fn_get_goods_optn_list = function(obj) {
|
|
const tr = $(obj).closest('tr');
|
|
|
|
const goodsInnb = $(tr).find('.goodsInnb').val();
|
|
const goodsOptnInnb = $(tr).find('.goodsOptnInnb').val();
|
|
const qy = $(tr).find('.qy').val();
|
|
|
|
const inputOptn = $(tr).find('.inputOptn').val();
|
|
const inputOptnText = $(tr).find('.inputOptnText').val();
|
|
|
|
let goods = {
|
|
'goodsInnb': parseInt(goodsInnb),
|
|
'goodsOptnInnb': parseInt(goodsOptnInnb),
|
|
'goodsKndCd': '01',
|
|
'qy': qy,
|
|
'inputOptn': inputOptn,
|
|
'inputOptnText': inputOptnText
|
|
};
|
|
|
|
$.ajax({
|
|
type: 'post',
|
|
contentType: 'application/json',
|
|
url: '<c:url value="/sopmal/ordr/selectSpbkGoodsOptnList"/>',
|
|
data: JSON.stringify(goods),
|
|
dataType: 'json',
|
|
success: function (data) {
|
|
if (data.resBody != null) {
|
|
const result = JSON.parse(data.resBody.result);
|
|
|
|
fn_set_goods_optn_list(result);
|
|
}
|
|
},
|
|
error: function (data) {
|
|
alert('<spring:message code="error.internal-server"/>');
|
|
}
|
|
});
|
|
}
|
|
|
|
/* 옵션 변경 목록 세팅 */
|
|
const fn_set_goods_optn_list = function(data) {
|
|
const goodsInnb = data.goods.goodsInnb;
|
|
const sopmalCd = data.goods.sopmalCd;
|
|
const invntryPolicyCd = data.goods.invntryPolicyCd;
|
|
|
|
fn_set_nomal_optns(data.nomalOptn, goodsInnb, sopmalCd, invntryPolicyCd);
|
|
|
|
fn_set_stock_optns(data.stockOptn, goodsInnb, sopmalCd, invntryPolicyCd);
|
|
|
|
fn_set_add_optns(data.addOptn, goodsInnb, sopmalCd, invntryPolicyCd);
|
|
|
|
fn_set_input_optns(data.inputOptn);
|
|
|
|
fn_set_goods_optn(data.choiceOptn);
|
|
}
|
|
|
|
/* 노멀 옵션 정보 세팅 */
|
|
const fn_set_nomal_optns = function(data, goodsInnb, sopmalCd, invntryPolicyCd) {
|
|
const popup = $('#option-change-pop');
|
|
|
|
if (!fn_is_empty(data)) {
|
|
let optn = '';
|
|
|
|
for (let i = 0; i < data.length; i++) {
|
|
const nomalOptn = data[i];
|
|
|
|
optn += '<div class="product-option">';
|
|
|
|
for (let j = 1; j < nomalOptn.length; j++) {
|
|
const optnData = nomalOptn[j];
|
|
|
|
//상품의 재고정책이 재고가 있으면 판매이고 옵션의 재고가 없을 경우
|
|
if(invntryPolicyCd ==='01' && optnData.invntryAble ==='N'){
|
|
|
|
//재고품절시 노출여부에 따른 disabled 처리 여부
|
|
if(optnData.invntrySldoutExpsrAt ==='Y'){
|
|
|
|
optn += '<div class="product-option__item">';
|
|
optn += ' <label class="b-checkbox checkbox is-medium">';
|
|
optn += ' <input type="checkbox" id="nomalOptn' + i + '" value="' + optnData.optnVal + '" disabled >';
|
|
optn += ' <span class="check"></span>';
|
|
optn += ' <span class="control-label">' + optnData.optnNm + ' (품절)' + '</span>';
|
|
optn += ' </label>';
|
|
optn += ' <div class="product-option__right">';
|
|
optn += ' <span class="product-option__price">' + (optnData.slepric).toLocaleString() + '원</span>';
|
|
optn += ' </div>';
|
|
optn += '</div>';
|
|
}else{
|
|
//품절 노출여부 N일 경우 옵션 추가 안함
|
|
}
|
|
|
|
}else{
|
|
optn += '<div class="product-option__item">';
|
|
optn += ' <label class="b-checkbox checkbox is-medium">';
|
|
optn += ' <input type="checkbox" id="nomalOptn' + i + '" value="' + optnData.optnVal + '">';
|
|
optn += ' <span class="check"></span>';
|
|
optn += ' <span class="control-label">' + optnData.optnNm + '</span>';
|
|
optn += ' </label>';
|
|
optn += ' <div class="product-option__right">';
|
|
optn += ' <span class="product-option__price">' + (optnData.slepric).toLocaleString() + '원</span>';
|
|
optn += ' </div>';
|
|
optn += '</div>';
|
|
}
|
|
|
|
}
|
|
|
|
optn += '</div>';
|
|
}
|
|
|
|
$(popup).find('.nomal-option-content').empty().append(optn);
|
|
|
|
const div = $(popup).find('.option-content');
|
|
|
|
// 옵션 선택 버튼 이벤트
|
|
$(div).find('[id*="nomalOptn"]').on('click', function() {
|
|
const isContinue = fn_check_input_optn();
|
|
|
|
if (!isContinue) {
|
|
return false;
|
|
}
|
|
|
|
const goodsOptnInnb = $(this).val();
|
|
const data = fn_get_input_optns();
|
|
|
|
console.log(data)
|
|
|
|
const param = {
|
|
'sopmalCd':sopmalCd,
|
|
'goodsInnb':goodsInnb,
|
|
'goodsOptnInnb':goodsOptnInnb,
|
|
'inputOptn':data.inputOptn,
|
|
'inputOptnText':data.inputOptnText
|
|
}
|
|
|
|
fn_get_goods_optn(param);
|
|
|
|
$(div).find('[id*="nomalOptn"]').prop('checked', false);
|
|
$(div).find('[id*="nomalOptn"][value="' + goodsOptnInnb + '"]').prop('checked', true);
|
|
});
|
|
}
|
|
}
|
|
|
|
/* 재고 옵션 정보 세팅 */
|
|
const fn_set_stock_optns = function(data, goodsInnb, sopmalCd, invntryPolicyCd) {
|
|
const popup = $('#option-change-pop');
|
|
|
|
if (!fn_is_empty(data)) {
|
|
let optn = '';
|
|
|
|
optn += ' <div class="productDetailInfo__additionalSelect">';
|
|
optn += ' <div class="product-option productDetailInfo__additionalSelect__inner">';
|
|
|
|
if (!fn_is_empty(data.stockOptn1List)) {
|
|
optn += ' <div class="productDetailInfo__additionalSelect__item">';
|
|
optn += ' <span class="productDetailInfo__additionalSelect__category">' + data.stockOptn1List[0].optnNm + '</span>';
|
|
optn += ' <div class="select-box">';
|
|
optn += ' <select name="stockOptn1" id="stockOptn1" title="' + data.stockOptn1List[0].optnNm + '">';
|
|
|
|
for (let i = 0; i < data.stockOptn1List.length; i++) {
|
|
const stockOptn1 = data.stockOptn1List[i];
|
|
optn += ' <option value="' + stockOptn1.optnVal + '">' + stockOptn1.optnNm + '</option>';
|
|
}
|
|
|
|
optn += ' </select>';
|
|
optn += ' </div>';
|
|
optn += ' </div>';
|
|
}
|
|
|
|
if (!fn_is_empty(data.stockOptn2List)) {
|
|
optn += ' <div class="productDetailInfo__additionalSelect__item">';
|
|
optn += ' <span class="productDetailInfo__additionalSelect__category">' + data.stockOptn2List[0].optnNm + '</span>';
|
|
optn += ' <div class="select-box">';
|
|
optn += ' <select name="stockOptn2" id="stockOptn2" title="' + data.stockOptn2List[0].optnNm + '">';
|
|
|
|
for (let i = 0; i < data.stockOptn2List.length; i++) {
|
|
const stockOptn2 = data.stockOptn2List[i];
|
|
optn += ' <option value="' + stockOptn2.optnVal + '">' + stockOptn2.optnNm + '</option>';
|
|
}
|
|
|
|
optn += ' </select>';
|
|
optn += ' </div>';
|
|
optn += ' </div>';
|
|
}
|
|
|
|
if (!fn_is_empty(data.stockOptn3List)) {
|
|
optn += ' <div class="productDetailInfo__additionalSelect__item">';
|
|
optn += ' <span class="productDetailInfo__additionalSelect__category">' + data.stockOptn3List[0].optnNm + '</span>';
|
|
optn += ' <div class="select-box">';
|
|
optn += ' <select name="stockOptn3" id="stockOptn3" title="' + data.stockOptn3List[0].optnNm + '">';
|
|
|
|
for (let i = 0; i < data.stockOptn3List.length; i++) {
|
|
const stockOptn3 = data.stockOptn3List[i];
|
|
optn += ' <option value="' + stockOptn3.optnVal + '">' + stockOptn3.optnNm + '</option>';
|
|
}
|
|
|
|
optn += ' </select>';
|
|
optn += ' </div>';
|
|
optn += ' </div>';
|
|
}
|
|
|
|
optn += ' </div>';
|
|
optn += ' </div>';
|
|
|
|
$(popup).find('.stock-option-content').empty().append(optn);
|
|
$(popup).find('div .select-box select').niceSelect();
|
|
|
|
// 옵션 선택 버튼 이벤트
|
|
$(popup).find('[id*="stockOptn"]').on('change', function() {
|
|
const optnId = $(this).attr('id');
|
|
const optnVal = $(this).val();
|
|
|
|
const targetDepth = (parseInt(optnId.replace('stockOptn', '')) + 1);
|
|
const targetOptnId = 'stockOptn' + targetDepth;
|
|
|
|
if (!fn_is_empty(optnVal)) {
|
|
const goodsOptnInnbs = optnVal.split('|');
|
|
|
|
fn_get_goods_stock_optn_list(sopmalCd, goodsInnb, goodsOptnInnbs, optnId, targetOptnId, this, invntryPolicyCd);
|
|
} else {
|
|
for (let i = targetDepth; i < 5; i++) {
|
|
const name = $('#option-change-pop').find('#optn' + i + ' option:first').text();
|
|
|
|
$('#option-change-pop').find('#optn' + i).empty().append('<option value="">' + name + '</option>').niceSelect('update');
|
|
}
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
// 3자리마다 "," 추가
|
|
function addComma(num) {
|
|
return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
|
|
}
|
|
|
|
/* 재고 옵션 목록 조회 */
|
|
const fn_get_goods_stock_optn_list = function(sopmalCd, goodsInnb, goodsOptnInnbs, optnDv, targetOptnId, obj, invntryPolicyCd) {
|
|
$.ajax({
|
|
type : 'post',
|
|
data: {
|
|
'sopmalCd' : sopmalCd,
|
|
'goodsInnb' : goodsInnb,
|
|
'goodsOptnInnbs' : goodsOptnInnbs,
|
|
'goodsOptnDv' : optnDv
|
|
},
|
|
url : '<c:url value="/sopmal/ordr/selectSpbkGoodsStockOptnList"/>',
|
|
success : function(data) {
|
|
if (data.resBody != null) {
|
|
const result = JSON.parse(data.resBody.result);
|
|
const optnList = result.optn;
|
|
const isEmtpy = fn_is_empty(optnList);
|
|
|
|
const select = $('#option-change-pop').find('#' + targetOptnId);
|
|
|
|
$(select).attr('disabled', isEmtpy);
|
|
|
|
if (!isEmtpy) {
|
|
let optns = '';
|
|
|
|
|
|
//재고 옵션 선택 박스 인덱스
|
|
const totalSelectIdx = $('.productDetailInfo__additionalSelect__item').length
|
|
//다음 옵션선택 박스 인덱스
|
|
let targetSelectIdx = select.closest('.productDetailInfo__additionalSelect__item').index()+1
|
|
|
|
//마지막 셀렉트 일경우
|
|
if(totalSelectIdx === targetSelectIdx){
|
|
for (let i=0; i < optnList.length; i++) {
|
|
const optn = optnList[i];
|
|
const stdrDvSlepric = optn.stdrDvSlepric //상품옵션 기준 가격
|
|
const slepric = optn.slepric; //선택한 옵션 가격
|
|
const addedOptnPrice = addComma(slepric - stdrDvSlepric); // 옵션 가격차
|
|
|
|
//옵션 선택시 첫 옵션 제외하고 추가금액 표시
|
|
if(i > 0){
|
|
//상품의 재고정책이 재고가 있으면 판매이고 옵션의 재고가 없을 경우
|
|
if(invntryPolicyCd ==='01' && optn.invntryAble ==='N'){
|
|
//재고품절시 노출여부에 따른 disabled 처리 여부
|
|
if(optn.invntrySldoutExpsrAt ==='Y'){
|
|
optns += '<option value="' + optn.optnVal + '" disabled>' + optn.optnNm + '(+' + addedOptnPrice +')'+ ' (품절)' +'</option>';
|
|
}else{
|
|
//품절 노출여부 N일 경우 옵션 추가 안함
|
|
}
|
|
}else{
|
|
optns += '<option value="' + optn.optnVal + '">' + optn.optnNm + '(+' + addedOptnPrice +')' +'</option>';
|
|
}
|
|
|
|
}else{
|
|
optns += '<option value="' + optn.optnVal + '">' + optn.optnNm + '</option>';
|
|
}
|
|
|
|
}
|
|
}else{
|
|
for (let i=0; i < optnList.length; i++) {
|
|
const optn = optnList[i];
|
|
|
|
optns += '<option value="' + optn.optnVal + '">' + optn.optnNm + '</option>';
|
|
}
|
|
}
|
|
|
|
|
|
$(select).empty().append(optns);
|
|
}
|
|
|
|
$(select).niceSelect('update');
|
|
|
|
const choiceOptn = result.choiceOptn;
|
|
|
|
if (!fn_is_empty(choiceOptn)) {
|
|
|
|
const isContinue = fn_check_input_optn();
|
|
|
|
if (!isContinue) {
|
|
$(obj).find('option:first').prop('selected', true);
|
|
$(obj).niceSelect('update');
|
|
|
|
return false;
|
|
}
|
|
|
|
const input = fn_get_input_optns();
|
|
|
|
choiceOptn['inputOptn'] = input.inputOptn;
|
|
choiceOptn['inputOptnText'] = input.inputOptnText;
|
|
|
|
fn_set_goods_optn(choiceOptn);
|
|
|
|
$('#option-change-pop').find('[id*="stockOptn"]').each(function(){
|
|
$(this).find('option:first').prop('selected', true);
|
|
});
|
|
|
|
$('#option-change-pop').find('div .select-box select').niceSelect('update');
|
|
}
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
/* 추가 옵션 정보 세팅 */
|
|
const fn_set_add_optns = function(data, goodsInnb, sopmalCd, invntryPolicyCd) {
|
|
const popup = $('#option-change-pop');
|
|
|
|
if (!fn_is_empty(data)) {
|
|
let optn = '';
|
|
|
|
for (let i = 0; i < data.length; i++) {
|
|
const addOptnList = data[i];
|
|
|
|
optn += '<div class="productDetailInfo__additionalSelect">';
|
|
optn += ' <div class="option-header">';
|
|
optn += ' <div class="option-header__title">추가옵션</div>';
|
|
optn += ' </div>';
|
|
optn += ' <div class="add-option-content">';
|
|
optn += ' <div class="product-option productDetailInfo__additionalSelect__inner">';
|
|
optn += ' <div class="productDetailInfo__additionalSelect__item">';
|
|
optn += ' <span class="productDetailInfo__additionalSelect__category">' + addOptnList[0].optnNm + '</span>';
|
|
optn += ' <div class="select-box">';
|
|
optn += ' <select name="addOptn' + i + '" id="addOptn' + i + '" title="' + addOptnList[0].optnNm + '">';
|
|
|
|
for (let j = 0; j < addOptnList.length; j++) {
|
|
const addOptn = addOptnList[j];
|
|
//상품의 재고정책이 재고가 있으면 판매이고 옵션의 재고가 없을 경우
|
|
if(invntryPolicyCd ==='01' && addOptn.invntryAble ==='N'){
|
|
|
|
//재고품절시 노출여부에 따른 disabled 처리 여부
|
|
if(addOptn.invntrySldoutExpsrAt ==='Y'){
|
|
optn += ' <option value="' + addOptn.optnVal + '" disabled >' + addOptn.optnNm +' (품절)' + '</option>';
|
|
}else{
|
|
//품절 노출여부 N일 경우 옵션 추가 안함
|
|
}
|
|
|
|
} else{
|
|
optn += ' <option value="' + addOptn.optnVal + '">' + addOptn.optnNm + '</option>';
|
|
}
|
|
}
|
|
|
|
optn += ' </select>';
|
|
optn += ' </div>';
|
|
optn += ' </div>';
|
|
optn += ' </div>';
|
|
optn += ' </div>';
|
|
optn += '</div>';
|
|
}
|
|
|
|
$(popup).find('.add-option-content').empty().append(optn);
|
|
|
|
$('#option-change-pop .add-option-content').find('.select-box select').niceSelect();
|
|
|
|
const div = ('#option-change-pop .add-option-content');
|
|
|
|
// 옵션 선택 버튼 이벤트
|
|
$(div).find('[id*="addOptn"]').on('change', function() {
|
|
const goodsOptnInnb = $(this).val();
|
|
|
|
//추가구성옵션 선택시 리스트에 중복되는 옵션 있는지 확인
|
|
let isDuplicate = false;
|
|
$('#cartOrderList').find('.goodsOptnInnb').each(function () {
|
|
|
|
if(parseInt(goodsOptnInnb) === parseInt($(this).val())){
|
|
isDuplicate = true;
|
|
}
|
|
})
|
|
|
|
if(isDuplicate){
|
|
alert('이미 선택한 옵션 입니다.');
|
|
$(this).val('').niceSelect('update')
|
|
return false;
|
|
}
|
|
|
|
const param = {
|
|
'sopmalCd':sopmalCd,
|
|
'goodsInnb':goodsInnb,
|
|
'goodsOptnInnb':goodsOptnInnb
|
|
}
|
|
|
|
fn_get_goods_optn(param);
|
|
|
|
$(div).find('[id*="nomalOptn"]').prop('checked', false);
|
|
$(div).find('[id*="nomalOptn"][value="' + goodsOptnInnb + '"]').prop('checked', true);
|
|
});
|
|
}
|
|
}
|
|
|
|
/* 추가 옵션 정보 조회 */
|
|
const fn_get_add_optns = function(choiceOptn) {
|
|
const popup = $('#option-change-pop');
|
|
|
|
let optnRelateNbs = [];
|
|
|
|
$(popup).find('.product-count').each(function(){
|
|
optnRelateNbs.push($(this).find('.goodsOptnInnb').val());
|
|
});
|
|
|
|
let optn = {
|
|
'sopmalCd':choiceOptn.sopmalCd,
|
|
'optnTy':'03',
|
|
'goodsInnb':choiceOptn.goodsInnb,
|
|
'optnRelateNbs':optnRelateNbs
|
|
}
|
|
|
|
$.ajax({
|
|
type : 'post',
|
|
contentType: 'application/json',
|
|
url : '<c:url value="/sopmal/ordr/selectSpbkGoodsAddOptnList"/>',
|
|
data : JSON.stringify(optn),
|
|
dataType: 'json',
|
|
success : function(data) {
|
|
if (data.resBody != null) {
|
|
const result = JSON.parse(data.resBody.result);
|
|
const addOptn = result.addOptn;
|
|
|
|
fn_set_add_optns(addOptn, choiceOptn.goodsInnb, choiceOptn.sopmalCd, choiceOptn.invntryPolicyCd);
|
|
}
|
|
},
|
|
error: function(data) {
|
|
alert('<spring:message code="error.internal-server"/>');
|
|
}
|
|
});
|
|
}
|
|
|
|
/* 입력 옵션 정보 조회 */
|
|
const fn_get_input_optns = function() {
|
|
const popup = $('#option-change-pop');
|
|
const div = $(popup).find('.input-option-content');
|
|
const optnCnt = $(div).length;
|
|
|
|
let inputOptnInfo = '';
|
|
let inputOptnText = '';
|
|
|
|
$(div).find('.product-option').each(function (index) {
|
|
const title = $(this).find('.optnTitle').val();
|
|
const text = $(this).find('.optnVal').val();
|
|
const optnInfo = $(this).find('.optnInfo').val();
|
|
|
|
let isEnd = (index === optnCnt - 1);
|
|
|
|
if (!fn_is_empty(text)) {
|
|
inputOptnInfo += optnInfo+ ',' + title + ',' + text + (isEnd ? '' : '/');
|
|
inputOptnText += title + ':' + text + (isEnd ? '' : '/');
|
|
}
|
|
});
|
|
|
|
return {
|
|
'inputOptn':inputOptnInfo,
|
|
'inputOptnText':inputOptnText
|
|
};
|
|
}
|
|
|
|
/* 입력 옵션 정보 세팅 */
|
|
const fn_set_input_optns = function(data) {
|
|
const popup = $('#option-change-pop');
|
|
|
|
if (!fn_is_empty(data)) {
|
|
let optn = '';
|
|
|
|
for (let i = 0; i < data.length; i++) {
|
|
const iputOptn = data[i];
|
|
|
|
optn += '<div class="productDetailInfo__additionalSelect">';
|
|
optn += ' <div class="product-option productDetailInfo__additionalSelect__inner">';
|
|
optn += ' <div class="productDetailInfo__additionalSelect__item">';
|
|
optn += ' <span class="productDetailInfo__additionalSelect__category">' + iputOptn.optnTitle + '</span>';
|
|
optn += ' <input type="text" class="optnVal input-text full" title="입력옵션 ">';
|
|
optn += ' <input type="hidden" class="optnTitle" value="' + iputOptn.optnTitle + '"/>';
|
|
optn += ' <input type="hidden" class="optnInfo" value="' + iputOptn.optnInfo + '"/>';
|
|
optn += ' <input type="hidden" class="optnEssntlAt" value="' + iputOptn.optnEssntlAt + '"/>';
|
|
optn += ' </div>';
|
|
optn += ' </div>';
|
|
optn += '</div>';
|
|
}
|
|
|
|
$(popup).find('.input-option-content').empty().append(optn);
|
|
|
|
// $('#option-change-pop .add-option-content').find('.select-box select').niceSelect();
|
|
}
|
|
}
|
|
|
|
/* 선택 상품 옵션 정보 조회 */
|
|
const fn_get_goods_optn = function(param) {
|
|
$.ajax({
|
|
type : 'post',
|
|
data : param,
|
|
url : '<c:url value="/sopmal/ordr/selectSpbkGoodsNomalOptn"/>',
|
|
success : function(data) {
|
|
if (data.resBody != null) {
|
|
const result = JSON.parse(data.resBody.result);
|
|
|
|
fn_set_goods_optn(result.choiceOptn);
|
|
}
|
|
},
|
|
error: function(data) {
|
|
alert('<spring:message code="error.internal-server"/>');
|
|
}
|
|
});
|
|
}
|
|
|
|
/* 선택 상품 옵션 정보 세팅 */
|
|
const fn_set_goods_optn = function(data) {
|
|
if (!fn_is_empty(data)) {
|
|
const choiceOptn = data;
|
|
const goodsOptnInnb = data.goodsOptnInnb;
|
|
const popup = $('#option-change-pop');
|
|
const div = $(popup).find('.option-content');
|
|
|
|
const isChoice = $(popup).find('.optn-' + goodsOptnInnb).length > 0;
|
|
|
|
if (isChoice) {
|
|
alert('이미 선택한 옵션 입니다.');
|
|
|
|
$(div).find('[id*="nomalOptn"]').prop('checked', false);
|
|
|
|
return false;
|
|
}
|
|
|
|
if (!fn_is_empty(choiceOptn)) {
|
|
let cOptn = '';
|
|
|
|
cOptn += '<div class="product-count optn-' + choiceOptn.goodsOptnInnb + '">';
|
|
cOptn += ' <input type="hidden" class="goodsInnb" value="' + choiceOptn.goodsInnb + '"/>';
|
|
cOptn += ' <input type="hidden" class="goodsOptnInnb" value="' + choiceOptn.goodsOptnInnb + '"/>';
|
|
cOptn += ' <input type="hidden" class="optnTy" value="' + choiceOptn.optnTy + '"/>';
|
|
cOptn += ' <input type="hidden" class="qy" value="' + choiceOptn.qy + '"/>';
|
|
cOptn += ' <input type="hidden" class="slepric" value="' + choiceOptn.slepric + '"/>';
|
|
cOptn += ' <input type="hidden" class="cnsmrpric" value="' + choiceOptn.cnsmrpric + '"/>';
|
|
cOptn += ' <input type="hidden" class="subCnsmrpric" value="' + choiceOptn.subCnsmrpric + '"/>';
|
|
cOptn += ' <input type="hidden" class="subSlepric" value="' + fn_nvl(choiceOptn.subSlepric, choiceOptn.slepric) + '"/>';
|
|
cOptn += ' <input type="hidden" class="inputOptn" value="' + fn_nvl(choiceOptn.inputOptn, '') + '"/>';
|
|
cOptn += ' <input type="hidden" class="inputOptnText" value="' + fn_nvl(choiceOptn.inputOptnText, '') + '"/>';
|
|
cOptn += ' <input type="hidden" class="optnRelateNb" value="' + choiceOptn.optnRelateNb + '"/>';
|
|
cOptn += ' <div class="product-count__amount-top">';
|
|
cOptn += ' <span class="product-count__amount-title">' + choiceOptn.optn + '</span>';
|
|
|
|
if (!fn_is_empty(choiceOptn.inputOptnText)) {
|
|
cOptn += ' </br><span class="product-count__amount-title">' + choiceOptn.inputOptnText + '</span>';
|
|
}
|
|
|
|
cOptn += ' <button type="button" class="delete-optn product-count__amount-delete"><span class="visually-hidden">삭제</span></button>';
|
|
cOptn += ' </div>';
|
|
cOptn += ' <div class="product-count__amount-bottom">';
|
|
cOptn += ' <div class="product-count__amount-counter">';
|
|
cOptn += ' <button type="button" id="minus" class="optn-qy-minus product-count__amount-btn minus"><span class="visually-hidden">감소</span></button>';
|
|
// cOptn += ' <span class="product-count__amount-number">' + choiceOptn.qy + '</span>';
|
|
cOptn += ' <label>';
|
|
cOptn += ' <input class="product-count__amount-number" type="number" value="'+choiceOptn.qy+'"/>';
|
|
cOptn += ' </label>';
|
|
cOptn += ' <button type="button" id="plus" class="optn-qy-plus product-count__amount-btn plus"><span class="visually-hidden">추가</span></button>';
|
|
cOptn += ' </div>';
|
|
cOptn += ' <div class="product-count__amount-price-box">';
|
|
/*cOptn += ' <span class="product-count__amount-monthly-price">개월당 19,500원</span>';*/
|
|
cOptn += ' <span class="product-count__amount-price">' + (fn_nvl(choiceOptn.subSlepric, choiceOptn.slepric)).toLocaleString() + '원</span>';
|
|
cOptn += ' </div>';
|
|
cOptn += ' </div>';
|
|
cOptn += '</div>';
|
|
|
|
$(div).append(cOptn);
|
|
|
|
$(div).find('[id*="nomalOptn"]').prop('checked', false);
|
|
$(div).find('.input-option-content .optnVal').val('');
|
|
|
|
$('#option-change-pop').find('[id*="addOptn"]').each(function() {
|
|
$(this).find('option:first').prop('selected', true);
|
|
});
|
|
|
|
$('#option-change-pop').find('div .select-box select').niceSelect('update');
|
|
|
|
fn_set_goods_optn_total_price();
|
|
|
|
// 옵션 수량 수정 버튼 선택 이벤트
|
|
$(div).find('[class*="optn-qy-"]').on('click', function(e) {
|
|
const div = $(this).closest('.product-count');
|
|
const calcDv = $(this).attr('id');
|
|
|
|
let slepric = parseInt($(div).find('.slepric').val());
|
|
let qy = parseInt($(div).find('.qy').val());
|
|
|
|
if (calcDv.includes('plus')) {
|
|
qy = qy + 1;
|
|
} else {
|
|
qy = qy - 1;
|
|
}
|
|
|
|
qy = qy < 1 ? 1 : qy;
|
|
|
|
const pric = slepric * qy;
|
|
|
|
$(div).find('.qy').val(qy);
|
|
$(div).find('.subSlepric').val(pric);
|
|
|
|
$(div).find('.product-count__amount-number').empty().text(qy);
|
|
$(div).find('.product-count__amount-price').empty().text(pric.toLocaleString() + '원');
|
|
|
|
fn_set_goods_optn_total_price();
|
|
|
|
});
|
|
|
|
// 옵션 삭제 버튼 이벤트
|
|
$(div).find('.delete-optn').on('click', function() {
|
|
const div = $(this).closest('.product-count');
|
|
|
|
const sopmalCd = $(div).find('.sopmalCd').val();
|
|
const goodsInnb = $(div).find('.goodsInnb').val();
|
|
const goodsOptnInnb = $(div).find('.goodsOptnInnb').val();
|
|
|
|
let optn = {
|
|
'sopmalCd':sopmalCd,
|
|
'goodsInnb':goodsInnb
|
|
}
|
|
|
|
$(div).remove();
|
|
|
|
const addOptn = $('#option-change-pop').find('.product-count input[class="optnRelateNb"][value="' + goodsOptnInnb + '"]');
|
|
|
|
if (!fn_is_empty(addOptn)) {
|
|
alert('해당 상품을 삭제 시 연관되는 추가상품도 같이 삭제됩니다.');
|
|
|
|
addOptn.closest('.product-count').remove();
|
|
}
|
|
|
|
fn_set_goods_optn_total_price();
|
|
});
|
|
}
|
|
}
|
|
}
|
|
|
|
/* 입력옵션 필수여부 체크 */
|
|
const fn_check_input_optn = function() {
|
|
const div = $('#option-change-pop').find('.input-option-content');
|
|
|
|
let isContinue = true;
|
|
|
|
$(div).find('.product-option').each(function () {
|
|
const input = $(this).find('input.optnEssntlAt');
|
|
const optnEssntlAt = $(input).val();
|
|
|
|
if ('Y' === optnEssntlAt) {
|
|
const inputDiv = $(input).closest('div');
|
|
const optnVal = $(inputDiv).find('.optnVal').val();
|
|
|
|
if (fn_is_empty(optnVal)) {
|
|
const optnTitle = $(inputDiv).find('.optnTitle').val();
|
|
|
|
alert(optnTitle + ' 항목을 입력해 주십시요')
|
|
|
|
$(inputDiv).find('.optnVal').focus();
|
|
|
|
isContinue = false;
|
|
|
|
return false;
|
|
}
|
|
}
|
|
});
|
|
|
|
return isContinue;
|
|
}
|
|
|
|
/* 옵션 총 금액 셋팅 */
|
|
const fn_set_goods_optn_total_price = function() {
|
|
const popup = $('#option-change-pop');
|
|
|
|
let totalPric = 0;
|
|
|
|
$(popup).find('.product-count').each(function(){
|
|
if ($(this).is(':visible')) {
|
|
const subSlepric = parseInt($(this).find('.subSlepric').val());
|
|
|
|
totalPric = totalPric + subSlepric;
|
|
}
|
|
});
|
|
|
|
$(popup).find('.product-total__price').empty().append(totalPric.toLocaleString() + '<span class="won">원</span>');
|
|
}
|
|
|
|
/* 옵션 정보 수정 */
|
|
const fn_post_spbk_goods = function(data) {
|
|
$.ajax({
|
|
type : 'post',
|
|
contentType: 'application/json',
|
|
url : '<c:url value="/sopmal/ordr/updateSpbk"/>',
|
|
data : JSON.stringify(data),
|
|
dataType: 'json',
|
|
success : function(data) {
|
|
if (data.resBody != null) {
|
|
const result = JSON.parse(data.resBody.result);
|
|
|
|
if (!fn_is_empty(result.message)) {
|
|
if ('1' === result.status) {
|
|
alert(result.message);
|
|
|
|
return false;
|
|
}
|
|
|
|
fn_get_spbk_goods_list();
|
|
|
|
fn_close_modal('option-change-pop');
|
|
}
|
|
}
|
|
},
|
|
error: function(data) {
|
|
alert('<spring:message code="error.internal-server"/>');
|
|
}
|
|
});
|
|
}
|
|
|
|
/************************************ 네이버페이 시작 *********************************/
|
|
/* NPay구매 버튼 */
|
|
const buy_nc = () => {
|
|
//alert("구매 event 확인");
|
|
|
|
let goodsList = [];
|
|
|
|
$('.cartCheck:checked').each(function(){
|
|
const tr = $(this).closest('tr');
|
|
|
|
const goodsInnb = $(tr).find('.goodsInnb').val();
|
|
const goodsOptnInnb = $(tr).find('.goodsOptnInnb').val();
|
|
const qy = $(tr).find('.qy').val(); // 수량
|
|
const optnTy = $(tr).find('.optnTy').val(); // 상품옵션
|
|
|
|
let goods = {
|
|
'goodsInnb':parseInt(goodsInnb),
|
|
'goodsOptnInnb':parseInt(goodsOptnInnb),
|
|
'qy' :parseInt(qy),
|
|
'optnTy' :optnTy
|
|
};
|
|
|
|
goodsList.push(goods);
|
|
});
|
|
|
|
if (goodsList.length === 0) {
|
|
alert('구매하실 상품을 선택해 주십시요.');
|
|
return false;
|
|
}
|
|
|
|
|
|
if($('#hiddenForm')!= null){
|
|
$('#hiddenForm').remove()
|
|
}
|
|
|
|
|
|
const hiddenForm = document.createElement('form');
|
|
hiddenForm.name = 'hiddenForm';
|
|
hiddenForm.id = 'hiddenForm';
|
|
|
|
|
|
for(let i = 0; i < goodsList.length; i ++ ){
|
|
let good = goodsList[i];
|
|
|
|
fn_create_input('hidden', "sopmalCd", good.sopmalCd, hiddenForm); // 쇼핑몰코드
|
|
fn_create_input('hidden', "goodsInnb", good.goodsInnb, hiddenForm); // 상품코드
|
|
fn_create_input('hidden', "goodsOptnInnb", good.goodsOptnInnb, hiddenForm); // 상품옵션 고유번호
|
|
fn_create_input('hidden', "optnTy", good.optnTy, hiddenForm); // 옵션유형
|
|
fn_create_input('hidden', "qy", good.qy, hiddenForm); // 수량
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
$(hiddenForm).append($('<input/>', {type: 'hidden', name: 'refererUrl', value: window.location.href}));
|
|
|
|
// 1. 상품 GOODS_INNB
|
|
// 2. 선택한 상품옵션 고유번호(GOODS_OPTN_INNB)
|
|
// 3. 배송비정책 => 상품고유번호, 쇼핑몰코드
|
|
// 4. 선택한 추가상품 상품옵션 고유번호(GOODS_OPTN_INNB)
|
|
let goodsInnb = $("#goodsInnb").val();
|
|
let goodsNm = '${resultMap.goodsDtl.goodsNm}';
|
|
let npayImgUrl = $("#npayImgUrl").val();
|
|
const sesionId = fn_is_empty($('#sesionId').val()) ? "" : $('#sesionId').val();
|
|
// 옵션 정보
|
|
const sopmalCd = fn_is_empty($('#sopmalCd').val()) ? "" : $('#sopmalCd').val();
|
|
|
|
$(hiddenForm).attr('method', 'post');
|
|
$(hiddenForm).attr('action', '<c:url value="/sopmal/npay/nPayOrdr"/>');
|
|
$(hiddenForm).appendTo('body');
|
|
$(hiddenForm).submit();
|
|
$(hiddenForm).remove();
|
|
}
|
|
|
|
|
|
/************************************ 네이버페이 종료 *********************************/
|
|
|
|
const fn_create_input = function (type, name, value, tgtForm) {
|
|
const input = document.createElement('input');
|
|
input.setAttribute("type", type);
|
|
input.setAttribute("name", name);
|
|
input.setAttribute("value", value);
|
|
tgtForm.appendChild(input);
|
|
}
|
|
</script>
|
|
<style>
|
|
<%--셀렉트박스 상품 선택시 disabled 일 경우에도 상품 비활성화 상태로 보이도록 css 재설정--%>
|
|
.productDetailInfo__additionalSelect__item .select-box .nice-select .list li.disabled {
|
|
display: block;
|
|
}
|
|
/*여러곳에서 쓰는 css로 재정의 */
|
|
.product-count__amount-number{
|
|
width: 30px;
|
|
}
|
|
|
|
/* 크롬, Edge, 사파리에서 스핀 버튼 제거 */
|
|
input[type="number"]::-webkit-outer-spin-button,
|
|
input[type="number"]::-webkit-inner-spin-button {
|
|
-webkit-appearance: none; /* 기본 화살표 UI 제거 */
|
|
margin: 0; /* 여백 제거 */
|
|
}
|
|
|
|
/* Firefox에서 스핀 버튼 제거 */
|
|
input[type="number"] {
|
|
-moz-appearance: textfield; /* 기본 숫자 UI를 텍스트 필드처럼 보이게 설정 */
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<%-- 공통 Header --%>
|
|
<jsp:include page="/WEB-INF/views/comm/Header.jsp"/>
|
|
|
|
<!-- 메인 컨텐츠 영역 -->
|
|
<main>
|
|
<div class="sub-wrapper">
|
|
<div class="sub-content">
|
|
<div class="cartOrder">
|
|
<h2 class="cartOrder__title">장바구니</h2>
|
|
<div class="cartOrder__inner">
|
|
<div class="cartOrder__left">
|
|
<input type="hidden" id="mbrId" value="<c:out value="${data.purchsr.mbrId}"/>"/>
|
|
<input type="hidden" id="adscriptCartGoodsList" value ="<c:out value="${data.adScriptGoodsList}"/> " />
|
|
<div class="cartOrder__control">
|
|
<div class="b-checkbox-container">
|
|
<label class="b-checkbox checkbox">
|
|
<input type="checkbox" id="cartCheckAll" value="">
|
|
<span class="check"></span>
|
|
<span class="control-label">전체선택</span>
|
|
</label>
|
|
</div>
|
|
<div class="cartOrder__control__btnContainer">
|
|
<%--<button class="btn sm outline">전체삭제</button>--%>
|
|
<button type="button" id="btnChoiceDeleteGoods" class="btn sm outline">선택삭제</button>
|
|
</div>
|
|
</div>
|
|
<div id="cartOrderList"></div>
|
|
</div>
|
|
<div class="cartOrder__right">
|
|
<div class="cartOrder__sticky">
|
|
<div class="cartOrderBox">
|
|
<h5 class="cartOrderBox__title">결제예정금액</h5>
|
|
<ul class="cartOrderBox__list">
|
|
<li>
|
|
<span class="cartOrderBox__th">총 주문금액</span>
|
|
<span class="cartOrderBox__td"><span class="comma" id="goodsAmtSapn">0</span><span class="priceUnit">원</span></span>
|
|
</li>
|
|
<li>
|
|
<span class="cartOrderBox__th">배송비</span>
|
|
<span class="cartOrderBox__td"><span class="comma" id="dlvyAmtSapn">0</span><span class="priceUnit">원</span></span>
|
|
</li>
|
|
<li>
|
|
<span class="cartOrderBox__th">총 할인금액</span>
|
|
<span class="cartOrderBox__td"><span class="cartOrderBox__discountMinus">(-)</span><span id="dscntAmtSapn" class="comma">0</span><span class="priceUnit">원</span></span>
|
|
</li>
|
|
</ul>
|
|
<div class="cartOrderBox__total">
|
|
<span class="cartOrderBox__totalTh">결제예정금액</span>
|
|
<span class="cartOrderBox__totalTd"><span id="setleAmtSapn" class="comma">0</span><span class="priceUnit">원</span></span>
|
|
</div>
|
|
<div class="">
|
|
<span class="text">※ 쿠폰 적용가는 최종 결제창에서 확인 가능합니다.</span>
|
|
</div>
|
|
|
|
<button type="button" id="btnBuy" class="btn theme large cartOrderBox__buyBtn">구매하기</button>
|
|
<div class="product-btn-container">
|
|
<%-- <c:if test="${not empty data.dlvyAt}"> (2025-06-05 CJH : 선물하기와 여러곳배송은 주문서에서만 개발--%>
|
|
<%-- <c:if test="${data.dlvyAt.giftDlvyAt eq 'Y'}">--%>
|
|
<%-- <button class="gift-btn">선물</button>--%>
|
|
<%-- </c:if>--%>
|
|
<%-- <c:if test="${data.dlvyAt.multiDlvyAt eq 'Y'}">--%>
|
|
<%-- <button class="btn large outline">여러곳 배송</button>--%>
|
|
<%-- </c:if>--%>
|
|
<%-- </c:if>--%>
|
|
</div>
|
|
<div style="margin-top: 24px; text-align: center; display: none;" id ="_naverPayArea">
|
|
<script type="text/javascript">//<![CDATA[
|
|
|
|
var notPayMode = false;
|
|
var enable = 'Y';
|
|
var buy_npay = buy_nc;
|
|
var goods_status = '';
|
|
|
|
// 품절등과 같은 이유에 따라 버튼을 비활성화할 필요가 있을 경우
|
|
if(notPayMode){
|
|
enable = 'N';
|
|
buy_npay = not_buy_nc;
|
|
wishlist_nc = not_buy_nc;
|
|
}
|
|
//버튼타입,버튼색, 버튼갯수 프로퍼티에서 읽어오기
|
|
naver.NaverPayButton.apply({
|
|
BUTTON_KEY:"{buttonKey}", // 알파랩 - 네이버페이에서 할당받은 버튼 KEY를 입력하세요. 뉴트리:BUTTON_KEY:"58008618-E3CD-40F7-AE8D-37D624935098"
|
|
TYPE: "A", // 템플릿을 확인하시고 원하는 타입의 버튼을 선택
|
|
COLOR: 1, // 버튼의 색 설정
|
|
COUNT: 1, // 버튼 개수 설정. 구매하기 버튼만 있으면 1, 찜하기 버튼과 함께 있으면 2를 입력한다.
|
|
ENABLE: enable, // 품절등과 같은 이유에 따라 버튼을 비활성화할 필요가 있을 경우
|
|
BUY_BUTTON_HANDLER: buy_npay, // 구매하기 버튼 이벤트 Handler 함수 등록, 품절인 경우 not_buy_nc 함수 사용
|
|
"":""
|
|
});
|
|
//]]>
|
|
</script>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<c:if test="${not empty data.goodsListInqire.goodsInfoList}">
|
|
<div class="main-section__container">
|
|
<section class="main-section main-section__four-row">
|
|
<div class="main-section-header">
|
|
<div class="main-section-title">
|
|
<h2 class="main-section-title__title">
|
|
<c:out value="${data.goodsListInqire.goodsInfoList[0].goodsGroupNm}"/>
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
<div class="product-list-type1">
|
|
<div class="four-row-slick">
|
|
<spring:eval expression="@environment.getProperty('sopmalfo.common.fileupload.cdnurl')" var="cdnurl"/>
|
|
<c:forEach var="goodsInfo" items="${data.goodsListInqire.goodsInfoList}" varStatus="goodsInfoListStatus">
|
|
<div class="product-unit">
|
|
<div class="product-unit-image">
|
|
<a href="javascript:void(0);" onclick="fn_move_goods_dtl('${goodsInfo.goodsInnb}')">
|
|
<img src="<c:url value="${cdnurl}${goodsInfo.goodsImgCours}"/>" alt="상품 이미지" onerror="this.src='/pc/images/image_placeholder.png'">
|
|
</a>
|
|
<%-- <button class="product-unit-addToCart">--%>
|
|
<%-- <i class="icon icon_product-unit-addToCart"></i>--%>
|
|
<%-- <span class="visually-hidden">장바구니에 담기</span>--%>
|
|
<%-- </button>--%>
|
|
</div>
|
|
<div class="product-unit-info">
|
|
<div class="product-badge-container">
|
|
<c:if test="${not empty goodsInfo.iconCdNmList}">
|
|
<c:forEach var="iconNm" items="${fn:split(goodsInfo.iconCdNmList,',')}">
|
|
<c:choose>
|
|
<c:when test="${fn:contains(iconNm,'-')}">
|
|
<span class="product-badge ${fn:toLowerCase(iconNm)}"> ${fn:toUpperCase(fn:replace(iconNm, '-', ' '))}</span>
|
|
</c:when>
|
|
<c:otherwise>
|
|
<span class="product-badge ${fn:toLowerCase(iconNm)}"> ${fn:toUpperCase(iconNm)}</span>
|
|
</c:otherwise>
|
|
</c:choose>
|
|
</c:forEach>
|
|
</c:if>
|
|
</div>
|
|
<div class="product-unit-info__inner">
|
|
<div class="product-unit-title">
|
|
<a href="javascript:void(0);"><c:out value="${goodsInfo.goodsNm}"/> </a>
|
|
</div>
|
|
<div class="product-unit-price">
|
|
<div class="product-unit-price__price">
|
|
<span class="product-unit-price__original"><fmt:formatNumber value="${goodsInfo.cnsmrpric}" pattern="#,###"/> 원</span>
|
|
<span class="product-unit-price__current"><fmt:formatNumber value="${goodsInfo.slepric}" pattern="#,###"/> 원</span>
|
|
</div>
|
|
<div class="product-unit-price__sale">
|
|
<span class="percent">
|
|
<c:out value="${goodsInfo.slePercent}"/>
|
|
%</span>
|
|
</div>
|
|
</div>
|
|
<span class="product-unit-price__monthly-payment"><c:out value="${goodsInfo.reprsntDc}"/> </span>
|
|
|
|
</div>
|
|
<div class="product-unit-rating">
|
|
<i class="icon icon_rating-star"></i>
|
|
<span class="product-unit-rating__score"><c:out value="${goodsInfo.avgEvlScore}" default="0.0"/></span>
|
|
<span class="product-unit-rating__count">(<fmt:formatNumber value="${goodsInfo.cntEvlScor}" pattern="#,###"/>)</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</c:forEach>
|
|
</div>
|
|
<div class="four-row-slick__btn-container">
|
|
<button class="four-row-slick__prev"><i class="icon icon_prev02"></i><span class="visually-hidden">이전</span></button>
|
|
<button class="four-row-slick__next"><i class="icon icon_next02"></i><span class="visually-hidden">다음</span></button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</c:if>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<div id="option-change-pop-div"></div>
|
|
<%-- 공통 Footer --%>
|
|
<jsp:include page="/WEB-INF/views/comm/Footer.jsp"/>
|
|
</body>
|
|
</html> |