4835 lines
244 KiB
Plaintext
4835 lines
244 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>
|
|
<spring:eval expression="@environment.getProperty('spring.profiles.active')" var="profiles"/>
|
|
<c:if test="${profiles eq 'stage' && originalHost eq 'new.chamdahan.com'}">
|
|
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" />
|
|
</c:if>
|
|
|
|
<jsp:include page="/WEB-INF/views/comm/Include.jsp"/>
|
|
<spring:eval expression="@environment.getProperty('sopmalfo.common.fileupload.cdnurl')" var="cdnurl"/>
|
|
<spring:eval expression="@environment.getProperty('currency-unit.default')" var="curUnit"/>
|
|
<!--************************************ 네이버페이 시작 *********************************-->
|
|
<!--[ 네이버 구매하기버튼 스크립트 ]-->
|
|
<c:if test="${profiles eq 'stage'}">
|
|
<script type="text/javascript" src="https://test-pay.naver.com/customer/js/naverPayButton.js" charset="UTF-8"></script>
|
|
</c:if>
|
|
<c:if test="${profiles ne 'stage'}">
|
|
<script type="text/javascript" src="http://test-pay.naver.com/customer/js/naverPayButton.js" charset="UTF-8"></script>
|
|
</c:if>
|
|
<!--************************************ 네이버페이 종료 *********************************-->
|
|
<script 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 defer>
|
|
$(document).ready(function () {
|
|
fn_document_event();
|
|
|
|
//qna 이벤트 함수
|
|
fn_qna_event();
|
|
|
|
// 쿠키 저장
|
|
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: '';
|
|
}
|
|
|
|
|
|
/*popmodal 공통 함수*/
|
|
const fn_pop_Modal = (selector, targetSelector) => {
|
|
$(selector).popModal({
|
|
html: $(targetSelector).html(),
|
|
placement: 'leftCenter',
|
|
showCloseBut: true,
|
|
onDocumentClickClose: true,
|
|
onDocumentClickClosePrevent: '',
|
|
});
|
|
}
|
|
|
|
/*************************************************************
|
|
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){
|
|
let naverBandUrl = "http://www.band.us/plugin/share?body="+encodeURIComponent(srtDc + currentURL)+"&route="+encodeURIComponent(currentURL);
|
|
window.open(naverBandUrl, "naverBand", "width=400, height=500, resizable=yes");
|
|
}
|
|
}
|
|
|
|
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 showHidePageUpBtn = () => {
|
|
if ($('html, body').scrollTop() == 0) {
|
|
$("#pageUpBtn").hide();
|
|
} else {
|
|
$("#pageUpBtn").show();
|
|
}
|
|
}
|
|
|
|
//DOM scroll 이벤트 바인딩
|
|
$(document).on("scroll",function(){
|
|
showHidePageUpBtn();
|
|
});
|
|
|
|
/********************** html 로딩시 이벤트 함수 ******************************/
|
|
const fn_document_event = () => {
|
|
//처음 로딩시 스크롤 위치에 따른 페이지 업 버튼 노출
|
|
showHidePageUpBtn();
|
|
|
|
//fixed img 메인이미지로 set
|
|
$("#fixedImg").append($(".productDetailGallery__item").eq(0).html());
|
|
//리뷰 조회
|
|
let rvwWritngPosblAt = $("#rvwWritngPosblAt").val();
|
|
let MtRvwWritngPosblAt = $("#MtRvwWritngPosblAt").val();
|
|
|
|
if(rvwWritngPosblAt === 'Y' || MtRvwWritngPosblAt === 'Y'){
|
|
fn_select_rvw_form(1);
|
|
}
|
|
//상품문의 조회
|
|
fn_select_qna(1);
|
|
|
|
//반품교환정보 조회
|
|
fn_select_return_info();
|
|
|
|
//포토리뷰 이미지 제거
|
|
fn_remove_img(".photoPickPage", ".photoPickPageImg", "page");
|
|
var photoPickSlider = $(".photoPick__slick");
|
|
var photoPickCounter = $(".photoPick__counter");
|
|
|
|
photoPickSlider.slick({
|
|
slidesToShow: 1,
|
|
arrows: true,
|
|
dots: false,
|
|
speed: 0,
|
|
draggable: false,
|
|
prevArrow: $(".photoPick__controls__btn.prev"),
|
|
nextArrow: $(".photoPick__controls__btn.next"),
|
|
});
|
|
|
|
photoPickSlider.on("init reInit afterChange", function (event, slick, currentSlide) {
|
|
var i = (currentSlide ? parseInt(currentSlide) : 0) + 1;
|
|
photoPickCounter.html("<em>" + i + "</em>" + " / " + slick.slideCount);
|
|
});
|
|
|
|
var initialSlide = photoPickSlider.slick("slickCurrentSlide") + 1;
|
|
photoPickCounter.html("<em>" + initialSlide + "</em>" + " / " + photoPickSlider.slick("getSlick").slideCount);
|
|
|
|
$('.photoPickA').on('click', function (e) {
|
|
const index = $(this).attr("idx");
|
|
fn_select_photo_rvw("dtl", index);
|
|
});
|
|
/*************************************************************
|
|
상세 정보 탭 이벤트
|
|
**************************************************************/
|
|
// 상품 상세정보 더보기 버튼 클릭 시, 접힌 이미지 펼쳐짐
|
|
$(".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("상세설명 접기");
|
|
}
|
|
});
|
|
/*************************************************************
|
|
탭, 스크롤 이벤트
|
|
**************************************************************/
|
|
//스크롤 이벤트 해당 내용 인접시 해당 탭 active
|
|
// 상세정보, 리뷰, Q&A, 반품/교환정보 탭 스크롤 이벤트
|
|
// 상세정보, 리뷰, Q&A, 반품/교환정보 탭 스크롤 이벤트
|
|
|
|
var productDetailTab = $(".productDetailTab__item a");
|
|
var productDetailContent = $(".productDetailcontent__item");
|
|
|
|
productDetailTab.click(function (e) {
|
|
e.preventDefault();
|
|
var index = $(this).parent().index();
|
|
productDetailTab.removeClass("active");
|
|
$(this).addClass("active");
|
|
$("html, body").animate(
|
|
{
|
|
scrollTop: productDetailContent.eq(index).offset().top - 108,
|
|
},
|
|
0
|
|
);
|
|
});
|
|
|
|
function handleTabScroll() {
|
|
var scrollTop = $(window).scrollTop();
|
|
var fixedTabHeight = 140;
|
|
var initialProductDetailTop = productDetailContent.eq(0).offset().top;
|
|
|
|
productDetailContent.each(function () {
|
|
var index = productDetailContent.index(this);
|
|
if (scrollTop >= $(this).offset().top - 110) {
|
|
productDetailTab.removeClass("active");
|
|
productDetailTab.eq(index).addClass("active");
|
|
|
|
}
|
|
if (scrollTop < 100) {
|
|
productDetailTab.removeClass("active");
|
|
productDetailTab.eq(0).addClass("active");
|
|
}
|
|
});
|
|
|
|
var threshold = initialProductDetailTop - fixedTabHeight;
|
|
|
|
if (scrollTop > threshold) {
|
|
if (!$(".productDetailTab").hasClass("fixed")) {
|
|
$(".productDetailTab").addClass("fixed");
|
|
$(".fixedProduct").addClass("fixed");
|
|
productDetailContent.eq(0).css("padding-top", 108 + "px");
|
|
}
|
|
} else {
|
|
if ($(".productDetailTab").hasClass("fixed")) {
|
|
$(".productDetailTab").removeClass("fixed");
|
|
$(".fixedProduct").removeClass("fixed");
|
|
productDetailContent.eq(0).css("padding-top", "");
|
|
}
|
|
}
|
|
}
|
|
|
|
var debounce = function (func, delay) {
|
|
var timer;
|
|
return function () {
|
|
var context = this,
|
|
args = arguments;
|
|
clearTimeout(timer);
|
|
timer = setTimeout(function () {
|
|
func.apply(context, args);
|
|
}, delay);
|
|
};
|
|
};
|
|
|
|
$(window).scroll(debounce(handleTabScroll, 20));
|
|
|
|
|
|
/*************************************************************
|
|
상품 썸네일 이벤트
|
|
**************************************************************/
|
|
// 상품 썸네일 이미지 호버 시, 메인 이미지 변경
|
|
$('.productDetailGallery__item').on('mouseover', function () {
|
|
var $activeImage = $('.productDetailGallery__item.active');
|
|
if ($activeImage.length) {
|
|
$activeImage.removeClass('active');
|
|
}
|
|
$(this).addClass('active');
|
|
var imgSrc = $(this).find('img').attr('src');
|
|
|
|
$('#featured').attr('src', imgSrc);
|
|
});
|
|
|
|
$('#thumbsLeft').on('click', function () {
|
|
var $slider = $('.productDetailGallery__slider');
|
|
$slider.scrollLeft($slider.scrollLeft() - 500);
|
|
});
|
|
|
|
$('#thumbsRight').on('click', function () {
|
|
var $slider = $('.productDetailGallery__slider');
|
|
$slider.scrollLeft($slider.scrollLeft() + 500);
|
|
});
|
|
|
|
// 상품 썸네일 이미지 스크롤 이벤트
|
|
|
|
var $slider = $('.productDetailGallery__slider');
|
|
var $thumbs = $('.productDetailGallery__item');
|
|
var $thumbsLeft = $('#thumbsLeft');
|
|
var $thumbsRight = $('#thumbsRight');
|
|
|
|
if ($slider.scrollLeft() == 0) {
|
|
$thumbsLeft.addClass('hidden');
|
|
}
|
|
|
|
if ($thumbs.length <= 5) {
|
|
$thumbsLeft.addClass('hidden');
|
|
$thumbsRight.addClass('hidden');
|
|
}
|
|
|
|
$slider.scroll(function () {
|
|
if ($slider.scrollLeft() == 0) {
|
|
$thumbsLeft.addClass('hidden');
|
|
} else {
|
|
$thumbsLeft.removeClass('hidden');
|
|
}
|
|
|
|
if ($slider.scrollLeft() + $slider.width() == $slider[0].scrollWidth) {
|
|
$thumbsRight.addClass('hidden');
|
|
} else {
|
|
$thumbsRight.removeClass('hidden');
|
|
}
|
|
});
|
|
|
|
|
|
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);
|
|
}
|
|
|
|
//쿠폰받기
|
|
$('#couponList').on('click', function () {
|
|
//비로그인시 로그인 유도 모달
|
|
if (fn_is_empty($('#mbrId').val())) {
|
|
fn_wish_modal()
|
|
return;
|
|
}
|
|
fn_open_modal('#couponListDiv', '#coupon-select-popUp', '/sopmal/goods/selectGoodsCouponListPopup',JSON.stringify({'goodsInnb' : $('#goodsInnb').val()}))
|
|
|
|
});
|
|
|
|
// 위시리스트 하트 토글
|
|
$('#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)){
|
|
fn_wish_modal()
|
|
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();
|
|
|
|
//위시리스트 등록이 되어있으면 추가
|
|
if(!fn_is_empty(wslistInnb)){
|
|
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');
|
|
});
|
|
|
|
//회원이 아닐 경우 모달
|
|
const fn_wish_modal = () => {
|
|
|
|
const modal = `<div id="wishModalDiv" class="modal alert">
|
|
<div class="alert-content">
|
|
<p class="alert-content__text--sm">
|
|
회원만 사용가능합니다. 로그인하시겠습니까?
|
|
</p>
|
|
</div>
|
|
<div class="alert-btn-container">
|
|
<a href="javascript:void(0);" onclick="fn_move_goodsDtl_login();" rel="modal:close" class="alert-btn alert-btn--confirm">예</a>
|
|
<a href="javascript:void(0);" rel="modal:close" class="alert-btn alert-btn--confirm">아니오</a>
|
|
</div>
|
|
</div>`;
|
|
|
|
//장바구니 담은 후 페이지 이동 여부 모달
|
|
$('#wishModalDiv').remove()
|
|
$('#wishDiv').html(modal)
|
|
$('#wishModalDiv').modal()
|
|
}
|
|
|
|
/*************************************************************
|
|
툴팁 이벤트
|
|
**************************************************************/
|
|
// 공유하기 툴팁
|
|
$('#snsShare').click(function () {
|
|
fn_pop_Modal('#snsShare', '#snsShareContent');
|
|
});
|
|
|
|
// 배송비 툴팁
|
|
$('#deliveryFeeInfo').click(function () {
|
|
fn_select_dlvy_info();
|
|
});
|
|
|
|
// 리뷰작성 시 혜택 툴팁 - 20240626작업
|
|
$('#reviewBenefit').click(function () {
|
|
fn_select_rvw_bnef_info();
|
|
});
|
|
}
|
|
|
|
//배송비 툴팁 > 묶음배송 상품보기
|
|
$(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();
|
|
})
|
|
|
|
|
|
//자리마다 "," 추가
|
|
function addComma(num) {
|
|
return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
|
|
}
|
|
|
|
|
|
/*************************************************************
|
|
상품 옵션 선택 이벤트
|
|
**************************************************************/
|
|
|
|
//상품 타이틀, 수량, 가격 저장하는 배열
|
|
let productArr = []; // 배열 순서 -> [상품명, 수량, 1개당 가격, 상품 총가격(=수량x개당가격), 추가정보(색상, 사이즈등)]
|
|
let cartProductArr = []; // 함께하면 좋은 상품 선택 arr
|
|
$(document).ready(function () {
|
|
|
|
const sopmalCd = $('#sopmalCd').val()
|
|
|
|
// 라디오 버튼 클릭 시
|
|
//일반옵션
|
|
$(".productDetailInfo .productDetailInfo__option__item").each(function () {
|
|
// 라디오 버튼 클릭시, 상품 정보 배열에 추가 및 화면에 추가
|
|
$(this).find("input[type=radio]").on("change", function () {
|
|
if ($(this).prop('checked') == false) return; // 체크 해제시 리턴
|
|
let $goodsOptnInnb = $(this).closest(".productDetailInfo__option__item").find('input[name="goodsOptnInnb"]').val()
|
|
let $goodsOptnTy = $(this).closest(".productDetailInfo__option__item").find('input[name="goodsOptnTy"]').val()
|
|
let $optnInfo = $(this).closest(".productDetailInfo__option__item").find('.productDetailInfo__option__monthly-payment').text();
|
|
|
|
let $title = $(this).closest(".productDetailInfo__option__item").find("label").text();
|
|
let $price = $(this).closest(".productDetailInfo__option__item").find(".productDetailInfo__option__price").text();
|
|
let $priceNum = parseInt($price.replace(/,/g, ""));
|
|
|
|
//이미 추가된 상품인지 확인
|
|
let 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="productDetailInfo__count">' +
|
|
'<div class="productDetailInfo__count__amountTop">' +
|
|
'<span class="productDetailInfo__count__amountTitle">' + $title + '</span>' +
|
|
'<button class="productDetailInfo__count__amountDelete"><span class="visually-hidden">삭제</span></button>' +
|
|
'</div>' +
|
|
'<div class="productDetailInfo__count__amountBottom">' +
|
|
'<div class="productDetailInfo__count__amountCounter">' +
|
|
'<button class="productDetailInfo__count__amountBtn minus"><span class="visually-hidden">감소</span></button>' +
|
|
'<span class="productDetailInfo__count__amountNumber">1</span>' +
|
|
'<button class="productDetailInfo__count__amountBtn plus"><span class="visually-hidden">추가</span></button>' +
|
|
'</div>' +
|
|
'<div class="productDetailInfo__count__amountPriceBox">' +
|
|
'<span class="productDetailInfo__count__amountMonthlyPrice">' + $optnInfo + '</span>' +
|
|
'<span class="productDetailInfo__count__amountPrice"><span class="comma productDetailInfo__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 = $('#goodsNm').val();
|
|
var $optInfo = $(this).closest(".productDetailInfo__additionalSelect__item").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());
|
|
}
|
|
//이미 추가된 상품인지 확인
|
|
let 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]); // 배열에 상품 정보 추가
|
|
additionalSelectText = '옵션 : ' + arr.join(' / ').replace(/\(\+.*?\)/g, ''); // 추가정보 텍스트로 변환
|
|
$('#countContainer').append( // 화면에 상품 정보 추가
|
|
'<div class="productDetailInfo__count">' +
|
|
'<div class="productDetailInfo__count__amountTop">' +
|
|
'<span class="productDetailInfo__count__amountTitle">' + $title + '</span>' +
|
|
'<div class="productDetailInfo__count__additionalSelect">' + additionalSelectText + '</div>' +
|
|
'<button class="productDetailInfo__count__amountDelete"><span class="visually-hidden">삭제</span></button>' +
|
|
'</div>' +
|
|
'<div class="productDetailInfo__count__amountBottom">' +
|
|
'<div class="productDetailInfo__count__amountCounter">' +
|
|
'<button class="productDetailInfo__count__amountBtn minus"><span class="visually-hidden">감소</span></button>' +
|
|
'<span class="productDetailInfo__count__amountNumber">1</span>' +
|
|
'<button class="productDetailInfo__count__amountBtn plus"><span class="visually-hidden">추가</span></button>' +
|
|
'</div>' +
|
|
'<div class="productDetailInfo__count__amountPriceBox">' +
|
|
'<span class="productDetailInfo__count__amountMonthlyPrice">' + $goodsOptnInfo + '</span>' +
|
|
'<span class="productDetailInfo__count__amountPrice"><span class="comma productDetailInfo__count__priceNum">' + $priceNum +
|
|
'</div>' +
|
|
'</div>' +
|
|
'</div>'
|
|
);
|
|
}
|
|
updateCounters(); // 화면에 상품 정보 업데이트
|
|
});
|
|
|
|
|
|
//추가구성옵션
|
|
$('#moreItemsSelect').on("change", "select", function () { // 셀렉트 선택 시
|
|
const $title = $(this).closest(".productDetailInfo__additionalSelect__item").find('.productDetailInfo__additionalSelect__category').text();
|
|
const $optInfo = $(this).closest(".productDetailInfo__additionalSelect__item").find(".option.selected").attr("data-value").split('|');
|
|
const $priceNum = $optInfo[0];
|
|
const $goodsOptnInnb = $optInfo[1];
|
|
const $goodsOptnInfo = $optInfo[2];
|
|
const $goodsOptnTy = $optInfo[3];
|
|
const $optnEssnlAt = $(this).closest(".productDetailInfo__additionalSelect__item").find('input[name="productDetailInfo__additionalSelect__otpnEssntlAt"]').val();
|
|
$(this).closest(".productDetailInfo__additionalSelect__item").find(".option.selected")
|
|
|
|
//이미 추가된 상품인지 확인
|
|
let 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, $optnEssnlAt]); // 배열에 상품 정보 추가
|
|
additionalSelectText = $(this).closest(".productDetailInfo__additionalSelect__item").find(".option.selected").text().replace(/\(\+.*?\)/g, ''); // 추가정보 텍스트로 변환
|
|
$('#countContainer').append( // 화면에 상품 정보 추가
|
|
'<div class="productDetailInfo__count">' +
|
|
'<div class="productDetailInfo__count__amountTop">' +
|
|
'<span class="productDetailInfo__count__amountTitle">' + $title + '</span>' +
|
|
'<div class="productDetailInfo__count__additionalSelect">' + additionalSelectText + '</div>' +
|
|
'<button class="productDetailInfo__count__amountDelete"><span class="visually-hidden">삭제</span></button>' +
|
|
'</div>' +
|
|
'<div class="productDetailInfo__count__amountBottom">' +
|
|
'<div class="productDetailInfo__count__amountCounter">' +
|
|
'<button class="productDetailInfo__count__amountBtn minus"><span class="visually-hidden">감소</span></button>' +
|
|
'<span class="productDetailInfo__count__amountNumber">1</span>' +
|
|
'<button class="productDetailInfo__count__amountBtn plus"><span class="visually-hidden">추가</span></button>' +
|
|
'</div>' +
|
|
'<div class="productDetailInfo__count__amountPriceBox">' +
|
|
'<span class="productDetailInfo__count__amountMonthlyPrice">' + $goodsOptnInfo + '</span>' +
|
|
'<span class="productDetailInfo__count__amountPrice"><span class="comma productDetailInfo__count__priceNum">' + $priceNum +
|
|
'</div>' +
|
|
'</div>' +
|
|
'</div>'
|
|
);
|
|
|
|
updateCounters(); // 화면에 상품 정보 업데이트
|
|
|
|
|
|
//추가구성옵션 옵션 값 초기화
|
|
$('select[name="selectAddedOptn"]').val('').niceSelect('update');
|
|
|
|
});
|
|
// 총 상품금액
|
|
var $totalPrice = $(".productDetailInfo__priceTotal__totalPriceNum");
|
|
|
|
// 수량 "-", "+" 버튼 클릭 시, 수량 증감 및 가격 변경 및 총 상품금액 변경
|
|
$("#countContainer").on("click", ".productDetailInfo__count__amountBtn", function () { // 수량 버튼 클릭 시
|
|
var $counter = $(this);
|
|
var $index = $counter.closest(".productDetailInfo__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() {
|
|
$(".productDetailInfo .productDetailInfo__count").each(function () {
|
|
var $counter = $(this);
|
|
var $index = $counter.index();
|
|
var $number = $counter.find(".productDetailInfo__count__amountNumber");
|
|
var $price = $counter.find(".productDetailInfo__count__priceNum");
|
|
$number.text(productArr[$index][1]);
|
|
$price.text(addComma(productArr[$index][3]) + '${curUnit}');
|
|
});
|
|
updateTotalPrice(); // 총 상품금액 업데이트
|
|
}
|
|
|
|
|
|
// 총 상품금액 업데이트
|
|
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", ".productDetailInfo__count__amountDelete", function () { // x 버튼 클릭 시
|
|
var $index = $(this).closest(".productDetailInfo__count").index();
|
|
productArr.splice($index, 1); // 배열에서 해당 상품 삭제
|
|
cartProductArr.splice($index, 1); // 함께하면 좋은 상품 배열에서 해당 상품 삭제
|
|
$(this).closest(".productDetailInfo__count").remove(); // 화면에서 해당 상품 삭제
|
|
updateCounters(); // 화면에 상품 정보 업데이트
|
|
|
|
//일반옵션이 하나일 경우 라디오 체크 해제(품절상품 제외) || 필수옵션 01이 상품 배열에 하나도 없을 경우
|
|
if($('#productDetail .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)
|
|
}
|
|
});
|
|
|
|
// 마지막으로 생성된 상품에 각인 정보 추가
|
|
$('#addTextBtn').on('click', function () {
|
|
var $index = $(".productDetailInfo .productDetailInfo__count").length - 1;
|
|
var $text = $('#addTextInput').val();
|
|
$(".productDetailInfo .productDetailInfo__count").eq($index).find(".productDetailInfo__count__amountTop").append('<div class="productDetailInfo__count__additionalSelect">각인문구 : ' + $text + '</div>');
|
|
});
|
|
});
|
|
|
|
|
|
/*************************************************************
|
|
구매하기 버튼
|
|
**************************************************************/
|
|
$(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 ){
|
|
$('#productMyWish').focus()
|
|
alert('상품옵션을 선택해 주세요');
|
|
$('.purchsOrdr').prop('disabled', false)
|
|
return;
|
|
}
|
|
|
|
//추가구성옵션 - 필수추가구성옵션 있는지 확인
|
|
var values = $('input[name="productDetailInfo__additionalSelect__otpnEssntlAt"]').map(function() {
|
|
return $(this).val();
|
|
}).get();
|
|
|
|
if(values.includes('Y')){
|
|
var isAddedOptnEssntlAt = productArr.some(function (item) {
|
|
return item[5].trim() === '03'
|
|
});
|
|
|
|
if(!isAddedOptnEssntlAt){
|
|
alert('필수추가옵션을 선택해 주세요');
|
|
$('.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 = $('#goodsInnb').val();
|
|
|
|
|
|
const formData = new FormData();
|
|
let prodInx = 0;
|
|
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);
|
|
prodInx = idx
|
|
}
|
|
|
|
|
|
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)
|
|
})
|
|
|
|
|
|
/*************************************************************
|
|
장바구니 버튼
|
|
**************************************************************/
|
|
$(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 ){
|
|
$('#productMyWish').focus()
|
|
alert('상품옵션을 선택해 주세요');
|
|
$('.addCart').prop('disabled', false)
|
|
return;
|
|
}
|
|
|
|
//추가구성옵션 - 필수추가구성옵션 있는지 확인
|
|
var values = $('input[name="productDetailInfo__additionalSelect__otpnEssntlAt"]').map(function() {
|
|
return $(this).val();
|
|
}).get();
|
|
|
|
if(values.includes('Y')){
|
|
var isAddedOptnEssntlAt = productArr.some(function (item) {
|
|
return item[5].trim() === '03'
|
|
});
|
|
|
|
if(!isAddedOptnEssntlAt){
|
|
alert('필수추가옵션을 선택해 주세요');
|
|
$('.addCart').prop("disabled", false);
|
|
return;
|
|
}
|
|
}
|
|
|
|
const hiddenForm = document.createElement('form');
|
|
hiddenForm.name = 'hiddenForm';
|
|
hiddenForm.id = 'hiddenForm';
|
|
hiddenForm.method = 'post';
|
|
hiddenForm.action = '';
|
|
|
|
const goodsInnb = $('#goodsInnb').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'){
|
|
|
|
// 3. confirm시 해당 옵션번호랑 같은 상품의 갯수 더해서 DELETE insert
|
|
const dupliModal = await showConfirmModal();
|
|
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++;
|
|
}
|
|
}
|
|
|
|
//기존 장바구니에 담은 상품 저장
|
|
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)
|
|
$('.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
|
|
|
|
|
|
})
|
|
|
|
//장바구니 담기 처리
|
|
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);
|
|
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 {
|
|
alert('구매정보 <spring:message code="fail.common.insert"/>');
|
|
$('.addCart').prop("disabled", false);
|
|
$('.purchsOrdr').prop('disabled', false);
|
|
}
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
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_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');
|
|
|
|
//일반옵션 체크 해제
|
|
$('input[type="radio"]').prop('checked', false)
|
|
|
|
$(form).submit();
|
|
$(form).remove();
|
|
|
|
}
|
|
|
|
/*장바구니 담기후 페이지 이동 안할 경우 정보 초기화*/
|
|
const fn_cart_modal_N = () =>{
|
|
cartProductArr = []
|
|
productArr = []
|
|
$('input[type="radio"]').prop('checked', false)
|
|
$('#countContainer').empty()
|
|
$('.productDetailInfo__priceTotal__totalPriceNum').text(0);
|
|
}
|
|
|
|
|
|
//장바구니 담기 후 모달
|
|
const fn_cart_modal = () => {
|
|
const modal = `<div id="addCartModalDiv" class="modal alert">
|
|
<div class="alert-content">
|
|
<p class="alert-content__text--sm">
|
|
상품이 장바구니에 담겼습니다.
|
|
<br>
|
|
지금 확인하시겠습니까?
|
|
</p>
|
|
</div>
|
|
<div class="alert-btn-container">
|
|
<a href="javascript:void(0);" onclick="fn_move_cart_list();" rel="modal:close" class="alert-btn alert-btn--confirm">예</a>
|
|
<a href="javascript:void(0);" onclick="fn_cart_modal_N();" rel="modal:close" class="alert-btn alert-btn--confirm">아니오</a>
|
|
</div>
|
|
</div>`;
|
|
|
|
//장바구니 담은 후 페이지 이동 여부 모달
|
|
$('#addCartModalDiv').remove()
|
|
$('#addCartDiv').html(modal)
|
|
$('#addCartModalDiv').modal()
|
|
|
|
}
|
|
|
|
//상품 중복 선택 모달
|
|
const fn_goods_duplicate_select_modal = () => {
|
|
const modal = `<div id="goodsDuplicateModalDiv" class="modal alert">
|
|
<div class="alert-content">
|
|
<p class="alert-content__text--sm">
|
|
중복된 상품입니다.
|
|
</p>
|
|
</div>
|
|
<div class="alert-btn-container">
|
|
<a href="javascript:void(0);" rel="modal:close" class="alert-btn alert-btn--confirm">확인</a>
|
|
</div>
|
|
</div>`;
|
|
|
|
//재고옵션 옵션 값 초기화
|
|
$('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="selectAddedOptn"]').val('').niceSelect('update')
|
|
|
|
$('select[name="selectRelateInvntryOptn"]').val('').niceSelect('update')
|
|
|
|
$('select[name="selectRelateAddedOptn"]').val('').niceSelect('update')
|
|
|
|
//모달 처리
|
|
$('#goodsDuplicateModalDiv').remove()
|
|
$('#goodsDuplicateDiv').html(modal)
|
|
$('#goodsDuplicateModalDiv').modal()
|
|
|
|
}
|
|
|
|
|
|
/*************************************************************
|
|
장바구니 목록 이동
|
|
**************************************************************/
|
|
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');
|
|
|
|
//일반옵션 체크 해제
|
|
$('input[type="radio"]').prop('checked', false)
|
|
|
|
$(form).submit();
|
|
$(form).remove();
|
|
|
|
}
|
|
|
|
/*************************************************************
|
|
로그인 화면 이동
|
|
**************************************************************/
|
|
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);
|
|
|
|
$(hiddenFormLogin).submit();
|
|
$(hiddenFormLogin).remove();
|
|
|
|
|
|
}
|
|
/************************************* 상세 화면 제어 함수 *******************************/
|
|
|
|
/************************************* 상품 상세 폼 함수 **********************************/
|
|
/*배송비 툴팁 popmodal 정보 조회*/
|
|
const fn_select_dlvy_info = () => {
|
|
|
|
fn_set_dlvy_info_cn()
|
|
fn_pop_Modal('#deliveryFeeInfo', '#deliveryFeeInfoContent');
|
|
|
|
}
|
|
|
|
/*배송비 툴팁 내용 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="popModalContent__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="popModalContent__deliveryFeeInfo__item">
|
|
<div class="popModalContent__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);
|
|
|
|
}
|
|
|
|
/*최대혜택가 툴팁 popmodal 정보 조회*/
|
|
const fn_select_dc_price = () => {
|
|
|
|
fn_pop_Modal('#dcPrice', '#dcPriceContent');
|
|
|
|
}
|
|
|
|
|
|
/*리뷰 혜택 popmodal 정보 조회*/
|
|
const fn_select_rvw_bnef_info = () => {
|
|
$.ajax({
|
|
type: "post",
|
|
url: "/sopmal/goods/selectRvwBnefInfo",
|
|
success: function (data) {
|
|
// console.log("fn_select_rvw_bnef_info data: "+data);
|
|
const jsonString = JSON.stringify(data.resBody.result);
|
|
// console.log("fn_select_rvw_bnef_info jsonString: "+jsonString);
|
|
fn_set_rvw_bnef_cn(jsonString);
|
|
fn_pop_Modal("#reviewBenefit", "#reviewBenefitContent");
|
|
}
|
|
});
|
|
}
|
|
/*마일리지 , 적용*/
|
|
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);
|
|
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}
|
|
`;
|
|
$(".popModalContent__reviewBenefit").html(rvwBnefInfoCn);
|
|
}
|
|
/************************************* 상품 노출 여부 *********************************/
|
|
$(document).ready(function () {
|
|
|
|
//광고유입이 아니거나 ep 유입이 아닌 경우
|
|
if(fn_is_empty($('#adTraceCd').val()) && fn_is_empty($('#epCd').val())){
|
|
//상품 미노출일경우
|
|
if($('#expsrDvCd').val() ==='02'){
|
|
alert('미노출 상품입니다.')
|
|
history.back();
|
|
}
|
|
|
|
//노출기간이 아닐 경우
|
|
if($('#expsrDvCd').val() ==='03' && $('#expsrDvAt').val() ==='N'){
|
|
alert('노출기간이 아닙니다.')
|
|
history.back();
|
|
}
|
|
}
|
|
|
|
})
|
|
/************************************* 상품 노출 여부 끝 *********************************/
|
|
|
|
/************************************* 이벤트배너 관련 *********************************/
|
|
|
|
//타임이벤트시 시간 떨어뜨리는 함수
|
|
$(window).on('load',function () {
|
|
|
|
//페이지 로드시 라디오 버튼 체크 해제
|
|
$('input[type="radio"]').prop('checked', false);
|
|
|
|
//타임이벤트 카운트다운
|
|
const evtTmeExpsrAt = $('#evtTmeExpsrAt').val()
|
|
if(evtTmeExpsrAt ==='Y'){
|
|
startCountdown();
|
|
}
|
|
|
|
// 네이버페이 검수용 'npay2024' 아이디만 검수 가능하도록 하기위해 임시
|
|
const mbrId = $('#mbrId').val();
|
|
if(mbrId == "npay2024"){
|
|
$('#_naverPayArea').show();
|
|
}else{
|
|
if("${naverPayYn}" == "N" || $('#_salesPrice').text().trim() === "0${curUnit}"){
|
|
$('#_naverPayArea').hide();
|
|
}else{
|
|
$('#_naverPayArea').show();
|
|
}
|
|
}
|
|
});
|
|
//타임 이벤트 카운트 다운
|
|
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) {
|
|
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);
|
|
|
|
}
|
|
|
|
|
|
/************************************* 이벤트배너 관련 끝 *********************************/
|
|
|
|
//재고옵션 다음 셀렉트 옵션 값 호출
|
|
$(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() === '0'){
|
|
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);
|
|
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);
|
|
}
|
|
});
|
|
|
|
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);
|
|
}
|
|
});
|
|
|
|
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')
|
|
}
|
|
}
|
|
}
|
|
});
|
|
})
|
|
/************************************* 리뷰 함수 ********************************************/
|
|
/****리뷰 폼******/
|
|
const fn_rvw_form_event = () => {
|
|
fn_remove_img(".photoPage", ".photoPageImg", "page");
|
|
fn_remove_img(".storePickPage", ".storePickPageImg", "page");
|
|
// "다른 구매자들은 이렇게 평가했어요" 슬라이드
|
|
$(".productReview__reviewStats").slick({
|
|
slidesToShow: 1,
|
|
arrows: true,
|
|
dots: true,
|
|
speed: 0,
|
|
draggable: false,
|
|
});
|
|
|
|
// "스토어 PICK" 슬라이드(베스트 후기)
|
|
var storePickSlider = $(".storePick__slick");
|
|
var storePickCounter = $(".storePick__counter");
|
|
|
|
storePickSlider.slick({
|
|
slidesToShow: 1,
|
|
arrows: true,
|
|
dots: false,
|
|
speed: 0,
|
|
draggable: false,
|
|
prevArrow: $(".storePick__controls__btn.prev"),
|
|
nextArrow: $(".storePick__controls__btn.next"),
|
|
});
|
|
|
|
storePickSlider.on("init reInit afterChange", function (event, slick, currentSlide) {
|
|
var i = (currentSlide ? currentSlide : 0) + 1;
|
|
storePickCounter.html("<em>" + i + "</em>" + " / " + slick.slideCount);
|
|
});
|
|
|
|
var initialSlide = storePickSlider.slick("slickCurrentSlide") + 1;
|
|
storePickCounter.html("<em>" + initialSlide + "</em>" + " / " + storePickSlider.slick("getSlick").slideCount);
|
|
|
|
|
|
/*****************************************************
|
|
스토어 Pick 리뷰 상세보기
|
|
*****************************************************/
|
|
|
|
$('.storePick__box').on('click', function (e) {
|
|
const bbscttInnb = $(this).find(".bbscttInnb").val();
|
|
fn_select_store_pick(bbscttInnb);
|
|
})
|
|
|
|
/*****************************************************
|
|
포토 리뷰 더보기
|
|
*****************************************************/
|
|
|
|
$('.photoReview__thumbs__moreImage').on('click', function (e) {
|
|
fn_select_photo_rvw("tot");
|
|
});
|
|
|
|
/*****************************************************
|
|
포토 리뷰 상세보기
|
|
*****************************************************/
|
|
|
|
$('.photoReview__thumbs__image').on('click', function (e) {
|
|
const bbscttInnb = $(this).val();
|
|
const index = $(this).index(".photoReview__thumbs__image");
|
|
fn_select_photo_rvw("dtl", index);
|
|
});
|
|
}
|
|
|
|
/*리뷰 조회 폼 jsp호출*/
|
|
const fn_select_rvw_form = (pageIndex) => {
|
|
let goodsInnb = $("#goodsInnb").val();
|
|
let sortDv = "recent";
|
|
//리뷰 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_rvw_form_event();
|
|
/*리뷰 리스트 조회*/
|
|
fn_select_rvw(pageIndex, 'N');
|
|
}
|
|
});
|
|
}
|
|
/*리뷰 리스트 이벤트*/
|
|
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").html());
|
|
let img = temp.find("img");
|
|
temp = $('<div>').html($(this).find(".listCn").text());
|
|
$(this).find(".listCn").text(temp.text().trim());
|
|
|
|
|
|
//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 ="/pc/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); //이미지 영역 찾아서 첫번째 요소에 이미지 갯수 추가
|
|
}
|
|
});
|
|
// 유저리뷰 접기/펼치기
|
|
$(".userReviewItem__more").click(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("접기");
|
|
}
|
|
});
|
|
|
|
$(".userReviewItem__reviewImage").click(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("접기");
|
|
}
|
|
});
|
|
|
|
$('.userReviewItem__reviewText img').each(function () {
|
|
$(this).attr('width', '200');
|
|
$(this).attr('height', '200');
|
|
});
|
|
|
|
/*전체,포토,한달리뷰 버튼 이벤트*/
|
|
$(".userReview__tab__btn").on("click", function () {
|
|
//클릭 대상에 'current'클래스 추가 ,클릭 대상 제외한 탭 클래스 'current'클래스 삭제
|
|
$(this).addClass("current");
|
|
$(".userReview__tab__btn").not(this).removeClass("current");
|
|
|
|
//keyword reset
|
|
$(".userReview__hashtag__btn").each(function () {
|
|
$(this).removeClass("selected");
|
|
});
|
|
$("#hiddenSrch").val("");
|
|
|
|
fn_select_rvw(1, 'N');
|
|
});
|
|
|
|
/*정렬 버튼 이벤트*/
|
|
$(".sortDv").on("click", function () {
|
|
//클릭 대상에 'current'클래스 추가 ,클릭 대상 제외한 탭 클래스 'current'클래스 삭제
|
|
$(this).addClass("current");
|
|
$(".sortDv").not(this).removeClass("current");
|
|
|
|
//keyword reset
|
|
$(".userReview__hashtag__btn").each(function () {
|
|
$(this).removeClass("selected");
|
|
});
|
|
$("#hiddenSrch").val("");
|
|
|
|
fn_select_rvw(1, 'N');
|
|
});
|
|
|
|
/*해쉬태그 버튼 이벤트*/
|
|
$(".userReview__hashtag__btn").on("click", function () {
|
|
//seletec 클래스 존재 유무에 따른 클래스 삭제 또는 추가
|
|
if ($(this).hasClass("selected")) {
|
|
$(this).removeClass("selected");
|
|
} else {
|
|
$(this).addClass("selected");
|
|
}
|
|
fn_select_rvw(1, 'N');
|
|
});
|
|
}
|
|
/*리뷰 조회
|
|
* tabIdx = 탭 버튼 인덱스
|
|
* sortIdx = 정렬 버튼 인덱스
|
|
* pagingAt = 페이징 버튼 클릭 여부 (없을시 페이징으로 인한 함수 호출)
|
|
* */
|
|
const fn_select_rvw = (pageIndex, pagingAt) => {
|
|
let tabVal = $(".userReview__tab__btn.current").val();
|
|
let sortVal = $(".sortDv.current").val();
|
|
|
|
let tabIdx = $(".userReview__tab__btn.current").index();
|
|
let sortIdx = $(".sortDv.current").index(".sortDv");
|
|
|
|
let keywordValArr = [];
|
|
$(".userReview__hashtag__btn").each(function () {
|
|
if ($(this).hasClass("selected")) {
|
|
keywordValArr.push($(this).val());
|
|
}
|
|
});
|
|
|
|
if (!tabVal) {
|
|
tabVal = 'all';
|
|
tabIdx = 0;
|
|
}
|
|
|
|
if (!sortVal) {
|
|
sortVal = 'rank';
|
|
sortIdx = 0;
|
|
}
|
|
|
|
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": tabVal,
|
|
"sortDv": sortVal,
|
|
"pageUnit" :pageUnit,
|
|
"srchKeywordArr": keywordValArr
|
|
},
|
|
success: function (data) {
|
|
if ($(".userReview").html()) {
|
|
$(this).empty();
|
|
}
|
|
$(".userReview").html(data);
|
|
let listText = $(".userReviewItem__reviewText");
|
|
|
|
/*리뷰 건수 탭 버튼에 set*/
|
|
fn_set_cnt_rvw();
|
|
|
|
const hiddenSrchVal = $("#hiddenSrch").val();
|
|
|
|
/*'current' or 'selected'클래스 부여*/
|
|
fn_add_class(tabIdx, sortIdx, hiddenSrchVal);
|
|
|
|
/*이벤트 부여*/
|
|
fn_rvw_list_event();
|
|
|
|
/*한달 리뷰 사용 여부에 따른 hide처리*/
|
|
const MtRvwWritngPosblAt = $("#MtRvwWritngPosblAt").val();
|
|
if (MtRvwWritngPosblAt === 'N') {
|
|
$("#mtDl").hide(); //한달 리뷰 마일리지 안내 문구
|
|
$("#mtBtn").hide();
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
/*리뷰 건수 탭 버튼에 set*/
|
|
const fn_set_cnt_rvw = () => {
|
|
/*전체, 포토, 한달 total값 set*/
|
|
let cntBbsctt = $("#cntBbsctt").val();
|
|
let photoRvwCnt = $("#photoRvwCnt").val();
|
|
let mtRvwCnt = $("#mtRvwCnt").val();
|
|
/*전체 건수 set*/
|
|
$("#totCnt").text(cntBbsctt);
|
|
|
|
/*tab별 건수 set*/
|
|
cntBbsctt =cntBbsctt + "건"
|
|
photoRvwCnt =photoRvwCnt + "건"
|
|
mtRvwCnt =mtRvwCnt + "건"
|
|
|
|
$("#allCnt").html(cntBbsctt);
|
|
$("#photoCnt").html(photoRvwCnt);
|
|
$("#mtCnt").html(mtRvwCnt);
|
|
}
|
|
|
|
/*'current' or 'selected'클래스 부여*/
|
|
const fn_add_class = (tabIdx, sortIdx, hiddenSrchVal) => {
|
|
/*'current' 부여*/
|
|
/*탭*/
|
|
$(".userReview__tab__btn").eq(tabIdx).addClass("current");
|
|
/*정렬*/
|
|
$(".sortDv").eq(sortIdx).addClass("current");
|
|
/*검색키워드*/
|
|
const hashTag = $(".userReview__hashtag__btn");
|
|
if (hiddenSrchVal) {
|
|
let keywords = hiddenSrchVal.replace(/[\[\]]/g, '').split(',');
|
|
hashTag.each(function () {
|
|
$(this).removeClass("selected");
|
|
let targetObj = $(this);
|
|
keywords.forEach(function (keyword) {
|
|
// Trim whitespace from keyword to ensure accurate comparison
|
|
if (targetObj.val() === keyword.trim()) {
|
|
targetObj.addClass("selected");
|
|
}
|
|
});
|
|
});
|
|
}
|
|
}
|
|
|
|
const fn_store_pick_event = (index) => {
|
|
//파일리스트 있으면 img 지우고 cn에 img 있으면 set
|
|
let target = $(".storePickModal");
|
|
target.each(function (idx) {
|
|
//파일 있는지 확인
|
|
let imgAt = $(this).find(".storePickImage").find("img").length;
|
|
//내용에서 img 요소 찾기
|
|
let imgList = [];
|
|
let img = $(this).find(".storePickCn").find("img");
|
|
//img 요소에 src 뽑기
|
|
img.each(function () {
|
|
imgList.push($(this).attr("src"));
|
|
$(this).remove();
|
|
});
|
|
|
|
//파일이 없는데 imgList에 값이 있으면(내용에 이미지가 있으면) 값 set
|
|
if (imgAt === 0 && imgList.length > 0) {
|
|
let list = ``;
|
|
let filCnt = imgList.length;
|
|
imgList.forEach(function (img) {
|
|
list += ` <div class="storePickDetail__thumbs__item listImage">
|
|
<img src="\${img}"
|
|
onerror = 'this.src ="/pc/images/image_placeholder.png"'
|
|
alt="">
|
|
</div>`;
|
|
});
|
|
$(this).find(".storePickImage").append(list); //이미지영역에 img 영역 추가
|
|
let image = new Image();
|
|
image.src = imgList[0];
|
|
$(this).siblings(".storePickMainImg").append(image); //메인 이미지에 첫번째 이미지 append
|
|
$(this).find(".listImage").eq(0).addClass("current");
|
|
} else if (imgAt === 0 && imgList.length === 0) { //파일이 아예 없으면 메인 영역 remove.
|
|
$(this).siblings(".storePickMainImg").remove();
|
|
}
|
|
});
|
|
|
|
|
|
// 스토어 Pick 리뷰 슬라이드 이동 시, 현재 리뷰 번호 표시
|
|
$('.storePickDetail__slide').on('afterChange', function (event, slick, currentSlide) {
|
|
var currentIndex = currentSlide + 1;
|
|
var totalNum = slick.slideCount;
|
|
$('.storePickDetail__currentIndex').text(currentIndex);
|
|
});
|
|
|
|
// 스토어 Pick 리뷰 썸네일 이미지 클릭 시, 메인 이미지 변경
|
|
$('.storePickDetail__thumbs__item').on('click', function () {
|
|
var $activeImage = $(this).closest('.storePickDetail__thumbs').find('.storePickDetail__thumbs__item.current');
|
|
if ($activeImage.length) {
|
|
$activeImage.removeClass('current');
|
|
}
|
|
|
|
$(this).addClass('current');
|
|
var imgSrc = $(this).find('img').attr('src');
|
|
|
|
$(this).closest('.storePickDetail__item').find('.storePickDetail__mainImage img').attr('src', imgSrc);
|
|
});
|
|
|
|
// 우측 상단 "전체보기" 보이기
|
|
$('.storePickDetail__top__seeAll').show();
|
|
|
|
// 전체 목록 숨김
|
|
$('.storePickGallery').removeClass('active');
|
|
|
|
// 리뷰 상세 보이기
|
|
$('.storePickDetail__slide').addClass('active');
|
|
|
|
// 기존 슬라이드 제거
|
|
$('#storePick-pop').on($.modal.BEFORE_OPEN, function (event, modal) {
|
|
if ($('.storePickDetail__slide').hasClass('slick-initialized')) {
|
|
$('.storePickDetail__slide').slick('unslick');
|
|
}
|
|
});
|
|
|
|
// 슬라이드 옵션
|
|
$('#storePick-pop').off($.modal.OPEN).on($.modal.OPEN, function (event, modal) {
|
|
// 리뷰 슬라이드 생성
|
|
$('.storePickDetail__slide').slick({
|
|
slidesToShow: 1,
|
|
slidesToScroll: 1,
|
|
arrows: true,
|
|
fade: true,
|
|
infinite: false,
|
|
speed: 0,
|
|
draggable: false,
|
|
initialSlide: index, // 클릭한 이미지의 인덱스로 이동
|
|
});
|
|
|
|
// 현재 리뷰 번호 표시
|
|
var currentIndex = $('.storePickDetail__slide').slick('slickCurrentSlide') + 1;
|
|
var totalNum = $('.storePickDetail__slide').slick('getSlick').slideCount;
|
|
$('.storePickDetail__currentIndex').text(currentIndex);
|
|
});
|
|
}
|
|
|
|
/*스토어 픽 모달 호출*/
|
|
const fn_select_store_pick = (bbscttInnb) => {
|
|
fn_close_modal("storePick-pop");
|
|
let goodsInnb = $("#goodsInnb").val();
|
|
let sortDv = "rank";
|
|
$.ajax({
|
|
type: "post",
|
|
url: "/sopmal/goods/selectGoodsDtlStorePickDtl",
|
|
data: {
|
|
"goodsInnb": goodsInnb,
|
|
"sortDv": sortDv,
|
|
"bbscttInnb": bbscttInnb
|
|
},
|
|
success: function (data) {
|
|
const storePickModal = $("#storePickModal");
|
|
if (storePickModal.html()) {
|
|
storePickModal.empty();
|
|
}
|
|
storePickModal.html(data);
|
|
|
|
$("#storePick-pop").modal();
|
|
|
|
//클릭한 게시글로 slick 클래스 부여
|
|
const bbscttInnbObj = $(".storePickDetail__item").find(".bbscttInnb");
|
|
let idx = -1;
|
|
bbscttInnbObj.each(function (i) {
|
|
if ($(this).val() === bbscttInnb) {
|
|
idx = i;
|
|
return false;
|
|
}
|
|
});
|
|
|
|
fn_store_pick_event(idx);
|
|
}
|
|
});
|
|
}
|
|
/************************************* 포토 리뷰 상세보기 모달 이벤트 함수 **********************************/
|
|
const fn_photo_rvw_modal_event = (targetEvt, index) => {
|
|
$('.photoReviewDetail__reviewText').each(function (idx) {
|
|
// .photoReviewDetail__reviewText 요소의 다음 형제 요소 .photoReviewDetail__thumbs를 찾습니다.
|
|
const targetDiv = $(this).next('.photoReviewDetail__thumbs');
|
|
// .photoReviewDetail__reviewText 요소 내의 모든 img 태그를 찾습니다.
|
|
let img = '';
|
|
let temp = $('<div>').html($(this).text());
|
|
let imgCnt = [];
|
|
temp.find('img').each(function () {
|
|
// img 태그를 targetDiv로 이동시킵니다.
|
|
let imgSrc = $(this).prop('outerHTML');
|
|
img += '<div class="photoReviewDetail__thumbs__item">' + imgSrc + '</div>';
|
|
imgCnt.push(imgSrc);
|
|
$(this).remove();
|
|
});
|
|
$(this).text(temp.text().trim());
|
|
//파일이 없는 경우 img 추출해서 파일영역에 삽입
|
|
if ($(this).siblings(".photoReviewDetail__thumbs").find(".photoReviewDetail__thumbs__item").length === 0) {
|
|
targetDiv.append(img);
|
|
let targetImg = $(this).siblings(".photoReviewDetail__thumbs").find(".photoReviewDetail__thumbs__item").eq(0);
|
|
targetImg.addClass("current");
|
|
$(this).closest(".photoReviewDetail__item").find(".photoReviewDetail__mainImage").html(targetImg.html());
|
|
let gallaryImgEle = targetImg.html();
|
|
let gallaryImg = `\${gallaryImgEle}
|
|
<span class="photoReviewGallery__num">\${imgCnt.length}</span>`;
|
|
$(".photoReviewGallery__image").eq(idx).html(gallaryImg);
|
|
}
|
|
});
|
|
|
|
// 기존 슬라이드 제거
|
|
$('#photoReview-pop').on($.modal.BEFORE_OPEN, function (event, modal) {
|
|
if ($('.photoReviewDetail__slide').hasClass('slick-initialized')) {
|
|
$('.photoReviewDetail__slide').slick('unslick');
|
|
}
|
|
});
|
|
|
|
// 슬라이드 옵션
|
|
$('#photoReview-pop').off($.modal.OPEN).on($.modal.OPEN, function (event, modal) {
|
|
// 리뷰 슬라이드 생성
|
|
$('.photoReviewDetail__slide').slick({
|
|
slidesToShow: 1,
|
|
slidesToScroll: 1,
|
|
arrows: true,
|
|
fade: true,
|
|
infinite: false,
|
|
speed: 0,
|
|
draggable: false,
|
|
initialSlide: parseInt(index), // 클릭한 이미지의 인덱스로 이동
|
|
});
|
|
|
|
// 현재 리뷰 번호 표시
|
|
var currentIndex = $('.photoReviewDetail__slide').slick('slickCurrentSlide') + 1;
|
|
let totalNum = '<fmt:formatNumber value="${resultMap.bbscttInfo.photoCnt}" pattern="#,###"/>';
|
|
$('.photoReviewDetail__currentIndex').text(currentIndex);
|
|
$('.photoReviewDetail__totalNum').text(totalNum)
|
|
});
|
|
|
|
|
|
/*클릭한 주체가 '상세'보기 일 경우*/
|
|
if (targetEvt === 'dtl') {
|
|
// 우측 상단 "전체보기" 보이기
|
|
$('.photoReviewDetail__top__seeAll').show();
|
|
|
|
// 전체 목록 숨김
|
|
$('.photoReviewGallery').removeClass('active');
|
|
|
|
// 리뷰 상세 보이기
|
|
$('.photoReviewDetail__slide').addClass('active');
|
|
|
|
const text = $(".photoReviewDetail__reviewText");
|
|
}
|
|
|
|
/*클릭한 주체가 '전체'보기 일 경우*/
|
|
if (targetEvt === 'tot') {
|
|
// 포토&동영상 "더보기" 클릭 시, 상세팝업 열기
|
|
// 우측 상단 "전체보기" 숨김
|
|
$('.photoReviewDetail__top__seeAll').hide();
|
|
|
|
// 리뷰 상세 숨김
|
|
$('.photoReviewDetail__slide').removeClass('active');
|
|
|
|
// 전체 목록 보이기
|
|
$('.photoReviewGallery').addClass('active');
|
|
|
|
// 목록에서 파란 테두리 없애기
|
|
$('.photoReviewGallery__image').removeClass('current');
|
|
}
|
|
|
|
// 포토&동영상 리뷰 슬라이드 이동 시, 현재 리뷰 번호 표시
|
|
$('.photoReviewDetail__slide').on('afterChange', function (event, slick, currentSlide) {
|
|
var currentIndex = currentSlide+1;
|
|
var totalNum = slick.slideCount;
|
|
$('.photoReviewDetail__currentIndex').text(currentIndex);
|
|
});
|
|
|
|
// 포토&동영상 상세팝업 우측 상단 "전체보기" 클릭 시, 전체 목록 보이기
|
|
$('.photoReviewDetail__top__seeAll').on('click', function () {
|
|
|
|
// 우측 상단 "전체보기" 숨김
|
|
$('.photoReviewDetail__top__seeAll').hide();
|
|
|
|
// 리뷰 상세 숨김
|
|
$('.photoReviewDetail__slide').removeClass('active');
|
|
|
|
// 전체 목록 보이기
|
|
$('.photoReviewGallery').addClass('active');
|
|
|
|
// 목록에서 현재 인덱스에 해당하는 이미지에 current 클래스 추가(파란 테두리 표시)
|
|
var currentIndex = $('.photoReviewDetail__slide').slick('slickCurrentSlide');
|
|
$('.photoReviewGallery__image').removeClass('current');
|
|
$('.photoReviewGallery__item').eq(currentIndex).find('.photoReviewGallery__image').addClass('current');
|
|
});
|
|
|
|
|
|
|
|
// 각 리뷰별 첫번째 이미지에 current 클래스 추가
|
|
$('.photoReviewDetail__thumbs').each(function () {
|
|
$(this).find('.photoReviewDetail__thumbs__item').eq(0).addClass('current');
|
|
});
|
|
|
|
/*****************************************************
|
|
포토&동영상 리뷰 썸네일 이미지 클릭 시, 메인 이미지 변경
|
|
*****************************************************/
|
|
$(document).on('click','.photoReviewDetail__thumbs__item', function () {
|
|
var $activeImage = $(this).closest('.photoReviewDetail__thumbs').find('.photoReviewDetail__thumbs__item.current');
|
|
if ($activeImage.length) {
|
|
$activeImage.removeClass('current');
|
|
}
|
|
|
|
$(this).addClass('current');
|
|
var imgSrc = $(this).find('img').attr('src');
|
|
|
|
$(this).closest('.photoReviewDetail__item').find('.photoReviewDetail__mainImage img').attr('src', imgSrc);
|
|
});
|
|
|
|
/*********************************************************
|
|
전체보기에서 이벤트 함수
|
|
***********************************************************/
|
|
// 전체 목록에서 이미지 클릭 시, 해당 이미지로 이동
|
|
$(document).on('click' ,'.photoReviewGallery__image', function (e) {
|
|
e.preventDefault();
|
|
var index = $(this).closest('.photoReviewGallery__item').index();
|
|
|
|
// 우측 상단 "전체보기" 보이기
|
|
$('.photoReviewDetail__top__seeAll').show();
|
|
|
|
// 전체 목록 숨김
|
|
$('.photoReviewGallery').removeClass('active');
|
|
|
|
// 리뷰 상세 보이기
|
|
$('.photoReviewDetail__slide').addClass('active');
|
|
|
|
// 슬라이드 초기화
|
|
$('.photoReviewDetail__slide').slick('refresh');
|
|
|
|
// 리뷰 슬라이드 이동
|
|
$('.photoReviewDetail__slide').slick('slickGoTo', index);
|
|
|
|
// 현재 리뷰 번호 표시
|
|
var currentIndex = parseInt($('.photoReviewDetail__slide').slick('slickCurrentSlide')) + 1;
|
|
var totalNum = $('.photoReviewDetail__slide').slick('getSlick').slideCount;
|
|
$('.photoReviewDetail__currentIndex').text(currentIndex);
|
|
});
|
|
}
|
|
/*포토리뷰 갤러리 이동*/
|
|
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": "29",
|
|
"pageIndex": pageIndex,
|
|
"srchDv": "photo",
|
|
"sortDv": sortDv
|
|
},
|
|
success: function (data) {
|
|
fn_close_modal("photoReview-pop");
|
|
const modalDiv = $("#modalDiv");
|
|
if (modalDiv.html()) {
|
|
modalDiv.empty();
|
|
}
|
|
modalDiv.html(data);
|
|
fn_photo_rvw_modal_event(trgtEvent, index);
|
|
$("#photoReview-pop").modal();
|
|
fn_infinite_scroll(fn_select_ajax_photo,'','#last');
|
|
}
|
|
});
|
|
}
|
|
|
|
/*포토리스트 이미지 추가 ajax*/
|
|
const fn_select_ajax_photo = () => {
|
|
let goodsInnb = $("#goodsInnb").val();
|
|
let sortDv = "recent";
|
|
let pageIndex = $("#photoPageIndex").val();
|
|
pageIndex = parseInt(pageIndex) + 1;
|
|
$.ajax({
|
|
type: "post",
|
|
url: "/sopmal/goods/selectGoodsDtlRvwPhotoAjax",
|
|
data: {
|
|
"goodsInnb": goodsInnb,
|
|
"pageUnit": "29",
|
|
"pageIndex": pageIndex,
|
|
"srchDv": "photo",
|
|
"sortDv": sortDv
|
|
},
|
|
success: function (data) {
|
|
$("#photoPageIndex").val(pageIndex);
|
|
fn_create_photo_html(data);
|
|
}
|
|
});
|
|
}
|
|
|
|
/*ajax로 호출한 data html 처리 후 append*/
|
|
const fn_create_photo_html = (data) => {
|
|
const result = JSON.parse(data.resBody.result);
|
|
const photoList = result.resultList.photoList;
|
|
const photoByBbsctt = result.resultList.photoByBbsctt;
|
|
|
|
if (photoList !== null) {
|
|
if ($('.photoReviewDetail__slide').hasClass('slick-initialized')) {
|
|
$('.photoReviewDetail__slide').slick('unslick');
|
|
}
|
|
|
|
photoList.forEach(function (item) {
|
|
/*갤러리 내용*/
|
|
let gallaryCn = '';
|
|
/*상세 html*/
|
|
let dtlHtml = '';
|
|
/*상세 내 내용*/
|
|
let dtlCn = '';
|
|
/*상세 내 파일 리스트*/
|
|
let photoByBbscttCn = '';
|
|
/*상세 내 메인 사진*/
|
|
let dtlMainPhoto = '';
|
|
/*cdn주소*/
|
|
let cdnurl = '${cdnurl}';
|
|
// 임시 DOM 요소를 사용하여 HTML 파싱
|
|
let tempDiv = document.createElement('div');
|
|
tempDiv.innerHTML = item.cn;
|
|
|
|
// 모든 <img> 태그 추출
|
|
let imgTags = tempDiv.getElementsByTagName('img');
|
|
/************************************파일 html 생성 시작************************************/
|
|
let index = 0;
|
|
photoByBbsctt.forEach(function (item1) {
|
|
//파일이 있는지 확인
|
|
if (item.bbscttInnb === item1.bbscttInnb) {
|
|
if (index === 0) {
|
|
//파일 영역
|
|
photoByBbscttCn += `<div class="photoReviewDetail__thumbs__item current">
|
|
<img src="\${cdnurl}\${item1.filCours}\${item1.sysFilNm}" alt="">
|
|
</div>`;//포토 상세 파일 영역에 추가 첫 파일에 current 추가
|
|
|
|
//메인 파일 영역
|
|
dtlMainPhoto = ` <div class="photoReviewDetail__mainImage">
|
|
<img src="\${cdnurl}\${item1.filCours}\${item1.sysFilNm}" alt="">
|
|
</div>`;
|
|
|
|
//갤러리 파일 영역에 추가
|
|
gallaryCn = `<li class="photoReviewGallery__item">
|
|
<button type="button" class="photoReviewGallery__image">
|
|
<img src="\${cdnurl}\${item1.filCours}\${item1.sysFilNm}" alt="">
|
|
<span class="photoReviewGallery__num">\${item.fileCnt}</span>
|
|
</button>
|
|
</li>`;
|
|
index = index + 1;
|
|
} else {
|
|
//파일 영역
|
|
photoByBbscttCn += `<div class="photoReviewDetail__thumbs__item">
|
|
<img src="\${cdnurl}\${item1.filCours}\${item1.sysFilNm}" alt="">
|
|
</div>`;
|
|
index = index + 1;
|
|
}
|
|
} else {//파일이 없으면
|
|
if (imgTags.length > 0) {
|
|
let filCnt = imgTags.length; //파일의 개수
|
|
imgTags.forEach(function (img) {
|
|
let imgEle = img.outerHTML;
|
|
if (index === 0) {
|
|
//포토 상세 파일 영역에 추가 첫 파일에 current 추가
|
|
photoByBbscttCn += `<div class="photoReviewDetail__thumbs__item current">
|
|
\${imgEle}
|
|
</div>`;
|
|
|
|
//파일 메인 영역에 추가
|
|
dtlMainPhoto = `<div class="photoReviewDetail__mainImage">\${imgEle}</div>`;
|
|
|
|
//갤러리 파일 영역에 추가
|
|
gallaryCn = `<li class="photoReviewGallery__item">
|
|
<button type="button" class="photoReviewGallery__image">
|
|
\${imgEle}
|
|
<span class="photoReviewGallery__num">\${filCnt}</span>
|
|
</button>
|
|
</li>`;
|
|
index = index + 1;
|
|
} else { //포토 상세 파일 영역에 추가
|
|
photoByBbscttCn += `<div class="photoReviewDetail__thumbs__item">
|
|
\${imgEle}
|
|
</div>`;
|
|
index = index + 1;
|
|
}
|
|
});
|
|
}
|
|
}
|
|
//있는데 내용에 img 요소가 있으면 삭제
|
|
if (imgTags.length > 0) {
|
|
imgTags.forEach(function (img) {
|
|
// <img> 요소 삭제
|
|
Array.from(imgTags).forEach(img => img.remove());
|
|
});
|
|
}
|
|
});
|
|
// img 요소를 삭제한 html 추출
|
|
dtlCn = tempDiv.innerHTML;
|
|
/************************************분기처리 시작************************************/
|
|
/*별점 점수 정수형 변환*/
|
|
let evlScore = '';
|
|
evlScore = parseInt(item.evlScore);
|
|
/*게시판 설정 중 비추천 사용시 html 삽입*/
|
|
let nonRecomentCnt = ``;
|
|
if (item.bbscttEvlRecomendStep === '02') {
|
|
nonRecomentCnt = `<button class="userReviewItem__like userReviewItem__like--dislike" tabindex="0"
|
|
onclick = "fn_update_bbsctt_recomend('nonrecommend', '\${item.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"></path>
|
|
</svg>
|
|
<em class= 'recommendCnt'>\${item.nonrecomendCnt}\</em>
|
|
</button>`;
|
|
}
|
|
/*게시판 설정 중 평가 사용시 html 삽입*/
|
|
let recomendAt = ``;
|
|
if (item.bbscttEvlUseAt === 'Y') {
|
|
recomendAt = `<div class="photoReviewDetail__rightBottom">
|
|
<span class="photoReviewDetail__reviewAsk">리뷰가 도움이 되었나요?</span>
|
|
<button class="userReviewItem__like" value= "\${item.bbscttInnb}"
|
|
onclick = "fn_update_bbsctt_recomend('recommend', '\${item.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"></path>
|
|
</svg>
|
|
<em class= 'recommendCnt'>\${item.recomendCnt}</em>
|
|
</button>
|
|
\${nonRecomentCnt}
|
|
</div>`;
|
|
}
|
|
/************************************분기처리 종료**************************************/
|
|
dtlHtml = `<div class="photoReviewDetail__item">
|
|
\${dtlMainPhoto}
|
|
<div class="photoReviewDetail__right">
|
|
<div class="photoReviewDetail__rightTop">
|
|
<div class="photoReviewDetail__userImage">
|
|
<img src="/pc/images/icon_user-info.png" alt="">
|
|
</div>
|
|
<div class="photoReviewDetail__top__info">
|
|
<div class="reviewStars__wrapper--sm">
|
|
<div class="reviewStars star-\${evlScore}"></div>
|
|
<span class="reviewStars__num">\${evlScore}</span>
|
|
</div>
|
|
<div class="photoReviewDetail__misc">
|
|
<span class="photoReviewDetail__misc__id">\${item.regusrId}</span>
|
|
<span class="photoReviewDetail__misc__date">\${item.registDt}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="photoReviewDetail__reviewText">\${dtlCn}</div>
|
|
<div class="photoReviewDetail__thumbs">
|
|
\${photoByBbscttCn}
|
|
</div>
|
|
\${recomendAt}
|
|
</div>
|
|
</div>`;
|
|
$(".photoReviewDetail__item").last().after(dtlHtml);//상세 내 내용 추가
|
|
$(".photoReviewGallery__item").last().after(gallaryCn);
|
|
});
|
|
|
|
|
|
// 리뷰 슬라이드 생성
|
|
$('.photoReviewDetail__slide').slick({
|
|
arrows: true,
|
|
fade: true,
|
|
infinite: false,
|
|
speed: 0,
|
|
draggable: false,
|
|
});
|
|
|
|
}
|
|
}
|
|
/****************리뷰***************/
|
|
/************리뷰공통함수************/
|
|
const fn_remove_img = (tagetEle, actionDv, divDv) => {
|
|
$(tagetEle).each(function (idx) {
|
|
if ($(this).find(".npayBbscttSnb").val() === "") { //네이버페이 아님
|
|
let temp = $(this).find(".bbscttCn").text();
|
|
temp = $('<div>').html(temp);
|
|
let cn = temp.text().trim();
|
|
temp = temp.find("img");
|
|
|
|
// 추가 로직
|
|
if (tagetEle === '.storePickPage' && fn_is_empty($(this).closest(".storePick__body").find(".storePickPageImg").html())) {
|
|
// 이미지 개수 확인
|
|
let imgCount = temp.length; // 이미지 개수
|
|
// 첫 번째 이미지 소스 가져오기
|
|
let firstImgSrc;
|
|
if (imgCount > 0) {
|
|
firstImgSrc = temp.eq(0).attr("src"); // 첫 번째 img의 src 속성
|
|
let html = `<div class="storePick__reviewImage storePickPageImg">`;
|
|
html += `<img src="\${firstImgSrc}" alt="" style = "width:80px; height: 80px;"/>`;
|
|
html += `<span class="storePick__reviewImage__num">\${imgCount}</span></div>`;
|
|
$(this).closest(".storePick__body").prepend(html);
|
|
}
|
|
}
|
|
|
|
temp.each(function () {
|
|
$(this).remove();
|
|
});
|
|
$(this).find(".bbscttCn").text(cn);
|
|
} else {//네이버페이일경우
|
|
//포토리뷰일경우
|
|
let temp = $(this).find(".bbscttCn").text(); // HTML을 가져옵니다
|
|
temp = $('<div>').html(temp); // HTML을 jQuery 객체로 변환
|
|
|
|
let cn = temp.text().trim(); // 텍스트를 가져오고 공백 제거
|
|
|
|
let filList = []; // 이미지 src를 저장할 배열
|
|
temp.find("img").each(function () {
|
|
filList.push($(this).attr("src")); // img src를 배열에 추가
|
|
$(this).remove(); // 이미지 제거
|
|
});
|
|
|
|
// 이제 텍스트와 이미지 src 리스트를 사용할 수 있습니다.
|
|
let filCnt = filList.length;
|
|
if (divDv === 'page') {
|
|
if (filCnt > 0) {
|
|
let image = new Image();
|
|
image.src = filList[0];
|
|
image.onerror = function () {
|
|
image.src = "/pc/images/image_placeholder.png";
|
|
};
|
|
if (tagetEle === '.photoPage') {
|
|
$(tagetEle).eq(idx).before(image);//포토에 이미지 추가
|
|
$(actionDv).eq(idx).text(filCnt); //포토 숫자에 숫자 추가
|
|
} else if (tagetEle === '.photoPickPage'){
|
|
let imgHtml = image.outerHTML;
|
|
let imgDiv = `<div class="photoPick__reviewImage storePickPageImg">
|
|
\${imgHtml}
|
|
<span class="photoPick__reviewImage__num">
|
|
\${filCnt}
|
|
</span>
|
|
</div>`;
|
|
$(tagetEle).eq(idx).before(imgDiv); //스토어 픽 숫자 추가
|
|
}else {
|
|
let imgHtml = image.outerHTML;
|
|
let imgDiv = `<div class="storePick__reviewImage storePickPageImg">
|
|
\${imgHtml}
|
|
<span class="storePick__reviewImage__num">
|
|
\${filCnt}
|
|
</span>
|
|
</div>`;
|
|
$(tagetEle).eq(idx).before(imgDiv); //스토어 픽 숫자 추가
|
|
}
|
|
} else { //파일이 없을 때
|
|
if (tagetEle !== '.photoPage') { //스토어픽 리뷰 중 포토 리뷰아닌 경우
|
|
$(actionDv).eq(idx).empty();
|
|
}
|
|
}
|
|
}
|
|
$(this).find(".bbscttCn").text(cn);
|
|
}
|
|
});
|
|
}
|
|
/*리뷰 기능*/
|
|
/*게시글 추천,비추천*/
|
|
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 함수 (C,R,U,D 순)*********************************/
|
|
/********************************************************************
|
|
* 등록폼 호출 (C)
|
|
********************************************************************/
|
|
const fn_pop_regist = (goodsInnb) => {
|
|
$.ajax({
|
|
type: "post",
|
|
data: {
|
|
authDv: "REGIST",
|
|
reqUrl: "modal",
|
|
bbsId: "goods_qna",
|
|
goodsInnb: goodsInnb,
|
|
listAt: "list",
|
|
},
|
|
url: "/sopmal/csc/selectBbscttAuth",
|
|
success: function (data) {
|
|
/*모달중복제거*/
|
|
fn_close_modal("qna-pop-regist");
|
|
fn_close_modal("qna-update-pop");
|
|
$("#modalDiv").html(data);
|
|
$("#qna-pop-regist").modal();
|
|
}
|
|
});
|
|
}
|
|
/***************************************
|
|
조회 관련 (R)
|
|
***************************************/
|
|
/*qna 조회 jsp호출*/
|
|
const fn_select_qna = (pageIndex) => {
|
|
let goodsInnb = $("#goodsInnb").val();
|
|
let srchitmInnb = $("#srchitmInnb option:selected").val();
|
|
//qna 조회 div
|
|
let qnaDiv = $("#productQnA");
|
|
if (!pageIndex) {
|
|
$('#qnaPageIndex').val(1);
|
|
} else {
|
|
$('#qnaPageIndex').val(pageIndex);
|
|
}
|
|
|
|
let pageUnit = $("#qnaPageUnit").val();
|
|
if (pageUnit === 'undefined') {
|
|
pageUnit = 20;
|
|
}
|
|
$.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);
|
|
}
|
|
});
|
|
}
|
|
/*******************************************************
|
|
수정 관련 (u)
|
|
***********************************************************/
|
|
//게시글 수정 폼 이동
|
|
const fn_move_qaUpdt = (bbscttInnb, bbsId) => {
|
|
$.ajax({
|
|
type: "post",
|
|
url: "/sopmal/csc/selectBbscttUpdtPopupForm",
|
|
data: {
|
|
"bbsId": bbsId,
|
|
"bbscttInnb": bbscttInnb,
|
|
"listAt": "list"
|
|
},
|
|
success: function (data) {
|
|
/*모달중복제거*/
|
|
fn_close_modal("qna-update-pop");
|
|
fn_close_modal("qna-pop-regist");
|
|
$("#modalDiv").html(data);
|
|
$("#qna-update-pop").modal();
|
|
}
|
|
});
|
|
}
|
|
|
|
/*******************************************************
|
|
삭제 관련 (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 () {
|
|
alert('<spring:message code="success.common.delete"/>');
|
|
$("#closeDelBtn").click();
|
|
fn_select_qna(1);
|
|
}
|
|
});
|
|
}
|
|
|
|
/*********************************************************
|
|
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 = '${cdnurl}';
|
|
fileInfo.forEach(function (file) {
|
|
img += `<img src="\${cdnurl}\${file.filCours}\${file.sysFilNm}" alt="\${file.orginlFilNm}"/>`;
|
|
});
|
|
$(".tr-foldable").eq(idx).find(".file").html(img);
|
|
}
|
|
});
|
|
}
|
|
|
|
/**************************************************************
|
|
qna 이벤트 함수
|
|
*************************************************************/
|
|
const fn_qna_event = () => {
|
|
/*분류 조회*/
|
|
$(document).on("change", "#srchitmInnb",function () {
|
|
fn_select_qna(1);
|
|
});
|
|
|
|
/*등록 폼*/
|
|
$(document).on('click', "#registBtn", function () {
|
|
const goodsInnb = $("#goodsInnb").val();
|
|
fn_pop_regist(goodsInnb);
|
|
});
|
|
|
|
//비밀번호 확인
|
|
$(document).on("click", "#pwChkBtn", function () {
|
|
fn_check_password();
|
|
});
|
|
|
|
//상세 조회
|
|
$(document).on("click",".tr-foldable-trigger",function (e) {
|
|
const idx = $(this).index(".tr-foldable-trigger");
|
|
const bbsctt = $(this).attr("bbsctt");
|
|
const bbsId = $(this).attr("bbs-id");
|
|
if(!$(this).next(".tr-foldable").hasClass("active")){
|
|
fn_select_bbsctt_dtl_move_posbl_at(bbsctt,bbsId,idx);
|
|
}else{
|
|
$(this).next(".tr-foldable").removeClass("active");
|
|
}
|
|
});
|
|
|
|
//삭제 모달 버튼
|
|
$(document).on('click','.deleteBtn', function () {
|
|
const bbscttInnb = $(this).val();
|
|
$('#qna-delete').modal();
|
|
$('#alertDelBtn').val(bbscttInnb);
|
|
});
|
|
|
|
//삭제 버튼
|
|
$(document).on('click','#alertDelBtn',function () {
|
|
const bbscttInnb = $(this).val();
|
|
const bbsId = "goods_qna";
|
|
fn_delete_bbsctt(bbscttInnb, bbsId);
|
|
});
|
|
|
|
//수정 폼 이동 버튼
|
|
$(document).on('click','.updateBtn',function () {
|
|
const bbscttInnb = $(this).parent().find("input[name='bbscttInnb']").val(); //해당 게시글 고유번호
|
|
const answAt = $(this).attr("answ-at"); //해당 게시글 답글 여부
|
|
const bbsId = "goods_qna"; //게시판 아이디
|
|
/*답변 유무에 따라 수정 여부 판단*/
|
|
if (answAt === 'N') {
|
|
fn_move_qaUpdt(bbscttInnb, bbsId);
|
|
} else {
|
|
$("#qna-edit").modal(); //수정 불가 모달
|
|
}
|
|
});
|
|
}
|
|
//상세보기 가능 판단
|
|
const fn_select_bbsctt_dtl_move_posbl_at = (bbsctt,bbsId,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);
|
|
fn_branch_bbsctt_posble(data,idx);
|
|
}
|
|
});
|
|
}
|
|
|
|
//상세보기 가능 판단 여부에 따른 분기 처리
|
|
const fn_branch_bbsctt_posble = (data,idx) => {
|
|
const moveAt = data.result.moveAt;
|
|
const vo = data.vo;
|
|
if(moveAt === 'YES' || vo.pwCnfirmAt === 'Y'){//본인 o
|
|
fn_make_bbsctt_dtl_cn(data,idx);
|
|
}else if(moveAt === 'OTHER'){//다른이용자 o
|
|
$("#reject_modi_pop").modal();
|
|
}else if(moveAt === 'LOGIN'){//로그인 o
|
|
$("#login_alert_pop").modal();
|
|
}else {//비밀번호
|
|
$("#confirm_pw_pop").modal();
|
|
$("#modalBbscttInnb").val(vo.bbscttInnb);
|
|
$("#modalIdx").val(idx);
|
|
}
|
|
}
|
|
|
|
//상세보기 가능 판단 여부에 따른 분기 처리
|
|
const fn_make_bbsctt_dtl_cn = (data,idx) => {
|
|
if(data.dtl){
|
|
const dtl = data.dtl.dataMap;
|
|
const dtlCn = data.dtlCn.cn;
|
|
const sj = dtl.sj;
|
|
const answ = data.answ;
|
|
let cn = `<td colspan="5">
|
|
<div class="tr-foldable__content">
|
|
<div class="tr-foldable__qna">
|
|
<i class="icon icon_qna-q"></i>
|
|
<div class="tr-foldable__qna-content">
|
|
<p class="tr-foldable__qna-title">\${sj}</p>
|
|
<div class="cn" style="white-space: pre-wrap;">\${dtlCn}</div>
|
|
<div class="file">`;
|
|
const cdnurl = '${cdnurl}';
|
|
if(data.dtl.fileInfo != null){
|
|
data.dtl.fileInfo.forEach(function(file){
|
|
cn += `<img src = '\${cdnurl}\${file.filCours}\${file.sysFilNm}' onerror ="this.src='/pc/images/image_placeholder.png'" alt="">`;
|
|
});
|
|
}
|
|
cn += ` </div>
|
|
</div>
|
|
</div>
|
|
<div class="tr-foldable__qna">
|
|
<i class="icon icon_qna-a"></i>
|
|
<div class="tr-foldable__qna-content">`;
|
|
let answAt;
|
|
if(answ != null){
|
|
const answSj = answ.sj;
|
|
const answCn = answ.cn;
|
|
cn += `<p class="tr-foldable__qna-title answSj">
|
|
\${answSj}
|
|
</p>
|
|
<div class="cn ck-content">
|
|
\${answCn}
|
|
</div>`;
|
|
answAt = 'Y';
|
|
}else{
|
|
cn += `답변 등록 중 입니다.`;
|
|
answAt = 'N';
|
|
}
|
|
cn += ` </div>
|
|
</div>
|
|
<div class="tr-foldable__btn-container">
|
|
<input type="hidden" name="answAt" value='\${answAt}'>
|
|
<input type="hidden" name="bbscttInnb" value='\${dtl.bbscttInnb}'>
|
|
<button type='button' class='btn theme outline updateBtn' answ-at='\${answAt}'>수정</button>
|
|
<button type='button' class='btn outline deleteBtn' value='\${dtl.bbscttInnb}'>삭제</button>
|
|
</div>
|
|
</div>
|
|
</td>`;
|
|
var trFoldable = $(".tr-foldable");
|
|
trFoldable.eq(idx).html(cn);
|
|
trFoldable.not(trFoldable.eq(idx)).removeClass("active");
|
|
trFoldable.eq(idx).toggleClass("active");
|
|
}
|
|
}
|
|
/********************************************************************
|
|
* 비밀번호 확인 (조회)
|
|
* success시
|
|
* 아코디언형 : 해당 내용 노출
|
|
********************************************************************/
|
|
const fn_check_password = () => {
|
|
const password = $("#modalPw").val();
|
|
if (password === '') {
|
|
alert("비밀번호를 입력해주세요");
|
|
} 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) {
|
|
$("#closeBtn").click();
|
|
fn_select_bbsctt_dtl_move_posbl_at($("#modalBbscttInnb").val(),'goods_qna',$("#modalIdx").val(),'Y');
|
|
} else {
|
|
alert("비밀번호가 일치하지 않습니다.");
|
|
}
|
|
$("#modalPw").val("");
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
/************************************* 반품/교환정보 함수 *********************************/
|
|
/*반품/교환 정보 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);
|
|
$("#infoCn").addClass("ck-content");
|
|
}
|
|
});
|
|
}
|
|
/************************************* 끝 *********************************/
|
|
|
|
|
|
//장바구니 중복 상품 추가 confirm 모달 버튼 true/false 반환
|
|
function showConfirmModal() {
|
|
return new Promise(function(resolve, reject) {
|
|
<%--상품 중복담기 모달--%>
|
|
const modal =`
|
|
<div id="modal-error-confirm-add-cart-duplicate" class="modal alert">
|
|
<div class="alert-content">
|
|
<p class="alert-content__text--sm">
|
|
장바구니에 선택한 상품이 있습니다. <br/> 장바구니에 추가하시겠습니까?
|
|
</p>
|
|
</div>
|
|
<div class="alert-btn-container">
|
|
<a type="button" class="alert-btn alert-btn--confirm" id="modal-error-confirm-yesButton" rel="modal:close">예</a>
|
|
<a type="button" class="alert-btn alert-btn--confirm" id="modal-error-confirm-noButton" rel="modal:close">아니오</a>
|
|
</div>
|
|
</div>`
|
|
$('#modal-error-confirm-add-cart-duplicate').remove()
|
|
$('#modal-error-confirm-add-cart-duplicate-div').html(modal)
|
|
$('#modal-error-confirm-add-cart-duplicate').modal()
|
|
|
|
|
|
|
|
$('#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 반환
|
|
});
|
|
});
|
|
}
|
|
|
|
/************************************ 네이버페이 시작 *********************************/
|
|
/* NPay구매 버튼 */
|
|
const buy_nc = () => {
|
|
if($('#hiddenForm')!= null){
|
|
$('#hiddenForm').remove()
|
|
}
|
|
|
|
//상품 선택 확인
|
|
if(productArr.length <= 0){
|
|
alert('상품옵션을 선택해 주세요');
|
|
return;
|
|
}
|
|
|
|
//추가구성옵션 - 필수추가구성옵션 있는지 확인
|
|
var values = $('input[name="productDetailInfo__additionalSelect__otpnEssntlAt"]').map(function() {
|
|
return $(this).val();
|
|
}).get();
|
|
|
|
if(values.includes('Y')){
|
|
var isAddedOptnEssntlAt = productArr.some(function (item) {
|
|
return item[6] === 'Y'
|
|
});
|
|
|
|
if(!isAddedOptnEssntlAt){
|
|
alert('필수추가옵션을 선택해 주세요');
|
|
return;
|
|
}
|
|
}
|
|
|
|
const hiddenForm = document.createElement('form');
|
|
hiddenForm.name = 'hiddenForm';
|
|
hiddenForm.id = 'hiddenForm';
|
|
|
|
// 1. 상품 GOODS_INNB
|
|
// 2. 선택한 상품옵션 고유번호(GOODS_OPTN_INNB)
|
|
// 3. 배송비정책 => 상품고유번호, 쇼핑몰코드
|
|
// 4. 선택한 추가상품 상품옵션 고유번호(GOODS_OPTN_INNB)
|
|
let goodsInnb = $("#goodsInnb").val();
|
|
let goodsNm = '${resultMap.goodsDtl.goodsNm}';
|
|
let npayImgUrl = $("#npayImgUrl").val();
|
|
const sesionId = fn_is_empty($('#sesionId').val()) ? "" : $('#sesionId').val();
|
|
// 옵션 정보
|
|
const sopmalCd = fn_is_empty($('#sopmalCd').val()) ? "" : $('#sopmalCd').val();
|
|
|
|
// 상품 정보
|
|
//$(hiddenForm).append($('<input/>', {type: 'hidden', name: 'goodsInnb', value: goodsInnb}));
|
|
//$(hiddenForm).append($('<input/>', {type: 'hidden', name: 'goodsNm', value: goodsNm}));
|
|
//$(hiddenForm).append($('<input/>', {type: 'hidden', name: 'goodsImgUrl', value: npayImgUrl}));
|
|
$(hiddenForm).append($('<input/>', {type: 'hidden', name: 'refererUrl', value: window.location.href}));
|
|
|
|
|
|
|
|
|
|
const formData = new FormData();
|
|
let prodInx = 0;
|
|
|
|
|
|
|
|
|
|
|
|
//상품 타이틀, 수량, 가격 저장하는 배열
|
|
//let productArr = []; // 배열 순서 -> [상품명, 수량, 1개당 가격, 상품 총가격(=수량x개당가격), 추가정보(색상, 사이즈등)]
|
|
for (let idx in productArr) {
|
|
fn_create_input('hidden', "sopmalCd", sopmalCd, hiddenForm); // 쇼핑몰코드
|
|
fn_create_input('hidden', "goodsInnb", productArr[idx][6], hiddenForm); // 상품코드
|
|
fn_create_input('hidden', "goodsOptnInnb", productArr[idx][4], hiddenForm); // 상품옵션 고유번호
|
|
fn_create_input('hidden', "optnTy", productArr[idx][5], hiddenForm); // 옵션유형
|
|
fn_create_input('hidden', "qy", productArr[idx][1], hiddenForm); // 수량
|
|
fn_create_input('hidden', "price", productArr[idx][2], hiddenForm); // 가격
|
|
fn_create_input('hidden', "totalPrice", productArr[idx][3], hiddenForm); // 총가격
|
|
}
|
|
|
|
$(hiddenForm).attr('method', 'post');
|
|
$(hiddenForm).attr('action', '<c:url value="/sopmal/npay/nPayOrdr"/>');
|
|
$(hiddenForm).appendTo('body');
|
|
$(hiddenForm).submit();
|
|
$(hiddenForm).remove();
|
|
}
|
|
|
|
function wishlist_nc(){
|
|
|
|
let goodsInnb = $("#goodsInnb").val();
|
|
let goodsNm = '${resultMap.goodsDtl.goodsNm}';
|
|
let sopmalCd = '${sopmallInfo.shopInfo.sopmalCd}';
|
|
|
|
const formData = new FormData();
|
|
formData.append("goodsInnb", goodsInnb);
|
|
formData.append("sopmalCd", sopmalCd);
|
|
formData.append("goodsNm", goodsNm);
|
|
|
|
$.ajax({
|
|
type: 'post',
|
|
url: '<c:url value="/sopmal/npay/zzim" />',
|
|
data: formData,
|
|
processData: false,
|
|
contentType: false,
|
|
success: function (data) {
|
|
if (data.resBody != null) {
|
|
var result = JSON.parse(data.resBody.result);
|
|
|
|
if (result.message === 'success') {
|
|
var zzimurl = "https://test-pay.naver.com/customer/wishlistPopup.nhn?SHOP_ID=" + result.shopId + "&ITEM_ID=" + result.prodSeqs;
|
|
window.open(zzimurl,"zzim","scrollbars=yes,width=400,height=267");
|
|
|
|
}else{
|
|
alert("찜 등록에 실패하였습니다.");
|
|
}
|
|
}
|
|
}
|
|
});
|
|
}
|
|
/************************************ 네이버페이 종료 *********************************/
|
|
|
|
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())
|
|
});
|
|
|
|
$.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 마이페이지에서 확인가능합니다.');
|
|
location.reload();
|
|
}
|
|
});
|
|
|
|
}
|
|
|
|
|
|
//상품 조회 로그
|
|
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_open_relate_goods_modal = function (modalDivSltr, modalSlrt, url, param, callback) {
|
|
const submitType = 'POST';
|
|
|
|
$.ajax({
|
|
type: submitType,
|
|
contentType: 'application/json',
|
|
url: url,
|
|
data: param,
|
|
success: function (data) {
|
|
|
|
//함께하면 좋은상품 팝업 오픈시 초기화
|
|
cartProductArr = []
|
|
//callback함수가 없을 경우 default로 지정된 영역에 모달팝업 화면을 교체하고 화면 로딩
|
|
if (!callback) {
|
|
$(modalSlrt).remove();
|
|
$(modalDivSltr).html(data);
|
|
$(modalSlrt).modal();
|
|
} else {
|
|
callback(data);
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
//함께 구매하기 버튼 클릭시
|
|
$(document).on('click','#addGoodsDtl',function () {
|
|
$('#addGoodsDtl').prop('disabled', true)
|
|
//상품 선택 확인
|
|
if(cartProductArr.length <= 0){
|
|
alert('상품옵션을 선택해 주세요');
|
|
$('#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[7] === 'Y'
|
|
});
|
|
|
|
if(!isAddedOptnEssntlAt){
|
|
alert('필수추가옵션을 선택해 주세요');
|
|
$('#addGoodsDtl').prop('disabled', false)
|
|
return;
|
|
}
|
|
}
|
|
|
|
//상품 상세 화면에 추가
|
|
addUniqueProducts(productArr, cartProductArr)
|
|
|
|
updateTotalPriceProd() // 함께하면 좋은 상품 가격 더하기
|
|
fn_close_modal('related-product-popUp')
|
|
$('#addGoodsDtl').prop('disabled', false)
|
|
|
|
if($('#cartCountContainer')!=null){
|
|
$('#cartCountContainer').remove()
|
|
}
|
|
})
|
|
|
|
//함께하면 좋은상품 prodctArr에 추가시 중복제거
|
|
function addUniqueProducts(productArr, cartProductArr) {
|
|
// cartProductArr의 중복 제거
|
|
var uniqueCartProductArr = cartProductArr.filter(function(cartProduct, index, self) {
|
|
return index === self.findIndex(function(t) {
|
|
return t[4] === cartProduct[4]; // 각 배열의 첫 번째 요소(goodsOptnInnb) 기준으로 중복 제거
|
|
});
|
|
});
|
|
|
|
// uniqueCartProductArr를 반복하면서 productArr에 없는 상품을 추가
|
|
uniqueCartProductArr.forEach(function(cartProduct) {
|
|
var existsInProductArr = productArr.some(function(product) {
|
|
return product[4] === cartProduct[4]; // 각 배열의 첫 번째 요소(goodsOptnInnb) 비교
|
|
});
|
|
|
|
// productArr에 존재하지 않는 경우에만 추가
|
|
if (!existsInProductArr) {
|
|
$('#countContainer').append($('#cartCountContainer').find('.productDetailInfo__count'))
|
|
productArr.push(cartProduct);
|
|
}
|
|
});
|
|
}
|
|
|
|
//함께하면 좋은 상품 - 메인 상품 상세에 가격 더하기
|
|
function updateTotalPriceProd() {
|
|
var totalPrice = 0; // 총 상품금액
|
|
for (var i = 0; i < productArr.length; i++) {
|
|
totalPrice += productArr[i][3]; // 배열의 총 가격을 더함
|
|
}
|
|
$(".productDetailInfo__priceTotal__totalPriceNum").text(addComma(totalPrice)); // 총 상품금액 텍스트 변경
|
|
}
|
|
|
|
/*최대혜택가 툴팁*/
|
|
$(document).on('click', '#dcPrice',function () {
|
|
fn_select_dc_price()
|
|
})
|
|
|
|
|
|
//함께하면 좋은 상품 - 재고옵션 다음 셀렉트 옵션 값 호출
|
|
$(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' : $('#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);
|
|
|
|
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);
|
|
}
|
|
});
|
|
|
|
|
|
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);
|
|
}
|
|
});
|
|
|
|
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>
|
|
|
|
<%--셀렉트박스 상품 선택시 disabled 일 경우에도 상품 비활성화 상태로 보이도록 css 재설정--%>
|
|
<style>
|
|
.productDetailInfo__additionalSelect__item .select-box .nice-select .list li.disabled {
|
|
display: block;
|
|
}
|
|
|
|
/*타임이벤트 생성시 메인 이미지 밑 썸네일이 겹치는 현상으로 height 수정 */
|
|
.productDetailGallery__current{
|
|
height: auto;
|
|
}
|
|
</style>
|
|
|
|
<body>
|
|
<%-- 공통 Header --%>
|
|
<jsp:include page="/WEB-INF/views/comm/Header.jsp"/>
|
|
<!-- 메인 컨텐츠 영역 -->
|
|
<!-- 메인 컨텐츠 영역 -->
|
|
<main>
|
|
<div class="sub-wrapper">
|
|
<div class="sub-content">
|
|
<input type="hidden" value="${resultMap.goodsDtl.goodsInnb}" id="goodsInnb"/>
|
|
<input type="hidden" value="${resultMap.goodsDtl.ctgryNm}" id="ctgryNm"/>
|
|
<input type="hidden" value="${resultMap.goodsDtl.expsrDvCd}" id="expsrDvCd"/>
|
|
<input type="hidden" id="expsrDvAt" value="${resultMap.goodsDtl.expsrDvAt}"/>
|
|
<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="dlvyGroupInnb" value="${resultMap.goodsDtl.dlvyGroupInnb}"/>
|
|
<input type="hidden" id="wslistInnb" value="${resultMap.goodsDtl.wslistInnb}"/>
|
|
<input type="hidden" id="evtTmeExpsrAt" name="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="goodsSttusCd" value="<c:out value="${resultMap.goodsDtl.goodsSttusCd}"/>">
|
|
<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}"><%--goodsQna 페이지 unit--%>
|
|
<input type="hidden" id="rvwPageUnit" value="${resultMap.bbscttInfo.bbsInfo.rvwPageUnit}"><%--rvw 페이지 unit--%>
|
|
<div class="productDetail" id="productDetail">
|
|
<div class="productDetailTop">
|
|
<div class="productDetailTop__left">
|
|
<div class="productDetailGallery">
|
|
<c:if test="${not empty resultMap.goodsDtl.img}">
|
|
<!-- 상품 메인 이미지 -->
|
|
<c:forTokens items="${resultMap.goodsDtl.img}" var="imgList" delims="|" varStatus="mainImgStatus">
|
|
<c:if test="${mainImgStatus.index eq '0'}">
|
|
<div class="productDetailGallery__current">
|
|
<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" name="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>
|
|
<div class="product-unit-image">
|
|
<c:if test="${resultMap.goodsDtl.goodsSttusCd eq '02'}">
|
|
<div class="sold-out">
|
|
<span>SOLD OUT</span>
|
|
</div>
|
|
</c:if>
|
|
<c:if test="${resultMap.goodsDtl.goodsSttusCd eq '03'}">
|
|
<div class="sold-out">
|
|
<span>${resultMap.goodsDtl.goodsSttusNm}</span>
|
|
</div>
|
|
</c:if>
|
|
<img id="featured" src="<c:out value="${ cdnurl }"/>${imgList}" alt="상품이미지" onerror = "this.src='/pc/images/image_placeholder.png'">
|
|
</div>
|
|
</div>
|
|
</c:if>
|
|
</c:forTokens>
|
|
<!-- 상품 썸네일 이미지 -->
|
|
<div class="productDetailGallery__thumbs">
|
|
<button id="thumbsLeft"
|
|
class="productDetailGallery__arrow productDetailGallery__arrow--left">
|
|
</button>
|
|
<div class="productDetailGallery__slider">
|
|
<c:forTokens items="${resultMap.goodsDtl.img}" var="thumbsImgList" delims="|" varStatus="thumbsStatus">
|
|
<div class="productDetailGallery__item <c:if test="${thumbsStatus.index eq '0'}">active</c:if> ">
|
|
<img src="<c:out value="${cdnurl}${thumbsImgList}"/>" alt="상품이미지" onerror = "this.src='/pc/images/image_placeholder.png'">
|
|
</div>
|
|
</c:forTokens>
|
|
</div>
|
|
<button id="thumbsRight"
|
|
class="productDetailGallery__arrow productDetailGallery__arrow--right">
|
|
</button>
|
|
</div>
|
|
</c:if>
|
|
</div>
|
|
</div>
|
|
<div class="productDetailTop__right">
|
|
<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:choose>
|
|
<c:when test="${fn:contains(iconNm,'-')}">
|
|
<span class="product-badge product-badge--lg ${fn:toLowerCase(iconNm)}"> ${fn:toUpperCase(fn:replace(iconNm, '-', ' '))}</span>
|
|
</c:when>
|
|
<c:otherwise>
|
|
<span class="product-badge product-badge--lg ${fn:toLowerCase(iconNm)}"> ${fn:toUpperCase(iconNm)}</span>
|
|
</c:otherwise>
|
|
</c:choose>
|
|
</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 class="productDetailInfo__miscControls__btn" id="productMyWish">
|
|
<i class="icon icon_wish <c:if test="${resultMap.goodsDtl.isWish eq '1'}">active</c:if>"></i>
|
|
<span class="visually-hidden">위시리스트 추가</span>
|
|
</button>
|
|
<button class="productDetailInfo__miscControls__btn" id="snsShare">
|
|
<i class="icon icon_share"></i>
|
|
<span class="visually-hidden">공유하기</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="productDetailInfo__price">
|
|
<div class="productDetailInfo__price__sale">
|
|
<c:choose>
|
|
<c:when test="${resultMap.goodsDtl.pricRplcWordsUseAt ne 'Y'}">
|
|
<span class="percent"> <c:out value=" ${resultMap.goodsDtl.slePercent}"/> <span class="priceUnit">%</span></span>
|
|
</c:when>
|
|
<c:otherwise>
|
|
<a style="color: #e34747;" href="${resultMap.goodsDtl.pcPricRplcLink}" <c:if test="${resultMap.goodsDtl.pricRplcLinkBrwsrDvCd eq'01'}"> target="_blank" </c:if> >
|
|
<span class="percent" style="font-size: x-large; font-weight: bold"> <c:out value="${resultMap.goodsDtl.pricRplcWords}"/> </span>
|
|
</a>
|
|
</c:otherwise>
|
|
</c:choose>
|
|
</div>
|
|
<c:if test="${resultMap.goodsDtl.pricRplcWordsUseAt ne 'Y'}">
|
|
<div class="productDetailInfo__price__price">
|
|
<span class="productDetailInfo__price__original">
|
|
<span class="comma"><fmt:formatNumber value="${resultMap.goodsDtl.cnsmrpric}"/> </span><span
|
|
class="priceUnit"></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>
|
|
</c:if>
|
|
</div>
|
|
</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="width: 600px; 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}">
|
|
<a href = "javascript:void(0);" class="productCoupon__right"
|
|
id="couponList">
|
|
<i class="icon icon_download"></i>
|
|
<span class="productCoupon__download">쿠폰받기</span>
|
|
</a>
|
|
</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>
|
|
<p>택배(주문시 결제)
|
|
<c:if test="${ resultMap.goodsDtl.amtCndUseAt eq 'N'}">
|
|
<button id="deliveryFeeInfo" class="infoBtn"><i
|
|
class="icon icon_question"></i><span
|
|
class="visually-hidden">정보</span>
|
|
</button>
|
|
</c:if>
|
|
</p>
|
|
<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.amtCndUseAt eq 'Y'}">
|
|
<button id="deliveryFeeInfo" class="infoBtn"><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:if test="${not empty resultMap.goodsOptList}">
|
|
<dl>
|
|
<dt>구매시 적립혜택</dt>
|
|
<%--구입시 해당 상품 마일리지 적립 금액--%>
|
|
<dd>
|
|
<em><span class="comma"><fmt:formatNumber value="${(resultMap.goodsDtl.mlgAccmlAmt + resultMap.goodsDtl.gradMlgAccmlAmt + resultMap.goodsDtl.evtMlgAccmlAmt) }"/></span>
|
|
<span class="priceUnit">${curUnit}</span></em>
|
|
<c:if test = "${resultMap.goodsDtl.rvwWritngPosblAt eq 'Y'}">
|
|
· 리뷰작성시 적립
|
|
<button id="reviewBenefit" class="infoBtn">
|
|
<i class="icon icon_question"></i>
|
|
<span class="visually-hidden">정보</span>
|
|
</button>
|
|
</c:if>
|
|
</dd>
|
|
</dl>
|
|
</c:if>
|
|
</c:if>
|
|
</div>
|
|
<c:if test="${resultMap.goodsDtl.goodsSttusCd eq '01'}">
|
|
<c:if test="${resultMap.goodsDtl.buttonRplcWordsUseAt ne 'Y'}"> <%--구매대상자 버튼 제한 걸릴경우 미노출--%>
|
|
<c:choose>
|
|
<c:when test="${not empty resultMap.goodsOptList}">
|
|
<c:if test="${not empty resultMap.goodsOptList.normalOptnList}">
|
|
<div class="productDetailInfo__option">
|
|
<span class="productDetailInfo__option__title"><c:out value="${resultMap.goodsOptList.normalOptnList[0].optnNm1}"/> </span>
|
|
<div class="productDetailInfo__option__box">
|
|
<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="productDetailInfo__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" value="${goodsOpt01.optnVal1}" <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}"/>
|
|
<c:if test="${goodsOpt01.disableAt eq 'Y'}"> <span>(품절)</span></c:if>
|
|
</div>
|
|
<div class="productDetailInfo__option__right">
|
|
<span class="productDetailInfo__option__price"><span class="comma"><c:out value="${goodsOpt01.slepric}"/></span> <span class="priceUnit"> ${curUnit}</span></span>
|
|
<span class="productDetailInfo__option__monthly-payment"><c:out value="${goodsOpt01.optnInfo}"/></span>
|
|
</div>
|
|
</c:if>
|
|
</div>
|
|
</c:if>
|
|
</c:if>
|
|
</c:forEach>
|
|
</div>
|
|
</div>
|
|
</c:if>
|
|
<c:if test="${not empty resultMap.goodsOptList.invntryOptnList}">
|
|
<div class="productDetailInfo__additionalSelect" id="additionalSelect">
|
|
<span class="productDetailInfo__option__title">옵션선택(필수)</span>
|
|
<div class="productDetailInfo__additionalSelect__inner">
|
|
<div class="productDetailInfo__additionalSelect__item">
|
|
<c:if test="${not empty resultMap.goodsOptList.invntryOptnList[0].optnNm1}">
|
|
<span class="productDetailInfo__additionalSelect__category"><c:out value="${resultMap.goodsOptList.invntryOptnList[0].optnNm1}"/> </span>
|
|
<div class="select-box">
|
|
<select id="selectInvntryOptn1" name="selectInvntryOptn">
|
|
<option value="" disabled selected><c:out value="선택"/></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>
|
|
</div>
|
|
<div class="productDetailInfo__additionalSelect__item">
|
|
<c:if test="${not empty resultMap.goodsOptList.invntryOptnList[0].optnNm2}">
|
|
<span class="productDetailInfo__additionalSelect__category"><c:out value="${resultMap.goodsOptList.invntryOptnList[0].optnNm2}"/> </span>
|
|
<div class="select-box">
|
|
<select id="selectInvntryOptn2" name="selectInvntryOptn">
|
|
<option value="" disabled selected><c:out value="선택"/></option>
|
|
</select>
|
|
</div>
|
|
</c:if>
|
|
</div>
|
|
<div class="productDetailInfo__additionalSelect__item">
|
|
<c:if test="${not empty resultMap.goodsOptList.invntryOptnList[0].optnNm3}">
|
|
<span class="productDetailInfo__additionalSelect__category"><c:out value="${resultMap.goodsOptList.invntryOptnList[0].optnNm3}"/> </span>
|
|
<div class="select-box">
|
|
<select id="selectInvntryOptn3" name="selectInvntryOptn">
|
|
<option value="" disabled selected><c:out value="선택"/></option>
|
|
</select>
|
|
</div>
|
|
</c:if>
|
|
</div>
|
|
<div class="productDetailInfo__additionalSelect__item">
|
|
<c:if test="${not empty resultMap.goodsOptList.invntryOptnList[0].optnNm4}">
|
|
<span class="productDetailInfo__additionalSelect__category"><c:out value="${resultMap.goodsOptList.invntryOptnList[0].optnNm4}"/> </span>
|
|
<div class="select-box">
|
|
<select id="selectInvntryOptn4" name="selectInvntryOptn">
|
|
<option value="" disabled selected><c:out value="선택"/></option>
|
|
</select>
|
|
</div>
|
|
</c:if>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</c:if>
|
|
<c:if test="${not empty resultMap.goodsOptList.addedOptnList}">
|
|
<div class="productDetailInfo__additionalSelect" id="moreItemsSelect">
|
|
<span class="productDetailInfo__additionalSelect__title">추가구성</span>
|
|
<div class="productDetailInfo__additionalSelect__inner">
|
|
<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="productDetailInfo__additionalSelect__item">
|
|
<span class="productDetailInfo__additionalSelect__category"><c:out value="${goodsOpt03.optnNm1}"/> </span>
|
|
<input type="hidden" name="productDetailInfo__additionalSelect__otpnEssntlAt" <c:if test="${goodsOpt03.optnEssntlAt eq 'Y'}"> value="Y"</c:if>/>
|
|
</c:if>
|
|
<c:if test="${resultMap.goodsOptList.addedOptnList[optList03.index-1].optnNm1 ne goodsOpt03.optnNm1}">
|
|
<div class="select-box">
|
|
<select title="${goodsOpt03.OptnInfo}" name="selectAddedOptn">
|
|
<option value="" disabled selected><c:out value="${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>
|
|
</div>
|
|
</c:if>
|
|
</c:if>
|
|
</c:forEach>
|
|
</div>
|
|
</div>
|
|
</c:if>
|
|
</c:when>
|
|
<c:otherwise>
|
|
<%--옵션 없을 경우 빈값--%>
|
|
</c:otherwise>
|
|
</c:choose>
|
|
</c:if>
|
|
</c:if>
|
|
</div>
|
|
<%-- <c:if test="${resultMap.goodsDtl.sopmalCd eq 'DL'}">--%>
|
|
<%-- <div class="productDetailInfo__confirmOption" id="prodConfirmOptBtn">--%>
|
|
<%-- <button class="btn lg outline">입력한 정보 선택</button>--%>
|
|
<%-- </div>--%>
|
|
<%-- </c:if>--%>
|
|
<%-- 선택한 상품옵션--%>
|
|
<div class="countContainer" id="countContainer">
|
|
</div>
|
|
<c:if test="${resultMap.goodsDtl.goodsSttusCd eq '01'}">
|
|
<c:if test="${resultMap.goodsDtl.buttonRplcWordsUseAt ne 'Y'}"> <%--구매대상자 버튼 제한 걸릴경우 미노출--%>
|
|
<c:if test="${not empty resultMap.GoodsRelateInfo}">
|
|
<div class="productDetailInfo__relatedProduct">
|
|
<p class="productDetailInfo__relatedProduct__title">함께하면 좋은 상품</p>
|
|
<div class="productDetailInfo__relatedProduct__inner">
|
|
<c:forEach var="relateInfo" items="${resultMap.GoodsRelateInfo}">
|
|
<c:if test="${relateInfo.expsrDvCd eq '01' and relateInfo.goodsSttusCd eq '01' }">
|
|
<div class="product-unit">
|
|
<div class="product-unit-image">
|
|
<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="상품 이미지">
|
|
</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>
|
|
</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>
|
|
<a href="javascript:void(0);"
|
|
class="productDetailInfo__relatedProduct__btn btn sm outline"
|
|
onclick="fn_open_relate_goods_modal
|
|
('#relatedGoodsOrderDiv', '#related-product-popUp', '/sopmal/goods/selectRelateGoodsPopup',
|
|
JSON.stringify({'goodsInnb' : `${relateInfo.goodsInnb}`}))">
|
|
함께 구매
|
|
</a>
|
|
</div>
|
|
</c:if>
|
|
</c:forEach>
|
|
</div>
|
|
</div>
|
|
</c:if>
|
|
</c:if>
|
|
</c:if>
|
|
<c:if test="${resultMap.goodsDtl.buttonRplcWordsUseAt ne 'Y'}"> <%--구매대상자 버튼 제한 걸릴경우 미노출--%>
|
|
<div class="productDetailInfo__priceTotal">
|
|
<span class="productDetailInfo__priceTotal__text">총 상품금액</span>
|
|
<span class="productDetailInfo__priceTotal__price"><span
|
|
class="comma"></span><span class="productDetailInfo__priceTotal__totalPriceNum">0</span><span
|
|
class="won">${curUnit}</span></span>
|
|
</div>
|
|
</c:if>
|
|
<c:choose>
|
|
<c:when test="${resultMap.goodsDtl.buttonRplcWordsUseAt eq 'Y'}">
|
|
<div class="productDetailInfo__orderBtnContainer">
|
|
<a href="${resultMap.goodsDtl.pcButtonRplcLink}"
|
|
<c:if test="${resultMap.goodsDtl.buttonRplcLinkBrwsrDvCd eq '01'}"> target="_blank" </c:if> >
|
|
<button class="btn theme large"><c:out value="${resultMap.goodsDtl.buttonRplcWords}"/></button>
|
|
</a>
|
|
</div>
|
|
</c:when>
|
|
<c:otherwise>
|
|
<div class="productDetailInfo__orderBtnContainer">
|
|
<button class="btn theme large outline addCart mobonCart" <c:if test="${resultMap.goodsDtl.goodsSttusCd ne '01' }"> disabled="disabled" </c:if> >장바구니</button>
|
|
<button type="button" class="btn theme large purchsOrdr" <c:if test="${resultMap.goodsDtl.goodsSttusCd ne '01' }"> disabled="disabled" </c:if>>구매하기</button>
|
|
</div>
|
|
<div style="margin-top: 24px;margin-left: 25%; display: none;" id ="_naverPayArea" >
|
|
<script type="text/javascript">//<![CDATA[
|
|
|
|
var notPayMode = false;
|
|
var enable = 'Y';
|
|
var buy_npay = buy_nc;
|
|
var goods_status = '';
|
|
|
|
// 품절등과 같은 이유에 따라 버튼을 비활성화할 필요가 있을 경우
|
|
if(notPayMode){
|
|
enable = 'N';
|
|
buy_npay = not_buy_nc;
|
|
wishlist_nc = not_buy_nc;
|
|
}
|
|
//버튼타입,버튼색, 버튼갯수 프로퍼티에서 읽어오기
|
|
naver.NaverPayButton.apply({
|
|
BUTTON_KEY:"{buttonKey}", // 알파랩 - 네이버페이에서 할당받은 버튼 KEY를 입력하세요. 뉴트리:BUTTON_KEY:"58008618-E3CD-40F7-AE8D-37D624935098"
|
|
TYPE: "A", // 템플릿을 확인하시고 원하는 타입의 버튼을 선택
|
|
COLOR: 1, // 버튼의 색 설정
|
|
COUNT: 2, // 버튼 개수 설정. 구매하기 버튼만 있으면 1, 찜하기 버튼과 함께 있으면 2를 입력한다.
|
|
ENABLE: enable, // 품절등과 같은 이유에 따라 버튼을 비활성화할 필요가 있을 경우
|
|
BUY_BUTTON_HANDLER: buy_npay, // 구매하기 버튼 이벤트 Handler 함수 등록, 품절인 경우 not_buy_nc 함수 사용
|
|
WISHLIST_BUTTON_HANDLER:wishlist_nc, // 구매하기 버튼 이벤트 Handler 함수 등록, 품절인 경우 not_buy_nc 함수 사용 ///sample/SampleNaverPopup
|
|
"":""
|
|
});
|
|
</script>
|
|
</div>
|
|
</c:otherwise>
|
|
</c:choose>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="productDetailBody">
|
|
<c:if test = "${resultMap.goodsDtl.rvwWritngPosblAt eq 'Y' || resultMap.goodsDtl.mtRvwWritngPosblAt eq 'Y'}">
|
|
<div class="productDetailcontent__totalNum">
|
|
<dl>
|
|
<dt>리뷰수</dt>
|
|
<dd>
|
|
<span class="comma">
|
|
<fmt:formatNumber value="${resultMap.bbscttInfo.rvwInfo.cntBbsctt}" pattern="#,###"/>
|
|
</span>건
|
|
</dd>
|
|
</dl>
|
|
<dl>
|
|
<dt>사용자 총 평점</dt>
|
|
<dd><c:out value="${resultMap.bbscttInfo.rvwInfo.avgEvlScore}"/>/5.0</dd>
|
|
</dl>
|
|
</div>
|
|
<%--포토 리뷰--%>
|
|
<c:if test = "${not empty resultMap.bbscttInfo.photoList}">
|
|
<div class="photoPick">
|
|
<div class="productReview__subTitle">
|
|
<span class="productReview__subTitle__title">포토&동영상</span>
|
|
<span class="productReview__subTitle__num">
|
|
<span class="comma"><c:out value="${resultMap.bbscttInfo.photoCnt}"/></span><span class="unit">건</span>
|
|
</span>
|
|
<a href="#userReviewTarget" class="productReview__subTitle__more">더보기</a>
|
|
</div>
|
|
<div class="photoPick__slick">
|
|
<c:set var = "idx" value="0"/>
|
|
<c:forEach var = "list" items = "${resultMap.bbscttInfo.photoList}" varStatus="status">
|
|
<c:if test="${status.index % 2 == 0}">
|
|
<div class="photoPick__item">
|
|
<a class="photoPick__box photoPickA" idx = <c:out value="${idx}"/>>
|
|
<input type = "hidden" name = "bbscttInnb" value = "<c:out value = "${list.bbscttInnb}"/>"/>
|
|
<div class="photoPick__top">
|
|
<div class="photoPick__top__info">
|
|
<c:if test="${not empty list.evlScore}">
|
|
<div class="reviewStars__wrapper--sm">
|
|
<div class="reviewStars star-<fmt:formatNumber value="${list.evlScore}" pattern="##"/>"></div>
|
|
<span class="reviewStars__num"><fmt:formatNumber
|
|
value="${list.evlScore}" pattern="##"/></span>
|
|
</div>
|
|
</c:if>
|
|
<div class="photoPick__misc">
|
|
<span class="photoPick__misc__id"><c:out value="${list.regusrId}"/></span>
|
|
<c:if test="${list.rvwKingAt eq 'Y'}">
|
|
<span class="storePick__misc__badge">리뷰왕</span>
|
|
</c:if>
|
|
<span class="photoPick__misc__date"><c:out value="${list.registDt}"/></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="photoPick__body">
|
|
<c:if test="${not empty list.filCours}">
|
|
<div class="photoPick__reviewImage photoPickImg">
|
|
<img src="<c:out value="${cdnurl}${list.filCours}${list.sysFilNm}"/>"alt="" width="80px;" height="80px;">
|
|
<span class="photoPick__reviewImage__num">
|
|
<c:out value="${list.fileCnt}"/>
|
|
</span>
|
|
</div>
|
|
</c:if>
|
|
<div class="photoPick__reviewText photoPickPage">
|
|
<input type="hidden" value = "<c:out value="${list.npayBbscttSnb}"/>" class="npayBbscttSnb"/>
|
|
<c:if test="${list.bstAt eq 'Y'}">
|
|
<span class="reviewBadge reviewBadge--red">BEST</span>
|
|
</c:if>
|
|
<c:if test="${list.bbsTyCd eq '07'}">
|
|
<span class="reviewBadge">한달사용기</span>
|
|
</c:if>
|
|
<span class="bbscttCn" style="white-space: pre-wrap;">
|
|
<c:out value="${list.cn}"/>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<c:set var = "idx" value="${idx+1}"/>
|
|
</a>
|
|
<c:choose>
|
|
<c:when test="${status.index + 1 < resultMap.bbscttInfo.photoList.size()}">
|
|
<a class="photoPick__box photoPickA" idx = "${idx}">
|
|
<input type="hidden" value ="<c:out value='${resultMap.bbscttInfo.photoList[status.index + 1].bbscttInnb}'/>" class="bbscttInnb"/>
|
|
<div class="photoPick__top">
|
|
<div class="photoPick__top__info">
|
|
<c:if test = "${not empty resultMap.bbscttInfo.photoList[status.index + 1].evlScore}">
|
|
<div class="reviewStars__wrapper--sm">
|
|
<c:set value="${resultMap.bbscttInfo.photoList[status.index + 1].evlScore}" var="evlScore1"/>
|
|
<div class="reviewStars star-<fmt:formatNumber value="${evlScore1}" pattern="##"/>"></div>
|
|
<span class="reviewStars__num"><fmt:formatNumber value="${evlScore1}" pattern="##"/></span>
|
|
</div>
|
|
</c:if>
|
|
<div class="photoPick__misc">
|
|
<span class="photoPick__misc__id"><c:out value="${resultMap.bbscttInfo.photoList[status.index + 1].regusrId}"/>
|
|
<c:if test="${resultMap.bbscttInfo.photoList[status.index + 1].rvwKingAt eq 'Y'}">
|
|
<span class="storePick__misc__badge">리뷰왕</span>
|
|
</c:if>
|
|
</span>
|
|
<span class="photoPick__misc__date"><c:out value="${resultMap.bbscttInfo.photoList[status.index + 1].registDt}"/></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="photoPick__body">
|
|
<c:if test="${not empty resultMap.bbscttInfo.photoList[status.index + 1].filCours}">
|
|
<div class="photoPick__reviewImage">
|
|
<img src="<c:out value="${cdnurl}${resultMap.bbscttInfo.photoList[status.index + 1].filCours}${resultMap.bbscttInfo.photoList[status.index + 1].sysFilNm}"/>"alt="">
|
|
<span class="photoPick__reviewImage__num">
|
|
<c:out value="${resultMap.bbscttInfo.photoList[status.index + 1].fileCnt}"/>
|
|
</span>
|
|
</div>
|
|
</c:if>
|
|
<div class="photoPick__reviewText photoPickPage">
|
|
<input type="hidden" value = "<c:out value="${resultMap.bbscttInfo.photoList[status.index + 1].npayBbscttSnb}"/>" class="npayBbscttSnb"/>
|
|
<c:if test="${resultMap.bbscttInfo.photoList[status.index + 1].bstAt eq 'Y'}">
|
|
<span class="reviewBadge reviewBadge--red">BEST</span>
|
|
</c:if>
|
|
<c:if test="${resultMap.bbscttInfo.photoList[status.index + 1].bbsTyCd eq '07'}">
|
|
<span class="reviewBadge">한달사용기</span>
|
|
</c:if>
|
|
<span class="bbscttCn" style="white-space: pre-wrap;">
|
|
<c:out value="${resultMap.bbscttInfo.photoList[status.index + 1].cn}"/>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<c:set var = "idx" value = "${idx+1}"/>
|
|
</c:when>
|
|
<c:otherwise>
|
|
<a class="photoPick__box"></a>
|
|
</c:otherwise>
|
|
</c:choose>
|
|
</div>
|
|
</c:if>
|
|
</c:forEach>
|
|
</div>
|
|
<div class="photoPick__controls">
|
|
<div class="photoPick__controls__btnContainer">
|
|
<button class="photoPick__controls__btn prev">
|
|
<span class="visually-hidden">이전</span>
|
|
</button>
|
|
<button class="photoPick__controls__btn next">
|
|
<span class="visually-hidden">다음</span>
|
|
</button>
|
|
</div>
|
|
<span class="photoPick__counter"></span>
|
|
</div>
|
|
</div>
|
|
</c:if>
|
|
</c:if>
|
|
<div class="productDetailTab">
|
|
<div class="fixedProduct">
|
|
<div class="fixedProduct__left">
|
|
<div class="fixedProduct__image" id = "fixedImg">
|
|
</div>
|
|
<div class="fixedProduct__product">
|
|
<p class="fixedProduct__title"><c:out value="${resultMap.goodsDtl.goodsNm}"/></p>
|
|
<span class="fixedProduct__price">
|
|
<span class="comma">
|
|
<fmt:formatNumber value="${resultMap.goodsDtl.slepric}" pattern="#,###"/></span>
|
|
<span class="priceUnit"></span><span class="priceUnit">${curUnit}</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="fixedProduct__right">
|
|
<button type="button" class="btn theme lg purchsOrdr">구매하기</button>
|
|
</div>
|
|
</div>
|
|
<ul class="productDetailTab__list">
|
|
<li class="productDetailTab__item">
|
|
<a class="active" href="#productInfo">상세정보</a>
|
|
</li>
|
|
<c:if test = "${resultMap.goodsDtl.rvwWritngPosblAt eq 'Y' || resultMap.goodsDtl.mtRvwWritngPosblAt eq 'Y'}">
|
|
<li class="productDetailTab__item">
|
|
<a href="#productReview" id="productReviewA">상품후기(<fmt:formatNumber value="${resultMap.bbscttInfo.rvwInfo.cntBbsctt}" pattern="#,###"/>)</a>
|
|
</li>
|
|
</c:if>
|
|
<li class="productDetailTab__item">
|
|
<a href="#productQnA" id="productQnAA">상품문의(<span id="goodsQnaCnt"><fmt:formatNumber value="${resultMap.bbscttInfo.qnaCnt}" pattern="#,###"/></span>)</a>
|
|
</li>
|
|
<li class="productDetailTab__item">
|
|
<a href="#productReTurn" id="productReTurnA">반품/교환정보</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="productDetailcontent" id = "productDetailcontent">
|
|
<%--상품 상세 구역--%>
|
|
<div id="productInfo" class="productDetailcontent__item">
|
|
<div class="productDetailcontent__imageDetails">
|
|
<c:if test="${not empty resultMap.evtBannerList}"><%--TODO:: 이벤트배너 컬럼 바뀌면 바꿔야함--%>
|
|
<c:forEach var="evtBannerList" items="${resultMap.evtBannerList}">
|
|
<c:if test = "${not empty evtBannerList.filCours}">
|
|
<div>
|
|
<a <c:if test = "${not empty evtBannerList.bbscttInnb}">href="/sopmal/csc/selectBbscttAuth?bbsId=${evtBannerList.bbsId}&bbscttInnb=${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="${resultMap.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>
|
|
<c:if test = "${resultMap.goodsDtl.rvwWritngPosblAt eq 'Y' || resultMap.goodsDtl.mtRvwWritngPosblAt eq 'Y'}">
|
|
<%--리뷰 조회 구역--%>
|
|
<div id="productReview" class="productDetailcontent__item">
|
|
|
|
</div>
|
|
</c:if>
|
|
<%--qna 조회 구역--%>
|
|
<div id="productQnA" class="productDetailcontent__item">
|
|
|
|
</div>
|
|
<%--상풍 공용 정보 구역--%>
|
|
<div id="productReTurn" class="productDetailcontent__item">
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<style>
|
|
.quick-menu-goods {
|
|
position: sticky;
|
|
top: 40px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.quick-menu__wrapper-goods {
|
|
position: fixed;
|
|
top: 88%;
|
|
left: 50%;
|
|
transform: translateX(720px);
|
|
bottom: 30px;
|
|
}
|
|
</style>
|
|
|
|
<div class="quick-menu__wrapper-goods" id="pageUpBtn">
|
|
<aside class="quick-menu-goods">
|
|
<button onclick="$('html, body').scrollTop(0);" style="margin-bottom: 10px;"><i class="icon icon_quick-to-top"></i><span class="visually-hidden">위로
|
|
가기</span></button>
|
|
</aside>
|
|
</div>
|
|
</main>
|
|
<jsp:include page="/WEB-INF/views/comm/Footer.jsp"/>
|
|
<!-- 모달 -->
|
|
<%--장바구니 목록과 선택한 상품 중복 모달 --%>
|
|
<div id="modal-error-confirm-add-cart-duplicate-div"></div>
|
|
<!-- 장바구니 담기-->
|
|
<div id = "addCartDiv"></div>
|
|
<!-- 위시리스트 회원 아닐경우 모달 -->
|
|
<div id="wishDiv"></div>
|
|
<!-- 상품 중복 선택 -->
|
|
<dlv id="goodsDuplicateDiv"></dlv>
|
|
<!-- 쿠폰 받기 정보 조회 -->
|
|
<div id="couponListDiv"></div>
|
|
<!-- 함께하면 좋은 상품 구매하기 -->
|
|
<div id="relatedGoodsOrderDiv"></div>
|
|
<!-- 스토어 PICK 리뷰 상세보기 -->
|
|
<div id="storePickDiv"></div>
|
|
<!-- 포토 리뷰 상세보기 -->
|
|
<div id="photoRvwDiv"></div>
|
|
<!-- 상품 QnA 등록/수정 -->
|
|
<div id="QnaDiv"></div>
|
|
|
|
<div id="modalDiv"></div>
|
|
|
|
<div id="storePickModal"></div>
|
|
<!-- 툴팁 -->
|
|
|
|
<!-- 공유하기 -->
|
|
<div class="popModalContent" id="snsShareContent">
|
|
<input type="hidden" id="clipboard" name="clipboard">
|
|
<div class="popModalContent__box">
|
|
<h5 class="popModalContent__title">공유하기</h5>
|
|
<div class="popModalContent__inner">
|
|
<div class="popModalContent__snsShare">
|
|
<a href="#" class="popModalContent__snsShare__item" onclick="fn_sns_share('kakao')">
|
|
<i class="icon icon_sns-kakao"></i>
|
|
<span>카카오톡</span>
|
|
</a>
|
|
<a href="#" class="popModalContent__snsShare__item" onclick="fn_sns_share('naverBand')">
|
|
<i class="icon icon_sns-band"></i>
|
|
<span>네이버밴드</span>
|
|
</a>
|
|
<a href="#" class="popModalContent__snsShare__item" onclick="fn_sns_share('instagram')">
|
|
<i class="icon icon_sns-instagram"></i>
|
|
<span>인스타그램</span>
|
|
</a>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<%--상품 리뷰 상세--%>
|
|
<!-- 상품리뷰 작성 시 혜택 -->
|
|
<div class="popModalContent" id="reviewBenefitContent">
|
|
<div class="popModalContent__box">
|
|
<h5 class="popModalContent__title">상품리뷰 작성 시 혜택</h5>
|
|
<div class="popModalContent__inner">
|
|
<div class="popModalContent__reviewBenefit">
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 배송비 안내 -->
|
|
<div class="popModalContent" id="deliveryFeeInfoContent">
|
|
<div class="popModalContent__box">
|
|
<h5 class="popModalContent__title">배송비 안내</h5>
|
|
<div class="popModalContent__inner">
|
|
<div class="popModalContent__deliveryFeeInfo">
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</body>
|
|
<!-- 수정 알림 -->
|
|
<div id="result-alert" class="modal alert">
|
|
<div class="alert-content">
|
|
<p class="alert-content__text--sm" id = "resultAlert">
|
|
<spring:message code="success.common.update"/>
|
|
</p>
|
|
</div>
|
|
<div class="alert-btn-container">
|
|
<button class="alert-btn alert-btn--confirm" id="alertBtn"><spring:message code="button.ok"/></button>
|
|
</div>
|
|
</div>
|
|
|
|
<%--비밀번호 확인 모달--%>
|
|
<div id="confirm_pw_pop" class="modal alert">
|
|
<div class="alert-content">
|
|
<p class="alert-content__text--sm">
|
|
등록시에 입력했던 비밀번호를 입력해 주세요
|
|
</p>
|
|
<input class="input-text alert-content__pwInput" type="password" title="비밀번호 입력" placeholder="비밀번호 입력"
|
|
name="password" id="modalPw">
|
|
<input type="hidden" name="bbscttInnb" id="modalBbscttInnb">
|
|
<input type="hidden" id="modalIdx">
|
|
</div>
|
|
<div class="alert-btn-container">
|
|
<a href="#close-modal" rel="modal:close" class="alert-btn alert-btn--cancel" id="closeBtn">취소</a>
|
|
<button type="button" class="alert-btn alert-btn--confirm" id="pwChkBtn">확인</button>
|
|
</div>
|
|
</div>
|
|
<%--질문 삭제 모달 --%>
|
|
<div id="qna-delete" class="modal alert">
|
|
<div class="alert-content">
|
|
<p class="alert-content__text--sm">
|
|
삭제된 게시글은 복구할 수 없습니다.
|
|
<br>
|
|
정말로 삭제 하시겠습니까?
|
|
</p>
|
|
</div>
|
|
<div class="alert-btn-container">
|
|
<a href="#" rel="modal:close" class="alert-btn alert-btn--cancel" id="closeDelBtn">취소</a>
|
|
<button type="button" class="alert-btn alert-btn--confirm" id="alertDelBtn">확인</button>
|
|
</div>
|
|
</div>
|
|
|
|
<%--<!-- 질문 수정 모달 -->--%>
|
|
<div id="qna-edit" class="modal alert">
|
|
<div class="alert-content">
|
|
<p class="alert-content__text--sm">
|
|
답변이 등록된 상태입니다.
|
|
<br>
|
|
수정하실 수 없습니다.
|
|
</p>
|
|
</div>
|
|
<div class="alert-btn-container">
|
|
<a href="#" rel="modal:close" class="alert-btn alert-btn--confirm">확인</a>
|
|
</div>
|
|
</div>
|
|
<%--이용자가 회원인데 작성자와 다를 시--%>
|
|
<div id="reject_modi_pop" class="modal alert">
|
|
<div class="alert-content">
|
|
<p class="alert-content__text--sm">
|
|
글작성자만 이용가능합니다.
|
|
</p>
|
|
</div>
|
|
<div class="alert-btn-container">
|
|
<a href="#" rel="modal:close" class="alert-btn alert-btn--confirm">확인</a>
|
|
</div>
|
|
</div>
|
|
<%--로그인 유도 modla--%>
|
|
<div id="login_alert_pop" class="modal alert">
|
|
<div class="alert-content">
|
|
<p class="alert-content__text--sm">
|
|
이용하시려면 로그인이 필요합니다!
|
|
<br>
|
|
로그인하시겠습니까?
|
|
</p>
|
|
</div>
|
|
<div class="alert-btn-container">
|
|
<a class="alert-btn alert-btn--confirm" onclick = "fn_move_login()" style="cursor:pointer"><spring:message code="button.yes"/></a>
|
|
<a href="#" rel="modal:close" class="alert-btn"><spring:message code="button.no"/></a>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- 최대혜택가 상세 툴팁 -->
|
|
<div class="popModalContent" id="dcPriceContent">
|
|
<div class="popModalContent__box">
|
|
<h5 class="popModalContent__title">최대혜택가</h5>
|
|
<div class="popModalContent__inner">
|
|
<div class="popModalContent__dcPriceInfo">
|
|
<div>
|
|
<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>
|
|
</html> |