4811 lines
239 KiB
Plaintext
4811 lines
239 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 : GoodsDtlR.jsp
|
|
Description : 상품 상세
|
|
Modification Information
|
|
|
|
수정일 수정자 수정내용
|
|
------- -------- ---------------------------
|
|
2024-04-18 김혜인 최초 생성
|
|
--%>
|
|
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
<head>
|
|
<jsp:include page="/WEB-INF/views/comm/mobile/Include.jsp"/>
|
|
<spring:eval expression="@environment.getProperty('sopmalfo.common.fileupload.cdnurl')" var="cdnurl"/>
|
|
<spring:eval expression="@environment.getProperty('currency-unit.default')" var="curUnit"/>
|
|
<script type="text/javascript" src="//developers.band.us/js/share/band-button.js?v=24082024"></script>
|
|
<script type="text/JavaScript" src="https://developers.kakao.com/sdk/js/kakao.min.js"></script>
|
|
<script type="text/javascript">Kakao.init('${kakaoKey}');</script>
|
|
</head>
|
|
|
|
<script>
|
|
//상품 타이틀, 수량, 가격 저장하는 배열
|
|
let productArr = []; // 배열 순서 -> [상품명, 수량, 1개당 가격, 상품 총가격(=수량x개당가격), 추가정보(색상, 사이즈등)]
|
|
let cartProductArr = []; //함께하면 좋은 상품 저장 배열
|
|
$(document).ready(function () {
|
|
if($(".media").length > 0){
|
|
$('.media > div > div').removeAttr('style')
|
|
.css({
|
|
aspectRatio: '16 / 9' // aspect-ratio 설정
|
|
});
|
|
// 모든 인라인 스타일 삭제
|
|
$('figure.media iframe').css('height', '100%');
|
|
}
|
|
/*헤더에 타이틀 set*/
|
|
fn_set_header_title('상품');
|
|
|
|
// 모달 트리거 이벤트 리스너
|
|
$(document).on('click', '.fullscreen-trigger', function (e) {
|
|
e.preventDefault();
|
|
var modalId = $(this).attr('data-micromodal-trigger');
|
|
openModal(modalId);
|
|
});
|
|
|
|
// 모달 닫기 이벤트 리스너
|
|
$(document).on('click', '.microModal .microModal__close', function () {
|
|
var modalId = $(this).closest('.microModal').attr('id');
|
|
closeModal(modalId);
|
|
});
|
|
|
|
// 뒤로가기 이벤트 리스너
|
|
window.addEventListener('popstate', function (event) {
|
|
var modalId = window.location.hash.replace('#', '');
|
|
if (modalId) {
|
|
closeModal(modalId);
|
|
} else {
|
|
$('.microModal').each(function () {
|
|
MicroModal.close($(this).attr('id'));
|
|
});
|
|
}
|
|
|
|
document.body.style.overflow = '';
|
|
|
|
});
|
|
|
|
if (window.location.hash) {
|
|
var modalId = window.location.hash.replace('#', '');
|
|
openModal(modalId);
|
|
}
|
|
|
|
//상품 정보 이벤트
|
|
fn_goods_info_event();
|
|
//리뷰 전역 이벤트
|
|
fn_rvw_global_event();
|
|
//상품 qna 이벤트
|
|
fn_qna_event();
|
|
// 모달 배경화면 스크롤 방지
|
|
MicroModal.init(
|
|
{
|
|
disableScroll: true,
|
|
awaitCloseAnimation: true,
|
|
});
|
|
// 쿠키 저장
|
|
fn_save_cookie();
|
|
});
|
|
|
|
/* 쿠키 저장 */
|
|
const fn_save_cookie = function() {
|
|
let sopmalCd = $('#sopmalCd').val();
|
|
let goodsInnb = $('#goodsInnb').val();
|
|
|
|
saveToCookie('goodsInnb', goodsInnb);
|
|
let values = getValuesFromCookie('goodsInnb');
|
|
}
|
|
|
|
function setCookie(name, value) {
|
|
document.cookie = name + '=' + decodeURIComponent(value) + '; path=/';
|
|
}
|
|
|
|
function saveToCookie(name, newValue) {
|
|
let existingValues = getValuesFromCookie(name).split(':');
|
|
|
|
if(!existingValues.includes(newValue) ) {
|
|
existingValues.push(newValue);
|
|
|
|
if (existingValues.length > 6) {
|
|
existingValues.shift();
|
|
}
|
|
|
|
setCookie(name, existingValues.join(':'));
|
|
}
|
|
}
|
|
|
|
function getCookie(name) {
|
|
let value = '; ' + document.cookie;
|
|
let parts = value.split('; ' + name + '=');
|
|
if (parts.length === 2) return decodeURIComponent(parts.pop().split(';').shift());
|
|
}
|
|
|
|
function getValuesFromCookie(name) {
|
|
let cookieValue = getCookie(name);
|
|
// return cookieValue ? cookieValue.split(',') : [];
|
|
return cookieValue ? cookieValue: '';
|
|
}
|
|
/*************************************************************
|
|
SNS 공유하기 (카카오톡,인스타그램,네이버밴드)
|
|
**************************************************************/
|
|
|
|
const fn_sns_share = function (shareItem) {
|
|
|
|
const currentURL = window.location.href; //Link URL 및 구매하기 URL
|
|
const goodsNm = '${resultMap.goodsDtl.goodsNm}'; //상품명
|
|
const cnsmrpric = ${resultMap.goodsDtl.cnsmrpric}; //정가
|
|
const slePercent = ${resultMap.goodsDtl.slePercent}; //할인율
|
|
const slepric = ${resultMap.goodsDtl.slepric}; //세일가
|
|
const srtDc = '${resultMap.goodsDtl.srtDc}'; //상품 간략설명
|
|
|
|
|
|
const imgList = '${resultMap.goodsDtl.img}'
|
|
|
|
let mainImg;
|
|
|
|
if(imgList.concat("|")){
|
|
|
|
mainImg = imgList.split("|")[0]
|
|
|
|
}else{
|
|
mainImg = imgList
|
|
}
|
|
|
|
const goodsImgCours = '${cdnurl}'+mainImg // 상품이미지
|
|
|
|
//카카오톡 공유하기
|
|
if("kakao" == shareItem){
|
|
Kakao.Link.sendDefault({
|
|
objectType: 'commerce',
|
|
content: {
|
|
title: srtDc, //상품설명
|
|
imageUrl: goodsImgCours,//상품이미지
|
|
link: {
|
|
// [내 애플리케이션] > [플랫폼] 에서 등록한 사이트 도메인과 일치해야 함
|
|
mobileWebUrl: currentURL,
|
|
webUrl: currentURL,
|
|
},
|
|
},
|
|
commerce: {
|
|
productName: goodsNm,
|
|
regularPrice: cnsmrpric,
|
|
discountRate: slePercent,
|
|
discountPrice: slepric,
|
|
},
|
|
buttons: [
|
|
{
|
|
title: '구매하기',
|
|
link: {
|
|
mobileWebUrl: currentURL,
|
|
webUrl: currentURL,
|
|
},
|
|
},
|
|
],
|
|
});
|
|
}
|
|
//인스타그램 공유하기
|
|
if("instagram" == shareItem){
|
|
let instagramUrl = "https://www.instagram.com/";
|
|
fn_clipboard(currentURL);
|
|
alert("URL이 클립보드에 복사되었습니다. 인스타그램에 가서 붙여넣고 글을 작성하세요!");
|
|
window.open(instagramUrl,"instagram", "width=400, height=500, resizable=yes");
|
|
}
|
|
|
|
//네이버 밴드 공유하기
|
|
if("naverBand" == shareItem){
|
|
location.href = "bandapp://create/post?text="+encodeURIComponent(srtDc + currentURL)+"&route="+encodeURIComponent(currentURL);
|
|
}
|
|
}
|
|
|
|
|
|
const fn_clipboard = function(Text){
|
|
const textArea = document.createElement('textarea');
|
|
textArea.value = Text;
|
|
document.body.appendChild(textArea);
|
|
textArea.select();
|
|
textArea.setSelectionRange(0, 99999);
|
|
try {
|
|
document.execCommand('copy');
|
|
} catch (err) {
|
|
console.error('복사 실패', err);
|
|
}
|
|
textArea.setSelectionRange(0, 0);
|
|
document.body.removeChild(textArea);
|
|
}
|
|
|
|
/*********************************************************
|
|
탭 조회 함수
|
|
*********************************************************/
|
|
const fn_select_content = (activeTabValue) => {
|
|
//해당 jsp 호출 메소드
|
|
if (activeTabValue === 'productReviewA') {//리뷰
|
|
let rvwPageIndex = $("#rvwPageIndex").val();
|
|
if (!rvwPageIndex) {
|
|
rvwPageIndex = 1;
|
|
}
|
|
fn_select_rvw_form(rvwPageIndex);
|
|
} else if (activeTabValue === 'productQnA') {//qna
|
|
let qnaPageIndex = $("#qnaPageIndex").val();
|
|
if (!qnaPageIndex) {
|
|
qnaPageIndex = 1;
|
|
}
|
|
fn_select_qna(qnaPageIndex);
|
|
} else if (activeTabValue === 'productReTurnA') {//반품정보
|
|
fn_select_return_info();
|
|
}
|
|
}
|
|
/******************************************상품********************************************/
|
|
//인풋 태그 생성
|
|
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);
|
|
}
|
|
|
|
|
|
|
|
const fn_goods_info_event = () => {
|
|
/*상세 정보 유튜브 화면 조정*/
|
|
/* if($("#productInfo").find("iframe").length > 0){
|
|
$("#productInfo").find("iframe").css({
|
|
"width": "100%",
|
|
"height": "300px"
|
|
});
|
|
}
|
|
*/
|
|
// 240819수정 상품 상세정보 더보기 버튼 클릭 시, 접힌 이미지 펼쳐짐
|
|
$(".productDetailcontent__moreBtn").click(function () {
|
|
if ($(this).hasClass("opened")) {
|
|
$(this).removeClass("opened");
|
|
$(".productDetailcontent__imageDetails").removeClass("opened");
|
|
$(this).text("상세설명 더보기");
|
|
} else {
|
|
$(this).addClass("opened");
|
|
$(".productDetailcontent__imageDetails").addClass("opened");
|
|
$(this).text("상세설명 접기");
|
|
}
|
|
});
|
|
|
|
// 상품고시 Tab 누르면 해당 섹션 띄우고, 해당 섹션으로 이동
|
|
$('.productDetailTab__item button').click(function () {
|
|
let targetDiv = $(this).attr("id");
|
|
fn_select_content(targetDiv);
|
|
|
|
var index = $(this).parent().index();
|
|
$('.productDetailTab__item').removeClass('active');
|
|
$(this).parent().addClass('active');
|
|
$('.productDetailTab__content').removeClass('active');
|
|
$('.productDetailTab__content').eq(index).addClass('active');
|
|
|
|
var target = $('.productDetailTab__content').eq(index);
|
|
var offset = target.offset().top;
|
|
$('html, body').animate({
|
|
scrollTop: offset - 100
|
|
}, 0);
|
|
});
|
|
|
|
// 상품이미지 슬라이드
|
|
const mainSwiper = new Swiper(".productDetailImages", {
|
|
loop: true,
|
|
pagination: {
|
|
el: ".swiper-pagination",
|
|
clickable: true,
|
|
},
|
|
});
|
|
|
|
|
|
// //함께하면 좋은 상품 옵션 펼치기/접기
|
|
$(".sub-box .relatedProduct__optionBtn").click(function () {
|
|
// 현재 클릭된 버튼의 부모 sub-box 요소를 찾음
|
|
const parentDiv = $(this).closest('.sub-box');
|
|
const childId = $(this).next('.relatedProduct__option').attr('id')
|
|
|
|
|
|
$('.relatedProduct__optionBtn').not(this).each(function() {
|
|
if($(this).hasClass('opened')){
|
|
cartProductArr = [];
|
|
$(this).removeClass('opened')
|
|
$(this).next(".relatedProduct__option").removeClass("opened");
|
|
}
|
|
})
|
|
|
|
if($(this).hasClass('opened')){
|
|
cartProductArr = [];
|
|
$(this).removeClass('opened')
|
|
$(this).next('.relatedProduct__option').removeClass('opened')
|
|
}else{
|
|
$(this).addClass('opened')
|
|
$(this).next('.relatedProduct__option').addClass('opened')
|
|
}
|
|
|
|
|
|
});
|
|
|
|
//쿠폰받기
|
|
$('#couponList').on('click', function() {
|
|
|
|
//비로그인시 로그인 유도 모달
|
|
if (fn_is_empty($('#mbrId').val())) {
|
|
openModal('modal-error-confirm-move-login')
|
|
return;
|
|
}
|
|
|
|
fn_coupon_open_modal('couponListDiv','coupon-select-popUp')
|
|
|
|
})
|
|
|
|
// 위시리스트 하트 토글
|
|
$('#productMyWish').on('click', function () {
|
|
|
|
if($('#hiddenForm_wslist')!= null){
|
|
$('#hiddenForm_wslist').remove()
|
|
}
|
|
|
|
const goodsInnb = $('#goodsInnb').val()
|
|
const wslistInnb = $('#wslistInnb').val()
|
|
const mbrId = $('#mbrId').val()
|
|
if(fn_is_empty(mbrId)){
|
|
openModal('modal-error-confirm-move-login')
|
|
return;
|
|
}
|
|
|
|
let url;
|
|
if($(this).find('i').hasClass('active')){
|
|
url = "<c:url value="/sopmal/mpage/ordr/deleteWslistGoodsDel"/>";
|
|
}else{
|
|
url = "<c:url value="/sopmal/mpage/ordr/insertWslistGoods"/>";
|
|
}
|
|
|
|
const hiddenForm_wslist = document.createElement('form');
|
|
hiddenForm_wslist.name = 'hiddenForm_wslist';
|
|
hiddenForm_wslist.id = 'hiddenForm_wslist';
|
|
|
|
const formData = new FormData();
|
|
|
|
|
|
fn_create_input('hidden', "wslistInnb", parseInt(wslistInnb) , hiddenForm_wslist);
|
|
fn_create_input('hidden', "goodsInnb", goodsInnb, hiddenForm_wslist);
|
|
|
|
document.body.appendChild(hiddenForm_wslist);
|
|
|
|
$('#hiddenForm_wslist').serializeArray().forEach(function (item) {
|
|
formData.append(item.name, item.value);
|
|
});
|
|
|
|
$.ajax({
|
|
type: 'post',
|
|
url: url,
|
|
data: formData,
|
|
processData: false,
|
|
contentType: false,
|
|
success: function (data) {
|
|
if (data.resBody != null) {
|
|
const result = JSON.parse(data.resBody.result);
|
|
if (result.message === 'success') {
|
|
$('#wslistInnb').val(result.wslistInnb)
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
|
|
$(this).find('i').toggleClass('active');
|
|
});
|
|
|
|
|
|
|
|
///////// 240716 상품 스크립트 모음 //////////
|
|
|
|
/*************************************************************
|
|
장바구니 버튼 이벤트 (바텀시트)
|
|
**************************************************************/
|
|
|
|
// 일반옵션
|
|
// 라디오 버튼 클릭시, 상품 정보 배열에 추가 및 화면에 추가
|
|
$(".productOption .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 = productArr.some(function (item) {
|
|
return item[4] === $goodsOptnInnb;
|
|
});
|
|
if (isItemAlreadyAdded){
|
|
fn_goods_duplicate_select_modal()
|
|
return;
|
|
}
|
|
const $goodsInnb = $('#goodsInnb').val()
|
|
productArr.push([$title, 1, $priceNum, $priceNum * 1, $goodsOptnInnb, $goodsOptnTy, $goodsInnb]); // 배열에 상품 정보 추가
|
|
$('#countContainer').append( // 화면에 상품 정보 추가
|
|
'<div class="product-count">' +
|
|
'<div class="product-count__amount-top">' +
|
|
'<span class="product-count__amount-title">' + $title + '</span>' +
|
|
'<button type="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 type="button" class="product-count__amount-btn minus"><span class="visually-hidden">감소</span></button>' +
|
|
'<span class="product-count__amount-number">1</span>' +
|
|
'<button type="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__priceNum">' + $price +
|
|
'</div>' +
|
|
'</div>' +
|
|
'</div>'
|
|
);
|
|
updateCounters(); // 화면에 상품 정보 업데이트
|
|
});
|
|
});
|
|
|
|
//재고옵션
|
|
$('#additionalSelect').on("change", "select", function () { // 셀렉트 선택 시
|
|
if ($('#additionalSelect').find('.option.selected.disabled').length > 0) return;
|
|
if ($('#additionalSelect').find('.option.selected').length == $('#additionalSelect').find('.nice-select').length) { // 모든 셀렉트가 선택되면
|
|
|
|
var $title = $('#addCartGoodsNm').val();
|
|
var $optInfo = $(this).closest('.select-box').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 < $('#additionalSelect').find('.nice-select').length; i++) {
|
|
arr.push($('#additionalSelect').find('.nice-select').eq(i).find('.option.selected').text());
|
|
}
|
|
|
|
//이미 추가된 상품인지 확인
|
|
var isItemAlreadyAdded = productArr.some(function (item) {
|
|
return item[4] === $goodsOptnInnb;
|
|
});
|
|
if (isItemAlreadyAdded){
|
|
fn_goods_duplicate_select_modal()
|
|
return;
|
|
}
|
|
|
|
const $goodsInnb = $('#goodsInnb').val()
|
|
productArr.push([$title, 1, $priceNum, $priceNum * 1, $goodsOptnInnb, $goodsOptnTy, $goodsInnb, arr]); // 배열에 상품 정보 추가
|
|
let additionalSelectText = '옵션 : ' + arr.join(' / ').replace(/\(\+.*?\)/g, ''); // 추가정보 텍스트로 변환
|
|
$('#countContainer').append( // 화면에 상품 정보 추가
|
|
'<div class="product-count">' +
|
|
'<div class="product-count__amount-top">' +
|
|
'<span class="product-count__amount-title">' + $title + '</span>' +
|
|
'<div class="productDetailInfo__count__additionalSelect">' + additionalSelectText + '</div>' +
|
|
'<button type="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 type="button" class="product-count__amount-btn minus"><span class="visually-hidden">감소</span></button>' +
|
|
'<span class="product-count__amount-number">1</span>' +
|
|
'<button type="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__priceNum">' + $priceNum +
|
|
'</div>' +
|
|
'</div>' +
|
|
'</div>'
|
|
);
|
|
}
|
|
updateCounters(); // 화면에 상품 정보 업데이트
|
|
console.log(productArr); // 배열 정보확인
|
|
|
|
});
|
|
|
|
// 추가구성옵션
|
|
$("#moreItemsSelect").on("change",'select', function () {
|
|
const $moreItems = $('#moreItemsSelect').find(".select-box");
|
|
const $optInfoOptn3 = $(this).closest(".select-box").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).closest(".select-box").find('input[name="selectOptionItem__otpnEssntlAt__added"]').val();
|
|
|
|
|
|
var $title = $(this).closest(".select-box").find(".option.selected").text().replace('선택', ' ').replace(/\(\+.*?\)/g, '');
|
|
var $priceNum = $(this).find(".option.selected").attr("data-value");
|
|
|
|
//이미 추가된 상품인지 확인
|
|
var isItemAlreadyAdded = productArr.some(function (item) {
|
|
return item[4] === $goodsOptnInnbOptn3;
|
|
});
|
|
if (isItemAlreadyAdded){
|
|
$(this).val('').niceSelect('update')
|
|
fn_goods_duplicate_select_modal()
|
|
return;
|
|
}
|
|
|
|
const $goodsInnb = $('#goodsInnb').val()
|
|
productArr.push([$title, 1, $priceNumOptn3, $priceNumOptn3 * 1, $goodsOptnInnbOptn3, $goodsOptnTyOptn3, $goodsInnb, $optnEssnlAtOptn3]); // 배열에 상품 정보 추가
|
|
$('#countContainer').append( // 화면에 상품 정보 추가
|
|
'<div class="product-count">' +
|
|
'<div class="product-count__amount-top">' +
|
|
'<span class="product-count__amount-title">' + $title + '</span>' +
|
|
'<button type="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 type="button" class="product-count__amount-btn minus"><span class="visually-hidden">감소</span></button>' +
|
|
'<span class="product-count__amount-number">1</span>' +
|
|
'<button type="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__priceNum">' + $priceNum +
|
|
'</div>' +
|
|
'</div>' +
|
|
'</div>'
|
|
);
|
|
|
|
$(this).val('').niceSelect('update')
|
|
updateCounters(); // 화면에 상품 정보 업데이트
|
|
|
|
//추가구성옵션 옵션 값 초기화
|
|
$('select[name="selectAddedOptn"]').val('').niceSelect('update');
|
|
});
|
|
|
|
// 총 상품금액
|
|
var $totalPrice = $(".productDetailInfo__priceTotal__totalPriceNum");
|
|
|
|
// 수량 "-", "+" 버튼 클릭 시, 수량 증감 및 가격 변경 및 총 상품금액 변경
|
|
$("#countContainer").on("click", ".product-count__amount-btn", function () { // 수량 버튼 클릭 시
|
|
var $counter = $(this);
|
|
var $index = $counter.closest(".product-count").index(); // 해당 상품의 인덱스
|
|
if ($(this).hasClass("minus")) { // "-" 버튼 클릭 시
|
|
if (productArr[$index][1] <= 1) return;
|
|
productArr[$index][1]--; // 배열에서 해당 상품의 수량 감소
|
|
productArr[$index][3] = productArr[$index][1] * productArr[$index][2]; // 배열에서 해당 상품의 총 가격 변경
|
|
} else { // "+" 버튼 클릭 시
|
|
productArr[$index][1]++; // 배열에서 해당 상품의 수량 증가
|
|
productArr[$index][3] = productArr[$index][1] * productArr[$index][2]; // 배열에서 해당 상품의 총 가격 변경
|
|
}
|
|
updateCounters(); // 화면에 상품 정보 업데이트
|
|
})
|
|
|
|
//배열 내용을 바탕으로 각 아이템 텍스트 변경
|
|
function updateCounters() {
|
|
$(".productOption .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__priceNum");
|
|
$number.text(productArr[$index][1]);
|
|
$price.text(addComma(productArr[$index][3]) + '${curUnit}');
|
|
});
|
|
updateTotalPrice(); // 총 상품금액 업데이트
|
|
}
|
|
|
|
// 3자리마다 "," 추가
|
|
function addComma(num) {
|
|
return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
|
|
}
|
|
|
|
// 총 상품금액 업데이트
|
|
function updateTotalPrice() {
|
|
var totalPrice = 0; // 총 상품금액
|
|
for (var i = 0; i < productArr.length; i++) {
|
|
totalPrice += productArr[i][3]; // 배열의 총 가격을 더함
|
|
}
|
|
$totalPrice.text(addComma(totalPrice)); // 총 상품금액 텍스트 변경
|
|
}
|
|
|
|
// x버튼 클릭 시 삭제
|
|
$("#countContainer").on("click", ".product-count__amount-delete", function () { // x 버튼 클릭 시
|
|
var $index = $(this).closest(".product-count").index();
|
|
productArr.splice($index, 1); // 배열에서 해당 상품 삭제
|
|
cartProductArr.splice($index, 1); // 함께하면 좋은 상품 배열에서 해당 상품 삭제
|
|
$(this).closest(".product-count").remove(); // 화면에서 해당 상품 삭제
|
|
updateCounters(); // 화면에 상품 정보 업데이트
|
|
|
|
//일반옵션이 하나일 경우 라디오 체크 해제(품절상품 제외) || 필수옵션 01이 상품 배열에 하나도 없을 경우
|
|
if($('.productOption .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 :: 입력옵션
|
|
// $('#addTextBtn').on('click', function () {
|
|
// var $index = $(".productOption .product-count").length - 1;
|
|
// var $text = $('#addTextInput').val();
|
|
// console.log(productArr[$index]); // 인덱스 확인
|
|
// $(".productOption .product-count").eq($index).find(".product-count__amount-top").append('<div class="productDetailInfo__count__additionalSelect">각인문구 : ' + $text + '</div>');
|
|
//
|
|
// console.log(productArr); // 배열 정보확인
|
|
// });
|
|
|
|
|
|
|
|
}
|
|
/*최대혜택가 툴팁 popmodal 정보 조회*/
|
|
const fn_select_dc_price = () => {
|
|
|
|
openModal('dcPriceContent');
|
|
|
|
}
|
|
/********************************************리뷰작성혜택 툴팁*************************************************/
|
|
/*리뷰 혜택 popmodal 정보 조회*/
|
|
const fn_select_rvw_bnef_info = () => {
|
|
$.ajax({
|
|
type: "post",
|
|
url: "/sopmal/goods/selectRvwBnefInfo",
|
|
success: function (data) {
|
|
const jsonString = JSON.stringify(data.resBody.result);
|
|
fn_set_rvw_bnef_cn(jsonString);
|
|
openModal("reviewBenefitPop");
|
|
}
|
|
});
|
|
}
|
|
|
|
/*마일리지 , 적용*/
|
|
const fn_applc_mil_amt = (amt) => {
|
|
if(amt !== null){
|
|
amt = amt.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
|
|
}else{
|
|
amt = '0';
|
|
}
|
|
return amt;
|
|
}
|
|
|
|
/*리뷰 혜택 내용 set*/
|
|
const fn_set_rvw_bnef_cn = (data) => {
|
|
// const rvwBnefInfo = JSON.parse(data.resBody.result);
|
|
const rvwBnefInfo = JSON.parse(JSON.parse(data));
|
|
/*일반리뷰 정보*/
|
|
let gnrlRvwMlgAccmlmnyAmt = fn_applc_mil_amt(rvwBnefInfo.gnrlRvwMlgAccmlmnyAmt) != undefined ? rvwBnefInfo.gnrlRvwMlgAccmlmnyAmt : null;
|
|
let photoRvwMlgAccmlmnyAmt = fn_applc_mil_amt(rvwBnefInfo.photoRvwMlgAccmlmnyAmt != undefined ? rvwBnefInfo.photoRvwMlgAccmlmnyAmt : null);
|
|
// console.log(gnrlRvwMlgAccmlmnyAmt) != undefined ? rvwBnefInfo.gnrlRvwMlgAccmlmnyAmt : null;
|
|
// console.log(photoRvwMlgAccmlmnyAmt != undefined ? rvwBnefInfo.photoRvwMlgAccmlmnyAmt : null);
|
|
let writngChrCnt = rvwBnefInfo.writngChrCnt != undefined ? rvwBnefInfo.writngChrCnt : null;
|
|
|
|
/*한달리뷰 정보*/
|
|
let monthBbsExpsrAt = rvwBnefInfo.monthBbsExpsrAt != undefined ? rvwBnefInfo.monthBbsExpsrAt : null;
|
|
let monthPhotoRvwMlgAccmlmnyAmt = fn_applc_mil_amt(rvwBnefInfo.monthPhotoRvwMlgAccmlmnyAmt != undefined ? rvwBnefInfo.monthPhotoRvwMlgAccmlmnyAmt : null);
|
|
|
|
/*일반리뷰,포토리뷰 추가 마일리지 정보*/
|
|
let aditMlgPymntBgnDe = rvwBnefInfo.aditMlgPymntBgnDe != undefined ? rvwBnefInfo.aditMlgPymntBgnDe : null;
|
|
let aditMlgPymntEndDe = rvwBnefInfo.aditMlgPymntEndDe != undefined ? rvwBnefInfo.aditMlgPymntEndDe : null;
|
|
let aditPymntMlgAccmlmnyAmt = fn_applc_mil_amt(rvwBnefInfo.aditPymntMlgAccmlmnyAmt != undefined ? rvwBnefInfo.aditPymntMlgAccmlmnyAmt : null);
|
|
|
|
/*한달리뷰,포토리뷰 추가 마일리지 정보*/
|
|
let monthAditMlgPymntBgnDe = rvwBnefInfo.monthAditMlgPymntBgnDe != undefined ? rvwBnefInfo.monthAditMlgPymntBgnDe : null;
|
|
let monthAditMlgPymntEndDe = rvwBnefInfo.monthAditMlgPymntEndDe != undefined ? rvwBnefInfo.monthAditMlgPymntEndDe : null;
|
|
let monthAditPymntMlgAccmlmnyAmt = fn_applc_mil_amt(rvwBnefInfo.monthAditPymntMlgAccmlmnyAmt != undefined ? rvwBnefInfo.monthAditPymntMlgAccmlmnyAmt : null);
|
|
|
|
|
|
/*포토리뷰 금액 존재 여부에 따른 html 구성*/
|
|
let photoMilCn = photoRvwMlgAccmlmnyAmt !== '0' ? ` <dl>
|
|
<dt> 2.포토리뷰</dt>
|
|
<dd>마일리지 <em>\${photoRvwMlgAccmlmnyAmt}\점</em> 적립</dd>
|
|
</dl>` : '';
|
|
/*일반리뷰, 포토리뷰 추가마일리지 여부에 따른 html 구성*/
|
|
let aditMlgCn = aditPymntMlgAccmlmnyAmt !== '0' ? ` <dl>
|
|
<dt>4. 일반리뷰 ,포토 리뷰 추가 마일리지(\${monthAditMlgPymntBgnDe}\ ~ \${monthAditMlgPymntEndDe}\ )</dt>
|
|
<dd>마일리지 <em>\${aditPymntMlgAccmlmnyAmt}\점</em> 적립</dd>
|
|
</dl>` : '';
|
|
|
|
/*한딜리뷰 사용 여부에 따른 html 구성*/
|
|
let monthMilCn = monthBbsExpsrAt === 'Y' ? `<dl>
|
|
<dt>3. 한달리뷰</dt>
|
|
<dd>마일리지 <em>\${monthPhotoRvwMlgAccmlmnyAmt}\점</em> 적립</dd>
|
|
</dl>` : '';
|
|
|
|
/* 한달 리뷰 추가마일리지 여부에 따른 html 구성*/
|
|
let monthAditMlgCn = monthAditPymntMlgAccmlmnyAmt !== '0' ? ` <dl>
|
|
<dt>5. 한달리뷰 추가 마일리지(\${monthAditMlgPymntBgnDe}\ ~ \${monthAditMlgPymntEndDe}\)</dt>
|
|
<dd>마일리지 <em>\${monthAditPymntMlgAccmlmnyAmt}\점</em> 적립</dd>
|
|
</dl>` : '';
|
|
/*한달리뷰 사용 여부에 따른 분기 처리(상품 설정에 따른)*/
|
|
const MtRvwWritngPosblAt = $("#MtRvwWritngPosblAt").val();
|
|
let monthHtml = '';
|
|
if(MtRvwWritngPosblAt === 'Y'){
|
|
monthHtml = `\${monthMilCn}\${monthAditMlgCn}`;
|
|
}
|
|
/* 분기처리후 최종 html*/
|
|
let rvwBnefInfoCn = `<dl>
|
|
<dt>1. 일반리뷰</dt>
|
|
<dd>마일리지 <em>\${gnrlRvwMlgAccmlmnyAmt}\점</em> 적립</dd>
|
|
</dl>
|
|
\${photoMilCn}
|
|
\${aditMlgCn}
|
|
\${monthHtml}
|
|
`;
|
|
$("#reviewBenefit").html(rvwBnefInfoCn);
|
|
}
|
|
|
|
/******************************************리뷰********************************************/
|
|
const fn_rvw_global_event = () => {
|
|
// 포토&동영상 리뷰 전체갤러리 (전체보기 이벤트)
|
|
$(document).on('click', '#photo-gallery-trigger', function () {
|
|
$('.photoReviewGallery').addClass('active');
|
|
$('.photoReviewSlide').hide();
|
|
|
|
// 현재 슬라이드 인덱스에 해당하는 이미지에 current 클래스 추가
|
|
var currentSlideIndex = photoReviewSwiper.realIndex;
|
|
$('.photoReviewSlide__fraction .swiper-pagination-current').text(currentSlideIndex + 1);
|
|
$('.photoReviewGallery__item').find('.photoReviewGallery__image').removeClass('current');
|
|
$('.photoReviewGallery__item').eq(currentSlideIndex).find('.photoReviewGallery__image').addClass('current');
|
|
});
|
|
// 포토&동영상 리뷰 갤러리 아이템 클릭시 해당 이미지로 슬라이드 이동
|
|
$(document).on('click', '.photoReviewGallery__image', function (e) {
|
|
e.preventDefault();
|
|
var clickedIndex = $(this).closest(".photoReviewGallery__item").index(".photoReviewGallery__item");
|
|
photoReviewSwiper.slideTo(clickedIndex, 0);
|
|
$('.photoReviewGallery__image').not($(this)).removeClass('current');
|
|
$(this).addClass('current');
|
|
|
|
// 현재 슬라이드 인덱스에 해당하는 이미지에 current 클래스 추가
|
|
$('.photoReviewSlide__fraction .swiper-pagination-current').text(clickedIndex + 1);
|
|
$('.photoReviewSlide').show();
|
|
$('.photoReviewGallery').removeClass('active');
|
|
});
|
|
// 리뷰 이미지 인피니트
|
|
$(document).on("click", ".photoDtl", function () {
|
|
fn_select_photo_rvw("dtl", $(this).index(".photoDtl"));
|
|
});
|
|
$(document).on("click", ".photoMore", function () {
|
|
fn_select_photo_rvw("tot");
|
|
});
|
|
|
|
// 리뷰 평가 더보기
|
|
$(document).on("click", ".otherReviews__moreBtn", function () {
|
|
if ($(this).hasClass("opened")) {
|
|
$(this).removeClass("opened");
|
|
$(".otherReviewsDetail").removeClass("opened");
|
|
$(this).text("더보기");
|
|
} else {
|
|
$(this).addClass("opened");
|
|
$(".otherReviewsDetail").addClass("opened");
|
|
$(this).text("접기");
|
|
}
|
|
});
|
|
|
|
// 유저리뷰 접기/펼치기 1
|
|
$(document).on("click",".userReviewItem__more",function () {
|
|
if ($(this).hasClass("opened")) {
|
|
$(this).removeClass("opened");
|
|
$(this).closest(".userReviewItem").removeClass("opened");
|
|
$(this).text("더보기");
|
|
} else {
|
|
$(this).addClass("opened");
|
|
$(this).closest(".userReviewItem").addClass("opened");
|
|
$(this).text("접기");
|
|
}
|
|
});
|
|
// 유저리뷰 접기/펼치기 2
|
|
$(document).on("click",".userReviewItem__reviewImage", function () {
|
|
if ($(this).closest(".userReviewItem").hasClass("opened")) {
|
|
$(this).closest(".userReviewItem").removeClass("opened");
|
|
$(this).closest(".userReviewItem").find(".userReviewItem__more").removeClass("opened")
|
|
$(this).closest(".userReviewItem").find(".userReviewItem__more").text("더보기");
|
|
} else {
|
|
$(this).closest(".userReviewItem").addClass("opened");
|
|
$(this).closest(".userReviewItem").find(".userReviewItem__more").addClass("opened")
|
|
$(this).closest(".userReviewItem").find(".userReviewItem__more").text("접기");
|
|
}
|
|
});
|
|
}
|
|
|
|
const fn_rvw_form_event = () =>{
|
|
|
|
// 스토어 PICK 슬라이드
|
|
const oneAndaHalfCenterElements = Array.from(document.querySelectorAll('.storePick__swiper'));
|
|
oneAndaHalfCenterElements.forEach((oneAndaHalfCenter, index) => {
|
|
const oneAndaHalfCenterSwiper = new Swiper(oneAndaHalfCenter, {
|
|
spaceBetween: 12,
|
|
slidesPerView: 1.15,
|
|
centeredSlides: true,
|
|
loop: true,
|
|
pagination: {
|
|
el: ".swiper-pagination",
|
|
type: "fraction",
|
|
},
|
|
});
|
|
});
|
|
|
|
// 스토어 PICK 리뷰 슬라이드
|
|
var storePickReviewSwiper = new Swiper('.storePickReviewSlide', {
|
|
loop: false,
|
|
autoHeight: true,
|
|
slidesPerView: 1,
|
|
pagination: {
|
|
el: '.storePickReviewSlide__fraction',
|
|
type: 'fraction',
|
|
},
|
|
});
|
|
|
|
// 상세페이지에서 스토어 PICK 썸네일 클릭시, 모달 띄우고 해당 이미지 순서로 슬라이드 이동
|
|
var storePickReviewIndex = document.querySelectorAll('.storePickReview-index');
|
|
$(document).on("click",'.storePickReview-index', function () {
|
|
var clickedIndex = $(this).attr('data-swiper-slide-index');
|
|
if (storePickReviewSwiper) {
|
|
storePickReviewSwiper.slideTo(clickedIndex, 0);
|
|
}
|
|
/*스토어픽 모달*/
|
|
fn_remove_img(".storePickModalCn", 'storePick', 'modal');
|
|
});
|
|
}
|
|
|
|
/***************************************************
|
|
리뷰 조회 폼 jsp호출
|
|
***************************************************/
|
|
const fn_select_rvw_form = (pageIndex) => {
|
|
let goodsInnb = $("#goodsInnb").val();
|
|
let sortDv = "rank";
|
|
//리뷰 div
|
|
let rvwDiv = $("#productReview");
|
|
if (!pageIndex) {
|
|
$('#rvwPageIndex').val(1);
|
|
} else {
|
|
$('#rvwPageIndex').val(pageIndex);
|
|
}
|
|
$.ajax({
|
|
type: "post",
|
|
url: "/sopmal/goods/selectGoodsDtlRvwListForm",
|
|
data: {
|
|
"pageIndex": pageIndex,
|
|
"goodsInnb": goodsInnb,
|
|
"sortDv": sortDv
|
|
},
|
|
success: function (data) {
|
|
if (rvwDiv.html()) {
|
|
rvwDiv.empty();
|
|
}
|
|
rvwDiv.html(data);
|
|
fn_select_rvw(pageIndex);
|
|
/*스토어픽 리뷰*/
|
|
fn_remove_img(".storePick__reviewText", '.storePick__body', 'page');
|
|
/*포토리뷰 리뷰*/
|
|
fn_remove_img(".photoRvwCn", 'photo', 'page');
|
|
fn_rvw_form_event();
|
|
}
|
|
});
|
|
}
|
|
|
|
/*리뷰 폼 이미지 처리*/
|
|
const fn_remove_img = (tagetEle, actionDv, divDv) => {
|
|
$(tagetEle).each(function (idx) {
|
|
if ($(this).find(".npayBbscttSnb").val() === "") { //네이버페이 아님
|
|
const delImgTarget = $(this).find("img");
|
|
delImgTarget.each(function () {
|
|
$(this).remove();
|
|
});
|
|
} else {//네이버페이일경우
|
|
let filList = [];
|
|
const delImgTarget = $(this).find(".review_text").find("img");
|
|
delImgTarget.each(function () {
|
|
filList.push($(this).attr("src"));
|
|
if(tagetEle !== ".photoRvwModalGallaryCn"){//포토리뷰 갤러리형은 이미지 안지움
|
|
$(this).remove();
|
|
}
|
|
});
|
|
let filCnt = filList.length;
|
|
if (divDv === 'page') {
|
|
if (filCnt > 0) {
|
|
const imgSrc = filList[0];
|
|
if (tagetEle !== '.storePick__reviewText') {
|
|
//a태그 요소 개수구하기
|
|
const aCnt = $(".photoReview__thumbs").find("a").length;
|
|
let list = ``;
|
|
if(aCnt !== idx+1){
|
|
list = `
|
|
<img src="\${imgSrc}"
|
|
onerror ="this.src='/mobile/images/image_placeholder.png'" alt="">
|
|
<span class="photoReview__thumbs__num">\${filCnt}</span>
|
|
`;
|
|
}else{ //리스트 마지막인경우
|
|
list = `<img src="\${imgSrc}"
|
|
onerror ="this.src='/mobile/images/image_placeholder.png'" alt="">
|
|
<span class="photoReview__thumbs__more">더보기</span>
|
|
`;
|
|
}
|
|
$(".photoImg").eq(idx).prepend(list);
|
|
} else { //스토어픽 리뷰
|
|
let list = `<div class="storePick__reviewImage">
|
|
<img src="\${imgSrc}"
|
|
onerror="this.src='/mobile/images/image_placeholder.png'" alt="">
|
|
<span class="storePick__reviewImage__num">\${filCnt}</span>
|
|
</div>`;
|
|
$(".storePick__body").eq(idx).prepend(list);
|
|
}
|
|
}
|
|
}else{//모달인경우
|
|
if(actionDv === 'gallary'){ //포토 갤러리
|
|
const imgSrc = filList[0];
|
|
const moreHtml = `<button type = "button" class="photoReviewGallery__image">
|
|
<img src="\${imgSrc}" onerror="this.src='/mobile/images/image_placeholder.png'" alt="">
|
|
<span class="photoReviewGallery__num">\${filCnt}</span>
|
|
</button>
|
|
`;
|
|
$(".photoReviewGallery__item").eq(idx).html(moreHtml);
|
|
}else{ //스토어픽, 포토 상세 모달
|
|
filList.forEach(function(image){
|
|
// li 태그를 포함한 HTML 생성
|
|
let liHtml = `<li><img src="\${image}" onerror="this.src='/mobile/images/image_placeholder.png'" alt=""></li>`;
|
|
if(actionDv !== 'photo'){//스토어픽 모달
|
|
// .storePickReviewSlide__imgList 리스트의 맨 앞에 추가
|
|
$(".storePickReviewSlide__imgList").eq(idx).prepend(liHtml);
|
|
}else{//포토리뷰모달
|
|
$(".photoReviewSlide__imgList").eq(idx).append(liHtml);
|
|
}
|
|
});
|
|
}
|
|
}
|
|
}
|
|
});
|
|
}
|
|
const fn_rvw_event = () => {
|
|
//리뷰페이징
|
|
$("#rvwMore").on("click", function () {
|
|
let pageIndex = parseInt($("#rvwPageIndex").val(), 10);
|
|
pageIndex = pageIndex + 1;
|
|
$("#rvwPageIndex").val(pageIndex);
|
|
fn_paging_rvw_list();
|
|
});
|
|
|
|
$("#rvwSort,#rvwKnd").on("click", function (e) {
|
|
e.preventDefault();
|
|
modalId = $(this).attr("id") + "Pop";
|
|
openModal(modalId);
|
|
});
|
|
|
|
$(".rvwSortItem,.rvwKndItem").on("click", function () {
|
|
let modalId = '';
|
|
if ($(this).hasClass("rvwSortItem")) {
|
|
$(".rvwSortItem").not($(this)).removeClass("sort");
|
|
$(this).addClass("sort");
|
|
modalId = "rvwSortPop";
|
|
} else {
|
|
$(".rvwKndItem").not($(this)).removeClass("knd");
|
|
$(this).addClass("knd");
|
|
modalId = "rvwKndPop";
|
|
}
|
|
closeModal(modalId);
|
|
fn_select_rvw(1);
|
|
});
|
|
}
|
|
/*리뷰 조회
|
|
* tabIdx = 탭 버튼 인덱스
|
|
* sortIdx = 정렬 버튼 인덱스
|
|
* pagingAt = 페이징 버튼 클릭 여부 (없을시 페이징으로 인한 함수 호출)
|
|
* */
|
|
const fn_select_rvw = (pageIndex) => {
|
|
//정렬순 값
|
|
let sortVal = $(".sort").val();
|
|
if (!sortVal) {
|
|
sortVal = 'rank';
|
|
}
|
|
//리뷰 종류 값
|
|
let kndVal = $(".knd").val();
|
|
if (!kndVal) {
|
|
kndVal = 'all';
|
|
}
|
|
|
|
let keywordValArr = [];
|
|
$(".userReview__hashtag__btn").each(function () {
|
|
if ($(this).hasClass("selected")) {
|
|
keywordValArr.push($(this).val());
|
|
}
|
|
});
|
|
|
|
if (!pageIndex) {
|
|
$('#pageIndex').val(1);
|
|
} else {
|
|
$('#pageIndex').val(pageIndex);
|
|
}
|
|
|
|
let pageUnit = $("#rvwPageUnit").val();
|
|
if (pageUnit === 'undefined') {
|
|
pageUnit = 20;
|
|
}
|
|
|
|
/* 상품 고유번호 */
|
|
const goodsInnb = $("#goodsInnb").val();
|
|
|
|
$.ajax({
|
|
type: "post",
|
|
url: "/sopmal/goods/selectGoodsDtlRvwList",
|
|
data: {
|
|
"pageIndex": pageIndex,
|
|
"goodsInnb": goodsInnb,
|
|
"srchDv": kndVal,
|
|
"sortDv": sortVal,
|
|
"pageUnit": pageUnit,
|
|
"srchKeywordArr": keywordValArr
|
|
},
|
|
success: function (data) {
|
|
if ($(".rvwList").html()) {
|
|
$(this).empty();
|
|
}
|
|
$(".rvwList").html(data);
|
|
//리뷰 관련 데이터 처리
|
|
fn_rvw_list_event();
|
|
fn_set_cnt_rvw();
|
|
|
|
/*정렬순, 리뷰종류 set*/
|
|
$(".rvwKndItem").each(function () {
|
|
if ($(this).val() === kndVal) {
|
|
$("#rvwKnd").text($(this).siblings("span").text());
|
|
return false;
|
|
}
|
|
});
|
|
|
|
$(".rvwSortItem").each(function () {
|
|
if ($(this).val() === sortVal) {
|
|
$("#rvwSort").text($(this).siblings("span").text());
|
|
return false;
|
|
}
|
|
});
|
|
|
|
/*리뷰 사용 여부에 따른 hide처리*/
|
|
const RvwWritngPosblAt = $("#RvwWritngPosblAt").val();
|
|
if (RvwWritngPosblAt === 'N') {
|
|
$("#mtDl").hide(); //한달 리뷰 마일리지 안내 문구
|
|
$("#mtBtn").hide();
|
|
}
|
|
/*한달 리뷰 사용 여부에 따른 hide처리*/
|
|
const MtRvwWritngPosblAt = $("#MtRvwWritngPosblAt").val();
|
|
if (MtRvwWritngPosblAt === 'N') {
|
|
$("#mtDl").hide(); //한달 리뷰 마일리지 안내 문구
|
|
$("#mtBtn").hide();
|
|
}
|
|
/*리뷰이벤트 바인딩*/
|
|
fn_rvw_event();
|
|
}
|
|
});
|
|
}
|
|
/************************************* 포토리뷰 모달 함수 **********************************/
|
|
let photoReviewSwiper = '';
|
|
/*포토리뷰 갤러리 이동*/
|
|
const fn_select_photo_rvw = (trgtEvent, index) => {
|
|
let goodsInnb = $("#goodsInnb").val();
|
|
let sortDv = "recent";
|
|
let pageIndex = 1;
|
|
let clickAt = $("#clickAt").val();
|
|
if (!pageIndex) {
|
|
pageIndex = 1;
|
|
}
|
|
if (trgtEvent === "tot") {
|
|
index = 0;
|
|
}
|
|
$.ajax({
|
|
type: "post",
|
|
url: "/sopmal/goods/selectGoodsDtlRvwPhoto",
|
|
data: {
|
|
"goodsInnb": goodsInnb,
|
|
"pageUnit": "15",
|
|
"pageIndex": pageIndex,
|
|
"srchDv": "photo",
|
|
"sortDv": sortDv
|
|
},
|
|
success: function (data) {
|
|
const modalDiv = $("#photoDiv");
|
|
modalDiv.empty();
|
|
modalDiv.html(data);
|
|
|
|
fn_photo_rvw_event(trgtEvent,index);
|
|
}
|
|
});
|
|
}
|
|
const fn_photo_rvw_event = (trgtEvent,index) => {
|
|
/*이미지 처리*/
|
|
//포토 상세
|
|
fn_remove_img(".photoRvwModalCn", "photo", "modal");
|
|
//포토 갤러리
|
|
fn_remove_img(".photoRvwModalGallaryCn", "gallary", "modal");
|
|
|
|
/*포토리뷰모달 닫기 이벤트*/
|
|
$("#photoPickClose").on("click", function () {
|
|
closeModal("photo-review-image");
|
|
});
|
|
|
|
// 포토&동영상 리뷰 슬라이드
|
|
let totalSlides = '<fmt:formatNumber value="${resultMap.bbscttInfo.photoCnt}" pattern="#,###"/>';
|
|
let current = '';
|
|
if(trgtEvent === 'dtl'){
|
|
current = index;
|
|
}else{
|
|
current = 1;
|
|
}
|
|
/*포토리뷰 스와이퍼 초기화*/
|
|
photoReviewSwiper = new Swiper('.photoReviewSlide', {
|
|
loop: false,
|
|
autoHeight: true,
|
|
slidesPerView: 1,
|
|
pagination: {
|
|
el: '.photoReviewSlide__fraction',
|
|
type: 'custom',
|
|
renderCustom: function (swiper, current) {
|
|
return current + ' / ' + totalSlides; // 임의의 전체 슬라이드 수로 표시
|
|
}
|
|
},
|
|
});
|
|
if (trgtEvent === 'dtl') {
|
|
$('.photoReviewSlide').show();
|
|
$('.photoReviewGallery').removeClass('active');
|
|
photoReviewSwiper.slideTo(index, 0);
|
|
} else { //전체보기 들어갈 시
|
|
$('.photoReviewSlide').hide();
|
|
$('.photoReviewGallery').addClass('active');
|
|
photoReviewSwiper.slideTo(1, 0);
|
|
$('.photoReviewGallery__item').find('.photoReviewGallery__image').removeClass('current');
|
|
}
|
|
/*인피니트스크롤*/
|
|
fn_infinite_scroll(fn_add_photo_rvw, '', "#end");
|
|
/*마이크로 모달 초기화*/
|
|
MicroModal.init(
|
|
{
|
|
disableScroll: true,
|
|
awaitCloseAnimation: true,
|
|
});
|
|
/*포토리뷰모달 오픈*/
|
|
openModal("photo-review-image");
|
|
}
|
|
/*포토리뷰 인피니트 스크롤 ajax*/
|
|
const fn_add_photo_rvw = () => {
|
|
/*다음 페이지로 이동*/
|
|
let pageIndex = parseInt($("#photoRvwIndex").val(), 10);
|
|
pageIndex = pageIndex + 1;
|
|
let goodsInnb = $("#goodsInnb").val();
|
|
let sortDv = "recent";
|
|
$.ajax({
|
|
type: "post",
|
|
url: "/sopmal/goods/selectGoodsDtlRvwPhotoAjax",
|
|
data: {
|
|
"goodsInnb": goodsInnb,
|
|
"pageUnit": "15",
|
|
"pageIndex": pageIndex,
|
|
"srchDv": "photo",
|
|
"sortDv": sortDv
|
|
},
|
|
success: function (data) {
|
|
$("#photoRvwIndex").val(pageIndex);
|
|
fn_append_List(data);//DATA append 함수
|
|
}
|
|
});
|
|
}
|
|
|
|
let first = 0;
|
|
// 인피니트 html 동적 생성
|
|
const fn_append_List = (data) => {
|
|
let result = JSON.parse(data.resBody.result);
|
|
let photoList = result.resultList.photoList;
|
|
let photoByBbsctt = result.resultList.photoByBbsctt;
|
|
if (photoList.length > 0) {
|
|
photoList.forEach(function (photoList) {
|
|
/*내용에서 img 소스를 삭`제하고 img를 배열에 담음*/
|
|
let photoGallaryHtml = ``;
|
|
let photoDtlHtml = ``;
|
|
let temp = $('<div>').html(photoList.cn);
|
|
let filList = [];
|
|
if (photoList.npayBbscttSnb !== null) {
|
|
temp.find('img').each(function () {
|
|
filList.push($(this).attr('src'));
|
|
$(this).remove();
|
|
});
|
|
}
|
|
// <img> 태그 제거
|
|
// 변경된 HTML을 다시 문자열로 변환
|
|
let removeCn = temp.html();
|
|
// cdn경로
|
|
let cdnurl = '${cdnurl}';
|
|
|
|
photoGallaryHtml += `<li class="photoReviewGallery__item" innb="\${photoList.bbscttInnb}">
|
|
<button type = "button" class="photoReviewGallery__image">`;
|
|
if(photoList.filCours !== null){//게시글 tb에 없는 것
|
|
photoGallaryHtml += ` <img src="\${cdnurl}\${photoList.filCours}\${photoList.sysFilNm}"
|
|
onerror="this.src='/mobile/images/image_placeholder.png'"
|
|
alt="">
|
|
<span class="photoReviewGallery__num">
|
|
\${photoList.fileCnt}
|
|
</span>`;
|
|
}else{
|
|
let fileSrc = filList[0];
|
|
console.log("확인2:",photoList.bbscttInnb,fileSrc);
|
|
photoGallaryHtml += ` <img src="\${fileSrc}" onerror="this.src='/mobile/images/image_placeholder.png'" alt="">
|
|
<span class="photoReviewGallery__num">
|
|
\${filList.length}
|
|
</span>`;
|
|
}
|
|
let photoListCn = photoList.cn;
|
|
photoGallaryHtml += `</button>
|
|
</li>
|
|
<div style="display: none" class="photoRvwModalGallaryCn">
|
|
<input type="hidden" value="\${photoList.npayBbscttSnb}" class="npayBbscttSnb"/>
|
|
\${photoListCn}
|
|
</div>`;
|
|
$("#end").before(photoGallaryHtml);
|
|
//상세보기
|
|
photoDtlHtml += `<div class="swiper-slide">
|
|
<div class="photoReviewSlide__content">
|
|
<div class="photoReviewDetail">
|
|
<div class="photoReviewDetail__rightTop">
|
|
<div class="photoReviewDetail__top__info">
|
|
<div class="reviewStars__wrapper--sm">
|
|
<div class="reviewStars star-\${photoList.evlScore}"></div>
|
|
<span class="reviewStars__num">\${photoList.evlScore}</span>
|
|
</div>
|
|
<div class="photoReviewDetail__misc">
|
|
<span class="photoReviewDetail__misc__id">
|
|
\${photoList.regusrId}`;
|
|
if(photoList.rvwKingAt === 'Y'){
|
|
photoDtlHtml += `<span class="storePick__misc__badge">리뷰왕</span>`;
|
|
}
|
|
photoDtlHtml += ` </span>
|
|
<span class="photoReviewDetail__misc__date">\${photoList.registDt}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="photoReviewDetail__reviewText photoRvwModalCn" innb ="\${photoList.bbscttInnb}">
|
|
<input type="hidden" value="\${photoList.npayBbscttSnb}" class="npayBbscttSnb"/>
|
|
\${removeCn}"
|
|
</div>
|
|
<ul class="photoReviewSlide__imgList">`;
|
|
if(photoList.npayBbscttSnb === null){
|
|
photoByBbsctt.forEach(function(photoByBbsctt){
|
|
if (photoList.bbscttInnb === photoByBbsctt.bbscttInnb) {
|
|
photoDtlHtml += `<li>
|
|
<img src="\${cdnurl}\${photoByBbsctt.filCours}\${photoByBbsctt.sysFilNm}" onerror="this.src='/mobile/images/image_placeholder.png'" alt="">
|
|
</li>`;
|
|
}
|
|
});
|
|
}else{
|
|
if(filList.length > 0){
|
|
filList.forEach(function(imgSrc){
|
|
photoDtlHtml += `<li>
|
|
<img src="\${imgSrc}" onerror="this.src='/mobile/images/image_placeholder.png'"alt="">
|
|
</li>`;
|
|
});
|
|
}
|
|
}
|
|
photoDtlHtml +=` </ul>
|
|
</div>`;
|
|
if(photoList.bbscttEvlUseAt === 'Y'){
|
|
photoDtlHtml +=`<div class="photoReviewDetail__rightBottom">
|
|
<span class="photoReviewDetail__reviewAsk">리뷰가 도움이 되었나요?</span>
|
|
<button class="userReviewItem__like" tabindex="0">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
|
|
viewBox="0 0 20 20" fill="none">
|
|
<path
|
|
d="M14.7749 16.583H5.6756V7.41637L11.3711 1.75293L11.7012 1.8747C11.9266 2.03069 12.0992 2.22513 12.2188 2.45803C12.3385 2.69094 12.3705 2.93292 12.315 3.18399L12.2941 3.20803L11.5345 7.41637H17.2429C17.6115 7.41637 17.9269 7.54751 18.1892 7.8098C18.4515 8.07208 18.5826 8.38752 18.5826 8.75612V9.62308C18.5826 9.72351 18.5749 9.81351 18.5594 9.8931C18.5439 9.97269 18.5153 10.0558 18.4736 10.1423L16.1052 15.7185C15.9865 15.9829 15.8075 16.193 15.5682 16.349C15.3289 16.505 15.0645 16.583 14.7749 16.583ZM6.75891 15.4997H14.7749C14.8337 15.4997 14.8938 15.4837 14.9552 15.4516C15.0167 15.4195 15.0634 15.3661 15.0955 15.2913L17.4993 9.68718V8.75612C17.4993 8.68133 17.4753 8.61989 17.4272 8.5718C17.3791 8.52372 17.3177 8.49968 17.2429 8.49968H10.2461L11.1868 3.4532L6.75891 7.86508V15.4997ZM5.6756 7.41637V8.49968H2.49931V15.4997H5.6756V16.583H1.41602V7.41637H5.6756Z"
|
|
fill="black"></path>
|
|
</svg>
|
|
<em class="recommendCnt">
|
|
\${photoList.recomendCnt}
|
|
</em>
|
|
</button>`;
|
|
if(photoList.bbscttEvlRecomendStep === '02'){
|
|
photoDtlHtml += `<button class="userReviewItem__like userReviewItem__like--dislike" tabindex="0">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
|
|
viewBox="0 0 20 20" fill="none">
|
|
<path
|
|
d="M14.7749 16.583H5.6756V7.41637L11.3711 1.75293L11.7012 1.8747C11.9266 2.03069 12.0992 2.22513 12.2188 2.45803C12.3385 2.69094 12.3705 2.93292 12.315 3.18399L12.2941 3.20803L11.5345 7.41637H17.2429C17.6115 7.41637 17.9269 7.54751 18.1892 7.8098C18.4515 8.07208 18.5826 8.38752 18.5826 8.75612V9.62308C18.5826 9.72351 18.5749 9.81351 18.5594 9.8931C18.5439 9.97269 18.5153 10.0558 18.4736 10.1423L16.1052 15.7185C15.9865 15.9829 15.8075 16.193 15.5682 16.349C15.3289 16.505 15.0645 16.583 14.7749 16.583ZM6.75891 15.4997H14.7749C14.8337 15.4997 14.8938 15.4837 14.9552 15.4516C15.0167 15.4195 15.0634 15.3661 15.0955 15.2913L17.4993 9.68718V8.75612C17.4993 8.68133 17.4753 8.61989 17.4272 8.5718C17.3791 8.52372 17.3177 8.49968 17.2429 8.49968H10.2461L11.1868 3.4532L6.75891 7.86508V15.4997ZM5.6756 7.41637V8.49968H2.49931V15.4997H5.6756V16.583H1.41602V7.41637H5.6756Z"
|
|
fill="black"></path>
|
|
</svg>
|
|
<em class="nonrecomendCnt">
|
|
\${photoList.nonrecomendCnt}
|
|
</em>
|
|
</button>`;
|
|
}
|
|
photoDtlHtml += `</div>`;
|
|
}
|
|
photoDtlHtml += `</div>
|
|
</div>
|
|
</div>`;
|
|
$("#photoSwiper").append(photoDtlHtml);
|
|
photoReviewSwiper.update();
|
|
});
|
|
if(first < 2){
|
|
fn_add_photo_rvw();
|
|
}
|
|
first += 1;
|
|
$("#evtOccrrncAt").val("continue");
|
|
$(".photoRvwModalCn").each(function(){
|
|
$(this).text($(this).text().trim());
|
|
});
|
|
} else {
|
|
/*데이터 조회 null일시 그 전 페이지 인덱스로 변경*/
|
|
$("#evtOccrrncAt").val("stop");
|
|
let pageIndex = parseInt($("#photoRvwIndex").val(), 10);
|
|
$("#photoRvwIndex").val(pageIndex - 1);
|
|
}
|
|
};
|
|
|
|
/*리뷰 목록 이미지 처리*/
|
|
const fn_rvw_list_event = () => {
|
|
//파일리스트 있으면 img 지우고 cn에 img 있으면 set
|
|
let target = $(".listPage");
|
|
target.each(function (idx) {
|
|
//파일 있는지 확인
|
|
let imgAt = $(this).find(".listImage").length;
|
|
//내용에서 img 요소 찾기
|
|
let imgList = [];
|
|
let temp = $('<div>').html($(this).find(".listCn").text());
|
|
$(this).find(".listCn").css("white-space", "pre-wrap");
|
|
$(this).find(".listCn").text(temp.text().trim());
|
|
let img = temp.find("img");
|
|
|
|
//img 요소에 src 뽑기
|
|
img.each(function () {
|
|
imgList.push($(this).attr("src"));
|
|
});
|
|
|
|
//파일이 없는데 imgList에 값이 있으면(내용에 이미지가 있으면) 값 set
|
|
if (imgAt === 0 && imgList.length > 0) {
|
|
let list = ``;
|
|
let filCnt = imgList.length;
|
|
imgList.forEach(function (img) {
|
|
list += ` <div class="userReviewItem__reviewImage listImage">
|
|
<img src="\${img}"
|
|
onerror = 'this.src ="/mobile/images/image_placeholder.png"'
|
|
alt="">
|
|
</div>`;
|
|
});
|
|
imgCnt = `<span class="userReviewItem__reviewImage__num listPageImg">\${filCnt}</span>`;
|
|
$(this).find(".listCn").after(list); //내용 다음 영역에 img 영역 추가
|
|
$(this).find(".listImage").eq(0).append(imgCnt); //이미지 영역 찾아서 첫번째 요소에 이미지 갯수 추가
|
|
}
|
|
});
|
|
}
|
|
|
|
/*리뷰 조회
|
|
* tabIdx = 탭 버튼 인덱스
|
|
* sortIdx = 정렬 버튼 인덱스
|
|
* pagingAt = 페이징 버튼 클릭 여부 (없을시 페이징으로 인한 함수 호출)
|
|
* */
|
|
const fn_paging_rvw_list = () => {
|
|
//정렬순 값
|
|
let sortVal = $(".sort").val();
|
|
if (!sortVal) {
|
|
sortVal = 'rank';
|
|
}
|
|
//리뷰 종류 값
|
|
let kndVal = $(".knd").val();
|
|
if (!kndVal) {
|
|
kndVal = 'all';
|
|
}
|
|
|
|
let keywordValArr = [];
|
|
$(".userReview__hashtag__btn").each(function () {
|
|
if ($(this).hasClass("selected")) {
|
|
keywordValArr.push($(this).val());
|
|
}
|
|
});
|
|
|
|
let pageIndex = $('#rvwPageIndex').val();
|
|
|
|
let pageUnit = $("#rvwPageUnit").val();
|
|
if (pageUnit === 'undefined') {
|
|
pageUnit = 20;
|
|
}
|
|
|
|
/* 상품 고유번호 */
|
|
const goodsInnb = $("#goodsInnb").val();
|
|
|
|
$.ajax({
|
|
type: "post",
|
|
url: "/sopmal/goods/selectGoodsDtlRvwListAjax",
|
|
data: {
|
|
"pageIndex": pageIndex,
|
|
"goodsInnb": goodsInnb,
|
|
"srchDv": kndVal,
|
|
"sortDv": sortVal,
|
|
"pageUnit": pageUnit,
|
|
"srchKeywordArr": keywordValArr
|
|
},
|
|
success: function (data) {
|
|
data = JSON.parse(data.resBody.result);
|
|
const list = fn_make_rvw_list(data);
|
|
$("#rvwMoreDiv").before(list);
|
|
if (pageUnit > data.resultList.rvwList.length) {
|
|
$("#rvwMoreDiv").hide();
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
/*html 요소 만들기*/
|
|
const fn_make_rvw_list = (data) => {
|
|
const rvwList = data.resultList.rvwList;
|
|
const photoByBbsctt = data.resultList.photoByBbsctt;
|
|
let list = '';
|
|
rvwList.forEach(function(resultList){
|
|
list += `<div class="userReviewItem">
|
|
<div class="userReviewItem__top">
|
|
<div class="userReviewItem__userImage">
|
|
<img src="/mobile/images/icon_user-info.png" alt="">
|
|
</div>
|
|
<div class="userReviewItem__top__info">`;
|
|
if(resultList.evlScore != null){
|
|
const evlScore = parseInt(resultList.evlScore,10);
|
|
list += `
|
|
<div class="reviewStars__wrapper--sm">
|
|
<div class="reviewStars star-\${evlScore}"></div>
|
|
<span class="reviewStars__num">\${evlScore}</span>
|
|
</div>`;
|
|
}
|
|
list += ` <div class="userReviewItem__misc">
|
|
<span class="userReviewItem__misc__id">\${resultList.regusrId}</span>
|
|
<span class="userReviewItem__misc__date">\${resultList.registDt}</span>`;
|
|
if(resultList.bstAt === 'Y'){
|
|
list += ` <span class="reviewBadge reviewBadge--red">BEST</span>`;
|
|
}
|
|
if(resultList.bbsTyCd === '07'){
|
|
list += ` <span class="reviewBadge">한달사용기</span>`;
|
|
}
|
|
if(resultList.reOrderAt === 'Y'){
|
|
list += ` <span class="reviewBadge">재구매</span>`;
|
|
}
|
|
/*내용에서 img 소스를 삭제하고 img를 배열에 담음*/
|
|
let temp = $('<div>').html(resultList.cn);
|
|
let filList = [];
|
|
if(resultList.npayBbscttSnb !== null){
|
|
temp.find('img').each(function () {
|
|
filList.push($(this).attr('src'));
|
|
});
|
|
}
|
|
// <img> 태그 제거
|
|
temp.find('img').remove();
|
|
// 변경된 HTML을 다시 문자열로 변환
|
|
let htmlCn = temp.text();
|
|
let removeCn = htmlCn;
|
|
// cdn경로
|
|
let cdnurl = '${cdnurl}';
|
|
list += ` </div>
|
|
</div>
|
|
</div>
|
|
<div class="userReviewItem__body listPage">
|
|
<div class="listCn">
|
|
\${removeCn}
|
|
</div>`;
|
|
if(resultList.npayBbscttSnb === null){
|
|
photoByBbsctt.forEach(function(photoByBbsctt){
|
|
if (resultList.bbscttInnb === photoByBbsctt.bbscttInnb) {
|
|
list += `
|
|
<div class="userReviewItem__reviewImage listImage">
|
|
<img src="\${cdnurl}\${photoByBbsctt.filCours}\${photoByBbsctt.sysFilNm}"
|
|
onerror='this.src = "/mobile/images/image_placeholder.png"'
|
|
alt="">
|
|
<span class="userReviewItem__reviewImage__num listPageImg">
|
|
\${resultList.fileCnt}
|
|
</span>
|
|
</div>
|
|
`;
|
|
}
|
|
});
|
|
}else{
|
|
if(filList.length > 0){
|
|
filList.forEach(function(imgSrc){
|
|
list += `
|
|
<div class="userReviewItem__reviewImage listImage">
|
|
<img src="\${imgSrc}"
|
|
onerror='this.src = "/mobile/images/image_placeholder.png"'
|
|
alt="">
|
|
<span class="userReviewItem__reviewImage__num listPageImg">
|
|
\${filList.length}
|
|
</span>
|
|
</div>`;
|
|
});
|
|
}
|
|
}
|
|
if(resultList.bbscttEvlUseAt === 'Y'){
|
|
list += ` <button class="userReviewItem__like"
|
|
onclick = "fn_update_bbsctt_recomend('recommend', '\${resultList.bbscttInnb}', this);">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
|
|
viewBox="0 0 20 20" fill="none">
|
|
<path
|
|
d="M14.7749 16.583H5.6756V7.41637L11.3711 1.75293L11.7012 1.8747C11.9266 2.03069 12.0992 2.22513 12.2188 2.45803C12.3385 2.69094 12.3705 2.93292 12.315 3.18399L12.2941 3.20803L11.5345 7.41637H17.2429C17.6115 7.41637 17.9269 7.54751 18.1892 7.8098C18.4515 8.07208 18.5826 8.38752 18.5826 8.75612V9.62308C18.5826 9.72351 18.5749 9.81351 18.5594 9.8931C18.5439 9.97269 18.5153 10.0558 18.4736 10.1423L16.1052 15.7185C15.9865 15.9829 15.8075 16.193 15.5682 16.349C15.3289 16.505 15.0645 16.583 14.7749 16.583ZM6.75891 15.4997H14.7749C14.8337 15.4997 14.8938 15.4837 14.9552 15.4516C15.0167 15.4195 15.0634 15.3661 15.0955 15.2913L17.4993 9.68718V8.75612C17.4993 8.68133 17.4753 8.61989 17.4272 8.5718C17.3791 8.52372 17.3177 8.49968 17.2429 8.49968H10.2461L11.1868 3.4532L6.75891 7.86508V15.4997ZM5.6756 7.41637V8.49968H2.49931V15.4997H5.6756V16.583H1.41602V7.41637H5.6756Z"
|
|
fill="black"
|
|
</svg>
|
|
<em class="recommendCnt">
|
|
\${resultList.recomendCnt}
|
|
</em>
|
|
</button>`;
|
|
if(resultList.bbscttEvlRecomendStep === '02'){
|
|
list += ` <button class="userReviewItem__like userReviewItem__like--dislike"
|
|
onclick = "fn_update_bbsctt_recomend('nonrecommend', '\${resultList.bbscttInnb}', this);">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
|
|
viewBox="0 0 20 20" fill="none">
|
|
<path
|
|
d="M14.7749 16.583H5.6756V7.41637L11.3711 1.75293L11.7012 1.8747C11.9266 2.03069 12.0992 2.22513 12.2188 2.45803C12.3385 2.69094 12.3705 2.93292 12.315 3.18399L12.2941 3.20803L11.5345 7.41637H17.2429C17.6115 7.41637 17.9269 7.54751 18.1892 7.8098C18.4515 8.07208 18.5826 8.38752 18.5826 8.75612V9.62308C18.5826 9.72351 18.5749 9.81351 18.5594 9.8931C18.5439 9.97269 18.5153 10.0558 18.4736 10.1423L16.1052 15.7185C15.9865 15.9829 15.8075 16.193 15.5682 16.349C15.3289 16.505 15.0645 16.583 14.7749 16.583ZM6.75891 15.4997H14.7749C14.8337 15.4997 14.8938 15.4837 14.9552 15.4516C15.0167 15.4195 15.0634 15.3661 15.0955 15.2913L17.4993 9.68718V8.75612C17.4993 8.68133 17.4753 8.61989 17.4272 8.5718C17.3791 8.52372 17.3177 8.49968 17.2429 8.49968H10.2461L11.1868 3.4532L6.75891 7.86508V15.4997ZM5.6756 7.41637V8.49968H2.49931V15.4997H5.6756V16.583H1.41602V7.41637H5.6756Z"
|
|
fill="black"
|
|
</svg>
|
|
<em class="nonrecommendCnt">
|
|
\${resultList.nonrecomendCnt}
|
|
</em>
|
|
</button>`;
|
|
}
|
|
}
|
|
list += ` <input type = "hidden" value = "\${resultList.bbscttInnb}"/>
|
|
</div>`;
|
|
list += ` </div>`;
|
|
});
|
|
return list;
|
|
}
|
|
|
|
/************리뷰 부가 기능***************/
|
|
/*리뷰 건수 탭 버튼에 set*/
|
|
const fn_set_cnt_rvw = () => {
|
|
let cntBbsctt = $("#cntBbsctt").val();
|
|
/*전체 건수 set*/
|
|
$("#totCnt").text(cntBbsctt);
|
|
}
|
|
/*게시글 추천,비추천*/
|
|
const fn_update_bbsctt_recomend = (recomendDv, bbscttInnb, targetObj) => {
|
|
$.ajax({
|
|
type: 'post',
|
|
url: '<c:url value="/sopmal/csc/updateBbscttRecomendUpdt"/>',
|
|
data: {
|
|
"bbscttInnb": bbscttInnb,
|
|
"recomendDv": recomendDv
|
|
},
|
|
success: function (data) {
|
|
result = JSON.parse(data.resBody.result);
|
|
const resultContent = result["result"];
|
|
$(targetObj).find(".recommendCnt").text(resultContent.recomendCnt);
|
|
$(targetObj).find(".nonrecommendCnt").text(resultContent.nonrecomendCnt);
|
|
}
|
|
});
|
|
}
|
|
/*****************************************상품QnA******************************************/
|
|
const fn_qna_event = () => {
|
|
/* /!*상세 정보 유튜브 화면 조정*!/
|
|
if ($("#productInfo").find("iframe").length > 0) {
|
|
$("#productInfo").find("iframe").css({
|
|
"width": "100%",
|
|
"height": "300px"
|
|
});
|
|
}*/
|
|
|
|
//qna페이징
|
|
$(document).on("click","#qnaMore",function () {
|
|
let pageIndex = parseInt($("#qnaPageIndex").val(), 10);
|
|
pageIndex = pageIndex + 1;
|
|
$("#qnaPageIndex").val(pageIndex);
|
|
fn_paging_qna_list();
|
|
});
|
|
|
|
/*분류 바텀시트 오픈*/
|
|
$(document).on("click","#srchitmInnbBtn", function () {
|
|
openModal("qnaItmPop");
|
|
});
|
|
|
|
/*분류 조회*/
|
|
$(document).on("click",".srchitmInnb",function () {
|
|
//분류 값
|
|
const srchitmInnb = $(this).val();
|
|
//해당 라디오 텍스트
|
|
const srchText = $(this).siblings("span").text();
|
|
//모달 닫기
|
|
closeModal("qnaItmPop");
|
|
$("#srchitmInnbVal").val(srchitmInnb);
|
|
//조회
|
|
fn_select_qna(1, srchText);
|
|
});
|
|
|
|
//비밀번호 확인
|
|
$(document).on("click","#pwChkBtn", function () {
|
|
fn_check_password();
|
|
});
|
|
|
|
// summary 자체의 클릭 이벤트 설정 //상세 조회
|
|
$(document).on('click','summary',function (event) {
|
|
event.preventDefault();
|
|
var details = $(this).closest('.productQnaList__item');
|
|
// summary를 클릭할 때의 기본 동작 제어
|
|
if (!details.prop("open")) {//닫혀있을때 비밀번호 여부로 인한 분기처리
|
|
const bbscttInnb = details.attr("bbsctt");
|
|
const idx = details.index(".productQnaList__item");
|
|
fn_select_bbsctt_dtl_move_posbl_at(bbscttInnb, idx,'');
|
|
}else{
|
|
details.prop('open', false);
|
|
}
|
|
});
|
|
|
|
//비밀번호 미입력시 비밀번호 확인 모달창 오픈
|
|
$(document).on('click','#noPwBtn', function () {
|
|
closeModal("no_pw_pop");
|
|
openModal("confirm_pw_pop");
|
|
});
|
|
|
|
/*등록 폼 호출*/
|
|
$(document).on('click',"#registBtn", function () {
|
|
const goodsInnb = $("#goodsInnb").val();
|
|
fn_pop_regist(goodsInnb);
|
|
});
|
|
|
|
//수정 폼 이동 버튼
|
|
$(document).on('click','.updateBtn', function () {
|
|
const bbscttInnb = $(this).val(); //해당 게시글 고유번호
|
|
const answAt = $(this).attr("answ-at"); //해당 게시글 답글 여부
|
|
const bbsId = "goods_qna"; //게시판 아이디
|
|
/*답변 유무에 따라 수정 여부 판단*/
|
|
if (answAt === 'N') {
|
|
fn_move_qaUpdt(bbscttInnb, answAt, bbsId);
|
|
} else {
|
|
openModal("qna-edit");
|
|
}
|
|
});
|
|
|
|
//삭제 모달 버튼
|
|
$(document).on('click', '.deleteBtn',function () {
|
|
const bbscttInnb = $(this).val();
|
|
openModal("confirm_del_alert");
|
|
$('#delCfrmBtn').val(bbscttInnb);
|
|
});
|
|
|
|
//삭제 확인 버튼 이벤트
|
|
$(document).on('click','#delCfrmBtn', function () {
|
|
const bbscttInnb = $(this).val();
|
|
const bbsId = "goods_qna";
|
|
fn_delete_bbsctt(bbscttInnb, bbsId);
|
|
});
|
|
|
|
//삭제 성공 버튼 이벤트
|
|
$(document).on("click","#delSuccessBtn", function () {
|
|
closeModal("success_del_alert");
|
|
fn_select_qna(1);
|
|
});
|
|
}
|
|
/***************************************
|
|
조회 관련 (R)
|
|
***************************************/
|
|
//상세보기 가능 판단
|
|
const fn_select_bbsctt_dtl_move_posbl_at = (bbsctt, idx, pwCnfirmAt) => {
|
|
$.ajax({
|
|
type: 'post',
|
|
url: '<c:url value="/sopmal/csc/selectBbscttDtlMovePosblAt"/>',
|
|
data: {
|
|
"bbscttInnb": bbsctt,
|
|
"bbsId": "goods_qna",
|
|
"sknTyCd": "03",
|
|
"pwCnfirmAt": pwCnfirmAt,
|
|
"crudDv" : "R"
|
|
},
|
|
success: function (data) {
|
|
data = JSON.parse(data.resBody.result);
|
|
if(pwCnfirmAt != 'Y'){
|
|
fn_branch_bbsctt_posble(data, idx);
|
|
}else{
|
|
fn_make_bbsctt_dtl_cn(data, idx);
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
//상세보기 가능 판단 여부에 따른 분기 처리
|
|
const fn_branch_bbsctt_posble = (data, idx) => {
|
|
const moveAt = data.result.moveAt;
|
|
const vo = data.vo;
|
|
if (moveAt === 'YES') {//본인 o
|
|
fn_make_bbsctt_dtl_cn(data, idx);
|
|
} else if (moveAt === 'OTHER') {//다른이용자 o
|
|
openModal("reject_modi_pop");
|
|
} else if (moveAt === 'LOGIN') {//로그인 o
|
|
openModal("login_alert");
|
|
} else {//비밀번호
|
|
$("#modalPw").val("");
|
|
openModal("confirm_pw_pop");
|
|
$("#modalBbscttInnb").val(vo.bbscttInnb);
|
|
$("#modalIdx").val(idx);
|
|
}
|
|
}
|
|
|
|
const fn_make_bbsctt_dtl_cn = (data, idx) => {
|
|
let cn;
|
|
if (data.dtl) {
|
|
const dtl = data.dtl.dataMap;
|
|
let tempDiv = document.createElement('div');
|
|
const dtlCn = data.dtlCn.cn;
|
|
const answ = data.answ;
|
|
let answAt;
|
|
let img = ``;
|
|
const cdnurl = '<c:out value="${cdnurl}"/>';
|
|
if (data.dtl.fileInfo != null) {
|
|
data.dtl.fileInfo.forEach(function (file) {
|
|
img += `<img src = '\${cdnurl}\${file.filCours}\${file.sysFilNm}' onerror ="this.src='/pc/images/image_placeholder.png'" alt="">`;
|
|
});
|
|
}
|
|
cn = `<div class="productQnaList__answer__question" style="white-space: pre-wrap;">\${dtlCn}\${img}</div>
|
|
<div class="productQnaList__answer__reply">
|
|
<p class="productQnaList__answer__reply__text">
|
|
<span class="productQnaList__answer__badge">답변</span>`;
|
|
if (answ != null) {
|
|
let answCn =$('<div>').html(dtl.answCn);
|
|
answCn = answCn.text().trim();
|
|
cn += `<span>\${dtl.answSj}</span>
|
|
<div class="cn ck-content">
|
|
\${answCn}
|
|
</div>`;
|
|
answAt = 'Y';
|
|
} else {
|
|
cn += `답변 등록 중 입니다.`;
|
|
answAt = 'N';
|
|
}
|
|
cn += ` </p>
|
|
</div>
|
|
<div class="textBtns">
|
|
<button type="button" class="textBtns__btn updateBtn" answ-at="\${answAt}" value="\${dtl.bbscttInnb}">수정</button>
|
|
<button type="button" class="textBtns__btn deleteBtn" value="\${dtl.bbscttInnb}">삭제</button>
|
|
</div>`;
|
|
}
|
|
$(".productQnaList__item").eq(idx).find(".productQnaList__answer").html(cn);
|
|
$(".productQnaList__item").eq(idx).prop("open", true);
|
|
}
|
|
/********************************************************************
|
|
* 비밀번호 확인 (조회)
|
|
* success시
|
|
* 아코디언형 : 해당 내용 노출
|
|
********************************************************************/
|
|
const fn_check_password = () => {
|
|
const password = $("#modalPw").val();
|
|
if (password === '') {
|
|
openModal("no_pw_pop");
|
|
} else {
|
|
$.ajax({
|
|
type: 'post',
|
|
url: '<c:url value="/sopmal/csc/selectBbscttComparPassword"/>',
|
|
data: {
|
|
"bbscttInnb": $("#modalBbscttInnb").val(),
|
|
"password": password
|
|
},
|
|
success: function (data) {
|
|
const result = JSON.parse(data.resBody.result);
|
|
/*비밀번호 확인 결과*/
|
|
const resultVal = result["pw"];
|
|
if (resultVal != '0') {
|
|
closeModal("confirm_pw_pop");
|
|
fn_select_bbsctt_dtl_move_posbl_at($("#modalBbscttInnb").val(), $("#modalIdx").val(), 'Y','pw');
|
|
} else {
|
|
openModal("reject_pw_pop");
|
|
}
|
|
}
|
|
});
|
|
}
|
|
}
|
|
/*qna 조회 jsp호출*/
|
|
const fn_paging_qna_list = () => {
|
|
let goodsInnb = $("#goodsInnb").val();
|
|
const pageIndex = $('#qnaPageIndex').val();
|
|
|
|
let srchItmInnb = $("#srchitmInnbVal").val();
|
|
|
|
let pageUnit = $("#qnaPageUnit").val();
|
|
if (pageUnit === 'undefined') {
|
|
pageUnit = 20;
|
|
}
|
|
|
|
$.ajax({
|
|
type: "post",
|
|
url: "/sopmal/goods/selectGoodsDtlQnaListAjax",
|
|
data: {
|
|
"pageIndex": pageIndex,
|
|
"goodsInnb": goodsInnb,
|
|
"srchitmInnb": srchItmInnb,
|
|
"pageUnit" : pageUnit,
|
|
"bbsId": "goods_qna"
|
|
},
|
|
success: function (data) {
|
|
data = JSON.parse(data.resBody.result);
|
|
const list = fn_make_qna_list(data);
|
|
$("#qnaMoreDiv").before(list);
|
|
if (pageUnit > data.resultList.qnaList.length) {
|
|
$("#qnaMoreDiv").hide();
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
/*qna 리스트 페이징*/
|
|
const fn_make_qna_list = (data) => {
|
|
console.log(data.resultList);
|
|
data = data.resultList.qnaList;
|
|
let list = '';
|
|
if (data.length > 0) {
|
|
data.forEach(function(item) {
|
|
let cdnurl = '${cdnurl}';
|
|
list += `<details class="productQnaList__item qnaList" bbsctt="\${item.bbscttInnb}">
|
|
<summary class="productQnaList__top">
|
|
<div class="productQnaList__image">
|
|
<img src="\${cdnurl}\${item.img}" onerror='this.src = "/mobile/images/image_placeholder.png"' alt="상품 이미지">
|
|
</div>
|
|
<div class="productQnaList__right ">
|
|
<div class="productQnaList__info ">
|
|
<p class="productQnaList__info__question ">`;
|
|
let answCn = "";
|
|
if (item.answCn !== null) {
|
|
answCn = ` [\${item.answCn}]`;
|
|
}
|
|
let isfiles = "";<%--첨부파일여부--%>
|
|
if(item.isfiles === 1) {
|
|
isfiles =`<i className="icon icon_image-badge"></i>`;
|
|
}
|
|
let newAt = "";<%--새로운게시글여부--%>
|
|
if(item.newAt === 'Y') {
|
|
newAt =`<i className="icon icon_image-badge"></i>`;
|
|
}
|
|
let secretBbscttAt = "";<%--새로운게시글여부--%>
|
|
if(item.secretBbscttAt === 'Y') {
|
|
secretBbscttAt =`<i className="icon icon_lock"></i>`;
|
|
}
|
|
list += ` <span class="category">\${answCn}</span>
|
|
\${ item.regusrNm}님의 소중한 질문입니다.
|
|
\${isfiles}
|
|
\${newAt}
|
|
\${secretBbscttAt}
|
|
</p>`;
|
|
let answStatus = "";
|
|
if(item.answBbscttInnb !== null){
|
|
answStatus = "답변완료";
|
|
}else{
|
|
answStatus = "답변대기";
|
|
}
|
|
list += `
|
|
<p class="productQnaList__info__status ">
|
|
<span>\${answStatus}</span>
|
|
<span class="productQnaList__info__date">\${item.registDt}</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</summary>
|
|
<div class="productQnaList__answer">
|
|
|
|
</div>
|
|
</details>`;
|
|
});
|
|
}
|
|
return list;
|
|
}
|
|
|
|
/*qna 조회 jsp호출*/
|
|
const fn_select_qna = (pageIndex, srchText) => {
|
|
let goodsInnb = $("#goodsInnb").val();
|
|
//qna 조회 div
|
|
let qnaDiv = $("#productQnaDv");
|
|
if (!pageIndex) {
|
|
$('#qnaPageIndex').val(1);
|
|
} else {
|
|
$('#qnaPageIndex').val(pageIndex);
|
|
}
|
|
let pageUnit = $("#qnaPageUnit").val();
|
|
if (pageUnit === 'undefined') {
|
|
pageUnit = 20;
|
|
}
|
|
|
|
let srchItmInnb = $("#srchitmInnbVal").val();
|
|
|
|
$.ajax({
|
|
type: "post",
|
|
url: "/sopmal/goods/selectGoodsDtlQnaList",
|
|
data: {
|
|
"pageIndex": pageIndex,
|
|
"goodsInnb": goodsInnb,
|
|
"srchitmInnb": srchItmInnb,
|
|
"pageUnit" : pageUnit,
|
|
"bbsId": "goods_qna"
|
|
},
|
|
success: function (data) {
|
|
if (qnaDiv.html()) {
|
|
qnaDiv.empty();
|
|
}
|
|
qnaDiv.html(data);
|
|
//나이스셀렉트 update
|
|
fn_set_niceSelect_datePicker(qnaDiv);
|
|
//텍스트 set
|
|
$("#srchitmInnbBtn").text(srchText);
|
|
|
|
/*마이크로 모달 초기화*/
|
|
MicroModal.init(
|
|
{
|
|
disableScroll: true,
|
|
awaitCloseAnimation: true,
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
/********************************************************************
|
|
* 등록관련(C)
|
|
********************************************************************/
|
|
const fn_pop_regist = (goodsInnb) => {
|
|
$.ajax({
|
|
type: "post",
|
|
data: {
|
|
authDv: "REGIST",
|
|
reqUrl: "modal",
|
|
bbsId: "goods_qna",
|
|
reqDv: "goodsDtl",
|
|
goodsInnb: goodsInnb,
|
|
},
|
|
url: "/sopmal/csc/selectBbscttAuth",
|
|
success: function (data) {
|
|
$("#modalDiv").html(data);
|
|
MicroModal.init();
|
|
closeModal("authPop");
|
|
openModal2("authPop");
|
|
}
|
|
});
|
|
}
|
|
|
|
/*******************************************************
|
|
수정 관련 (u)
|
|
***********************************************************/
|
|
//게시글 수정 폼 이동
|
|
const fn_move_qaUpdt = (bbscttInnb, answAt, bbsId) => {
|
|
if (answAt == 'Y') {
|
|
//1.1 답변이 있는지 확인 있으면 수정 불가 모달 호출
|
|
$('#qna-edit').modal();
|
|
} else {
|
|
$.ajax({
|
|
type: "post",
|
|
url: "/sopmal/csc/selectBbscttUpdtPopupForm",
|
|
data: {
|
|
"bbsId": bbsId,
|
|
"bbscttInnb": bbscttInnb,
|
|
"listAt": "list"
|
|
},
|
|
success: function (data) {
|
|
$("#modalDiv").html(data);
|
|
MicroModal.init(
|
|
{
|
|
disableScroll: true,
|
|
awaitCloseAnimation: true,
|
|
});
|
|
openModal("updtPop");
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
/*******************************************************
|
|
삭제 관련 (D)
|
|
***********************************************************/
|
|
//게시글 삭제
|
|
const fn_delete_bbsctt = (bbscttInnb, bbsId) => {
|
|
let delBbscttInnbArr = [];
|
|
delBbscttInnbArr.push(bbscttInnb);
|
|
$.ajax({
|
|
type: "post",
|
|
url: "/sopmal/csc/deleteBbscttDel",
|
|
data: {
|
|
"delBbscttInnbArr": delBbscttInnbArr,
|
|
"bbsId": bbsId,
|
|
"goodsInnbArr": $("#goodsInnb").val(),
|
|
"bbsTyCd": "05"
|
|
},
|
|
success: function () {
|
|
closeModal("confirm_del_alert");
|
|
openModal("success_del_alert");
|
|
}
|
|
});
|
|
}
|
|
/*********************************************************
|
|
QNA 관련 기능 함수(CRUD 외)
|
|
*******************************************************/
|
|
/*textarea내 태그 제거 함수 (수정 폼 시)*/
|
|
const fn_remove_tag = (cn) => {
|
|
cn = cn.replaceAll(/<br>/ig, '\n');
|
|
cn = cn.replaceAll(/<\/br>/ig, '\n');
|
|
cn = cn.replaceAll(/<br \/>/ig, '\n');
|
|
//내용 내 태그 없애기
|
|
cn = cn.replace(/<\/?[^>]+(>|$)/g, "");
|
|
return cn;
|
|
}
|
|
|
|
//해당 게시물 파일정보 get
|
|
const fn_select_fileInfo = (bbscttInnb, idx) => {
|
|
$.ajax({
|
|
type: "post",
|
|
url: "/sopmal/mpage/act/selectFileInfo",
|
|
data: {"bbscttInnb": bbscttInnb},
|
|
success: function (data) {
|
|
const resultData = JSON.parse(data.resBody.result);
|
|
const fileInfo = resultData.fileInfo;
|
|
let img = '';
|
|
let cdnurl = '<c:out value="${cdnurl}"/>';
|
|
fileInfo.forEach(function (file) {
|
|
img += `<img src="\${cdnurl}\${file.filCours}\${file.sysFilNm}" alt="\${file.orginlFilNm}"/>`;
|
|
});
|
|
$(".productQnaList__answer__question").eq(idx).append(img);
|
|
}
|
|
});
|
|
}
|
|
|
|
/****************************************교환/반품******************************************/
|
|
/*반품/교환 정보 jsp 호출*/
|
|
const fn_select_return_info = () => {
|
|
let goodsInnb = $("#goodsInnb").val();
|
|
//반품/교환 정보 조회 div
|
|
let refundDiv = $("#productReTurn");
|
|
$.ajax({
|
|
type: "post",
|
|
url: "/sopmal/goods/selectGoodsReturnInfo",
|
|
data: {
|
|
"goodsInnb": goodsInnb,
|
|
},
|
|
success: function (data) {
|
|
if (refundDiv.html()) {
|
|
refundDiv.empty();
|
|
}
|
|
refundDiv.html(data);
|
|
$(".userRefund__inner").addClass("ck-content");
|
|
}
|
|
});
|
|
}
|
|
|
|
/************************************* 상품 노출 여부 *********************************/
|
|
$(document).ready(function () {
|
|
|
|
//광고유입이 아니거나 ep 유입이 아닌 경우
|
|
if(fn_is_empty($('#adTraceCd').val()) && fn_is_empty($('#epCd').val())){
|
|
//상품 미노출일경우
|
|
if($('#expsrDvCd').val() ==='02'){
|
|
openModal('modal-error-goods-expsrDv02')
|
|
history.back();
|
|
}
|
|
|
|
//노출기간이 아닐 경우
|
|
if($('#expsrDvCd').val() ==='03' && $('#expsrDvAt').val() ==='N'){
|
|
openModal('modal-error-goods-expsrDv03')
|
|
history.back();
|
|
}
|
|
}
|
|
|
|
})
|
|
/************************************* 상품 노출 여부 끝 *********************************/
|
|
|
|
/************************************* 이벤트배너 관련 *********************************/
|
|
|
|
//타임이벤트시 시간 떨어뜨리는 함수
|
|
$(window).on('load',function () {
|
|
|
|
//페이지 로드시 라디오 버튼 체크 해제
|
|
$('input[type="radio"]').prop('checked', false);
|
|
|
|
//타임이벤트 카운트다운
|
|
const evtTmeExpsrAt = $('#evtTmeExpsrAt').val()
|
|
if(evtTmeExpsrAt ==='Y'){
|
|
startCountdown();
|
|
}
|
|
|
|
|
|
});
|
|
//타임 이벤트 카운트 다운
|
|
function startCountdown() {
|
|
|
|
|
|
let remainTime = $('#remainTime').text();
|
|
|
|
// 시간을 시, 분, 초로 분리
|
|
let [hours, minutes, seconds] = remainTime.split(':').map(Number);
|
|
|
|
|
|
function updateTimer() {
|
|
// 현재 시간을 표시
|
|
let formattedHours = hours < 10 ? '0' + hours : hours;
|
|
let formattedMinutes = minutes < 10 ? '0' + minutes : minutes;
|
|
let formattedSeconds = seconds < 10 ? '0' + seconds : seconds;
|
|
|
|
let result_days = Math.floor(formattedHours / 24);
|
|
let result_hours = formattedHours % 24;
|
|
|
|
let result;
|
|
|
|
if(result_days >= 1) {
|
|
// console.log("일수 필요");
|
|
result = result_days + '일 ' + result_hours + ':' + formattedMinutes + ':' + formattedSeconds;
|
|
|
|
}else {
|
|
result = result_hours + ':' + formattedMinutes + ':' + formattedSeconds;
|
|
}
|
|
|
|
$('#remainTime').text(result)
|
|
// 1초 감소
|
|
seconds--;
|
|
|
|
// 초가 0보다 작아지면 분에서 1을 빼고 초를 59로 설정
|
|
if (seconds < 0) {
|
|
seconds = 59;
|
|
minutes--;
|
|
}
|
|
|
|
// 분이 0보다 작아지면 시간에서 1을 빼고 분을 59로 설정
|
|
if (minutes < 0) {
|
|
minutes = 59;
|
|
hours--;
|
|
}
|
|
|
|
// 시간이 0보다 작아지면 타이머 중지
|
|
if (hours < 0) {
|
|
$('#remainTime').text("00:00:00");
|
|
clearInterval(timerInterval);
|
|
}
|
|
}
|
|
|
|
// 1초마다 updateTimer 함수 실행
|
|
let timerInterval = setInterval(updateTimer, 1000);
|
|
|
|
}
|
|
|
|
|
|
/************************************* 이벤트배너 관련 끝 *********************************/
|
|
|
|
//관련상품(함께하면 좋은 상품) 옵션 모달
|
|
const fn_relate_open_modal = (modalDivSltr, modalSlrt, relateGoodsInnb) =>{
|
|
|
|
|
|
const submitType = 'POST';
|
|
const url ='/sopmal/goods/selectRelateGoodsPopup'
|
|
const data = JSON.stringify({'goodsInnb' : relateGoodsInnb})
|
|
|
|
$.ajax({
|
|
type: submitType,
|
|
contentType: 'application/json',
|
|
url: url,
|
|
data: data,
|
|
success: function (data) {
|
|
//함께하면 좋은 상품 초기화
|
|
cartProductArr = []
|
|
$('#'+modalSlrt).remove();
|
|
$('#'+modalDivSltr).html(data);
|
|
openModal(modalSlrt);
|
|
}
|
|
});
|
|
}
|
|
|
|
//쿠폰받기 모달
|
|
const fn_coupon_open_modal = (modalDivSltr, modalSlrt) =>{
|
|
const submitType = 'POST';
|
|
const url ='/sopmal/goods/selectGoodsCouponListPopup'
|
|
const data = JSON.stringify({'goodsInnb' : $('#goodsInnb').val()})
|
|
|
|
$.ajax({
|
|
type: submitType,
|
|
contentType: 'application/json',
|
|
url: url,
|
|
data: data,
|
|
success: function (data) {
|
|
$('#'+modalSlrt).remove();
|
|
$('#'+modalDivSltr).html(data);
|
|
openModal(modalSlrt);
|
|
}
|
|
});
|
|
}
|
|
|
|
/*배송비 툴팁 popmodal 정보 조회*/
|
|
const fn_select_dlvy_info = () => {
|
|
|
|
fn_set_dlvy_info_cn()
|
|
openModal('deliveryFeePop');
|
|
|
|
}
|
|
|
|
/*배송비 툴팁 내용 set*/
|
|
const fn_set_dlvy_info_cn = () => {
|
|
//내용 set
|
|
// 기본배송비
|
|
const dftDlvyAmt = `${resultMap.goodsDtl.dftDlvyAmt}`;
|
|
// 금액조건 사용여부
|
|
const amtCndUseAt = `${resultMap.goodsDtl.amtCndUseAt}`;
|
|
// 금액조건 금액
|
|
const amtCndAditAmt = `${resultMap.goodsDtl.amtCndAditAmt}`;
|
|
// 개수조건 사용여부
|
|
const cntCndUseAt = `${resultMap.goodsDtl.cntCndUseAt}`;
|
|
// 개수조건
|
|
const cntCndAditAmt = `${resultMap.goodsDtl.cntCndAditAmt}`;
|
|
// 배송지역추가여부
|
|
const dlvyAreaAditAt = `${resultMap.goodsDtl.dlvyAreaAditAt}`;
|
|
// 배송지역 금액
|
|
const areaAditDlvyAmt = `${resultMap.goodsDtl.areaAditDlvyAmt}`;
|
|
// 묶음배송 사용여부
|
|
const bundleDlvyUseAt = `${resultMap.goodsDtl.bundleDlvyUseAt}`;
|
|
// 묶음배송 개수
|
|
const bundleDlvyCndAmt = `${resultMap.goodsDtl.bundleDlvyCndAmt}`;
|
|
|
|
let curUnit = `${curUnit}`;
|
|
|
|
|
|
/*배송비 정보 세팅 */
|
|
/*기본 배송비 세팅 */
|
|
let dftDlvyAmtCn = `
|
|
<table>
|
|
<caption>기본배송비</caption>
|
|
<colgroup>
|
|
<col style="width: 40%;">
|
|
<col style="width: 60%;">
|
|
</colgroup>
|
|
<tbody>
|
|
<tr>
|
|
<th>기본배송비</th>
|
|
<td>\${dftDlvyAmt}${curUnit}\</td>
|
|
</tr>`;
|
|
|
|
//금액 구간이 있을 경우
|
|
let amtCndUseCn = amtCndUseAt === 'Y' ? `<tr>
|
|
<th>\${amtCndAditAmt}${curUnit}\ 이상 ~</th>
|
|
<td>0\${curUnit}\</td>
|
|
</tr>` : "";
|
|
//개수조건 있을 경우
|
|
let cntCndUseCn = cntCndUseAt === 'Y' ? `<tr>
|
|
<th>\${cntCndAditAmt}\개 이상 ~</th>
|
|
<td>0\${curUnit}\</td>
|
|
</tr>` : "";
|
|
|
|
// 묶음배송 있을 경우
|
|
let bundleDlvyUseCn = bundleDlvyUseAt === 'Y' ? `<tr>
|
|
<th>\${bundleDlvyCndAmt}${curUnit}\ 이상 ~</th>
|
|
<td>0\${curUnit}\(묶음 배송)</td>
|
|
</tr>` : "";
|
|
|
|
let dftDlvyAmtCnEnd = ` </tbody>
|
|
</table>
|
|
</div>`;
|
|
|
|
|
|
//배송지역 있을 경우
|
|
let dlvyAreaAditCn = dlvyAreaAditAt === 'Y' ? ` <div class="deliveryFeeInfo__item">
|
|
<em>추가배송비(묶음 배송비 금액)</em>
|
|
<table>
|
|
<caption>추가배송비</caption>
|
|
<colgroup>
|
|
<col style="width: 40%;">
|
|
<col style="width: 60%;">
|
|
</colgroup>
|
|
<tbody>
|
|
<tr>
|
|
<th>도서산간</th>
|
|
<td>\${areaAditDlvyAmt}${curUnit}\</td>
|
|
</tr>
|
|
<tr>
|
|
<th>제주지역</th>
|
|
<td>\${areaAditDlvyAmt}${curUnit}\</td>
|
|
</tr>
|
|
<tr>
|
|
<th>제주도서산간</th>
|
|
<td>\${areaAditDlvyAmt}${curUnit}\</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>` : "";
|
|
|
|
//html 결과
|
|
let dlvyFeeInfo = `<div class="deliveryFeeInfo__item">
|
|
<div class="deliveryFeeInfo__controls">
|
|
<em>기본배송비(묶음 배송비 금액)</em>
|
|
<a href="javascript:void(0);" id="dlvyGroupSearch" class="btn xsm outline">묶음상품 상품보기</a>
|
|
</div>
|
|
\${dftDlvyAmtCn}\
|
|
\${amtCndUseCn}\
|
|
\${cntCndUseCn}\
|
|
\${bundleDlvyUseCn}\
|
|
\${dftDlvyAmtCnEnd}\
|
|
</div>
|
|
`;
|
|
|
|
|
|
$(".popModalContent__deliveryFeeInfo").html(dlvyFeeInfo);
|
|
|
|
}
|
|
|
|
//배송비 툴팁 > 묶음배송 상품보기
|
|
$(document).on('click', '#dlvyGroupSearch', function () {
|
|
|
|
const dlvyGroupInnb = $('#dlvyGroupInnb').val()
|
|
const form = $('<form>', {
|
|
'action': '/sopmal/goods/selectGoodsSrchForm',
|
|
'method': 'get'
|
|
}).append(
|
|
$('<input>', {
|
|
'type': 'hidden',
|
|
'name': 'dlvyGroupInnb',
|
|
'value': dlvyGroupInnb
|
|
})
|
|
)
|
|
$('body').append(form);
|
|
form.submit();
|
|
})
|
|
|
|
|
|
//재고옵션 다음 셀렉트 옵션 값 호출
|
|
$(document).on('change', 'select[name="selectInvntryOptn"]', function () {
|
|
|
|
const id = $(this).attr('id');
|
|
let sourceId = id.slice(-1); // 아이디로 셀렉트 옵션 순서 확인
|
|
let nextId = (parseInt(sourceId)+1).toString();
|
|
|
|
const lastId = $('select[name="selectInvntryOptn"]:last').attr('id')
|
|
if($(this).val() === ''){
|
|
return false;
|
|
}
|
|
|
|
const selectOptnVal1 = fn_nvl($('#selectInvntryOptn1 option:selected').text(),'').replaceAll(' ','').trim()
|
|
const selectOptnVal2 = fn_nvl($('#selectInvntryOptn2 option:selected').text(),'').replaceAll(' ','').trim()
|
|
const selectOptnVal3 = fn_nvl($('#selectInvntryOptn3 option:selected').text(),'').replaceAll(' ','').trim()
|
|
const selectOptnVal4 = fn_nvl($('#selectInvntryOptn4 option:selected').text(),'').replaceAll(' ','').trim()
|
|
|
|
let optnVal1 = selectOptnVal1 === '선택'?'': selectOptnVal1
|
|
let optnVal2 = selectOptnVal2 === '선택'?'': selectOptnVal2
|
|
let optnVal3 = selectOptnVal3 === '선택'?'': selectOptnVal3
|
|
let optnVal4 = selectOptnVal4 === '선택'?'': selectOptnVal4
|
|
|
|
switch (sourceId) {
|
|
case '1':
|
|
optnVal2 = '';
|
|
optnVal3 = '';
|
|
optnVal4 = '';
|
|
|
|
$('select[name="selectInvntryOptn"]').not(':first').each(function() {
|
|
|
|
$(this).find('option').each(function () {
|
|
// value가 빈 문자열이 아닌 경우에만 삭제
|
|
if ($(this).val() !== '') {
|
|
$(this).remove().niceSelect('update');
|
|
}
|
|
});
|
|
});
|
|
$('select[name="selectInvntryOptn"]').not(':first').val('').niceSelect('update')
|
|
break;
|
|
case '2':
|
|
optnVal3 = '';
|
|
optnVal4 = '';
|
|
|
|
$('select[name="selectInvntryOptn"]').not(':lt(2)').each(function() {
|
|
|
|
$(this).find('option').each(function () {
|
|
// value가 빈 문자열이 아닌 경우에만 삭제
|
|
if ($(this).val() !== '') {
|
|
$(this).remove().niceSelect('update');
|
|
}
|
|
});
|
|
});
|
|
$('select[name="selectInvntryOptn"]').not(':lt(2)').val('')
|
|
$('select[name="selectInvntryOptn"]').niceSelect('update')
|
|
break;
|
|
case '3':
|
|
optnVal4 = '';
|
|
$('select[name="selectInvntryOptn"]').not(':lt(3)').each(function() {
|
|
|
|
$(this).find('option').each(function () {
|
|
// value가 빈 문자열이 아닌 경우에만 삭제
|
|
if ($(this).val() !== '') {
|
|
$(this).remove().niceSelect('update');
|
|
}
|
|
});
|
|
});
|
|
$('select[name="selectInvntryOptn"]').not(':lt(3)').val('')
|
|
$('select[name="selectInvntryOptn"]').niceSelect('update')
|
|
break;
|
|
}
|
|
|
|
const data = JSON.stringify(
|
|
{
|
|
'goodsInnb' : $('#goodsInnb').val()
|
|
,'optnTy' : '02'
|
|
,'optnVal1' : optnVal1
|
|
,'optnVal2' : optnVal2
|
|
,'optnVal3' : optnVal3
|
|
,'optnVal4' : optnVal4
|
|
}
|
|
);
|
|
|
|
|
|
$.ajax({
|
|
type: 'post',
|
|
contentType : 'application/json',
|
|
url: '/sopmal/goods/selectGoodsOptnInfo',
|
|
data: data,
|
|
success: function (data) {
|
|
let str = JSON.parse(data.resBody.result);
|
|
console.log('str', str)
|
|
if (str.result === 'success') {
|
|
|
|
//판매가
|
|
const slepricDscntAmt = $('#slepricDscntAmt').val()
|
|
|
|
switch (sourceId){
|
|
case '1' :
|
|
//1선택하면 서버 요청해서 2번 옵션값 받아옴
|
|
//2번에 option에 옵션값 뿌리기
|
|
const uniqueData2 = [];
|
|
const seenOptnVal2 = new Set();
|
|
str.goodsOptnList.forEach(item => {
|
|
if (!seenOptnVal2.has(item.optnVal2)){
|
|
uniqueData2.push(item);
|
|
seenOptnVal2.add(item.optnVal2);
|
|
}
|
|
});
|
|
|
|
console.log('uniqueData2', uniqueData2)
|
|
uniqueData2.forEach(function(option) {
|
|
|
|
//추가금액 표시여부
|
|
if($('#selectInvntryOptn'+nextId).attr('id') === lastId){
|
|
|
|
//재고품절시 노출여부
|
|
if(option.invntrySldoutExpsrAt ==='N'){
|
|
//옵션 노출 안함
|
|
|
|
//품절표시
|
|
}else if(option.disableAt === 'Y'){
|
|
|
|
$('#selectInvntryOptn'+nextId).append($('<option>', {
|
|
value: option.slepric+'|'+option.goodsOptnInnb+'|'+option.optnInfo+'|'+option.optnTy,
|
|
text: option.optnVal2 + '(+' + addComma((parseInt(option.slepric) - parseInt(slepricDscntAmt))) +')' + '(품절)',
|
|
disabled: true
|
|
}));
|
|
}else{
|
|
$('#selectInvntryOptn'+nextId).append($('<option>', {
|
|
value: option.slepric+'|'+option.goodsOptnInnb+'|'+option.optnInfo+'|'+option.optnTy,
|
|
text: option.optnVal2 + '(+' + addComma((parseInt(option.slepric) - parseInt(slepricDscntAmt))) +')'
|
|
}));
|
|
}
|
|
|
|
}else{
|
|
|
|
//재고품절시 노출여부
|
|
if(option.invntrySldoutExpsrAt ==='N'){
|
|
//옵션 노출 안함
|
|
|
|
//품절표시
|
|
}else if(option.disableAt === 'Y'){
|
|
|
|
$('#selectInvntryOptn'+nextId).append($('<option>', {
|
|
value: option.slepric+'|'+option.goodsOptnInnb+'|'+option.optnInfo+'|'+option.optnTy,
|
|
text: option.optnVal2 +'(품절)',
|
|
disabled: true
|
|
}));
|
|
}else{
|
|
$('#selectInvntryOptn'+nextId).append($('<option>', {
|
|
value: option.slepric+'|'+option.goodsOptnInnb+'|'+option.optnInfo+'|'+option.optnTy,
|
|
text: option.optnVal2
|
|
}));
|
|
}
|
|
|
|
}
|
|
});
|
|
$('#selectInvntryOptn'+nextId).niceSelect('update');
|
|
|
|
break;
|
|
case '2' :
|
|
const uniqueData3 = [];
|
|
const seenOptnVal3 = new Set();
|
|
str.goodsOptnList.forEach(item => {
|
|
if (!seenOptnVal3.has(item.optnVal3)){
|
|
uniqueData3.push(item);
|
|
seenOptnVal3.add(item.optnVal3);
|
|
}
|
|
});
|
|
|
|
console.log('uniqueData3', uniqueData3)
|
|
uniqueData3.forEach(function(option) {
|
|
|
|
if($('#selectInvntryOptn'+nextId).attr('id') === lastId){
|
|
|
|
//재고품절시 노출여부
|
|
if(option.invntrySldoutExpsrAt ==='N'){
|
|
//옵션 노출 안함
|
|
|
|
//품절표시
|
|
}else if(option.disableAt === 'Y'){
|
|
|
|
$('#selectInvntryOptn'+nextId).append($('<option>', {
|
|
value: option.slepric+'|'+option.goodsOptnInnb+'|'+option.optnInfo+'|'+option.optnTy,
|
|
text: option.optnVal3 + '(+' + addComma((parseInt(option.slepric) - parseInt(slepricDscntAmt))) +')' + '(품절)',
|
|
disabled: true
|
|
}));
|
|
}else{
|
|
|
|
$('#selectInvntryOptn'+nextId).append($('<option>', {
|
|
value: option.slepric+'|'+option.goodsOptnInnb+'|'+option.optnInfo+'|'+option.optnTy,
|
|
text: option.optnVal3 + '(+' + addComma((parseInt(option.slepric) - parseInt(slepricDscntAmt))) +')'
|
|
}));
|
|
}
|
|
|
|
}else{
|
|
|
|
//재고품절시 노출여부
|
|
if(option.invntrySldoutExpsrAt ==='N'){
|
|
//옵션 노출 안함
|
|
|
|
//품절표시
|
|
}else if(option.disableAt === 'Y'){
|
|
|
|
$('#selectInvntryOptn'+nextId).append($('<option>', {
|
|
value: option.slepric+'|'+option.goodsOptnInnb+'|'+option.optnInfo+'|'+option.optnTy,
|
|
text: option.optnVal3 +'(품절)',
|
|
disabled: true
|
|
}));
|
|
}else{
|
|
$('#selectInvntryOptn'+nextId).append($('<option>', {
|
|
value: option.slepric+'|'+option.goodsOptnInnb+'|'+option.optnInfo+'|'+option.optnTy,
|
|
text: option.optnVal3
|
|
}));
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
$('#selectInvntryOptn'+nextId).niceSelect('update');
|
|
|
|
break;
|
|
|
|
case '3' :
|
|
const uniqueData4 = [];
|
|
const seenOptnVal4 = new Set();
|
|
str.goodsOptnList.forEach(item => {
|
|
if (!seenOptnVal4.has(item.optnVal4)){
|
|
uniqueData4.push(item);
|
|
seenOptnVal4.add(item.optnVal4);
|
|
}
|
|
});
|
|
|
|
uniqueData4.forEach(function(option) {
|
|
|
|
if($('#selectInvntryOptn'+nextId).attr('id') === lastId){
|
|
|
|
|
|
//재고품절시 노출여부
|
|
if(option.invntrySldoutExpsrAt ==='N'){
|
|
//옵션 노출 안함
|
|
|
|
//품절표시
|
|
}else if(option.disableAt === 'Y'){
|
|
|
|
$('#selectInvntryOptn'+nextId).append($('<option>', {
|
|
value: option.slepric+'|'+option.goodsOptnInnb+'|'+option.optnInfo+'|'+option.optnTy,
|
|
text: option.optnVal4+ '(+' + addComma((parseInt(option.slepric) - parseInt(slepricDscntAmt))) +')' + '(품절)',
|
|
disabled: true
|
|
}));
|
|
}else{
|
|
$('#selectInvntryOptn'+nextId).append($('<option>', {
|
|
value: option.slepric+'|'+option.goodsOptnInnb+'|'+option.optnInfo+'|'+option.optnTy,
|
|
text: option.optnVal4 + '(+' + addComma((parseInt(option.slepric) - parseInt(slepricDscntAmt))) +')'
|
|
}));
|
|
}
|
|
|
|
|
|
}else{
|
|
|
|
|
|
//재고품절시 노출여부
|
|
if(option.invntrySldoutExpsrAt ==='N'){
|
|
//옵션 노출 안함
|
|
|
|
//품절표시
|
|
}else if(option.disableAt === 'Y'){
|
|
|
|
$('#selectInvntryOptn'+nextId).append($('<option>', {
|
|
value: option.slepric+'|'+option.goodsOptnInnb+'|'+option.optnInfo+'|'+option.optnTy,
|
|
text: option.optnVal4+'(품절)',
|
|
disabled: true
|
|
}));
|
|
|
|
}else{
|
|
$('#selectInvntryOptn'+nextId).append($('<option>', {
|
|
value: option.slepric+'|'+option.goodsOptnInnb+'|'+option.optnInfo+'|'+option.optnTy,
|
|
text: option.optnVal4
|
|
}));
|
|
}
|
|
|
|
|
|
}
|
|
|
|
});
|
|
|
|
$('#selectInvntryOptn'+nextId).niceSelect('update');
|
|
|
|
break;
|
|
}
|
|
|
|
//마지막 선택일 경우 셀렉트 기본값으로 되돌림
|
|
if(id === lastId){
|
|
|
|
$('select[name="selectInvntryOptn"]').not(':first').each(function() {
|
|
|
|
$(this).find('option').each(function () {
|
|
// value가 빈 문자열이 아닌 경우에만 삭제
|
|
if ($(this).val() !== '') {
|
|
$(this).remove().niceSelect('update');
|
|
}
|
|
});
|
|
});
|
|
$('select[name="selectInvntryOptn"]').val('').niceSelect('update')
|
|
}
|
|
}
|
|
}
|
|
});
|
|
})
|
|
|
|
/*************************************************************
|
|
장바구니 버튼
|
|
**************************************************************/
|
|
$(document).on('click', '.addCart', function () {
|
|
|
|
$('.addCart').prop("disabled", true);
|
|
|
|
if($('#hiddenForm') != null){
|
|
$('#hiddenForm').remove()
|
|
}
|
|
|
|
//상품 선택 확인
|
|
let goodsAddedChk = false;
|
|
for (let idx in productArr) {
|
|
if(productArr[idx][5] == '01' || productArr[idx][5] == '02'){
|
|
goodsAddedChk = true;
|
|
break;
|
|
}
|
|
}
|
|
|
|
if(productArr.length <= 0 || !goodsAddedChk ){
|
|
openModal('modal-error-goods-choice')
|
|
$('.addCart').prop("disabled", false);
|
|
return;
|
|
}
|
|
|
|
//추가구성옵션 - 필수추가구성옵션 있는지 확인
|
|
var values = $('input[name="selectOptionItem__otpnEssntlAt__added"]').map(function() {
|
|
return $(this).val();
|
|
}).get();
|
|
|
|
if(values.includes('Y')){
|
|
var isAddedOptnEssntlAt = productArr.some(function (item) {
|
|
return item[5].trim() === '03'
|
|
});
|
|
|
|
if(!isAddedOptnEssntlAt){
|
|
openModal('modal-error-goods-essntlat')
|
|
$('.addCart').prop("disabled", false);
|
|
return;
|
|
}
|
|
}
|
|
|
|
const hiddenForm = document.createElement('form');
|
|
hiddenForm.name = 'hiddenForm';
|
|
hiddenForm.id = 'hiddenForm';
|
|
hiddenForm.method = 'post';
|
|
hiddenForm.action = '';
|
|
|
|
const goodsInnb = $('#addCartGoodsInnb').val();
|
|
const cartDvCdCart = $('#cartDv-cart').val();
|
|
|
|
|
|
/**
|
|
* 장바구니 담기 전 옵션조회해서 같은 물품 있을 경우 confirm후
|
|
* DELETE-INSERT 수행
|
|
* */
|
|
|
|
// 1. 해당 사용자의 모든 장바구니 정보 조회(상품옵션고유번호, 갯수 조회)
|
|
$.ajax({
|
|
type: 'post',
|
|
contentType: 'application/json',
|
|
url: '<c:out value="/sopmal/ordr/selectCartList"/>',
|
|
data: JSON.stringify({}),
|
|
success: async function (data) {
|
|
const result = JSON.parse(data.resBody.result)
|
|
if(result.message === 'success'){
|
|
const resultCartList = result.cartList;
|
|
let cartDuplicateOptnAt ='N';
|
|
let duplicatedOptn = [];
|
|
|
|
for(let i = productArr.length - 1; i >= 0; i--){
|
|
for(let j = resultCartList.length - 1; j >= 0; j--){
|
|
|
|
if(parseInt(resultCartList[j].goodsOptnInnb) === parseInt(productArr[i][4])){
|
|
|
|
//중복된 상품옵션의 기존 수량 + 선택한 수량
|
|
let newCartItem = {
|
|
...resultCartList[j],
|
|
cnt: resultCartList[j].cnt + productArr[i][1]
|
|
};
|
|
|
|
duplicatedOptn.push(newCartItem);
|
|
|
|
// resultCartList에서 해당 객체 삭제
|
|
resultCartList.splice(j, 1);
|
|
|
|
// productArr에서 해당 배열 삭제
|
|
productArr.splice(i, 1);
|
|
|
|
cartDuplicateOptnAt = 'Y'
|
|
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
|
|
//2. 장바구니 중복 확인 결과
|
|
if(cartDuplicateOptnAt ==='Y'){
|
|
|
|
const dupliModal = await showConfirmModal();
|
|
// 3. confirm시 해당 옵션번호랑 같은 상품의 갯수 더해서 DELETE insert
|
|
if(dupliModal){
|
|
|
|
|
|
//선택한 상품옵션 장바구니 저장
|
|
const formData = new FormData();
|
|
let idx = 0;
|
|
if(productArr.length > 0 ){
|
|
for (let product of productArr) {
|
|
fn_create_input('hidden', "addCartList[" + idx + "].cartDvCd", cartDvCdCart, hiddenForm);
|
|
fn_create_input('hidden', "addCartList[" + idx + "].goodsInnb", product[6], hiddenForm);
|
|
fn_create_input('hidden', "addCartList[" + idx + "].qy", product[1], hiddenForm);
|
|
fn_create_input('hidden', "addCartList[" + idx + "].goodsOptnInnb", product[4], hiddenForm);
|
|
fn_create_input('hidden', "addCartList[" + idx + "].optnTy", product[5], hiddenForm);
|
|
|
|
idx ++;
|
|
}
|
|
|
|
}
|
|
|
|
|
|
let dupliIndex = 0;
|
|
//기존 장바구니에 담은 상품 저장
|
|
if(resultCartList.length > 0){
|
|
for(let resultCartItem of resultCartList){
|
|
fn_create_input('hidden', "addCartList[" + idx + "].cartDvCd", resultCartItem.cartDvCd, hiddenForm);
|
|
fn_create_input('hidden', "addCartList[" + idx + "].goodsInnb", resultCartItem.goodsInnb, hiddenForm);
|
|
fn_create_input('hidden', "addCartList[" + idx + "].qy", resultCartItem.cnt, hiddenForm);
|
|
fn_create_input('hidden', "addCartList[" + idx + "].goodsOptnInnb", resultCartItem.goodsOptnInnb, hiddenForm);
|
|
fn_create_input('hidden', "addCartList[" + idx + "].optnTy", resultCartItem.optnTy, hiddenForm);
|
|
|
|
idx ++;
|
|
}
|
|
|
|
}
|
|
|
|
|
|
//중복된 상품 옵션 저장
|
|
for(let dupliItem of duplicatedOptn){
|
|
|
|
fn_create_input('hidden', "addCartList[" + idx + "].cartDvCd", dupliItem.cartDvCd, hiddenForm);
|
|
fn_create_input('hidden', "addCartList[" + idx + "].goodsInnb", dupliItem.goodsInnb, hiddenForm);
|
|
fn_create_input('hidden', "addCartList[" + idx + "].qy", dupliItem.cnt, hiddenForm);
|
|
fn_create_input('hidden', "addCartList[" + idx + "].goodsOptnInnb", dupliItem.goodsOptnInnb, hiddenForm);
|
|
fn_create_input('hidden', "addCartList[" + idx + "].optnTy", dupliItem.optnTy, hiddenForm);
|
|
|
|
idx++;
|
|
}
|
|
|
|
//장바구니 중복으로 인한 수정 여부
|
|
fn_create_input('hidden', "addCartUptAt", 'Y', hiddenForm);
|
|
fn_create_input('hidden', "cartDvCd", $('#cartDv-cart').val(), hiddenForm);
|
|
|
|
document.body.appendChild(hiddenForm);
|
|
|
|
$('#hiddenForm').serializeArray().forEach(function (item) {
|
|
formData.append(item.name, item.value);
|
|
});
|
|
|
|
fn_add_cart('cart', formData, goodsInnb)
|
|
|
|
}else{
|
|
//장바구니 중복 상품 추가 안할 경우 전체 초기화
|
|
productArr=[]
|
|
cartProductArr =[]
|
|
$('input[type="radio"]').prop('checked', false)
|
|
$('#countContainer').empty()
|
|
$('.productDetailInfo__priceTotal__totalPriceNum').text(0)
|
|
closeModal('product-option-sheet');
|
|
$('.addCart').prop("disabled", false);
|
|
}
|
|
|
|
|
|
}else{
|
|
//상품 중복옵션 없을 경우 장바구니 저장 진행
|
|
const formData = new FormData();
|
|
for (let idx in productArr) {
|
|
fn_create_input('hidden', "addCartList[" + idx + "].cartDvCd", cartDvCdCart, hiddenForm);
|
|
fn_create_input('hidden', "addCartList[" + idx + "].goodsInnb", productArr[idx][6], hiddenForm);
|
|
fn_create_input('hidden', "addCartList[" + idx + "].qy", productArr[idx][1], hiddenForm);
|
|
fn_create_input('hidden', "addCartList[" + idx + "].goodsOptnInnb", productArr[idx][4], hiddenForm);
|
|
fn_create_input('hidden', "addCartList[" + idx + "].optnTy", productArr[idx][5], hiddenForm);
|
|
}
|
|
|
|
//장바구니 중복으로 인한 수정 여부
|
|
fn_create_input('hidden', "addCartUptAt", 'N', hiddenForm);
|
|
fn_create_input('hidden', "cartDvCd", $('#cartDv-cart').val(), hiddenForm);
|
|
|
|
document.body.appendChild(hiddenForm);
|
|
|
|
$('#hiddenForm').serializeArray().forEach(function (item) {
|
|
formData.append(item.name, item.value);
|
|
});
|
|
|
|
|
|
fn_add_cart('cart', formData, goodsInnb)
|
|
}
|
|
|
|
}//result success END
|
|
}//ajax success END
|
|
});//ajax END
|
|
|
|
})
|
|
|
|
/*************************************************************
|
|
구매하기 버튼
|
|
**************************************************************/
|
|
$(document).on('click', '.purchsOrdr', function () {
|
|
$('.purchsOrdr').prop('disabled', true)
|
|
|
|
if($('#hiddenForm')!=null){
|
|
$('#hiddenForm').remove()
|
|
}
|
|
|
|
//상품 선택 확인
|
|
//기본상품이 저장되었는지 확인
|
|
let goodsAddedChk = false;
|
|
for (let idx in productArr) {
|
|
if(productArr[idx][5] == '01' || productArr[idx][5] == '02'){
|
|
goodsAddedChk = true;
|
|
break;
|
|
}
|
|
}
|
|
|
|
if(productArr.length <= 0|| !goodsAddedChk ){
|
|
openModal('modal-error-goods-choice')
|
|
$('.purchsOrdr').prop('disabled', false)
|
|
return;
|
|
}
|
|
|
|
//추가구성옵션 - 필수추가구성옵션 있는지 확인
|
|
var values = $('input[name="selectOptionItem__otpnEssntlAt__added"]').map(function() {
|
|
return $(this).val();
|
|
}).get();
|
|
|
|
if(values.includes('Y')){
|
|
var isAddedOptnEssntlAt = productArr.some(function (item) {
|
|
return item[5].trim() === '03'
|
|
});
|
|
|
|
if(!isAddedOptnEssntlAt){
|
|
openModal('modal-error-goods-essntlat')
|
|
$('.purchsOrdr').prop('disabled', false)
|
|
return;
|
|
}
|
|
}
|
|
|
|
disableButton('.purchsOrdr');
|
|
const hiddenForm = document.createElement('form');
|
|
hiddenForm.name = 'hiddenForm';
|
|
hiddenForm.id = 'hiddenForm';
|
|
hiddenForm.method = 'post';
|
|
hiddenForm.action = '';
|
|
const cartDvCdDirect = $('#cartDv-direct').val();
|
|
const goodsInnb = $('#addCartGoodsInnb').val();
|
|
|
|
|
|
const formData = new FormData();
|
|
|
|
for (let idx in productArr) {
|
|
fn_create_input('hidden', "addCartList[" + idx + "].cartDvCd", cartDvCdDirect, hiddenForm);
|
|
fn_create_input('hidden', "addCartList[" + idx + "].goodsInnb", productArr[idx][6], hiddenForm);
|
|
fn_create_input('hidden', "addCartList[" + idx + "].qy", productArr[idx][1], hiddenForm);
|
|
fn_create_input('hidden', "addCartList[" + idx + "].goodsOptnInnb", productArr[idx][4], hiddenForm);
|
|
fn_create_input('hidden', "addCartList[" + idx + "].optnTy", productArr[idx][5], hiddenForm);
|
|
}
|
|
|
|
|
|
fn_create_input('hidden', "cartDvCd", $('#cartDv-direct').val(), hiddenForm);
|
|
document.body.appendChild(hiddenForm);
|
|
|
|
$('#hiddenForm').serializeArray().forEach(function (item) {
|
|
formData.append(item.name, item.value);
|
|
});
|
|
|
|
fn_add_cart('direct', formData, goodsInnb)
|
|
|
|
})
|
|
|
|
//장바구니 담기 처리
|
|
const fn_add_cart = (gubun, data, goodsInnb) => {
|
|
const url = "<c:url value="/sopmal/ordr/insertSpbk"/>";
|
|
$.ajax({
|
|
type: 'post',
|
|
enctype: 'multipart/form-data',
|
|
url: url,
|
|
data: data,
|
|
contentType: false,
|
|
processData: false,
|
|
success: function (data) {
|
|
if (data.resBody != null) {
|
|
const result = JSON.parse(data.resBody.result);
|
|
console.log('result', result)
|
|
if (result.result === 'success') {
|
|
if (gubun === 'cart') {
|
|
fn_cart_modal();
|
|
fn_reflesh_cart_cnt();
|
|
$('.addCart').prop("disabled", false);
|
|
}
|
|
if (gubun === 'direct') {
|
|
//구매화면 이동
|
|
fn_move_purchs_order();
|
|
$('.purchsOrdr').prop('disabled', false);
|
|
}
|
|
} else {
|
|
openModal('modal-error-goods-purchInfoReg')
|
|
$('.addCart').prop("disabled", false);
|
|
$('.purchsOrdr').prop('disabled', false);
|
|
}
|
|
}
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
//장바구니 담기 후 모달
|
|
const fn_cart_modal = () => {
|
|
|
|
openModal('confirm_addCart_alert')
|
|
|
|
}
|
|
|
|
|
|
//구매하기 클릭 후 구매목록 이동
|
|
const fn_move_purchs_order = () => {
|
|
|
|
<%--/* 구매하기 버튼 선택 이벤트 */--%>
|
|
const form = $('<form></form>');
|
|
|
|
|
|
$(form).append($('<input/>', {type: 'hidden', name: 'cartDvCd', value: $('#cartDv-direct').val()}));
|
|
|
|
|
|
$(form).attr('method', 'post');
|
|
$(form).attr('action', '<c:url value="/sopmal/ordr/selectMbrPurchsForm"/>');
|
|
|
|
$(form).appendTo('body');
|
|
|
|
//일반옵션 체크 해제
|
|
$('.productOption .product-option input[type="radio"]').prop('checked', false)
|
|
|
|
$(form).submit();
|
|
$(form).remove();
|
|
|
|
}
|
|
|
|
/*************************************************************
|
|
장바구니 목록 이동
|
|
**************************************************************/
|
|
const fn_move_cart_list = () => {
|
|
|
|
const form = $('<form></form>');
|
|
$(form).append($('<input/>', {type: 'hidden', name: 'cartDvCd', value: $('#cartDv-cart').val()}));
|
|
|
|
$(form).attr('target', '_self');
|
|
$(form).attr('method', 'post');
|
|
$(form).attr('action', '<c:url value="/sopmal/ordr/selectSpbk"/>');
|
|
|
|
$(form).appendTo('body');
|
|
|
|
//일반옵션 체크 해제
|
|
$('.productOption .product-option input[type="radio"]').prop('checked', false)
|
|
|
|
$(form).submit();
|
|
$(form).remove();
|
|
|
|
}
|
|
|
|
|
|
//함께하면 좋은상품을 선택한 옵션배열에 추가
|
|
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 () {
|
|
$('#addGoodsDtl').prop('disabled', true)
|
|
|
|
//상품 선택 확인
|
|
if(cartProductArr.length <= 0){
|
|
openModal('modal-error-goods-choice');
|
|
$('#addGoodsDtl').prop('disabled', false)
|
|
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[6] === 'Y'
|
|
});
|
|
|
|
if(!isAddedOptnEssntlAt){
|
|
openModal('modal-error-goods-essntlat');
|
|
$('#addGoodsDtl').prop('disabled', false)
|
|
return;
|
|
}
|
|
}
|
|
//상품 상세 화면에 추가
|
|
addUniqueProducts(productArr, cartProductArr)
|
|
$('#countContainer').append($('#cartCountContainer').find('.productDetailInfo__count'))
|
|
updateTotalPriceProd() // 함께하면 좋은 상품 가격 더하기
|
|
$('#addGoodsDtl').prop('disabled', false)
|
|
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 < cartProductArr.length; i++) {
|
|
totalPrice += cartProductArr[i][3]; // 배열의 총 가격을 더함
|
|
}
|
|
$(".productDetailInfo__priceTotal__totalPriceNum").text(addComma(totalPrice)); // 총 상품금액 텍스트 변경
|
|
}
|
|
|
|
|
|
|
|
//상품 중복 선택 모달
|
|
const fn_goods_duplicate_select_modal = () => {
|
|
|
|
//재고옵션 옵션 값 초기화
|
|
$('select[name="selectInvntryOptn"]').not(':first').each(function() {
|
|
$(this).find('option').each(function () {
|
|
// value가 빈 문자열이 아닌 경우에만 삭제
|
|
if ($(this).val() !== '') {
|
|
$(this).remove().niceSelect('update');
|
|
}
|
|
});
|
|
});
|
|
$('select[name="selectInvntryOptn"]').val('').niceSelect('update')
|
|
|
|
//함께하면 좋은상품 옵션 값 초기화
|
|
$('select[name="selectRelateInvntryOptn"]').not(':first').each(function() {
|
|
$(this).find('option').each(function () {
|
|
// value가 빈 문자열이 아닌 경우에만 삭제
|
|
if ($(this).val() !== '') {
|
|
$(this).remove().niceSelect('update');
|
|
}
|
|
});
|
|
});
|
|
$('select[name="selectRelateInvntryOptn"]').val('').niceSelect('update')
|
|
|
|
$('select[name="selectRelateAddedOptn"]').val('').niceSelect('update')
|
|
|
|
//모달 처리
|
|
openModal('modal-error-goods-duplicate')
|
|
|
|
}
|
|
|
|
//장바구니 중복 상품 추가 confirm 모달 버튼 true/false 반환
|
|
function showConfirmModal() {
|
|
return new Promise(function(resolve, reject) {
|
|
openModal('modal-error-confirm-add-cart-duplicate');
|
|
|
|
$('#modal-error-confirm-yesButton').one('click', function() {
|
|
resolve(true); // 예를 클릭하면 true 반환
|
|
});
|
|
|
|
$('#modal-error-confirm-noButton').one('click', function() {
|
|
resolve(false); // 아니오를 클릭하면 false 반환
|
|
});
|
|
|
|
$('#modal-error-confirm-add-cart-duplicate').on('hidden.bs.modal', function () {
|
|
resolve(false); // 모달이 닫힐 때 기본적으로 false 반환
|
|
});
|
|
});
|
|
}
|
|
|
|
//장바구니에 상품 담기 후 페이지 미이동 모달
|
|
const fn_addCart_result_modal = () =>{
|
|
closeModal('confirm_addCart_alert')
|
|
closeModal('product-option-sheet')
|
|
cartProductArr = []
|
|
productArr = []
|
|
$('input[type="radio"]').prop('checked', false);
|
|
$('#countContainer').empty()
|
|
$('.productDetailInfo__priceTotal__totalPriceNum').text(0);
|
|
}
|
|
|
|
//장바구니 중복여부 확인 후 페이지 미이동 모달
|
|
const fn_addCart_duplicateAt_N_modal = () =>{
|
|
closeModal('modal-error-confirm-add-cart-duplicate');
|
|
cartProductArr = []
|
|
productArr = []
|
|
$('input[type="radio"]').prop('checked', false);
|
|
$('#countContainer').empty()
|
|
$('.productDetailInfo__priceTotal__totalPriceNum').text(0);
|
|
}
|
|
|
|
//상품 조회 로그
|
|
function callInsertGoodsViewLog() {
|
|
const goodsNm = $('#goodsNm').val()
|
|
const goodsInnb = $('#goodsInnb').val()
|
|
const adTraceCd = fn_nvl($('#adTraceCd').val(), "");
|
|
const epCd = fn_nvl($('#epCd').val(), "");
|
|
$.ajax({
|
|
url: '<c:url value="/sopmal/log/insertGoodsInqireLog"/>',
|
|
type: 'post',
|
|
contentType: 'application/json',
|
|
data: JSON.stringify({
|
|
"goodsNm": goodsNm
|
|
,"goodsInnb" : goodsInnb
|
|
,"adTraceCd" : adTraceCd
|
|
,"epCd" : epCd
|
|
}),
|
|
success: function(data) {
|
|
}
|
|
});
|
|
}
|
|
|
|
$(window).on('load', function() {
|
|
callInsertGoodsViewLog();
|
|
});
|
|
|
|
|
|
|
|
/**
|
|
* 쿠폰 다운받기
|
|
*/
|
|
const fn_coupon_dwld_regist = function() {
|
|
let arr = [];
|
|
let sopmalArr = [];
|
|
let sndngArr = [];
|
|
|
|
// 체크된 input 찾기
|
|
let dwldCouponAt = false;
|
|
const $tbody = $('#dwldCouponDiv')
|
|
$tbody.find('input.dwldCheckBox:checked').each(function () {
|
|
let $couponItem = $(this).closest('.couponSelect__item').find('input[name="couponInnb"]');
|
|
let $couponSopmal = $(this).closest('.couponSelect__item').find('input[name="couponSopmalCd"]');
|
|
let $couponSndngInnb = $(this).closest('.couponSelect__item').find('input[name="couponSndngInnb"]');
|
|
arr.push($couponItem.val())
|
|
sopmalArr.push($couponSopmal.val())
|
|
sndngArr.push($couponSndngInnb.val())
|
|
});
|
|
|
|
console.log('arrrr', arr);
|
|
console.log('sopmalArr', sopmalArr);
|
|
console.log('sndngArr', sndngArr);
|
|
|
|
|
|
$.ajax({
|
|
type: "post",
|
|
url: '<c:url value="/sopmal/mpage/bnef/insertDwldCouponAllRegist"/>',
|
|
data: {
|
|
couponArray: arr,
|
|
couponSopmalCd : sopmalArr,
|
|
couponSndngArray : sndngArr
|
|
},
|
|
success: function (resultHtml) {
|
|
alert('<spring:message code="success.common.save"/>\n 마이페이지에서 확인가능합니다.');
|
|
var cleanUrl = window.location.href.split('#')[0];
|
|
// URL이 변경되었는지 확인한 후, 변경된 경우만 리로드
|
|
if (window.location.href !== cleanUrl) {
|
|
window.location.replace(cleanUrl);
|
|
} else {
|
|
window.location.reload();
|
|
}
|
|
}
|
|
});
|
|
|
|
}
|
|
|
|
// 버튼 구매대상자 제한 시 이동 url
|
|
function buttonRplcLink(link, target){
|
|
if(target ==='01'){ //새창 이동
|
|
window.open(link, '_blank')
|
|
}else{//새창 이동
|
|
window.location.href = link
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
/*************************************************************
|
|
로그인 화면 이동
|
|
**************************************************************/
|
|
const fn_move_goodsDtl_login = () => {
|
|
|
|
const hiddenFormLogin = document.createElement('form');
|
|
hiddenFormLogin.name = 'hiddenFormLogin';
|
|
hiddenFormLogin.id = 'hiddenFormLogin';
|
|
|
|
const currentUrlInput = document.createElement('input');
|
|
currentUrlInput.type = 'hidden';
|
|
currentUrlInput.name = 'currentUrl';
|
|
currentUrlInput.value = window.location.href; // 현재 URL 추가
|
|
hiddenFormLogin.appendChild(currentUrlInput);
|
|
|
|
hiddenFormLogin.method = 'post';
|
|
hiddenFormLogin.action = ' <c:url value="/sopmal/mbr/selectUsrLoginForm"/>';
|
|
const formData = new FormData();
|
|
document.body.appendChild(hiddenFormLogin);
|
|
|
|
closeModal('modal-error-confirm-move-login')
|
|
|
|
$(hiddenFormLogin).submit();
|
|
$(hiddenFormLogin).remove();
|
|
|
|
|
|
}
|
|
|
|
/*최대혜택가 툴팁*/
|
|
$(document).on('click', '#dcPrice',function () {
|
|
fn_select_dc_price()
|
|
})
|
|
|
|
|
|
//함께하면 좋은상품 모달 열기
|
|
const fn_open_relate_modal =() =>{
|
|
//모달 오픈시 열려있는 옵션 선택버튼 닫기
|
|
if($('.relatedProduct__optionBtn').hasClass('opened')){
|
|
$('.relatedProduct__optionBtn').removeClass('opened')
|
|
$('.relatedProduct__option').removeClass('opened')
|
|
$('.productOption').removeClass('opened')
|
|
}
|
|
openModal('relatedProductPop')
|
|
}
|
|
|
|
|
|
//함께하면 좋은 상품 - 재고옵션 다음 셀렉트 옵션 값 호출
|
|
$(document).on('change', 'select[name="selectRelateInvntryOptn"]', function () {
|
|
const id = $(this).attr('id');
|
|
let sourceId = id.slice(-1); // 아이디로 셀렉트 옵션 순서 확인
|
|
let nextId = (parseInt(sourceId)+1).toString();
|
|
const lastId = $('select[name="selectRelateInvntryOptn"]:last').attr('id')
|
|
|
|
if($(this).val() === '0'){
|
|
return false;
|
|
}
|
|
|
|
const selectOptnVal1 = fn_nvl($('#selectRelateInvntryOptn1 option:selected').text(),'').replaceAll(' ','').trim()
|
|
const selectOptnVal2 = fn_nvl($('#selectRelateInvntryOptn2 option:selected').text(),'').replaceAll(' ','').trim()
|
|
const selectOptnVal3 = fn_nvl($('#selectRelateInvntryOptn3 option:selected').text(),'').replaceAll(' ','').trim()
|
|
const selectOptnVal4 = fn_nvl($('#selectRelateInvntryOptn4 option:selected').text(),'').replaceAll(' ','').trim()
|
|
|
|
let optnVal1 = selectOptnVal1 === '선택'?'': selectOptnVal1
|
|
let optnVal2 = selectOptnVal2 === '선택'?'': selectOptnVal2
|
|
let optnVal3 = selectOptnVal3 === '선택'?'': selectOptnVal3
|
|
let optnVal4 = selectOptnVal4 === '선택'?'': selectOptnVal4
|
|
|
|
switch (sourceId) {
|
|
case '1':
|
|
optnVal2 = '';
|
|
optnVal3 = '';
|
|
optnVal4 = '';
|
|
|
|
$('select[name="selectRelateInvntryOptn"]').not(':first').each(function() {
|
|
|
|
$(this).find('option').each(function () {
|
|
// value가 빈 문자열이 아닌 경우에만 삭제
|
|
if ($(this).val() !== '') {
|
|
$(this).remove().niceSelect('update');
|
|
}
|
|
});
|
|
});
|
|
$('select[name="selectRelateInvntryOptn"]').not(':first').val('').niceSelect('update')
|
|
break;
|
|
case '2':
|
|
optnVal3 = '';
|
|
optnVal4 = '';
|
|
|
|
$('select[name="selectRelateInvntryOptn"]').not(':lt(2)').each(function() {
|
|
|
|
$(this).find('option').each(function () {
|
|
// value가 빈 문자열이 아닌 경우에만 삭제
|
|
if ($(this).val() !== '') {
|
|
$(this).remove().niceSelect('update');
|
|
}
|
|
});
|
|
});
|
|
$('select[name="selectRelateInvntryOptn"]').not(':lt(2)').val('')
|
|
$('select[name="selectRelateInvntryOptn"]').niceSelect('update')
|
|
break;
|
|
case '3':
|
|
optnVal4 = '';
|
|
$('select[name="selectRelateInvntryOptn"]').not(':lt(3)').each(function() {
|
|
|
|
$(this).find('option').each(function () {
|
|
// value가 빈 문자열이 아닌 경우에만 삭제
|
|
if ($(this).val() !== '') {
|
|
$(this).remove().niceSelect('update');
|
|
}
|
|
});
|
|
});
|
|
$('select[name="selectRelateInvntryOptn"]').not(':lt(3)').val('')
|
|
$('select[name="selectRelateInvntryOptn"]').niceSelect('update')
|
|
break;
|
|
}
|
|
|
|
const data = JSON.stringify(
|
|
{
|
|
'goodsInnb' : $(this).closest("#relateAdditionalSelect").find('input[name="relateGoodsInnb"]').val()
|
|
,'optnTy' : '02'
|
|
,'optnVal1' : optnVal1
|
|
,'optnVal2' : optnVal2
|
|
,'optnVal3' : optnVal3
|
|
,'optnVal4' : optnVal4
|
|
}
|
|
);
|
|
$.ajax({
|
|
type: 'post',
|
|
contentType : 'application/json',
|
|
url: '/sopmal/goods/selectGoodsOptnInfo',
|
|
data: data,
|
|
success: function (data) {
|
|
let str = JSON.parse(data.resBody.result);
|
|
console.log('str', str)
|
|
if (str.result === 'success') {
|
|
|
|
//판매가
|
|
const slepricDscntAmt = $('#relateSlepricDscntAmt').val()
|
|
|
|
switch (sourceId){
|
|
case '1' :
|
|
//1선택하면 서버 요청해서 2번 옵션값 받아옴
|
|
//2번에 option에 옵션값 뿌리기
|
|
const uniqueData2 = [];
|
|
const seenOptnVal2 = new Set();
|
|
str.goodsOptnList.forEach(item => {
|
|
if (!seenOptnVal2.has(item.optnVal2)){
|
|
uniqueData2.push(item);
|
|
seenOptnVal2.add(item.optnVal2);
|
|
}
|
|
});
|
|
|
|
console.log('uniqueData2', uniqueData2)
|
|
uniqueData2.forEach(function(option) {
|
|
|
|
//추가금액 표시여부
|
|
if($('#selectRelateInvntryOptn'+nextId).attr('id') === lastId){
|
|
|
|
|
|
//재고품절시 노출여부
|
|
if(option.invntrySldoutExpsrAt ==='N'){
|
|
//옵션 노출 안함
|
|
|
|
//품절표시
|
|
}else if(option.disableAt === 'Y'){
|
|
$('#selectRelateInvntryOptn'+nextId).append($('<option>', {
|
|
value: option.slepric+'|'+option.goodsOptnInnb+'|'+option.optnInfo+'|'+option.optnTy,
|
|
text: option.optnVal2 + '(+' + addComma((parseInt(option.slepric) - parseInt(slepricDscntAmt))) +')' + '(품절)',
|
|
disabled: true
|
|
}));
|
|
}else{
|
|
|
|
$('#selectRelateInvntryOptn'+nextId).append($('<option>', {
|
|
value: option.slepric+'|'+option.goodsOptnInnb+'|'+option.optnInfo+'|'+option.optnTy,
|
|
text: option.optnVal2 + '(+' + addComma((parseInt(option.slepric) - parseInt(slepricDscntAmt))) +')'
|
|
}));
|
|
}
|
|
|
|
}else{
|
|
|
|
|
|
//재고품절시 노출여부
|
|
if(option.invntrySldoutExpsrAt ==='N'){
|
|
//옵션 노출 안함
|
|
|
|
//품절표시
|
|
}else if(option.disableAt === 'Y'){
|
|
|
|
$('#selectRelateInvntryOptn'+nextId).append($('<option>', {
|
|
value: option.slepric+'|'+option.goodsOptnInnb+'|'+option.optnInfo+'|'+option.optnTy,
|
|
text: option.optnVal2 + '(품절)',
|
|
disabled: true
|
|
}));
|
|
|
|
}else{
|
|
$('#selectRelateInvntryOptn'+nextId).append($('<option>', {
|
|
value: option.slepric+'|'+option.goodsOptnInnb+'|'+option.optnInfo+'|'+option.optnTy,
|
|
text: option.optnVal2
|
|
}));
|
|
}
|
|
|
|
|
|
}
|
|
});
|
|
$('#selectRelateInvntryOptn'+nextId).niceSelect('update');
|
|
|
|
break;
|
|
case '2' :
|
|
const uniqueData3 = [];
|
|
const seenOptnVal3 = new Set();
|
|
str.goodsOptnList.forEach(item => {
|
|
if (!seenOptnVal3.has(item.optnVal3)){
|
|
uniqueData3.push(item);
|
|
seenOptnVal3.add(item.optnVal3);
|
|
}
|
|
});
|
|
|
|
console.log('uniqueData3', uniqueData3)
|
|
uniqueData3.forEach(function(option) {
|
|
|
|
if($('#selectRelateInvntryOptn'+nextId).attr('id') === lastId){
|
|
|
|
|
|
//재고품절시 노출여부
|
|
if(option.invntrySldoutExpsrAt ==='N'){
|
|
//옵션 노출 안함
|
|
|
|
//품절표시
|
|
}else if(option.disableAt === 'Y'){
|
|
$('#selectRelateInvntryOptn'+nextId).append($('<option>', {
|
|
value: option.slepric+'|'+option.goodsOptnInnb+'|'+option.optnInfo+'|'+option.optnTy,
|
|
text: option.optnVal3 + '(+' + addComma((parseInt(option.slepric) - parseInt(slepricDscntAmt))) +')'+ '(품절)',
|
|
disabled: true
|
|
}));
|
|
|
|
|
|
}else{
|
|
$('#selectRelateInvntryOptn'+nextId).append($('<option>', {
|
|
value: option.slepric+'|'+option.goodsOptnInnb+'|'+option.optnInfo+'|'+option.optnTy,
|
|
text: option.optnVal3 + '(+' + addComma((parseInt(option.slepric) - parseInt(slepricDscntAmt))) +')'
|
|
}));
|
|
|
|
}
|
|
|
|
|
|
|
|
}else{
|
|
|
|
|
|
//재고품절시 노출여부
|
|
if(option.invntrySldoutExpsrAt ==='N'){
|
|
//옵션 노출 안함
|
|
|
|
//품절표시
|
|
}else if(option.disableAt === 'Y'){
|
|
|
|
$('#selectRelateInvntryOptn'+nextId).append($('<option>', {
|
|
value: option.slepric+'|'+option.goodsOptnInnb+'|'+option.optnInfo+'|'+option.optnTy,
|
|
text: option.optnVal3 + + '(품절)',
|
|
disabled: true
|
|
}));
|
|
|
|
}else{
|
|
|
|
$('#selectRelateInvntryOptn'+nextId).append($('<option>', {
|
|
value: option.slepric+'|'+option.goodsOptnInnb+'|'+option.optnInfo+'|'+option.optnTy,
|
|
text: option.optnVal3
|
|
}));
|
|
}
|
|
|
|
|
|
}
|
|
|
|
});
|
|
|
|
$('#selectRelateInvntryOptn'+nextId).niceSelect('update');
|
|
|
|
break;
|
|
|
|
case '3' :
|
|
const uniqueData4 = [];
|
|
const seenOptnVal4 = new Set();
|
|
str.goodsOptnList.forEach(item => {
|
|
if (!seenOptnVal4.has(item.optnVal4)){
|
|
uniqueData4.push(item);
|
|
seenOptnVal4.add(item.optnVal4);
|
|
}
|
|
});
|
|
|
|
uniqueData4.forEach(function(option) {
|
|
|
|
if($('#selectRelateInvntryOptn'+nextId).attr('id') === lastId){
|
|
|
|
|
|
//재고품절시 노출여부
|
|
if(option.invntrySldoutExpsrAt ==='N'){
|
|
//옵션 노출 안함
|
|
|
|
//품절표시
|
|
}else if(option.disableAt === 'Y'){
|
|
|
|
$('#selectRelateInvntryOptn'+nextId).append($('<option>', {
|
|
value: option.slepric+'|'+option.goodsOptnInnb+'|'+option.optnInfo+'|'+option.optnTy,
|
|
text: option.optnVal4 + '(+' + addComma((parseInt(option.slepric) - parseInt(slepricDscntAmt))) +')'+ '(품절)',
|
|
disabled: true
|
|
}));
|
|
|
|
}else{
|
|
|
|
$('#selectRelateInvntryOptn'+nextId).append($('<option>', {
|
|
value: option.slepric+'|'+option.goodsOptnInnb+'|'+option.optnInfo+'|'+option.optnTy,
|
|
text: option.optnVal4 + '(+' + addComma((parseInt(option.slepric) - parseInt(slepricDscntAmt))) +')'
|
|
}));
|
|
}
|
|
|
|
|
|
|
|
}else{
|
|
|
|
//재고품절시 노출여부
|
|
if(option.invntrySldoutExpsrAt ==='N'){
|
|
//옵션 노출 안함
|
|
|
|
//품절표시
|
|
}else if(option.disableAt === 'Y'){
|
|
|
|
$('#selectRelateInvntryOptn'+nextId).append($('<option>', {
|
|
value: option.slepric+'|'+option.goodsOptnInnb+'|'+option.optnInfo+'|'+option.optnTy,
|
|
text: option.optnVal4 + '(품절)',
|
|
disabled: true
|
|
}));
|
|
|
|
}else{
|
|
$('#selectRelateInvntryOptn'+nextId).append($('<option>', {
|
|
value: option.slepric+'|'+option.goodsOptnInnb+'|'+option.optnInfo+'|'+option.optnTy,
|
|
text: option.optnVal4
|
|
}));
|
|
}
|
|
|
|
|
|
}
|
|
|
|
});
|
|
|
|
$('#selectRelateInvntryOptn'+nextId).niceSelect('update');
|
|
|
|
break;
|
|
}
|
|
|
|
//마지막 선택일 경우 셀렉트 기본값으로 되돌림
|
|
if(id === lastId){
|
|
|
|
$('select[name="selectRelateInvntryOptn"]').not(':first').each(function() {
|
|
|
|
$(this).find('option').each(function () {
|
|
// value가 빈 문자열이 아닌 경우에만 삭제
|
|
if ($(this).val() !== '') {
|
|
$(this).remove().niceSelect('update');
|
|
}
|
|
});
|
|
});
|
|
$('select[name="selectRelateInvntryOptn"]').val('').niceSelect('update')
|
|
}
|
|
}
|
|
}
|
|
});
|
|
})
|
|
|
|
</script>
|
|
<%--상품 상세 정보--%>
|
|
<c:set value="${resultMap.goodsDtl}" var="goodsDtl"/>
|
|
<%--이벤트 배너 정보--%>
|
|
<c:set value="${resultMap.evtBannerList}" var="evtBannerList"/>
|
|
|
|
<%--셀렉트박스 상품 선택시 disabled 일 경우에도 상품 비활성화 상태로 보이도록 css 재설정--%>
|
|
<style>
|
|
.selectOptionItem .select-box .nice-select .list li.disabled {
|
|
display: block;
|
|
}
|
|
</style>
|
|
|
|
<body>
|
|
<div class="screen-wrap">
|
|
<!-- 헤더 영역 -->
|
|
<header class="header header--sub">
|
|
<%@include file ="/WEB-INF/views/comm/mobile/Header.jsp" %>
|
|
</header>
|
|
<!-- 메인 컨텐츠 -->
|
|
<div class="content-wrap">
|
|
<main class="main">
|
|
<div class="sub-page">
|
|
<input type="hidden" value="${resultMap.goodsDtl.goodsInnb}" id="goodsInnb"/>
|
|
<input type="hidden" value="${resultMap.goodsDtl.ctgryNm}" id="ctgryNm"/>
|
|
<input type="hidden" value="${resultMap.goodsDtl.sopmalCd}" id="sopmalCd"/>
|
|
<input type="hidden" value="${resultMap.goodsDtl.expsrDvCd}" id="expsrDvCd"/>
|
|
<input type="hidden" value="${resultMap.goodsDtl.expsrBgnDt}" id="expsrBgnDt"/>
|
|
<input type="hidden" value="${resultMap.goodsDtl.expsrEndDt}" id="expsrEndDt"/>
|
|
<c:forEach var="cardDv" items="${resultMap.cartDvList}">
|
|
<input type="hidden" value="${cardDv.cd}" id="cartDv-${cardDv.cdNm}"/>
|
|
</c:forEach>
|
|
|
|
<input type="hidden" id="mbrId" value="${resultMap.mbrGrad.mbrId}" />
|
|
<input type="hidden" id="rltmQyDdctTme" value="${resultMap.goodsDtl.rltmQyDdctTme} ">
|
|
<input type="hidden" id="rltmDdctLimitQy" value="${resultMap.goodsDtl.rltmDdctLimitQy} ">
|
|
<input type="hidden" id="rltmDdctQy" value="${resultMap.goodsDtl.rltmDdctQy} ">
|
|
<input type="hidden" id="expsrDvAt" value="${resultMap.goodsDtl.expsrDvAt}"/>
|
|
<input type="hidden" id="dlvyGroupInnb" value="${resultMap.goodsDtl.dlvyGroupInnb}"/>
|
|
<input type="hidden" id="wslistInnb" value="${resultMap.goodsDtl.wslistInnb}"/>
|
|
<input type="hidden" id="evtTmeExpsrAt" value="${resultMap.timeEvt.evtTmeExpsrAt}"/>
|
|
<input type="hidden" id="evtEndDt" value="${resultMap.timeEvt.evtEndDt}"/>
|
|
<input type="hidden" id="adTraceCd" value="${resultMap.adTraceCd}"/>
|
|
<input type="hidden" id="epCd" value="${resultMap.epCd}"/>
|
|
<input type="hidden" id="slepricDscntAmt" value="${resultMap.goodsDtl.slepric}"/>
|
|
<input type="hidden" id="goodsUseAt"
|
|
<c:choose>
|
|
<c:when test="${not empty resultMap.goodsDtl}">
|
|
value="Y"
|
|
</c:when>
|
|
<c:otherwise>
|
|
value="N"
|
|
</c:otherwise>
|
|
</c:choose> /><%--존재하지 않는 상품 확인--%>
|
|
|
|
<%--리뷰 관련 상품 설정--%>
|
|
<input type="hidden" id="rvwWritngPosblAt" value="${resultMap.goodsDtl.rvwWritngPosblAt}"><%--리뷰사용여부--%>
|
|
<input type="hidden" id="MtRvwWritngPosblAt" value="${resultMap.goodsDtl.mtRvwWritngPosblAt}"><%--한달리뷰사용여부--%>
|
|
<input type="hidden" id="qnaPageUnit" value="${resultMap.bbscttInfo.bbsInfo.goodsQnaPageUnit}"><%--qna pageUnit--%>
|
|
<input type="hidden" id="rvwPageUnit" value="${resultMap.bbscttInfo.bbsInfo.rvwPageUnit}"><%--리뷰 pageUnit--%>
|
|
<div class="productDetail">
|
|
<div class="sub-box">
|
|
<c:if test="${not empty resultMap.goodsDtl.img}">
|
|
<div class="swiper productDetailImages product-unit-image">
|
|
<c:if test="${(resultMap.goodsDtl.evtTmeExpsrAt eq 'Y' and resultMap.goodsDtl.remainTime ne 'N')
|
|
or (resultMap.goodsDtl.rltmQyBannerExpsrAt eq 'Y' and resultMap.goodsDtl.remainQy > 0) }">
|
|
<div class="time-sale__top">
|
|
<c:if test="${resultMap.goodsDtl.evtTmeExpsrAt eq 'Y' and resultMap.goodsDtl.remainTime ne 'N'}">
|
|
<span class="time" id="remainTime"><c:out value="${resultMap.goodsDtl.remainTime}"/> </span>
|
|
</c:if>
|
|
<c:if test="${resultMap.timeEvt.rltmQyBannerExpsrAt eq 'Y' and resultMap.timeEvt.remainQy > 0 }">
|
|
<span class="left">남은수량 <fmt:formatNumber value="${resultMap.timeEvt.remainQy}"/> 개</span>
|
|
</c:if>
|
|
</div>
|
|
</c:if>
|
|
<c:if test="${resultMap.goodsDtl.goodsSttusCd eq '02'}">
|
|
<div class="sold-out">
|
|
<span>입고 대기중</span>
|
|
</div>
|
|
</c:if>
|
|
<c:if test="${resultMap.goodsDtl.goodsSttusCd eq '03'}">
|
|
<div class="sold-out">
|
|
<span>${resultMap.goodsDtl.goodsSttusNm}</span>
|
|
</div>
|
|
</c:if>
|
|
<div class="swiper-wrapper">
|
|
<c:forTokens items="${resultMap.goodsDtl.img}" var="imgList" delims="|" varStatus="mainImgStatus">
|
|
<div class="swiper-slide">
|
|
<img src="<c:out value="${ cdnurl }"/>${imgList}" alt="상품이미지" onerror = "this.src='/pc/images/image_placeholder.png'">
|
|
</div>
|
|
</c:forTokens>
|
|
</div>
|
|
<div class="swiper-pagination"></div>
|
|
</div>
|
|
|
|
</c:if>
|
|
<div class="productDetailInfo">
|
|
<div class="productDetailInfo__top">
|
|
<c:if test="${not empty resultMap.goodsDtl.goodsIconCd}">
|
|
<div class="product-badge-container">
|
|
<c:forTokens var="iconNm" items="${resultMap.goodsDtl.goodsIconCd}" delims=",">
|
|
<c:set var="badgeMatched" value="false"/>
|
|
<c:forEach items="${resultMap.goodsBadgeList}" var="badge">
|
|
<c:if test="${badge.cd eq iconNm}">
|
|
<span class="product-badge product-badge--lg ${fn:toLowerCase(iconNm)}" data-badge-cd="${iconNm}" style="color: ${badge.fontColor} !important; background-color: ${badge.bgColor} !important; border-color: ${badge.borderColor} !important;">${badge.cdNm}</span>
|
|
<c:set var="badgeMatched" value="true"/>
|
|
</c:if>
|
|
</c:forEach>
|
|
<c:if test="${not badgeMatched}">
|
|
<span class="product-badge product-badge--lg ${fn:toLowerCase(iconNm)}" data-badge-cd="${iconNm}">${fn:toUpperCase(fn:replace(iconNm, '-', ' '))}</span>
|
|
</c:if>
|
|
</c:forTokens>
|
|
</div>
|
|
</c:if>
|
|
<div class="productDetailInfo__titleWrap"><span
|
|
class="productDetailInfo__subTitle"> <c:out value="${resultMap.goodsDtl.srtDc}" default=""/></span>
|
|
<span class="productDetailInfo__title">
|
|
<c:if test="${not empty resultMap.goodsDtl.expsrSetupFwords and resultMap.goodsDtl.expsrDvCd eq '03'}">
|
|
[<c:out value="${resultMap.goodsDtl.expsrSetupFwords}"/>]
|
|
</c:if>
|
|
<c:out value="${resultMap.goodsDtl.goodsNm}"/>
|
|
</span>
|
|
<input type="hidden" id="goodsNm" value="${resultMap.goodsDtl.goodsNm}"/>
|
|
<div class="productDetailInfo__miscControls">
|
|
<button type="button" id="productMyWish" class="productDetailInfo__miscControls__btn">
|
|
<i class="icon icon_wish <c:if test="${resultMap.goodsDtl.isWish eq '1'}">active</c:if>"></i>
|
|
<span class="visually-hidden">위시리스트 추가</span>
|
|
</button>
|
|
<%-- <button type="button" class="productDetailInfo__miscControls__btn"--%>
|
|
<%-- data-micromodal-trigger="snsSharePop">--%>
|
|
<%-- <i class="icon icon_share"></i>--%>
|
|
<%-- <span class="visually-hidden">공유하기</span>--%>
|
|
<%-- </button>--%>
|
|
</div>
|
|
</div>
|
|
<div class="productDetailInfo__price">
|
|
<c:choose>
|
|
<c:when test="${resultMap.goodsDtl.pricRplcWordsUseAt ne 'Y'}">
|
|
<div class="productDetailInfo__price__price">
|
|
<span class="productDetailInfo__price__original <c:if test="${resultMap.goodsDtl.slePercent eq 0}">visually-hidden</c:if>">
|
|
<span class="comma"><fmt:formatNumber value="${resultMap.goodsDtl.cnsmrpric}"/></span><span class="priceUnit">${curUnit}</span>
|
|
<input type="hidden" id="cnsmrpric" value="<c:out value="${resultMap.goodsDtl.cnsmrpric}"/> "/>
|
|
</span>
|
|
<span class="productDetailInfo__price__current" id="_salesPrice">
|
|
<span class="comma"><fmt:formatNumber value="${resultMap.goodsDtl.slepric}"/></span><span class="priceUnit">${curUnit}</span>
|
|
</span>
|
|
</div>
|
|
<div class="productDetailInfo__price__sale <c:if test="${resultMap.goodsDtl.slePercent eq 0}">visually-hidden</c:if>">
|
|
<span class="percent">
|
|
<c:out value="${resultMap.goodsDtl.slePercent}"/><span class="priceUnit">%</span>
|
|
</span>
|
|
</div>
|
|
</c:when>
|
|
<c:otherwise>
|
|
<div class="productDetailInfo__price__sale">
|
|
<span class="productDetailInfo__price__current">
|
|
<a href="${resultMap.goodsDtl.mblPricRplcLink}" <c:if test="${resultMap.goodsDtl.pricRplcLinkBrwsrDvCd eq'01'}"> target="_blank" </c:if> >
|
|
<span class="percent" style=" color: #e34747; font-size: x-large; font-weight: bold"> <c:out value="${resultMap.goodsDtl.pricRplcWords}"/></span>
|
|
</a>
|
|
</span>
|
|
</div>
|
|
</c:otherwise>
|
|
</c:choose>
|
|
</div>
|
|
</div>
|
|
<div class="product-unit-rating">
|
|
<i class="icon icon_rating-star"></i>
|
|
<span class="product-unit-rating__score"> <fmt:formatNumber value="${resultMap.bbscttInfo.rvwInfo.cntBbsctt}" pattern="#,###"/> </span>
|
|
<span class="product-unit-rating__count">(<c:out value="${resultMap.bbscttInfo.rvwInfo.avgEvlScore}" default="0.0"/>)</span>
|
|
</div>
|
|
<div class="productDetailInfo__body">
|
|
<c:if test="${resultMap.goodsDtl.goodsExpsrTyCd eq '02'}">
|
|
<div class="productDetailInfo__reservedDelivery">
|
|
<dl>
|
|
<dt>예약배송</dt>
|
|
<dd>
|
|
<p class="productDetailInfo__reservedDelivery__info">
|
|
${resultMap.goodsDtl.resveGoodsDlvyDe} 발송예정
|
|
<span class="misc"><c:out value="${resultMap.goodsDtl.resveGoodsGuidanceWordsCn}"/> </span>
|
|
</p>
|
|
</dd>
|
|
</dl>
|
|
</div>
|
|
</c:if>
|
|
<c:if test="${resultMap.goodsDtl.pricRplcWordsUseAt ne 'Y'}">
|
|
<div class="productDetailInfo__memberBenefits">
|
|
<p class="productDetailInfo__memberBenefits__title">
|
|
<span class="productDetailInfo__memberBenefits__couponTitle"></span>
|
|
</p>
|
|
<div class="productCoupon">
|
|
<div class="productCoupon__left" <c:if test="${empty resultMap.couponInfo}"> style="border-right: 1px solid #dee2e6;" </c:if> >
|
|
<div class="productDetailInfo__price__price">
|
|
<div class="productDetailInfo__price__bottom" style="display: flex; flex-direction: column; justify-content: center;">
|
|
<div class="productDetailInfo__price__current coupon" style="font-size: large; color: #e34747;">
|
|
<span class="productCoupon__text">최대혜택가</span>
|
|
<span class="comma"><fmt:formatNumber value="${resultMap.goodsDtl.dcSlepric}"/></span><span
|
|
class="priceUnit"></span>${curUnit}
|
|
<span class="percent">${resultMap.goodsDtl.dcPercent}%</span>
|
|
<button id="dcPrice" class="infoBtn">
|
|
<i class="icon icon_question"></i>
|
|
<span class="visually-hidden">정보</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<c:if test="${not empty resultMap.couponInfo}">
|
|
<button type="button" class="productCoupon__right" id="couponList">
|
|
<i class="icon icon_download"></i>
|
|
<span class="productCoupon__download">쿠폰받기</span>
|
|
</button>
|
|
</c:if>
|
|
</div>
|
|
</div>
|
|
</c:if>
|
|
<div class="productDetailInfo__info">
|
|
<c:if test="${not empty resultMap.goodsDtl.goodsAdd}">
|
|
<c:forTokens var="goodsAddInfo" varStatus="status"
|
|
items="${resultMap.goodsDtl.goodsAdd}" delims="|">
|
|
<dl>
|
|
<dt>${fn:split(goodsAddInfo,'^^')[0]}</dt>
|
|
<dd>${fn:split(goodsAddInfo,'^^')[1]}</dd>
|
|
</dl>
|
|
</c:forTokens>
|
|
</c:if>
|
|
<c:if test="${not empty resultMap.goodsDtl}">
|
|
<dl>
|
|
<dt>배송</dt>
|
|
<dd>
|
|
<span>택배(주문시 결제)
|
|
<c:if test="${ resultMap.goodsDtl.amtCndUseAt eq 'N'}">
|
|
<button type="button" class="infoBtn" onclick="fn_select_dlvy_info('deliveryFeePop')">
|
|
<i class="icon icon_question"></i>
|
|
<span class="visually-hidden">정보</span>
|
|
</button>
|
|
</c:if>
|
|
</span><br/>
|
|
<c:if test="${resultMap.goodsDtl.amtCndUseAt eq 'Y'}">
|
|
(<span class="comma"><c:out
|
|
value="${resultMap.goodsDtl.amtCndAditAmt}" default="0"/></span>
|
|
<span class="priceUnit">${curUnit}</span> 이상 무료 배송)
|
|
</c:if>
|
|
<c:if test="${resultMap.goodsDtl.dlvyGroupDvCd eq '03'}">
|
|
(<span class="comma">유료배송 : <c:out
|
|
value="${resultMap.goodsDtl.dftDlvyAmt}" default="0"/></span>
|
|
<span class="priceUnit">${curUnit}</span>)
|
|
</c:if>
|
|
<c:if test="${resultMap.goodsDtl.dlvyGroupDvCd eq '02'}">
|
|
(<span>무료배송</span>)
|
|
</c:if>
|
|
<c:if test="${ resultMap.goodsDtl.amtCndUseAt eq 'Y'}">
|
|
<button type="button" class="infoBtn" onclick="fn_select_dlvy_info('deliveryFeePop')">
|
|
<i class="icon icon_question"></i>
|
|
<span class="visually-hidden">정보</span>
|
|
</button>
|
|
</c:if>
|
|
<br>
|
|
<span class="misc"><c:out
|
|
value="${resultMap.goodsDtl.dlvyGuidanceWordsCn}"
|
|
default=""/> </span>
|
|
</dd>
|
|
</dl>
|
|
</c:if>
|
|
<c:if test="${resultMap.goodsDtl.buttonRplcWordsUseAt ne 'Y'}"> <%--구매대상자 버튼 제한 걸릴경우 미노출--%>
|
|
<c:set var="mlgTotAmt" value="${(resultMap.goodsDtl.mlgAccmlAmt + resultMap.goodsDtl.gradMlgAccmlAmt + resultMap.goodsDtl.evtMlgAccmlAmt) }"/>
|
|
<c:if test="${not empty resultMap.goodsOptList}">
|
|
<dl <c:if test="${mlgTotAmt <= 0}">style="display: none;"</c:if>>
|
|
<dt>구매시 <br/> 적립혜택</dt>
|
|
<dd style="margin-top: 9px;">
|
|
<em><fmt:formatNumber value="${mlgTotAmt}"/>점</em>
|
|
<c:if test = "${resultMap.goodsDtl.rvwWritngPosblAt eq 'Y' || resultMap.goodsDtl.rvwWritngPosblAt eq 'N'}">
|
|
· 리뷰작성시 적립
|
|
<button class="infoBtn" onclick="fn_select_rvw_bnef_info()">
|
|
<i class="icon icon_question"></i>
|
|
<span class="visually-hidden">정보</span>
|
|
</button>
|
|
</c:if>
|
|
</dd>
|
|
</dl>
|
|
</c:if>
|
|
</c:if>
|
|
</div>
|
|
<%-- <a href="javascript:void(0);" class="productDetailInfo__nonMember">--%>
|
|
<%-- <p>--%>
|
|
<%-- 로그인 시 <em>10만원 쿠폰팩</em> 자동지급--%>
|
|
<%-- </p>--%>
|
|
<%-- </a>--%>
|
|
<%-- <div class="productDetailInfo__memberBenefits">--%>
|
|
<%-- <p class="productDetailInfo__memberBenefits__title"><em>뉴트리코어</em> 회원혜택</p>--%>
|
|
<%-- <div class="productDetailInfo__memberBenefits__inner">--%>
|
|
<%-- <dl>--%>
|
|
<%-- <dt>쿠폰팩</dt>--%>
|
|
<%-- <dd>매월 회원전용 12만원 쿠폰팩 지급</dd>--%>
|
|
<%-- </dl>--%>
|
|
<%-- <dl>--%>
|
|
<%-- <dt>배송안내</dt>--%>
|
|
<%-- <dd>뉴트리코어 회원 배송비 0원</dd>--%>
|
|
<%-- </dl>--%>
|
|
<%-- <dl>--%>
|
|
<%-- <dt>할부혜택</dt>--%>
|
|
<%-- <dd>최대 7개월 무이자</dd>--%>
|
|
<%-- </dl>--%>
|
|
<%-- </div>--%>
|
|
<%-- </div>--%>
|
|
<c:if test="${resultMap.goodsDtl.buttonRplcWordsUseAt ne 'Y'}"> <%--구매대상자 버튼 제한 걸릴경우 미노출--%>
|
|
<button type="button" class="btn full md gray" <c:if test="${resultMap.goodsDtl.goodsSttusCd ne '01'}"> disabled="disabled"</c:if>
|
|
onclick="openModal('product-option-sheet')">옵션선택
|
|
</button>
|
|
</c:if>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="productDetailcontent">
|
|
<ul class="productDetailTab">
|
|
<li class="productDetailTab__item active">
|
|
<button>상세정보</button>
|
|
</li>
|
|
<c:if test = "${resultMap.goodsDtl.rvwWritngPosblAt eq 'Y' || resultMap.goodsDtl.mtRvwWritngPosblAt eq 'Y'}">
|
|
<li class="productDetailTab__item">
|
|
<button id="productReviewA">
|
|
<c:out value="${resultMap.bbscttInfo.bbsInfo.rvwBbsNm}"/>
|
|
</button>
|
|
<span class="productDetailTab__num"><fmt:formatNumber value="${resultMap.bbscttInfo.rvwInfo.cntBbsctt}" pattern="#,###"/></span>
|
|
</li>
|
|
</c:if>
|
|
<li class="productDetailTab__item">
|
|
<button id="productQnA"><c:out value="${resultMap.bbscttInfo.bbsInfo.goodsQnaBbsNm}"/></button>
|
|
<span class="productDetailTab__num"><span id="goodsQnaCnt"><fmt:formatNumber value="${resultMap.bbscttInfo.qnaCnt}" pattern="#,###"/></span></span>
|
|
</li>
|
|
<li class="productDetailTab__item">
|
|
<button id="productReTurnA">배송/반품</button>
|
|
</li>
|
|
</ul>
|
|
<div class="productDetailTab__content active">
|
|
<div class="sub-box">
|
|
<div id="productInfo" class="productDetailcontent__item">
|
|
<div class="productDetailcontent__imageDetails">
|
|
<c:if test="${not empty evtBannerList}">
|
|
<c:forEach var="evtBannerList" items="${evtBannerList}">
|
|
<c:if test = "${not empty evtBannerList.filCours}">
|
|
<div>
|
|
<a <c:if test = "${not empty evtBannerList.bbscttInnb}">href="/sopmal/csc/selectBbscttAuth?bbsId='<c:out value="${evtBannerList.bbsId}"/>'&bbscttInnb='<c:out value="${evtBannerList.bbscttInnb}"/>'"</c:if>>
|
|
<img src="<c:out value = "${cdnurl}${evtBannerList.filCours}/${evtBannerList.sysFilNm}"/>" alt="<c:out value="${evtBannerList.evtnm}"/>">
|
|
</a>
|
|
</div><br>
|
|
</c:if>
|
|
</c:forEach>
|
|
</c:if>
|
|
<c:forEach var="goodsBannerUp" items="${resultMap.goodsBannerList}">
|
|
<c:if test="${goodsBannerUp.expsrlcDv eq '01'}">
|
|
<div class="bannerUp" style="margin-bottom: 10px;">
|
|
<a <c:if test="${not empty goodsBannerUp.bannerUrl}">href="<c:out value="${goodsBannerUp.bannerUrl}"/>"</c:if>>
|
|
<img src="${cdnurl}${goodsBannerUp.filCours}/${goodsBannerUp.sysFilNm}" alt="상품배너 상단" onerror = "this.src='/pc/images/image_placeholder.png'"/>
|
|
</a>
|
|
</div>
|
|
</c:if>
|
|
</c:forEach>
|
|
<div class="ck-content">
|
|
<c:out value="${goodsDtl.goodsDc}" escapeXml="false"/>
|
|
</div>
|
|
<c:forEach var="goodsBannerDown" items="${resultMap.goodsBannerList}">
|
|
<c:if test="${goodsBannerDown.expsrlcDv eq '02'}">
|
|
<div class="bannerDown" style="margin-bottom: 10px;">
|
|
<a <c:if test="${not empty goodsBannerDown.bannerUrl}">href="<c:out value="${goodsBannerDown.bannerUrl}"/>"</c:if>>
|
|
<img src="${cdnurl}${goodsBannerDown.filCours}/${goodsBannerDown.sysFilNm}"
|
|
alt="상품배너 상단"
|
|
onerror="this.src='/pc/images/image_placeholder.png'"/>
|
|
</a>
|
|
</div>
|
|
</c:if>
|
|
</c:forEach>
|
|
</div>
|
|
<div class="productDetailcontent__moreWrap">
|
|
<button class="btn theme outline lg productDetailcontent__moreBtn">상세설명
|
|
더보기
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<c:if test = "${resultMap.goodsDtl.rvwWritngPosblAt eq 'Y' || resultMap.goodsDtl.mtRvwWritngPosblAt eq 'Y'}">
|
|
<div class="productDetailTab__content" id="productReview">
|
|
<div class="sub-box" style="height:500px;"></div><%--탭 클릭시 높이 유지--%>
|
|
</div>
|
|
</c:if>
|
|
<div class="productDetailTab__content" id="productQnaDv">
|
|
<div class="sub-box" style="height:500px;"></div><%--탭 클릭시 높이 유지--%>
|
|
</div>
|
|
<div class="productDetailTab__content" id="productReTurn">
|
|
<div class="sub-box" style="height:500px;"></div><%--탭 클릭시 높이 유지--%>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bottomFixedControls">
|
|
<div class="bottomFixedControls__inner">
|
|
<c:choose>
|
|
<c:when test="${resultMap.goodsDtl.buttonRplcWordsUseAt ne 'Y'}"> <%--구매대상자 버튼 제한 걸릴경우 미노출--%>
|
|
<button class="btn outline theme" <c:if test="${resultMap.goodsDtl.goodsSttusCd ne '01'}"> disabled="disabled"</c:if>
|
|
onclick="openModal('product-option-sheet')">장바구니
|
|
</button>
|
|
<button class="btn theme" <c:if test="${resultMap.goodsDtl.goodsSttusCd ne '01'}"> disabled="disabled"</c:if> onclick="openModal('product-option-sheet')">구매하기</button>
|
|
</div>
|
|
</c:when>
|
|
<c:otherwise>
|
|
<button class="btn theme large" onclick="buttonRplcLink('${resultMap.goodsDtl.pcButtonRplcLink}', '${resultMap.goodsDtl.buttonRplcLinkBrwsrDvCd}' );">
|
|
<c:out value="${resultMap.goodsDtl.buttonRplcWords}"/>
|
|
</button>
|
|
</c:otherwise>
|
|
</c:choose>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
<%--********************************************************************************************************************
|
|
팝업 모음
|
|
********************************************************************************************************************--%>
|
|
<%--*****************************1. 상품관련******************************--%>
|
|
<!-- 상품옵션 선택 -->
|
|
<div class="microModal microBottomSheet" id="product-option-sheet" aria-hidden="true">
|
|
<div class="microModal__overlay" tabindex="-1">
|
|
<div class="microModal__container" role="dialog" aria-modal="true">
|
|
<div class="microModal__body">
|
|
<div class="microModal__top">
|
|
<button type="button" class="microModal__close" aria-label="창 닫기" onclick="closeModal('product-option-sheet')"></button>
|
|
</div>
|
|
<div class="microModal__content">
|
|
<c:if test="${resultMap.goodsDtl.goodsSttusCd eq '01'}">
|
|
<input type="hidden" id="addCartGoodsInnb" value="${resultMap.goodsDtl.goodsInnb}"/>
|
|
<input type="hidden" id="sopmalCd" value="${resultMap.goodsDtl.sopmalCd}"/>
|
|
<input type="hidden" id="addCartGoodsNm" value="${resultMap.goodsDtl.goodsNm}"/>
|
|
<c:forEach var="cardDv" items="${resultMap.cartDvList}">
|
|
<input type="hidden" value="${cardDv.cd}" id="cartDv-${cardDv.cdNm}"/>
|
|
</c:forEach>
|
|
<c:choose>
|
|
<c:when test="${not empty resultMap.goodsOptList}">
|
|
<div class="productOption">
|
|
<c:if test="${not empty resultMap.goodsOptList.normalOptnList}">
|
|
<p class="productOption__title">옵션 선택</p>
|
|
<div class="product-option">
|
|
<c:forEach var="goodsOpt01" items="${resultMap.goodsOptList.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="radio" id="r-${goodsOpt01.optnOrdr}" name="r-group01" <c:if test="${goodsOpt01.disableAt eq 'Y'}"> disabled</c:if> >
|
|
<label for="r-${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}"/>
|
|
<input type="hidden" id="goodsSttusCd" value="<c:out value="${resultMap.goodsDtl.goodsSttusCd}"/>">
|
|
|
|
<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}"/>${curUnit}</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 resultMap.goodsOptList.invntryOptnList}">
|
|
<p class="productOption__title">옵션 선택</p>
|
|
<div class="selectOptionItem" id="additionalSelect">
|
|
<c:if test="${not empty resultMap.goodsOptList.invntryOptnList[0].optnNm1}">
|
|
<div class="select-box">
|
|
<select class="full" title="해당 셀렉트에 대한 설명" id="selectInvntryOptn1" name="selectInvntryOptn">
|
|
<option value="" disabled selected>선택</option>
|
|
<c:forEach var="goodsOpt02" items="${resultMap.goodsOptList.invntryOptnList}" varStatus="optList02">
|
|
<c:if test="${goodsOpt02.optnExpsrAt eq 'Y'}">
|
|
<c:if test="${goodsOpt02.invntrySldoutExpsrAt eq 'Y'}">
|
|
<c:if test="${goodsOpt02.optnVal1 ne resultMap.goodsOptList.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 resultMap.goodsOptList.invntryOptnList[0].optnNm2}">
|
|
<div class="select-box">
|
|
<select class="full" title="해당 셀렉트에 대한 설명" id="selectInvntryOptn2" name="selectInvntryOptn">
|
|
<option value="" disabled selected>선택</option>
|
|
</select>
|
|
</div>
|
|
</c:if>
|
|
<c:if test="${not empty resultMap.goodsOptList.invntryOptnList[0].optnNm3}">
|
|
<div class="select-box">
|
|
<select class="full" title="해당 셀렉트에 대한 설명" id="selectInvntryOptn3" name="selectInvntryOptn">
|
|
<option value="" disabled selected>선택</option>
|
|
</select>
|
|
</div>
|
|
</c:if>
|
|
<c:if test="${not empty resultMap.goodsOptList.invntryOptnList[0].optnNm4}">
|
|
<div class="select-box">
|
|
<select class="full" title="해당 셀렉트에 대한 설명" id="selectInvntryOptn4" name="selectInvntryOptn">
|
|
<option value="" disabled selected>선택</option>
|
|
</select>
|
|
</div>
|
|
</c:if>
|
|
</div>
|
|
</c:if>
|
|
<c:if test="${not empty resultMap.goodsOptList.addedOptnList}">
|
|
<p class="productOption__title">추가구성</p>
|
|
<div class="selectOptionItem" id="moreItemsSelect">
|
|
<c:forEach var="goodsOpt03" items="${resultMap.goodsOptList.addedOptnList}" varStatus="optList03">
|
|
<c:if test="${not empty goodsOpt03.optnNm1}">
|
|
<c:if test="${resultMap.goodsOptList.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="해당 셀렉트에 대한 설명">
|
|
<option value="" disabled selected>${goodsOpt03.optnNm1} 선택</option>
|
|
<c:forEach var="goodsOptVal03" items="${resultMap.goodsOptList.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="countContainer">
|
|
</div>
|
|
<c:if test="${resultMap.goodsDtl.pricRplcWordsUseAt ne 'Y' or resultMap.goodsDtl.buttonRplcWordsUseAt ne 'Y'}"> <%--구매대상자 제한 걸릴경우 미노출--%>
|
|
<c:if test="${not empty resultMap.GoodsRelateInfo}">
|
|
<div class="relatedProduct">
|
|
<button class="relatedProduct__btn" onclick="fn_open_relate_modal()">
|
|
함께하면 좋은 상품
|
|
</button>
|
|
</div>
|
|
</c:if>
|
|
</c:if>
|
|
</div>
|
|
</c:when>
|
|
</c:choose>
|
|
|
|
<div class="productOption__bottom">
|
|
<div class="product-total__container">
|
|
<span class="product-total__text">총 상품금액</span>
|
|
<span class="product-total__price">
|
|
<span class="productDetailInfo__priceTotal__totalPriceNum">0</span><span
|
|
class="won">${curUnit}</span></span>
|
|
</div>
|
|
<c:choose>
|
|
<c:when test="${resultMap.goodsDtl.buttonRplcWordsUseAt ne 'Y'}">
|
|
<div class="product-btn-container">
|
|
<button type="button" class="btn theme outline addCart mobonCart">장바구니</button>
|
|
<button type="button" class="btn theme purchsOrdr">구매하기</button>
|
|
</div>
|
|
</c:when>
|
|
<c:otherwise>
|
|
<div class="product-btn-container">
|
|
<a href="${resultMap.goodsDtl.pcButtonRplcLink}"
|
|
<c:if test="${resultMap.goodsDtl.buttonRplcLinkBrwsrDvCd eq '01'}"> target="_blank" </c:if> >
|
|
<span> <c:out value="${resultMap.goodsDtl.buttonRplcWords}"/> </span>
|
|
</a>
|
|
</div>
|
|
</c:otherwise>
|
|
</c:choose>
|
|
|
|
<!-- 변경의 경우 -->
|
|
<!-- <div class="product-btn-container">
|
|
<button class="btn theme">변경하기</button>
|
|
</div> -->
|
|
</div>
|
|
</c:if>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- SNS 공유하기 -->
|
|
<div class="microModal microAlert" id="snsSharePop" aria-hidden="true">
|
|
<div class="microModal__overlay" tabindex="-1">
|
|
<div class="microModal__container" role="dialog" aria-modal="true">
|
|
<div class="microModal__body">
|
|
<div class="microModal__top">
|
|
<h2 class="microModal__title">
|
|
공유하기
|
|
</h2>
|
|
<button class="microModal__close" aria-label="창 닫기" data-micromodal-close></button>
|
|
</div>
|
|
<div class="microModal__content">
|
|
<div class="snsShare">
|
|
<a href="#" class="snsShare__item" onclick="fn_sns_share('kakao')">
|
|
<i class="icon icon_sns-kakao"></i>
|
|
<span>카카오톡</span>
|
|
</a>
|
|
<a href="#" class="snsShare__item" onclick="fn_sns_share('naverBand')">
|
|
<i class="icon icon_sns-band"></i>
|
|
<span>네이버밴드</span>
|
|
</a>
|
|
<a href="#" class="snsShare__item" onclick="fn_sns_share('instagram')">
|
|
<i class="icon icon_sns-instagram"></i>
|
|
<span>인스타그램</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 배송비 안내 -->
|
|
<div class="microModal microBottomSheet" id="deliveryFeePop" aria-hidden="true">
|
|
<div class="microModal__overlay" tabindex="-1">
|
|
<div class="microModal__container" role="dialog" aria-modal="true">
|
|
<div class="microModal__body">
|
|
<div class="microModal__top">
|
|
<button class="microModal__close" aria-label="창 닫기" onclick="closeModal('deliveryFeePop')"></button>
|
|
</div>
|
|
<div class="microModal__content">
|
|
<h5 class="modalInfo__title">배송비 안내</h5>
|
|
<div class="deliveryFeeInfo">
|
|
<div class="popModalContent__deliveryFeeInfo"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- 함께하면 좋은 상품 -->
|
|
<div class="microModal microFullScreen" id="relatedProductPop" aria-hidden="true" role="dialog">
|
|
<div class="microModal__overlay" tabindex="-1">
|
|
<div class="microModal__container" role="dialog" aria-modal="true">
|
|
<div class="microModal__body">
|
|
<div class="microModal__top">
|
|
<h2 class="microModal__title">
|
|
함께하면 좋은 상품
|
|
</h2>
|
|
<button type="button" class="microModal__close" aria-label="창 닫기" onclick="closeModal('relatedProductPop')"></button>
|
|
</div>
|
|
<div class="microModal__content">
|
|
<div class="fullscreenBg">
|
|
<div class="relatedProduct__pop">
|
|
<c:forEach var="relateInfo" items="${resultMap.GoodsRelateInfo}" varStatus="relateStatus">
|
|
<c:if test="${relateInfo.expsrDvCd eq '01' and relateInfo.goodsSttusCd eq '01' }">
|
|
<div class="sub-box">
|
|
<div class="relatedProduct__inner">
|
|
<div class="product-list-type-1col">
|
|
<div class="product-list-type-1col__list">
|
|
<div class="relatedProduct__item">
|
|
<div class="product-unit">
|
|
<div class="product-unit-image">
|
|
<i class="icon icon_product-image-badge01"></i>
|
|
<a href="javascript:void(0);" onclick="fn_move_goods_dtl(${relateInfo.goodsInnb})">
|
|
<img src="<c:out value="${cdnurl}${relateInfo.goodsImgCours}"/>" onerror = "this.src='/pc/images/image_placeholder.png'" alt="상품 이미지" loading="lazy">
|
|
</a>
|
|
</div>
|
|
<div class="product-unit-info">
|
|
<div class="product-unit-info__inner">
|
|
<div class="product-unit-title">
|
|
<a href="javascript:void(0);" onclick="fn_move_goods_dtl(${relateInfo.goodsInnb})">${relateInfo.goodsNm}</a>
|
|
</div>
|
|
<div class="product-unit-price">
|
|
<div class="product-unit-price__price">
|
|
<span class="product-unit-price__original">
|
|
<span class="comma">
|
|
<c:out value="${relateInfo.cnsmrpric}"/> </span>
|
|
<span class="priceUnit">${curUnit}</span></span>
|
|
<span class="product-unit-price__current">
|
|
<span class="comma"><fmt:formatNumber value="${relateInfo.slepric}"/> </span>
|
|
<span class="priceUnit">${curUnit}</span></span>
|
|
</div>
|
|
<div class="product-unit-price__sale">
|
|
<span class="percent">
|
|
<c:out value="${relateInfo.slePercent}"/>
|
|
%</span>
|
|
</div>
|
|
</div>
|
|
<span class="product-unit-price__monthly-payment">${relateInfo.reprsntDc}</span>
|
|
</div>
|
|
<div class="product-unit-rating">
|
|
<i class="icon icon_rating-star"></i>
|
|
<span class="product-unit-rating__score">
|
|
<c:out value="${relateInfo.avgEvlScore}" default="0.0"/>
|
|
</span>
|
|
<span class="product-unit-rating__count">
|
|
(<c:out value="${relateInfo.cntEvlScor}" default="0"/>)
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<button type="button" class="relatedProduct__optionBtn btn full md outline" onclick="fn_relate_open_modal('relatedProduct__option${relateStatus.index}','relate-product-option-sheet',${relateInfo.goodsInnb})">
|
|
옵션 선택
|
|
</button>
|
|
<div class="relatedProduct__option" id="relatedProduct__option${relateStatus.index}">
|
|
</div>
|
|
<input type="hidden" value="<c:out value="${relateInfo.goodsInnb}"/>" id="relateGoodsInnb"/>
|
|
<input type="hidden" value="<c:out value="${relateInfo.goodsNm}"/>" id="relateGoodsNm"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</c:if>
|
|
</c:forEach>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bottomFixedControls">
|
|
<div class="bottomFixedControls__inner">
|
|
<button type="button" class="btn theme" id="addGoodsDtl">함께 구매하기</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<%--구매정보 등록 실패 모달 --%>
|
|
<div class="microModal microAlert" id="modal-error-goods-purchInfoReg" aria-hidden="true">
|
|
<div class="microModal__overlay" tabindex="-1">
|
|
<div class="microModal__container" role="dialog" aria-modal="true">
|
|
<div class="microModal__body">
|
|
<div class="microModal__top">
|
|
<h2 class="microModal__title" id="modal-error-content-purchInfoReg">
|
|
구매정보 <spring:message code="fail.common.insert"/>
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
<div class="microModal__btnContainer">
|
|
<button type = "button" class="microModal__btn" id="modal-error-confirm-purchInfoReg" onclick="closeModal('modal-error-goods-purchInfoReg')">
|
|
<spring:message code="button.close"/>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<%--미노출 상품 모달--%>
|
|
<div class="microModal microAlert" id="modal-error-goods-expsrDv02" aria-hidden="true">
|
|
<div class="microModal__overlay" tabindex="-1">
|
|
<div class="microModal__container" role="dialog" aria-modal="true">
|
|
<div class="microModal__body">
|
|
<div class="microModal__top">
|
|
<h2 class="microModal__title" id="modal-error-content-expsrDv02">
|
|
미노출 상품입니다.
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
<div class="microModal__btnContainer">
|
|
<button type = "button" class="microModal__btn" id="modal-error-confirm-expsrDv02" onclick="closeModal('modal-error-goods-expsrDv02')">
|
|
<spring:message code="button.close"/>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<%--노출기간이 도래하지 않은 상품 모달--%>
|
|
<div class="microModal microAlert" id="modal-error-goods-expsrDv03" aria-hidden="true">
|
|
<div class="microModal__overlay" tabindex="-1">
|
|
<div class="microModal__container" role="dialog" aria-modal="true">
|
|
<div class="microModal__body">
|
|
<div class="microModal__top">
|
|
<h2 class="microModal__title" id="modal-error-content-expsrDv03">
|
|
노출기간이 아닙니다.
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
<div class="microModal__btnContainer">
|
|
<button type = "button" class="microModal__btn" id="modal-error-confirm-expsrDv03" onclick="closeModal('modal-error-goods-expsrDv03')">
|
|
<spring:message code="button.close"/>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<%--상품옵션 미선택시 모달--%>
|
|
<div class="microModal microAlert" id="modal-error-goods-choice" aria-hidden="true">
|
|
<div class="microModal__overlay" tabindex="-1">
|
|
<div class="microModal__container" role="dialog" aria-modal="true">
|
|
<div class="microModal__body">
|
|
<div class="microModal__top">
|
|
<h2 class="microModal__title" id="modal-error-content-choice">
|
|
상품옵션을 선택해 주세요.
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
<div class="microModal__btnContainer">
|
|
<button type = "button" class="microModal__btn" id="modal-error-confirm-choice" onclick="closeModal('modal-error-goods-choice')">
|
|
<spring:message code="button.close"/>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<%--필수추가옵션 미선택시 모달--%>
|
|
<div class="microModal microAlert" id="modal-error-goods-essntlat" aria-hidden="true">
|
|
<div class="microModal__overlay" tabindex="-1">
|
|
<div class="microModal__container" role="dialog" aria-modal="true">
|
|
<div class="microModal__body">
|
|
<div class="microModal__top">
|
|
<h2 class="microModal__title" id="modal-error-content-essntlat">
|
|
필수추가옵션을 선택해 주세요.
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
<div class="microModal__btnContainer">
|
|
<button type = "button" class="microModal__btn" id="modal-error-confirm-essntlat" onclick="closeModal('modal-error-goods-essntlat')">
|
|
<spring:message code="button.close"/>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<%--상품 중복선택 모달--%>
|
|
<div class="microModal microAlert" id="modal-error-goods-duplicate" aria-hidden="true">
|
|
<div class="microModal__overlay" tabindex="-1">
|
|
<div class="microModal__container" role="dialog" aria-modal="true">
|
|
<div class="microModal__body">
|
|
<div class="microModal__top">
|
|
<h2 class="microModal__title" id="modal-error-content">
|
|
중복된 상품입니다.
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
<div class="microModal__btnContainer">
|
|
<button type = "button" class="microModal__btn" id="modal-error-confirm" onclick="closeModal('modal-error-goods-duplicate')">
|
|
<spring:message code="button.close"/>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<%--상품 장바구니 담기 후 페이지 이동 모달 --%>
|
|
<div class="microModal microAlert" id="confirm_addCart_alert" aria-hidden="true">
|
|
<div class="microModal__overlay" tabindex="-1">
|
|
<div class="microModal__container" role="dialog" aria-modal="true">
|
|
<div class="microModal__body">
|
|
<div class="microModal__top">
|
|
<h2 class="microModal__title">
|
|
상품이 장바구니에 담겼습니다.
|
|
<br>
|
|
지금 확인하시겠습니까?
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
<div class="microModal__btnContainer">
|
|
<button class="microModal__btn microModal__btn-primary" onclick="fn_move_cart_list();">예</button>
|
|
<button class="microModal__btn" onclick="fn_addCart_result_modal()" aria-label="창 닫기">아니오</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<%--240709 카테고리선택 바텀시트--%>
|
|
<div class="microModal microBottomSheet" id="categorySelectPop01" aria-hidden="true">
|
|
<div class="microModal__overlay" tabindex="-1">
|
|
<div class="microModal__container" role="dialog" aria-modal="true">
|
|
<div class="microModal__body">
|
|
<div class="microModal__top">
|
|
<button class="microModal__close" aria-label="창 닫기" data-micromodal-close></button>
|
|
</div>
|
|
<div class="microModal__content">
|
|
<div class="modalSelect">
|
|
<!-- <p class="modalSelect__title">선택 제목</p> -->
|
|
<div class="modalSelect__list">
|
|
<label class="modalSelect__item">
|
|
<input type="radio" name="categorySelect01" value="">
|
|
<span>랭킹순</span>
|
|
</label>
|
|
<label class="modalSelect__item">
|
|
<input type="radio" name="categorySelect01" value="">
|
|
<span>신상품순</span>
|
|
</label>
|
|
<label class="modalSelect__item">
|
|
<input type="radio" name="categorySelect01" value="">
|
|
<span>랭킹순</span>
|
|
</label>
|
|
<label class="modalSelect__item">
|
|
<input type="radio" name="categorySelect01" value="">
|
|
<span>신상품순</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<%--*****************************2. 리뷰 관련******************************--%>
|
|
<%--적립 혜택--%>
|
|
<div class="microModal microBottomSheet" id="reviewBenefitPop" aria-hidden="true">
|
|
<div class="microModal__overlay" tabindex="-1">
|
|
<div class="microModal__container" role="dialog" aria-modal="true">
|
|
<div class="microModal__body">
|
|
<div class="microModal__top">
|
|
<button class="microModal__close" aria-label="창 닫기" data-micromodal-close></button>
|
|
</div>
|
|
<div class="microModal__content">
|
|
<h5 class="modalInfo__title">상품리뷰 작성 시 혜택</h5>
|
|
<div class="reviewBenefit" id = "reviewBenefit">
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<%--리뷰 정렬 팝업--%>
|
|
<div class="microModal microBottomSheet" id="rvwSortPop" aria-hidden="true">
|
|
<div class="microModal__overlay" tabindex="-1">
|
|
<div class="microModal__container" role="dialog" aria-modal="true">
|
|
<div class="microModal__body">
|
|
<div class="microModal__top">
|
|
<button class="microModal__close" aria-label="창 닫기" data-micromodal-close></button>
|
|
</div>
|
|
<div class="microModal__content">
|
|
<div class="modalSelect">
|
|
<div class="modalSelect__list">
|
|
<input type = "hidden" id="rvwSortVal"/>
|
|
<label class="modalSelect__item">
|
|
<input type="radio" name="sortDv" value="rank" class="rvwSortItem">
|
|
<span>랭킹순</span>
|
|
</label>
|
|
<label class="modalSelect__item">
|
|
<input type="radio" name="sortDv" value="recent" class="rvwSortItem">
|
|
<span>최신순</span>
|
|
</label>
|
|
<label class="modalSelect__item">
|
|
<input type="radio" name="sortDv" value="evl" class="rvwSortItem">
|
|
<span>평점 높은순</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<%--후기 종류 선택 팝업 --%>
|
|
<div class="microModal microBottomSheet" id="rvwKndPop" aria-hidden="true">
|
|
<div class="microModal__overlay" tabindex="-1">
|
|
<div class="microModal__container" role="dialog" aria-modal="true">
|
|
<div class="microModal__body">
|
|
<div class="microModal__top">
|
|
<button class="microModal__close" aria-label="창 닫기" data-micromodal-close></button>
|
|
</div>
|
|
<div class="microModal__content">
|
|
<div class="modalSelect">
|
|
<div class="modalSelect__list">
|
|
<input type="hidden" id="rvwKndVal"/>
|
|
<label class="modalSelect__item">
|
|
<input type="radio" name="categorySelect02" value="all" class="rvwKndItem">
|
|
<span>전체보기</span>
|
|
</label>
|
|
<label class="modalSelect__item">
|
|
<input type="radio" name="categorySelect02" value="photo" class="rvwKndItem">
|
|
<span>포토리뷰</span>
|
|
</label>
|
|
<label class="modalSelect__item" id="mtBtn">
|
|
<input type="radio" name="categorySelect02" value="month" class="rvwKndItem">
|
|
<span>한달리뷰</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<%--*****************************3. 상품qna 관련******************************--%>
|
|
<div class="microModal microAlert" id="confirm_pw_pop" aria-hidden="true">
|
|
<div class="microModal__overlay" tabindex="-1">
|
|
<div class="microModal__container" role="dialog" aria-modal="true">
|
|
<div class="microModal__body">
|
|
<div class="microModal__top">
|
|
<h4 class="microModal__title">
|
|
비밀번호를 입력해 주세요
|
|
</h4>
|
|
</div>
|
|
<div class="microModal__content" id="pwDiv">
|
|
<p>
|
|
<input class="input-text alert-content__pwInput" type="password" title="비밀번호 입력"
|
|
placeholder="비밀번호 입력"
|
|
name="password" id="modalPw">
|
|
</p>
|
|
<input type="hidden" name="bbscttInnb" id="modalBbscttInnb">
|
|
<input type="hidden" id="modalIdx">
|
|
<input type="hidden" id="modalAnswAt">
|
|
<input type="hidden" id="modalFileAt">
|
|
<input type="hidden" id="reqAction">
|
|
</div>
|
|
</div>
|
|
<div class="microModal__btnContainer">
|
|
<button class="microModal__btn" data-micromodal-close="" aria-label="창 닫기"><spring:message
|
|
code="button.cancel"/></button>
|
|
<button class="microModal__btn microModal__btn-primary" id="pwChkBtn"><spring:message
|
|
code="button.ok"/></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<%--비밀번호 일치하지 않음--%>
|
|
<div class="microModal microAlert" id="reject_pw_pop" aria-hidden="true">
|
|
<div class="microModal__overlay" tabindex="-1">
|
|
<div class="microModal__container" role="dialog" aria-modal="true">
|
|
<div class="microModal__body">
|
|
<div class="microModal__top">
|
|
<h2 class="microModal__title">
|
|
비밀번호가 일치하지 않습니다.
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
<div class="microModal__btnContainer">
|
|
<button class="microModal__btn" data-micromodal-close="" aria-label="창 닫기"><spring:message code="button.ok"/></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<%--확인 비밀번호 입력 안함--%>
|
|
<div class="microModal microAlert" id="no_pw_pop" aria-hidden="true">
|
|
<div class="microModal__overlay" tabindex="-1">
|
|
<div class="microModal__container" role="dialog" aria-modal="true">
|
|
<div class="microModal__body">
|
|
<div class="microModal__top">
|
|
<h2 class="microModal__title">
|
|
비밀번호를 입력해주세요.
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
<div class="microModal__btnContainer">
|
|
<button class="microModal__btn" id = "noPwBtn"><spring:message code="button.ok"/></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<%--글작성자만 이용가능--%>
|
|
<div class="microModal microAlert" id="reject_modi_pop" aria-hidden="true">
|
|
<div class="microModal__overlay" tabindex="-1">
|
|
<div class="microModal__container" role="dialog" aria-modal="true">
|
|
<div class="microModal__body">
|
|
<div class="microModal__top">
|
|
<h2 class="microModal__title">
|
|
글작성자만 이용가능합니다.
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
<div class="microModal__btnContainer">
|
|
<button class="microModal__btn" data-micromodal-close="" aria-label="창 닫기"><spring:message code="button.ok"/></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<%--질문 수정 불가 모달 --%>
|
|
<div class="microModal microAlert" id="qna-edit" aria-hidden="true">
|
|
<div class="microModal__overlay" tabindex="-1">
|
|
<div class="microModal__container" role="dialog" aria-modal="true">
|
|
<div class="microModal__body">
|
|
<div class="microModal__top">
|
|
<p class="alert-content__text--sm">
|
|
답변이 등록된 상태입니다.
|
|
<br>
|
|
수정하실 수 없습니다.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="microModal__btnContainer">
|
|
<button class="microModal__btn" data-micromodal-close="" aria-label="창 닫기"><spring:message code="button.ok"/></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 쿠폰 받기 정보 조회 -->
|
|
<div id="couponListDiv"></div>
|
|
<div id = "modalDiv"></div>
|
|
<div id = "photoDiv"></div>
|
|
|
|
|
|
<%--장바구니 중복 상품 장바구니 목록에 추가 confirm 모달--%>
|
|
<div class="microModal microAlert" id="modal-error-confirm-add-cart-duplicate" aria-hidden="true">
|
|
<div class="microModal__overlay" tabindex="-1">
|
|
<div class="microModal__container" role="dialog" aria-modal="true">
|
|
<div class="microModal__body">
|
|
<div class="microModal__top">
|
|
<h2 class="microModal__title" id="modal-error-content-add-cart-duplicate">
|
|
장바구니에 선택한 상품이 있습니다. <br/> 장바구니에 추가하시겠습니까?
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
<div class="microModal__btnContainer">
|
|
<button type="button" class="microModal__btn microModal__btn-primary" id="modal-error-confirm-yesButton" onclick="closeModal('modal-error-confirm-add-cart-duplicate');">예</button>
|
|
<button type="button" class="microModal__btn" id="modal-error-confirm-noButton" onclick="fn_addCart_duplicateAt_N_modal();">아니오</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<%--로그인 유도 모달 --%>
|
|
<div class="microModal microAlert" id="modal-error-confirm-move-login" aria-hidden="true">
|
|
<div class="microModal__overlay" tabindex="-1">
|
|
<div class="microModal__container" role="dialog" aria-modal="true">
|
|
<div class="microModal__body">
|
|
<div class="microModal__top">
|
|
<h2 class="microModal__title" id="modal-error-content--move-login">
|
|
회원만 사용가능합니다. <br/> 로그인하시겠습니까?
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
<div class="microModal__btnContainer">
|
|
<button type="button" class="microModal__btn microModal__btn-primary" id="modal-error-confirm-move-login-yesButton" onclick="fn_move_goodsDtl_login()">예</button>
|
|
<button type="button" class="microModal__btn" id="modal-error-confirm-move-login-noButton" onclick="closeModal('modal-error-confirm-move-login');">아니오</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 최대혜택가 상세 툴팁 -->
|
|
<div class="microModal microBottomSheet" id="dcPriceContent" aria-hidden="true">
|
|
<div class="microModal__overlay" tabindex="-1">
|
|
<div class="microModal__container" role="dialog" aria-modal="true">
|
|
<div class="microModal__body">
|
|
<div class="microModal__top">
|
|
<button class="microModal__close" aria-label="창 닫기" data-micromodal-close></button>
|
|
</div>
|
|
<div class="microModal__content">
|
|
<h5 class="modalInfo__title">최대혜택가</h5>
|
|
<div class="microModal__inner">
|
|
<div class=modalInfo__dcPriceInfo">
|
|
<ul class="productDetailInfo__saleList" style="font-size: 15px; color: #16191d">
|
|
<li class="productDetailInfo__saleItem" style="display: flex; justify-content: center; align-items: end;">
|
|
<span class="productDetailInfo__miscTh">상품가격</span>
|
|
<span class="productDetailInfo__miscTd" style="margin-left: auto;"><span class="comma" style=" margin-left: auto;"><fmt:formatNumber value="${resultMap.goodsDtl.slepric}"/> </span><span class="priceUnit" style="font-size: small;">${curUnit}</span></span>
|
|
</li>
|
|
<hr style="color:darkgray"/>
|
|
<c:if test="${resultMap.goodsDtl.eventAt eq 'Y'}">
|
|
<li class="productDetailInfo__saleItem" style="display: flex; justify-content: center; align-items: end;">
|
|
<span class="productDetailInfo__miscTh">이벤트 <c:if test="${ not empty resultMap.goodsDtl.evtnm}"><br/><span style="font-size: small;">${resultMap.goodsDtl.evtnm}</span></c:if></span>
|
|
<span class="productDetailInfo__miscTd" style=" margin-left: auto;">-<span class="comma"><fmt:formatNumber value="${resultMap.goodsDtl.evtAditDscntAmt}"/> </span><span class="priceUnit" style="font-size: small;">${curUnit}</span></span>
|
|
</li>
|
|
<hr style="color:darkgray"/>
|
|
</c:if>
|
|
<c:if test="${resultMap.goodsDtl.dplctLmttCoupon eq '99' or resultMap.goodsDtl.dplctLmttCoupon eq '03'}">
|
|
<li class="productDetailInfo__saleItem" style="display: flex; justify-content: center; align-items: end;">
|
|
<span class="productDetailInfo__miscTh">상품 쿠폰<c:if test="${ not empty resultMap.goodsDtl.gdCouponSndngNm}"> <br/><span style="font-size: small;">${resultMap.goodsDtl.gdCouponSndngNm }</span></c:if></span>
|
|
<span class="productDetailInfo__miscTd" style=" margin-left: auto;" >-<span class="comma"><fmt:formatNumber value="${resultMap.goodsDtl.gdAditDscntAmt}"/> </span><span class="priceUnit" style="font-size: small;">${curUnit}</span></span>
|
|
</li>
|
|
<hr style="color:darkgray"/>
|
|
</c:if>
|
|
<c:if test="${resultMap.goodsDtl.dplctLmttCoupon eq '99' or resultMap.goodsDtl.dplctLmttCoupon eq '01'}">
|
|
<li class="productDetailInfo__saleItem" style="display: flex; justify-content: center; align-items: end;">
|
|
<span class="productDetailInfo__miscTh">장바구니 쿠폰<c:if test="${ not empty resultMap.goodsDtl.ctCouponSndngNm}"><br/><span style="font-size: small;">${resultMap.goodsDtl.ctCouponSndngNm }</span></c:if></span>
|
|
<span class="productDetailInfo__miscTd" style="margin-left: auto;">
|
|
<c:choose>
|
|
<c:when test="${resultMap.goodsDtl.ctAditDscntCd eq '01'}">
|
|
<span class="percent" style=" margin-left: auto;">-<fmt:formatNumber value="${resultMap.goodsDtl.ctAditDscntAmt}"/> </span><span class="priceUnit" style="font-size: small;">%</span>
|
|
</c:when>
|
|
<c:otherwise>
|
|
<span class="comma" style=" margin-left: auto;">-<fmt:formatNumber value="${resultMap.goodsDtl.ctAditDscntAmt}"/> </span><span class="priceUnit" style="font-size: small;">${curUnit}</span>
|
|
</c:otherwise>
|
|
</c:choose>
|
|
</span>
|
|
</li>
|
|
<hr style="color:darkgray"/>
|
|
</c:if>
|
|
<li class="productDetailInfo__saleItem" style="display: flex; justify-content: center; align-items: end;">
|
|
<span class="productDetailInfo__miscTh" style="color:red;">최대혜택가</span>
|
|
<span class="productDetailInfo__miscTd" style="margin-left:auto;color:red; "><span class="comma"><fmt:formatNumber value="${resultMap.goodsDtl.dcSlepric}"/> </span><span class="priceUnit" style="font-size: small;">${curUnit}</span></span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|