Files
sake/src/main/webapp/WEB-INF/views/sopmal/ordr/SpbkPtinR.jsp
2026-07-16 02:26:31 +09:00

1620 lines
75 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"/>
<spring:eval expression="@environment.getProperty('currency-unit.default')" var="curUnit"/>
<spring:eval expression="@environment.getProperty('currency-unit.KR')" var="krUnit"/>
<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();
});
var curUnit = '${curUnit}';
/* ********************************************************
* 초기 설정
**********************************************************/
const fn_init = function() {
const recentSearches = localStorage.getItem('recentSearches');
localStorage.clear();
if (recentSearches !== null){
localStorage.setItem('recentSearches', recentSearches);
}
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" + curUnit ) {--%>
<%-- 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" + curUnit ) {--%>
<%-- 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();
console.log(data);
$.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);
console.log(data);
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());
$('#setleAmtKrSapn').text((data.setleAmtKr).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">' + curUnit + '</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">' + curUnit + '</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">' + curUnit + '</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">' + curUnit + '</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">' + curUnit + '</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() + curUnit + '</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() + curUnit + '</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' + curUnit + '</span>';*/
cOptn += ' <span class="product-count__amount-price">' + (fn_nvl(choiceOptn.subSlepric, choiceOptn.slepric)).toLocaleString() + curUnit + '</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() + curUnit);
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">' + curUnit + '</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">${curUnit}</span></span>
</li>
<li>
<span class="cartOrderBox__th">배송비</span>
<%-- <span class="cartOrderBox__td"><span class="comma" id="dlvyAmtSapn">0</span><span class="priceUnit">${curUnit}</span></span>--%>
<span class="cartOrderBox__td"><span class="priceUnit">Calculated at next step</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">${curUnit}</span></span>
</li>
</ul>
<div class="cartOrderBox__total" style="margin-bottom: 5px;">
<span class="cartOrderBox__totalTh">결제예정금액</span>
<span class="cartOrderBox__td"><span id="setleAmtSapn" class="comma">0</span><span class="priceUnit">${curUnit}</span></span>
</div>
<div class="cartOrderBox__total" style="margin-top: 5px;">
<span class="cartOrderBox__totalTh"></span>
<span class="cartOrderBox__totalTd"><span id="setleAmtKrSapn" class="comma">0</span><span class="priceUnit">${krUnit}</span></span>
</div>
<div class="">
<span class="text">&#8251; 쿠폰 적용가는 최종 결제창에서 확인 가능합니다.</span>
</div>
&nbsp;
<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)}" data-badge-cd="${iconNm}"> ${fn:toUpperCase(fn:replace(iconNm, '-', ' '))}</span>
</c:when>
<c:otherwise>
<span class="product-badge ${fn:toLowerCase(iconNm)}" data-badge-cd="${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="#,###"/> ${curUnit}</span>
<span class="product-unit-price__current"><fmt:formatNumber value="${goodsInfo.slepric}" pattern="#,###"/> ${curUnit}</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>