itfirst/sake
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

초기소스

Browse Source
This commit is contained in:
jazz
2025-10-29 17:08:05 +09:00
parent e531aa9540
commit 439a379a02
7551 changed files with 1234427 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

440
src/main/webapp/WEB-INF/views/sopmal_m/goods/RelateGoodsPopupR.jsp Normal file
View File

@@ -0,0 +1,440 @@
<%@ 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 : RelateGoodsPopupR.jsp
Description : 함께하면 좋은 상품(관련 상품) 팝업
Modification Information
수정일 수정자 수정내용
------- -------- ---------------------------
2024-07-23 유재현 최초 생성
--%>
<script defer>
/*************************************************************
함께하면 좋은상품 이벤트 (모달)
**************************************************************/
fn_set_niceSelect_datePicker('.select-box')
//일반옵션
// // 라디오 버튼 클릭시, 상품 정보 배열에 추가 및 화면에 추가
$("#relate-product-option-sheet .product-option__item").each(function () {
$(this).find("input[type=radio]").on("change", function () { // 라디오 버튼 클릭 시
if ($(this).prop('checked') == false) return; // 체크 해제시 리턴
const $title = $(this).closest(".product-option__item").find("label").text();
const $price = $(this).closest(".product-option__item").find(".product-option__price").text();
const $goodsOptnInnb = $(this).closest(".product-option__item").find('input[name="goodsOptnInnb"]').val()
const $goodsOptnTy = $(this).closest(".product-option__item").find('input[name="goodsOptnTy"]').val()
const $optnInfo = $(this).closest(".product-option__item").find('.product-option__monthly-payment').text();
const $priceNum = parseInt($price.replace(/,/g, ""));
//이미 추가된 상품인지 확인
var isItemAlreadyAdded = cartProductArr.some(function (item) {
return item[4] === $goodsOptnInnb;
});
if (isItemAlreadyAdded){
fn_goods_duplicate_select_modal()
return;
}
const $relateGoodsInnb = $(this).closest(".product-option__item").find('input[name="relateGoodsInnb"]').val()
cartProductArr.push([$title, 1, $priceNum, $priceNum * 1, $goodsOptnInnb, $goodsOptnTy, $relateGoodsInnb]); // 배열에 상품 정보 추가
$('#cartCountContainer').append( // 화면에 상품 정보 추가
'<div class="product-count">' +
'<div class="product-count__amount-top">' +
'<span class="product-count__amount-title">' + $title + '</span>' +
'<button class="product-count__amount-delete"><span class="visually-hidden">삭제</span></button>' +
'</div>' +
'<div class="product-count__amount-bottom">' +
'<div class="product-count__amount-counter">' +
'<button class="product-count__amount-btn minus"><span class="visually-hidden">감소</span></button>' +
'<span class="product-count__amount-number">1</span>' +
'<button class="product-count__amount-btn plus"><span class="visually-hidden">추가</span></button>' +
'</div>' +
'<div class="product-count__amount-price-box">' +
'<span class="product-count__amount-monthly-price">'+$optnInfo+'</span>' +
'<span class="product-count__amount-price"><span class="comma product-count__amount-priceNum">' + $price +
'</div>' +
'</div>' +
'</div>'
);
updateCartCounters(); // 화면에 상품 정보 업데이트
});
});
// 총 상품금액
var $cartTotalPrice = $(".product-total__price__totalPriceNum");
// 수량 "-", "+" 버튼 클릭 시, 수량 증감 및 가격 변경 및 총 상품금액 변경
$("#cartCountContainer").on("click", ".product-count__amount-btn", function () { // 수량 버튼 클릭 시
var $counter = $(this);
var $index = $counter.closest(".product-count").index(); // 해당 상품의 인덱스
if ($(this).hasClass("minus")) { // "-" 버튼 클릭 시
if (cartProductArr[$index][1] <= 1) return;
cartProductArr[$index][1]--; // 배열에서 해당 상품의 수량 감소
cartProductArr[$index][3] = cartProductArr[$index][1] * cartProductArr[$index][2]; // 배열에서 해당 상품의 총 가격 변경
} else { // "+" 버튼 클릭 시
cartProductArr[$index][1]++; // 배열에서 해당 상품의 수량 증가
cartProductArr[$index][3] = cartProductArr[$index][1] * cartProductArr[$index][2]; // 배열에서 해당 상품의 총 가격 변경
}
updateCartCounters(); // 화면에 상품 정보 업데이트
})
//
//배열 내용을 바탕으로 각 아이템 텍스트 변경
function updateCartCounters() {
$("#cartCountContainer .product-count").each(function () {
var $counter = $(this);
var $index = $counter.index();
var $number = $counter.find(".product-count__amount-number");
var $price = $counter.find(".product-count__amount-priceNum");
$number.text(cartProductArr[$index][1]);
$price.text(addComma(cartProductArr[$index][3]) + "원");
});
updateCartTotalPrice(); // 총 상품금액 업데이트
console.log(cartProductArr); // 배열 정보확인
}
// 3자리마다 "," 추가
function addComma(num) {
return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
// 총 상품금액 업데이트
function updateCartTotalPrice() {
var totalPrice = 0; // 총 상품금액
for (var i = 0; i < cartProductArr.length; i++) {
totalPrice += cartProductArr[i][3]; // 배열의 총 가격을 더함
}
$cartTotalPrice.text(addComma(totalPrice)); // 총 상품금액 텍스트 변경
}
// x버튼 클릭 시 삭제
$("#cartCountContainer").on("click", ".product-count__amount-delete", function () { // x 버튼 클릭 시
var $index = $(this).closest(".product-count").index();
cartProductArr.splice($index, 1); // 배열에서 해당 상품 삭제
$(this).closest(".product-count").remove(); // 화면에서 해당 상품 삭제
updateCartCounters(); // 화면에 상품 정보 업데이트
//일반옵션이 하나일 경우 라디오 체크 해제(품절상품 제외) || 필수옵션 01이 상품 배열에 하나도 없을 경우
if($('#relate-product-option-sheet .product-option .custom-radio:not(:has(span))').length ===1
|| productArr.filter(item => item[5] === '01'&& $('#goodsInnb').val() ===item[6]).length === 0){
$("input[name='r-group01']").prop('checked', false)
}
});
//TODO :: 입력옵션
// // // 마지막으로 생성된 상품에 각인 정보 추가
// // $('#cartAddTextBtn').on('click', function () {
// // var $index = $(".modal .productDetailInfo__count").length - 1;
// // var $text = $('#cartAddTextInput').val();
// // console.log(cartProductArr[$index]); // 인덱스 확인
// // $(".modal .productDetailInfo__count").eq($index).find(".productDetailInfo__count__amountTop").append('<div class="productDetailInfo__count__additionalSelect">각인문구 : ' + $text + '</div>');
// //
// // console.log(cartProductArr); // 배열 정보확인
// // });
//
//재고옵션
$('#relateAdditionalSelect').on("change", "select", function () { // 셀렉트 선택 시
if ($('#relateAdditionalSelect').find('.option.selected.disabled').length > 0) return;
if ($('#relateAdditionalSelect').find('.option.selected').length == $('#relateAdditionalSelect').find('.nice-select').length) { // 모든 셀렉트가 선택되면
var $title =$(this).closest("#relateAdditionalSelect").find('input[name="relateGoodsNm"]').val()
var $optInfo = $(this).siblings('.nice-select').find(".option.selected").attr("data-value").split('|');
var $priceNum = $optInfo[0];
var $goodsOptnInnb = $optInfo[1];
var $goodsOptnInfo = $optInfo[2];
var $goodsOptnTy = $optInfo[3];
var arr = [];
for (var i = 0; i < $('#relateAdditionalSelect').find('.nice-select').length; i++) {
arr.push($('#relateAdditionalSelect').find('.nice-select').eq(i).find('.option.selected').text());
}
//이미 추가된 상품인지 확인
var isItemAlreadyAdded = cartProductArr.some(function (item) {
return item[4] === $goodsOptnInnb;
});
if (isItemAlreadyAdded) {
fn_goods_duplicate_select_modal()
return;
}
const $relateGoodsInnb = $(this).closest("#relateAdditionalSelect").find('input[name="relateGoodsInnb"]').val()
cartProductArr.push([$title, 1, $priceNum, $priceNum * 1, $goodsOptnInnb, $goodsOptnTy, $relateGoodsInnb, arr]); // 배열에 상품 정보 추가
let cartAdditionalSelectText = '옵션 : ' + arr.join(' / ').replace(/\(\+.*?\)/g, ''); // 추가정보 텍스트로 변환
$('#cartCountContainer').append( // 화면에 상품 정보 추가
'<div class="product-count">' +
'<div class="product-count__amount-top">' +
'<span class="product-count__amount-title">' + $title + '</span>' +
'<div class="productDetailInfo__count__additionalSelect">' + cartAdditionalSelectText + '</div>' +
'<button class="product-count__amount-delete"><span class="visually-hidden">삭제</span></button>' +
'</div>' +
'<div class="product-count__amount-bottom">' +
'<div class="product-count__amount-counter">' +
'<button class="product-count__amount-btn minus"><span class="visually-hidden">감소</span></button>' +
'<span class="product-count__amount-number">1</span>' +
'<button class="product-count__amount-btn plus"><span class="visually-hidden">추가</span></button>' +
'</div>' +
'<div class="product-count__amount-price-box">' +
'<span class="product-count__amount-monthly-price">'+$goodsOptnInfo+'</span>' +
'<span class="product-count__amount-price"><span class="comma product-count__amount-priceNum">' + $priceNum +
'</div>' +
'</div>' +
'</div>'
);
}
updateCartCounters(); // 화면에 상품 정보 업데이트
console.log(productArr); // 배열 정보확인
});
// 추가구성옵션
$("#relateMoreItemsSelect").on("change",'select', function () {
var $moreItems = $('#relateMoreItemsSelect').find(".select-box");
const $optInfoOptn3 = $(this).siblings(".nice-select").find(".option.selected").attr("data-value").split('|');
const $priceNumOptn3 = $optInfoOptn3[0];
const $goodsOptnInnbOptn3 = $optInfoOptn3[1];
const $goodsOptnInfoOptn3 = $optInfoOptn3[2];
const $goodsOptnTyOptn3 = $optInfoOptn3[3];
const $optnEssnlAtOptn3 = $(this).siblings('[name="selectOptionItem__otpnEssntlAt__added"]').val();
// $moreItems.each(function () {
// if ($(this).find('.option.selected.disabled').length > 0) return;
var $title = $(this).siblings('.nice-select').find('.option.selected').text().replace(' ', '').trim().replace('선택', ' ').replace(/\(\+.*?\)/g, '');
//이미 추가된 상품인지 확인
var isItemAlreadyAdded = cartProductArr.some(function (item) {
return item[4] === $goodsOptnInnbOptn3;
});
if (isItemAlreadyAdded){
fn_goods_duplicate_select_modal()
return;
}
const $relateGoodsInnb = $(this).closest("#relateMoreItemsSelect").find('input[name="relateGoodsInnb"]').val()
cartProductArr.push([$title, 1, $priceNumOptn3, $priceNumOptn3 * 1, $goodsOptnInnbOptn3, $goodsOptnTyOptn3, $relateGoodsInnb, $optnEssnlAtOptn3]); // 배열에 상품 정보 추가
$('#cartCountContainer').append( // 화면에 상품 정보 추가
'<div class="product-count">' +
'<div class="product-count__amount-top">' +
'<span class="product-count__amount-title">' + $title + '</span>' +
'<button class="product-count__amount-delete"><span class="visually-hidden">삭제</span></button>' +
'</div>' +
'<div class="product-count__amount-bottom">' +
'<div class="product-count__amount-counter">' +
'<button class="product-count__amount-btn minus"><span class="visually-hidden">감소</span></button>' +
'<span class="product-count__amount-number">1</span>' +
'<button class="product-count__amount-btn plus"><span class="visually-hidden">추가</span></button>' +
'</div>' +
'<div class="product-count__amount-price-box">' +
'<span class="product-count__amount-monthly-price">'+$goodsOptnInfoOptn3+'</span>' +
'<span class="product-count__amount-price"><span class="comma product-count__amount-priceNum">' + $priceNumOptn3 +
'</div>' +
'</div>' +
'</div>'
);
$(this).val('').niceSelect('update')
updateCartCounters(); // 화면에 상품 정보 업데이트
});
//prodctArr에 추가시 중복제거
function addUniqueProducts(productArr, cartProductArr) {
// cartProductArr의 중복 제거
var uniqueCartProductArr = cartProductArr.filter(function(cartProduct, index, self) {
return index === self.findIndex(function(t) {
return t[4] === cartProduct[4]; // 각 배열의 첫 번째 요소(goodsOptnInnb) 기준으로 중복 제거
});
});
// uniqueCartProductArr를 반복하면서 productArr에 없는 상품을 추가
uniqueCartProductArr.forEach(function(cartProduct) {
var existsInProductArr = productArr.some(function(product) {
return product[4] === cartProduct[4]; // 각 배열의 첫 번째 요소(goodsOptnInnb) 비교
});
// productArr에 존재하지 않는 경우에만 추가
if (!existsInProductArr) {
productArr.push(cartProduct);
}
});
}
// //함께 구매하기 버튼 클릭시
$(document).on('click', '#addGoodsDtl',function () {
//상품 선택 확인
// if(cartProductArr.length <= 0){
// alert('상품옵션을 선택해 주세요');
// return;
// }
//추가구성옵션 - 필수추가구성옵션 있는지 확인
var values = $('input[name="productDetailInfo__additionalSelect__otpnEssntlAt__relate"]').map(function() {
return $(this).val();
}).get();
if(values.includes('Y')){
var isAddedOptnEssntlAt = cartProductArr.some(function (item) {
return item[7] === 'Y'
});
if(!isAddedOptnEssntlAt){
alert('필수추가옵션을 선택해 주세요');
return;
}
}
//일반옵션 라디오 버튼 체크 해제
$('#relatedProductPop input[type="radio"]').prop('checked', false);
//상품 상세 화면에 추가
addUniqueProducts(productArr, cartProductArr)
$('#countContainer').append($('#cartCountContainer').find('.product-count'))
updateTotalPriceProd() // 함께하면 좋은 상품 가격 더하기
closeModal('relatedProductPop')
})
// 3자리마다 "," 추가
function addComma(num) {
return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
//메인 상품 상세에 가격 더하기
function updateTotalPriceProd() {
var totalPrice = 0; // 총 상품금액
for (var i = 0; i < productArr.length; i++) {
totalPrice += productArr[i][3]; // 배열의 총 가격을 더함
}
$(".productDetailInfo__priceTotal__totalPriceNum").text(addComma(totalPrice)); // 총 상품금액 텍스트 변경
}
/*************************************************************
함께하면 좋은상품 이벤트 (모달) END
**************************************************************/
</script>
<div class="productOption" id="relate-product-option-sheet" style="padding-bottom: 0">
<input type="hidden" id="relateSlepricDscntAmt" value="${relateResultMap.goodsDtl.slepric}"/>
<c:if test="${not empty relateResultMap.optnList.normalOptnList}">
<p class="productOption__title">옵션 선택</p>
<div class="product-option">
<c:forEach var="goodsOpt01" items="${relateResultMap.optnList.normalOptnList}" varStatus="optList01">
<c:if test="${goodsOpt01.optnExpsrAt eq 'Y'}">
<c:if test="${goodsOpt01.invntrySldoutExpsrAt eq 'Y'}">
<div class="product-option__item">
<c:if test="${not empty goodsOpt01.optnVal1}">
<div class="custom-radio is-medium">
<input type="hidden" name="relateGoodsInnb" value="${goodsOpt01.goodsInnb}" />
<input type="radio" id="r-2${goodsOpt01.optnOrdr}" name="r-group01" <c:if test="${goodsOpt01.disableAt eq 'Y'}"> disabled</c:if> >
<label for="r-2${goodsOpt01.optnOrdr}">${goodsOpt01.optnVal1}</label>
<input type="hidden" name="optnCd" value="${goodsOpt01.optnCd1}">
<input type="hidden" name="goodsOptnInnb" value="${goodsOpt01.goodsOptnInnb}"/>
<input type="hidden" name="goodsOptnTy" value="${goodsOpt01.optnTy}"/>
<input type="hidden" name="goodsSopmalCd" value="${goodsOpt01.sopmalCd}"/>
<c:if test="${goodsOpt01.disableAt eq 'Y'}"> <span>(품절)</span></c:if>
</div>
<div class="product-option__right">
<span class="product-option__price"><fmt:formatNumber value="${goodsOpt01.slepric}"/>원</span>
<span class="product-option__monthly-payment">${goodsOpt01.optnInfo}</span>
</div>
</c:if>
</div>
</c:if>
</c:if>
</c:forEach>
</div>
</c:if>
<c:if test="${not empty relateResultMap.optnList.invntryOptnList}">
<p class="productOption__title">옵션 선택</p>
<div class="selectOptionItem" id="relateAdditionalSelect">
<c:if test="${not empty relateResultMap.optnList.invntryOptnList[0].optnNm1}">
<div class="select-box">
<input type="hidden" name="relateGoodsInnb" value="${relateResultMap.optnList.invntryOptnList[0].goodsInnb}" />
<input type="hidden" name="relateGoodsNm" value="${relateResultMap.goodsDtl.goodsNm}" />
<select class="full" title="해당 셀렉트에 대한 설명" id="selectRelateInvntryOptn1" name="selectRelateInvntryOptn">
<option value="" selected>선택</option>
<c:forEach var="goodsOpt02" items="${relateResultMap.optnList.invntryOptnList}" varStatus="optList02">
<c:if test="${goodsOpt02.optnExpsrAt eq 'Y'}">
<c:if test="${goodsOpt02.invntrySldoutExpsrAt eq 'Y'}">
<c:if test="${goodsOpt02.optnVal1 ne relateResultMap.optnList.invntryOptnList[optList02.index-1].optnVal1}">
<option value="${goodsOpt02.slepric}|${goodsOpt02.goodsOptnInnb}|${goodsOpt02.optnInfo}|${goodsOpt02.optnTy}" <c:if test="${goodsOpt02.disableAt eq 'Y'}"> disabled </c:if> >
<c:out value="${goodsOpt02.optnVal1}"/>
</option>
</c:if>
</c:if>
</c:if>
</c:forEach>
</select>
</div>
</c:if>
<c:if test="${not empty relateResultMap.optnList.invntryOptnList[0].optnNm2}">
<div class="select-box">
<select class="full" title="해당 셀렉트에 대한 설명" id="selectRelateInvntryOptn2" name="selectRelateInvntryOptn">
<option value="" disabled selected>선택</option>
</select>
</div>
</c:if>
<c:if test="${not empty relateResultMap.optnList.invntryOptnList[0].optnNm3}">
<div class="select-box">
<select class="full" title="해당 셀렉트에 대한 설명" id="selectRelateInvntryOptn3" name="selectRelateInvntryOptn">
<option value="" disabled selected>선택</option>
</select>
</div>
</c:if>
<c:if test="${not empty relateResultMap.optnList.invntryOptnList[0].optnNm4}">
<div class="select-box">
<select class="full" title="해당 셀렉트에 대한 설명" id="selectRelateInvntryOptn4" name="selectRelateInvntryOptn">
<option value="" disabled selected>선택</option>
</select>
</div>
</c:if>
</div>
</c:if>
<c:if test="${not empty relateResultMap.optnList.addedOptnList}">
<p class="productOption__title">추가구성</p>
<div class="selectOptionItem" id="relateMoreItemsSelect">
<input type="hidden" name="relateGoodsInnb" value="${relateResultMap.optnList.addedOptnList[0].goodsInnb}"/>
<c:forEach var="goodsOpt03" items="${relateResultMap.optnList.addedOptnList}" varStatus="optList03">
<c:if test="${not empty goodsOpt03.optnNm1}">
<c:if test="${relateResultMap.optnList.addedOptnList[optList03.index-1].optnNm1 ne goodsOpt03.optnNm1}">
<div class="select-box">
<input type="hidden" name="selectOptionItem__otpnEssntlAt__added" <c:if test="${goodsOpt03.optnEssntlAt eq 'Y'}"> value="Y"</c:if>/>
<select class="full" title="해당 셀렉트에 대한 설명" name="selectRelateAddedOptn">
<option value="" disabled selected>${goodsOpt03.optnNm1} 선택</option>
<c:forEach var="goodsOptVal03" items="${relateResultMap.optnList.addedOptnList}" varStatus="optVal03">
<c:if test="${goodsOptVal03.optnNm1 eq goodsOpt03.optnNm1}">
<c:if test="${goodsOptVal03.optnExpsrAt eq 'Y'}">
<c:if test="${goodsOptVal03.invntrySldoutExpsrAt eq 'Y'}">
<option value="${goodsOptVal03.slepric}|${goodsOptVal03.goodsOptnInnb}|${goodsOptVal03.optnInfo}|${goodsOptVal03.optnTy} " <c:if test="${goodsOptVal03.disableAt eq 'Y'}"> disabled</c:if> ><c:out value="${goodsOptVal03.optnVal1}"/> (+ <fmt:formatNumber value="${goodsOptVal03.slepric}"/>) <c:if test="${goodsOptVal03.disableAt eq 'Y'}"> <c:out value="(품절)"/> </c:if> </option>
</c:if>
</c:if>
</c:if>
</c:forEach>
</select>
</div>
</c:if>
</c:if>
</c:forEach>
</div>
</c:if>
<%-- <p class="productOption__title">상품정보 입력</p> TODO :: 입력옵션--%>
<%-- <div class="inputOptionItem">--%>
<%-- <input id="addTextInput" class="input-text full" type="text" title="해당 인풋에 대한 설명"--%>
<%-- placeholder="각인 문구를 입력해주세요" value="">--%>
<%-- <button type="button" id="addTextBtn" class="btn outline md">저장</button>--%>
<%-- </div>--%>
<div id="cartCountContainer">
</div>
</div>