2665 lines
132 KiB
Plaintext
2665 lines
132 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"%>
|
|
<spring:eval expression="@environment.getProperty('sopmalfo.common.fileupload.cdnurl')" var="cdnurl"/>
|
|
<spring:eval expression="@environment.getProperty('currency-unit.default')" var="curUnit"/>
|
|
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
<c:choose>
|
|
<c:when test = "${empty prevewVO.mainSiteInnb && prevewVO.evtPageAt ne 'Y'}">
|
|
<head>
|
|
<%-- 공통 include --%>
|
|
<jsp:include page="/WEB-INF/views/comm/mobile/Include.jsp"/>
|
|
</head>
|
|
<body>
|
|
<div class="screen-wrap">
|
|
<%-- 공통 Header --%>
|
|
<jsp:include page="/WEB-INF/views/comm/mobile/MainHeader.jsp"/>
|
|
<%-- 공통 하단 탭바 --%>
|
|
<jsp:include page="/WEB-INF/views/comm/mobile/TabBar.jsp"/>
|
|
|
|
<!-- 메인 컨텐츠 -->
|
|
<div class="content-wrap">
|
|
<main class="main">
|
|
|
|
<!-- 영역 리스트 -->
|
|
<c:forEach items="${ resultMap.relmList }" var="relmList" varStatus="status">
|
|
|
|
<!-- 인기 검색어 영역 -->
|
|
<c:if test="${ status.first and topBarInfo.topbar.gnbTyCd ne '02' }" >
|
|
<div class="header-trend__wrapper">
|
|
<span class="header-trend__title">
|
|
<i class="icon icon_search-trend"></i>
|
|
실시간 인기 상품
|
|
</span>
|
|
<div class="header-trend">
|
|
<div class="search-trend" id="search-trend">
|
|
<ul>
|
|
<c:forEach var="popularGoods" items="${ topBarInfo.popularGoods }" varStatus="status">
|
|
<li>
|
|
<a href="javascript:void(0);" onclick="fn_move_goods_dtl(${popularGoods.goodsInnb});">
|
|
<span class="search-trend__number">${ status.index+1 }.</span>
|
|
<span class="search-trend__text">${ popularGoods.goodsNm }</span>
|
|
<c:choose>
|
|
<c:when test="${ popularGoods.popularChngDv eq '01' }">
|
|
<i class="icon icon_search-up"></i>
|
|
</c:when>
|
|
<c:when test="${ popularGoods.popularChngDv eq '02' }">
|
|
<i class="icon icon_search-default"></i>
|
|
</c:when>
|
|
<c:when test="${ popularGoods.popularChngDv eq '03' }">
|
|
<i class="icon icon_search-down"></i>
|
|
</c:when>
|
|
</c:choose>
|
|
</a>
|
|
</li>
|
|
</c:forEach>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</c:if>
|
|
|
|
<!-- 메인 롤링 배너 -->
|
|
<!-- 이미지 사이즈 720x600 -->
|
|
<c:if test="${ relmList.relmDvCd eq '01'}">
|
|
<div class="main-section main-section__main-banner">
|
|
<div class="swiper main-banner" id="main-banner${ relmList.ordr }">
|
|
<div class="swiper-wrapper">
|
|
<c:forEach items="${ resultMap.case01 }" var="case01" varStatus="status">
|
|
<c:if test="${ relmList.ordr eq case01.sOrdr }">
|
|
<div class="swiper-slide">
|
|
<a href="${ case01.itmeCnncUrl }">
|
|
<img src="${cdnurl}${ case01.filCours }/${ case01.sysFilNm }" alt="" onerror="this.src='/pc/images/image_placeholder.png'">
|
|
</a>
|
|
</div>
|
|
</c:if>
|
|
</c:forEach>
|
|
</div>
|
|
<div class="main-banner__controls">
|
|
<div class="swiper-pagination" id="swiper-pagination${ relmList.ordr }"></div>
|
|
<button class="main-banner__controls__btn play" id="main-banner__controls__btn${ relmList.ordr }">
|
|
<span class="visually-hidden">배너 재생</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</c:if>
|
|
|
|
<!-- 상품 - 그룹별 타입 -->
|
|
<c:if test="${ relmList.relmDvCd eq '02'}">
|
|
<section class="main-section section-2">
|
|
<input type="hidden" name="section-ordr" value="${ relmList.ordr }" />
|
|
<div class="main-section-header">
|
|
<div class="main-section-title">
|
|
<span class="main-section-title__description">${ relmList.subSj }</span>
|
|
<h2 class="main-section-title__title">
|
|
${ relmList.mainSj }
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
<div class="product-tab">
|
|
<ul>
|
|
<!-- 그룹별 리스트 출력 -->
|
|
<c:forEach items="${ resultMap.baseCase }" var="baseCase" varStatus="status">
|
|
<c:if test="${ baseCase.relmDvCd == '02' && relmList.ordr eq baseCase.sOrdr }">
|
|
<li><button class="product-tab__btn product-tab__btn-${ relmList.ordr }" id="product-tab__btn-${ relmList.ordr }-${ baseCase.iOrdr }" onclick="fn_product_group_type('${ relmList.ordr }', '${baseCase.iOrdr}'); return false;">${ baseCase.goodsGroupNm }</button></li>
|
|
</c:if>
|
|
</c:forEach>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- 상품 리스트 출력 -->
|
|
<c:forEach items="${ resultMap.baseCase }" var="baseCase" varStatus="status">
|
|
<c:if test="${ baseCase.relmDvCd == '02' && relmList.ordr eq baseCase.sOrdr }">
|
|
|
|
<div class="product-list-type-1col product-list-type-1col_group product-list-type-1col_group-${ relmList.ordr }" id="product-list-type-1col_group-${ relmList.ordr }-${ baseCase.iOrdr }">
|
|
<div class="swiper product-list-type-1col__swiper">
|
|
<div class="swiper-wrapper">
|
|
|
|
<c:set var="cnt" value="0" />
|
|
<c:set var="openFlag" value="0" />
|
|
<c:set var="closeFlag" value="0" />
|
|
|
|
<c:forEach items="${ resultMap.case02 }" var="case02" varStatus="status">
|
|
<c:if test="${ relmList.ordr eq case02.sOrdr && baseCase.iOrdr eq case02.iOrdr }">
|
|
|
|
<c:set var="cnt" value="${ cnt + 1 }" />
|
|
<c:choose>
|
|
<c:when test="${ cnt == 1 || cnt % 4 == 1 }">
|
|
<c:set var="openFlag" value="1" />
|
|
</c:when>
|
|
<c:otherwise>
|
|
<c:set var="openFlag" value="2" />
|
|
</c:otherwise>
|
|
</c:choose>
|
|
<c:choose>
|
|
<c:when test="${ cnt % 4 == 0 }">
|
|
<c:set var="closeFlag" value="1" />
|
|
</c:when>
|
|
<c:otherwise>
|
|
<c:set var="closeFlag" value="2" />
|
|
</c:otherwise>
|
|
</c:choose>
|
|
|
|
|
|
<c:if test="${ openFlag == 1 }">
|
|
<div class="swiper-slide">
|
|
<div class="product-list-type-1col__list">
|
|
</c:if>
|
|
|
|
<div class="product-unit">
|
|
<div class="product-unit-image">
|
|
<c:choose>
|
|
<c:when test="${case02.goodsSttusCd eq '02'}">
|
|
<div class="sold-out">
|
|
<span>입고 대기중</span>
|
|
</div>
|
|
</c:when>
|
|
<c:when test="${case02.goodsSttusCd eq '03'}">
|
|
<div class="sold-out">
|
|
<span>${case02.goodsSttusNm}</span>
|
|
</div>
|
|
</c:when>
|
|
</c:choose>
|
|
<i class="icon icon_product-image-badge01"></i>
|
|
<a href="javascript:void(0);" onclick="fn_move_goods_dtl(${case02.goodsInnb});">
|
|
<img src="${cdnurl}${ case02.goodsImgCours }" alt="${case02.goodsNm }" onerror="this.src='/pc/images/image_placeholder.png'" loading="lazy">
|
|
</a>
|
|
</div>
|
|
<div class="product-unit-info">
|
|
<div class="product-unit-info__inner d-flex flex-column" style="flex-direction:column">
|
|
|
|
<c:if test="${case02.iconExpsrAt eq 'Y'}">
|
|
<div class="product-badge-container col order-${case02.iconExpsrOrdr-1}" style="order:${case02.iconExpsrOrdr-1}">
|
|
<c:if test="${not empty case02.goodsIconCd}">
|
|
<c:forEach items="${fn:split(case02.goodsIconCd, ',')}" var="iconCdNm" varStatus="iconStatus">
|
|
<c:choose>
|
|
<c:when test="${fn:contains(iconCdNm, '-')}">
|
|
<span class="product-badge ${fn:toLowerCase(iconCdNm)}">${fn:replace(fn:toUpperCase(iconCdNm), '-', ' ')}</span>
|
|
</c:when>
|
|
<c:otherwise>
|
|
<span class="product-badge ${fn:toLowerCase(iconCdNm)}">${fn:toUpperCase(iconCdNm)}</span>
|
|
</c:otherwise>
|
|
</c:choose>
|
|
</c:forEach>
|
|
</c:if>
|
|
</div>
|
|
</c:if>
|
|
<c:if test="${case02.goodsNmExpsrAt eq 'Y'}">
|
|
<div class="product-unit-title col order-${case02.goodsNmExpsrOrdr-1}" style="order:${case02.goodsNmExpsrOrdr-1}">
|
|
<a href="javascript:void(0);" onclick="fn_move_goods_dtl(${case02.goodsInnb});">${ case02.goodsNm }</a>
|
|
</div>
|
|
</c:if>
|
|
<c:if test="${case02.pricExpsrAt eq 'Y'}">
|
|
<div class="product-unit-price col order-${case02.pricExpsrOrdr-1}" style="order:${case02.pricExpsrOrdr-1}">
|
|
<div class="product-unit-price__price">
|
|
<span class="product-unit-price__original <c:if test="${case02.slePercent eq 0}">visually-hidden</c:if>"><fmt:formatNumber value="${case02.cnsmrpric}" pattern="#,###"/>${curUnit}</span>
|
|
<span class="product-unit-price__current"><fmt:formatNumber value="${case02.slepric}" pattern="#,###"/>${curUnit}</span>
|
|
</div>
|
|
<div class="product-unit-price__sale <c:if test="${case02.slePercent eq 0}">visually-hidden</c:if>">
|
|
<span class="percent"><c:out value="${case02.slePercent}"/>%</span>
|
|
</div>
|
|
</div>
|
|
</c:if>
|
|
<c:if test="${case02.reprsntDcExpsrAt eq 'Y'}">
|
|
<div class="product-unit-price__monthly-payment col order-${case02.reprsntDcExpsrOrdr-1}" style="order:${case02.reprsntDcExpsrOrdr-1}">
|
|
<c:out value="${case02.reprsntDc}"/>
|
|
</div>
|
|
</c:if>
|
|
<c:if test="${case02.rvwEvlScreExpsrAt eq 'Y'}">
|
|
<div class="product-unit-rating col order-${case02.rvwEvlScreExpsrOrdr-1}" style="order:${case02.rvwEvlScreExpsrOrdr-1}">
|
|
<i class="icon icon_rating-star"></i>
|
|
<span class="product-unit-rating__score"><c:out value="${case02.avgEvlScore}" default="0.0"/></span>
|
|
<span class="product-unit-rating__count">(<fmt:formatNumber value="${case02.cntEvlScor}" pattern="#,###"/>)</span>
|
|
</div>
|
|
</c:if>
|
|
<c:if test="${case02.dlvyExpsrAt eq 'Y'}">
|
|
<div class="product-unit-price__monthly-payment col order-${case02.dlvyExpsrOrdr-1}" style="order:${case02.dlvyExpsrOrdr-1}">
|
|
<c:out value="${case02.dlvyGroupNm}"/>
|
|
</div>
|
|
</c:if>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<c:if test="${ closeFlag == 1 }">
|
|
</div>
|
|
</div>
|
|
</c:if>
|
|
</c:if>
|
|
</c:forEach>
|
|
<c:if test="${ closeFlag == 2 }">
|
|
</div>
|
|
</div>
|
|
</c:if>
|
|
|
|
</div>
|
|
<div class="swiper-pagination theme-pagination"></div>
|
|
</div>
|
|
</div>
|
|
|
|
</c:if>
|
|
</c:forEach>
|
|
</section>
|
|
</c:if>
|
|
|
|
<!-- 상품 - 카테고리별 타입 -->
|
|
<c:if test="${ relmList.relmDvCd eq '03'}">
|
|
|
|
|
|
<section class="main-section main-section__category-type section-3">
|
|
<input type="hidden" name="section-ordr" value="${ relmList.ordr }" />
|
|
<div class="main-section-header">
|
|
<div class="main-section-title">
|
|
<span class="main-section-title__description">${ relmList.subSj }</span>
|
|
<h2 class="main-section-title__title">
|
|
${ relmList.mainSj }
|
|
</h2>
|
|
</div>
|
|
<div class="swiper category-type-tab">
|
|
<ul class="swiper-wrapper category-type-tab__list">
|
|
<c:forEach items="${ resultMap.baseCase }" var="baseCase" varStatus="status">
|
|
<c:if test="${ baseCase.relmDvCd == '03' && relmList.ordr eq baseCase.sOrdr }">
|
|
<li class="swiper-slide">
|
|
<button class="category-type-tab__btn category-type-tab__btn-${ relmList.ordr }" id="category-type-tab__btn-${ relmList.ordr }-${ baseCase.iOrdr }" onclick="fn_product_category_type('${ relmList.ordr }', '${ baseCase.iOrdr }'); return false;">
|
|
<c:if test = "${not empty baseCase.sysFilNm}">
|
|
<i class="icon icon_category-type-tab01">
|
|
<img src="${cdnurl}${ baseCase.filCours }/${ baseCase.sysFilNm }" onerror="this.src='/pc/images/image_placeholder.png'">
|
|
</i>
|
|
</c:if>
|
|
<span class="category-type-tab__name">${ baseCase.ctgryNm }</span>
|
|
</button>
|
|
</li>
|
|
</c:if>
|
|
</c:forEach>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<c:forEach items="${ resultMap.baseCase }" var="baseCase" varStatus="status">
|
|
<c:if test="${ baseCase.relmDvCd == '03' && relmList.ordr eq baseCase.sOrdr }">
|
|
<div class="product-list-type-1col product-list-type-1col_category product-list-type-1col_category-${ relmList.ordr }" id="product-list-type-1col_category-${ relmList.ordr }-${ baseCase.iOrdr }">
|
|
<%-- <div class="swiper product-list-type-1col__swiper" id="product-list-type-1col__swiper-category-${ baseCase.iOrdr }"> --%>
|
|
<!-- <div class="swiper-wrapper"> -->
|
|
|
|
<!-- </div> -->
|
|
<!-- <div class="swiper-pagination theme-pagination"></div> -->
|
|
<!-- </div> -->
|
|
</div>
|
|
</c:if>
|
|
</c:forEach>
|
|
|
|
</section>
|
|
</c:if>
|
|
|
|
<!-- 상품 - 이미지 배너 타입 -->
|
|
<c:if test="${ relmList.relmDvCd eq '04'}">
|
|
<section class="main-section main-section__product-banner">
|
|
<div class="main-section-header">
|
|
<div class="main-section-title">
|
|
<span class="main-section-title__description">${ relmList.subSj }</span>
|
|
<h2 class="main-section-title__title">
|
|
${ relmList.mainSj }
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
<div class="product-banner">
|
|
<c:forEach items="${ resultMap.baseCase }" var="baseCase" varStatus="status" >
|
|
<c:if test="${ baseCase.relmDvCd eq '04' && relmList.ordr eq baseCase.sOrdr }">
|
|
<a href="${ baseCase.itmeCnncUrl }">
|
|
<div class="product-banner__image">
|
|
<img src="${cdnurl}${ baseCase.filCours }/${ baseCase.sysFilNm }" style="height: 310px;" alt="기획전 이미지 내용 입력" onerror="this.src='/pc/images/image_placeholder.png'">
|
|
</div>
|
|
</a>
|
|
</c:if>
|
|
</c:forEach>
|
|
</div>
|
|
<div class="product-list-vertical-twoAndaHalf">
|
|
<div class="swiper product-list-vertical-twoAndaHalf__swiper">
|
|
<div class="swiper-wrapper">
|
|
|
|
<c:forEach items="${ resultMap.case04 }" var="case04" varStatus="status" >
|
|
<c:if test="${ relmList.ordr eq case04.sOrdr }">
|
|
|
|
<div class="swiper-slide">
|
|
<div class="product-unit">
|
|
<div class="product-unit-image">
|
|
<c:choose>
|
|
<c:when test="${case04.goodsSttusCd eq '02'}">
|
|
<div class="sold-out">
|
|
<span>입고 대기중</span>
|
|
</div>
|
|
</c:when>
|
|
<c:when test="${case04.goodsSttusCd eq '03'}">
|
|
<div class="sold-out">
|
|
<span>${case04.goodsSttusNm}</span>
|
|
</div>
|
|
</c:when>
|
|
</c:choose>
|
|
<a href="javascript:void(0);" onclick="fn_move_goods_dtl(${case04.goodsInnb});">
|
|
<img src="${cdnurl}${ case04.goodsImgCours }" alt="${case04.goodsNm }" onerror="this.src='/pc/images/image_placeholder.png'" loading="lazy">
|
|
</a>
|
|
</div>
|
|
|
|
<div class="product-unit-info">
|
|
<div class="product-unit-info__inner d-flex flex-column" style="flex-direction:column">
|
|
|
|
<c:if test="${case04.iconExpsrAt eq 'Y'}">
|
|
<div class="product-badge-container col order-${case04.iconExpsrOrdr-1}" style="order:${case04.iconExpsrOrdr-1}">
|
|
<c:if test="${not empty case04.goodsIconCd}">
|
|
<c:forEach items="${fn:split(case04.goodsIconCd, ',')}" var="iconCdNm" varStatus="iconStatus">
|
|
<c:choose>
|
|
<c:when test="${fn:contains(iconCdNm, '-')}">
|
|
<span class="product-badge ${fn:toLowerCase(iconCdNm)}">${fn:replace(fn:toUpperCase(iconCdNm), '-', ' ')}</span>
|
|
</c:when>
|
|
<c:otherwise>
|
|
<span class="product-badge ${fn:toLowerCase(iconCdNm)}">${fn:toUpperCase(iconCdNm)}</span>
|
|
</c:otherwise>
|
|
</c:choose>
|
|
</c:forEach>
|
|
</c:if>
|
|
</div>
|
|
</c:if>
|
|
<c:if test="${case04.goodsNmExpsrAt eq 'Y'}">
|
|
<div class="product-unit-title col order-${case04.goodsNmExpsrOrdr-1}" style="order:${case04.goodsNmExpsrOrdr-1}">
|
|
<a href="javascript:void(0);" onclick="fn_move_goods_dtl(${case04.goodsInnb});">${ case04.goodsNm }</a>
|
|
</div>
|
|
</c:if>
|
|
<c:if test="${case04.pricExpsrAt eq 'Y'}">
|
|
<div class="product-unit-price col order-${case04.pricExpsrOrdr-1}" style="order:${case04.pricExpsrOrdr-1}">
|
|
<div class="product-unit-price__price">
|
|
<span class="product-unit-price__original <c:if test="${case04.slePercent eq 0}">visually-hidden</c:if>"><fmt:formatNumber value="${case04.cnsmrpric}" pattern="#,###"/>${curUnit}</span>
|
|
<span class="product-unit-price__current"><fmt:formatNumber value="${case04.slepric}" pattern="#,###"/>${curUnit}</span>
|
|
</div>
|
|
<div class="product-unit-price__sale <c:if test="${case04.slePercent eq 0}">visually-hidden</c:if>">
|
|
<span class="percent">${ case04.slePercent }%</span>
|
|
</div>
|
|
</div>
|
|
</c:if>
|
|
<c:if test="${case04.reprsntDcExpsrAt eq 'Y'}">
|
|
<div class="product-unit-price__monthly-payment col order-${case04.reprsntDcExpsrOrdr-1}" style="order:${case04.reprsntDcExpsrOrdr-1}">
|
|
${case04.reprsntDc}
|
|
</div>
|
|
</c:if>
|
|
<c:if test="${case04.rvwEvlScreExpsrAt eq 'Y'}">
|
|
<div class="product-unit-rating col order-${case04.rvwEvlScreExpsrOrdr-1}" style="order:${case04.rvwEvlScreExpsrOrdr-1}">
|
|
<i class="icon icon_rating-star"></i>
|
|
<span class="product-unit-rating__score"><c:out value="${case04.avgEvlScore}" default="0.0"/></span>
|
|
<span class="product-unit-rating__count">(<fmt:formatNumber value="${case04.cntEvlScor}" pattern="#,###"/>)</span>
|
|
</div>
|
|
</c:if>
|
|
<c:if test="${case04.dlvyExpsrAt eq 'Y'}">
|
|
<div class="product-unit-price__monthly-payment col order-${case04.dlvyExpsrOrdr-1}" style="order:${case04.dlvyExpsrOrdr-1}">
|
|
<c:out value="${case04.dlvyGroupNm}"/>
|
|
</div>
|
|
</c:if>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</c:if>
|
|
</c:forEach>
|
|
|
|
|
|
</div>
|
|
<!-- <div class="swiper-scrollbar"></div> -->
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</c:if>
|
|
|
|
<!-- url 기획전 -->
|
|
<c:if test="${ relmList.relmDvCd eq '05'}">
|
|
<section class="main-section main-section__product-banner">
|
|
<div class="main-section-header">
|
|
<div class="main-section-title">
|
|
<span class="main-section-title__description">${ relmList.subSj }</span>
|
|
<h2 class="main-section-title__title">
|
|
${ relmList.mainSj }
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
<div class="product-banner">
|
|
<c:forEach items="${ resultMap.baseCase }" var="baseCase" varStatus="status" >
|
|
<c:if test="${ baseCase.relmDvCd eq '05' && relmList.ordr eq baseCase.sOrdr }">
|
|
<a href="${ baseCase.itmeCnncUrl }">
|
|
<div class="product-banner__image">
|
|
<img src="${cdnurl}${ baseCase.filCours }/${ baseCase.sysFilNm }" alt="기획전 이미지 내용 입력" onerror="this.src='/pc/images/image_placeholder.png'">
|
|
</div>
|
|
<div class="product-banner__description">
|
|
<h4 class="product-banner__description-title">${ baseCase.itemMainDc }</h4>
|
|
<c:if test = "${not empty baseCase.itemSubDc}">
|
|
<span class="product-banner__description-subtitle">${ baseCase.itemSubDc }
|
|
<i class="icon icon_product-banner-arrow"></i>
|
|
</span>
|
|
</c:if>
|
|
</div>
|
|
</a>
|
|
</c:if>
|
|
</c:forEach>
|
|
</div>
|
|
<div class="product-list-type-1col">
|
|
<div class="swiper product-list-type-1col__swiper">
|
|
<div class="swiper-wrapper">
|
|
|
|
<c:set var="cnt" value="0" />
|
|
<c:set var="openFlag" value="0" />
|
|
<c:set var="closeFlag" value="0" />
|
|
|
|
<c:forEach items="${ resultMap.case05 }" var="case05" varStatus="status" >
|
|
<c:if test="${ relmList.ordr eq case05.sOrdr }">
|
|
|
|
<c:set var="cnt" value="${ cnt + 1 }" />
|
|
<c:choose>
|
|
<c:when test="${ cnt == 1 || cnt % 4 == 1 }">
|
|
<c:set var="openFlag" value="1" />
|
|
</c:when>
|
|
<c:otherwise>
|
|
<c:set var="openFlag" value="2" />
|
|
</c:otherwise>
|
|
</c:choose>
|
|
<c:choose>
|
|
<c:when test="${ cnt % 4 == 0 }">
|
|
<c:set var="closeFlag" value="1" />
|
|
</c:when>
|
|
<c:otherwise>
|
|
<c:set var="closeFlag" value="2" />
|
|
</c:otherwise>
|
|
</c:choose>
|
|
|
|
<c:if test="${ openFlag == 1 }">
|
|
<div class="swiper-slide">
|
|
<div class="product-list-type-1col__list">
|
|
</c:if>
|
|
|
|
<div class="product-unit">
|
|
<div class="product-unit-image">
|
|
<c:choose>
|
|
<c:when test="${case05.goodsSttusCd eq '02'}">
|
|
<div class="sold-out">
|
|
<span>입고 대기중</span>
|
|
</div>
|
|
</c:when>
|
|
<c:when test="${case05.goodsSttusCd eq '03'}">
|
|
<div class="sold-out">
|
|
<span>${case05.goodsSttusNm}</span>
|
|
</div>
|
|
</c:when>
|
|
</c:choose>
|
|
<i class="icon icon_product-image-badge01"></i>
|
|
<a href="javascript:void(0);" onclick="fn_move_goods_dtl(${case05.goodsInnb});">
|
|
<img src="${cdnurl}${ case05.goodsImgCours }" alt="${case05.goodsNm }" onerror="this.src='/pc/images/image_placeholder.png'" loading="lazy">
|
|
</a>
|
|
</div>
|
|
<div class="product-unit-info">
|
|
<div class="product-unit-info__inner d-flex flex-column" style="flex-direction:column">
|
|
|
|
<c:if test="${case05.iconExpsrAt eq 'Y'}">
|
|
<div class="product-badge-container col order-${case05.iconExpsrOrdr-1}" style="order:${case05.iconExpsrOrdr-1}">
|
|
<c:if test="${not empty case05.goodsIconCd}">
|
|
<c:forEach items="${fn:split(case05.goodsIconCd, ',')}" var="iconCdNm" varStatus="iconStatus">
|
|
<c:choose>
|
|
<c:when test="${fn:contains(iconCdNm, '-')}">
|
|
<span class="product-badge ${fn:toLowerCase(iconCdNm)}">${fn:replace(fn:toUpperCase(iconCdNm), '-', ' ')}</span>
|
|
</c:when>
|
|
<c:otherwise>
|
|
<span class="product-badge ${fn:toLowerCase(iconCdNm)}">${fn:toUpperCase(iconCdNm)}</span>
|
|
</c:otherwise>
|
|
</c:choose>
|
|
</c:forEach>
|
|
</c:if>
|
|
</div>
|
|
</c:if>
|
|
<c:if test="${case05.goodsNmExpsrAt eq 'Y'}">
|
|
<div class="product-unit-title col order-${case05.goodsNmExpsrOrdr-1}" style="order:${case05.goodsNmExpsrOrdr-1}">
|
|
<a href="javascript:void(0);" onclick="fn_move_goods_dtl(${case05.goodsInnb});">${ case05.goodsNm }</a>
|
|
</div>
|
|
</c:if>
|
|
<c:if test="${case05.pricExpsrAt eq 'Y'}">
|
|
<div class="product-unit-price col order-${case05.pricExpsrOrdr-1}" style="order:${case05.pricExpsrOrdr-1}">
|
|
<div class="product-unit-price__price">
|
|
<span class="product-unit-price__original <c:if test="${case05.slePercent eq 0}">visually-hidden</c:if>"><fmt:formatNumber value="${case05.cnsmrpric}" pattern="#,###"/>${curUnit}</span>
|
|
<span class="product-unit-price__current"><fmt:formatNumber value="${case05.slepric}" pattern="#,###"/>${curUnit}</span>
|
|
</div>
|
|
<div class="product-unit-price__sale <c:if test="${case05.slePercent eq 0}">visually-hidden</c:if>">
|
|
<span class="percent"><c:out value="${case05.slePercent}"/>%</span>
|
|
</div>
|
|
</div>
|
|
</c:if>
|
|
<c:if test="${case05.reprsntDcExpsrAt eq 'Y'}">
|
|
<div class="product-unit-price__monthly-payment col order-${case05.reprsntDcExpsrOrdr-1}" style="order:${case05.reprsntDcExpsrOrdr-1}">
|
|
<c:out value="${case05.reprsntDc}"/>
|
|
</div>
|
|
</c:if>
|
|
<c:if test="${case05.rvwEvlScreExpsrAt eq 'Y'}">
|
|
<div class="product-unit-rating col order-${case05.rvwEvlScreExpsrOrdr-1}" style="order:${case05.rvwEvlScreExpsrOrdr-1}">
|
|
<i class="icon icon_rating-star"></i>
|
|
<span class="product-unit-rating__score"><c:out value="${case05.avgEvlScore}" default="0.0"/></span>
|
|
<span class="product-unit-rating__count">(<fmt:formatNumber value="${case05.cntEvlScor}" pattern="#,###"/>)</span>
|
|
</div>
|
|
</c:if>
|
|
<c:if test="${case05.dlvyExpsrAt eq 'Y'}">
|
|
<div class="product-unit-price__monthly-payment col order-${case05.dlvyExpsrOrdr-1}" style="order:${case05.dlvyExpsrOrdr-1}">
|
|
<c:out value="${case05.dlvyGroupNm}"/>
|
|
</div>
|
|
</c:if>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<c:if test="${ closeFlag == 1 }">
|
|
</div>
|
|
</div>
|
|
</c:if>
|
|
</c:if>
|
|
</c:forEach>
|
|
|
|
<c:if test="${ closeFlag == 2 }">
|
|
</div>
|
|
</div>
|
|
</c:if>
|
|
|
|
</div>
|
|
<div class="swiper-pagination theme-pagination"></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</c:if>
|
|
|
|
<!-- 상품 - 4열 슬라이드 타입 -->
|
|
<c:if test="${ relmList.relmDvCd eq '07'}">
|
|
<section class="main-section main-section__time-sale no-bg">
|
|
|
|
<c:forEach items="${ resultMap.baseCase }" var="baseCase" varStatus="status">
|
|
<c:if test="${ baseCase.relmDvCd == '07' && relmList.ordr eq baseCase.sOrdr }">
|
|
<div class="main-section-header">
|
|
<div class="main-section-title">
|
|
<span class="main-section-title__description">${ baseCase.subSj }</span>
|
|
<h2 class="main-section-title__title">
|
|
${ baseCase.mainSj }
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
</c:if>
|
|
</c:forEach>
|
|
<div class="product-list-vertical-twoAndaHalf">
|
|
<div class="swiper product-list-vertical-twoAndaHalf__swiper">
|
|
<div class="swiper-wrapper">
|
|
|
|
<c:forEach items="${ resultMap.case07 }" var="case07" varStatus="status">
|
|
<c:if test="${ relmList.ordr eq case07.sOrdr }">
|
|
<div class="swiper-slide">
|
|
<div class="product-unit">
|
|
<div class="product-unit-image">
|
|
<c:choose>
|
|
<c:when test="${case07.goodsSttusCd eq '02'}">
|
|
<div class="sold-out">
|
|
<span>입고 대기중</span>
|
|
</div>
|
|
</c:when>
|
|
<c:when test="${case07.goodsSttusCd eq '03'}">
|
|
<div class="sold-out">
|
|
<span>${case07.goodsSttusNm}</span>
|
|
</div>
|
|
</c:when>
|
|
</c:choose>
|
|
<a href="javascript:void(0);" onclick="fn_move_goods_dtl(${case07.goodsInnb});">
|
|
<img src="${cdnurl}${ case07.goodsImgCours }" alt="${ case07.goodsNm }" onerror="this.src='/pc/images/image_placeholder.png'" loading="lazy">
|
|
</a>
|
|
</div>
|
|
<div class="product-unit-info">
|
|
<div class="product-unit-info__inner d-flex flex-column" style="flex-direction:column">
|
|
<c:if test="${case07.iconExpsrAt eq 'Y'}">
|
|
<div class="product-badge-container col order-${case07.iconExpsrOrdr-1}" style="order:${case07.iconExpsrOrdr-1}">
|
|
<c:if test="${not empty case07.goodsIconCd}">
|
|
<c:forEach items="${fn:split(case07.goodsIconCd, ',')}" var="iconCdNm" varStatus="iconStatus">
|
|
<c:choose>
|
|
<c:when test="${fn:contains(iconCdNm, '-')}">
|
|
<span class="product-badge ${fn:toLowerCase(iconCdNm)}">${fn:replace(fn:toUpperCase(iconCdNm), '-', ' ')}</span>
|
|
</c:when>
|
|
<c:otherwise>
|
|
<span class="product-badge ${fn:toLowerCase(iconCdNm)}">${fn:toUpperCase(iconCdNm)}</span>
|
|
</c:otherwise>
|
|
</c:choose>
|
|
</c:forEach>
|
|
</c:if>
|
|
</div>
|
|
</c:if>
|
|
<c:if test="${case07.goodsNmExpsrAt eq 'Y'}">
|
|
<div class="product-unit-title col order-${case07.goodsNmExpsrOrdr-1}" style="order:${case07.goodsNmExpsrOrdr-1}">
|
|
<a href="javascript:void(0);" onclick="fn_move_goods_dtl(${case07.goodsInnb});">${ case07.goodsNm }</a>
|
|
</div>
|
|
</c:if>
|
|
<c:if test="${case07.pricExpsrAt eq 'Y'}">
|
|
<div class="product-unit-price col order-${case07.pricExpsrOrdr-1}" style="order:${case07.pricExpsrOrdr-1}">
|
|
<div class="product-unit-price__price">
|
|
<span class="product-unit-price__original <c:if test="${case07.slePercent eq 0}">visually-hidden</c:if>"><fmt:formatNumber value="${case07.cnsmrpric}" pattern="#,###"/>${curUnit}</span>
|
|
<span class="product-unit-price__current"><fmt:formatNumber value="${case07.slepric}" pattern="#,###"/>${curUnit}</span>
|
|
</div>
|
|
<div class="product-unit-price__sale <c:if test="${case07.slePercent eq 0}">visually-hidden</c:if>">
|
|
<span class="percent">${ case07.slePercent }%</span>
|
|
</div>
|
|
</div>
|
|
</c:if>
|
|
<c:if test="${case07.reprsntDcExpsrAt eq 'Y'}">
|
|
<div class="product-unit-price__monthly-payment col order-${case07.reprsntDcExpsrOrdr-1}" style="order:${case07.reprsntDcExpsrOrdr-1}">
|
|
${case07.reprsntDc}
|
|
</div>
|
|
</c:if>
|
|
<c:if test="${case07.rvwEvlScreExpsrAt eq 'Y'}">
|
|
<div class="product-unit-rating col order-${case07.rvwEvlScreExpsrOrdr-1}" style="order:${case07.rvwEvlScreExpsrOrdr-1}">
|
|
<i class="icon icon_rating-star"></i>
|
|
<span class="product-unit-rating__score"><c:out value="${case07.avgEvlScore}" default="0.0"/></span>
|
|
<span class="product-unit-rating__count">(<fmt:formatNumber value="${case07.cntEvlScor}" pattern="#,###"/>)</span>
|
|
</div>
|
|
</c:if>
|
|
<c:if test="${case07.dlvyExpsrAt eq 'Y'}">
|
|
<div class="product-unit-price__monthly-payment col order-${case07.dlvyExpsrOrdr-1}" style="order:${case07.dlvyExpsrOrdr-1}">
|
|
<c:out value="${case07.dlvyGroupNm}"/>
|
|
</div>
|
|
</c:if>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</c:if>
|
|
</c:forEach>
|
|
|
|
</div>
|
|
<!-- <div class="swiper-scrollbar"></div> -->
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</c:if>
|
|
|
|
<!-- 타임세일 -->
|
|
<!-- 타임세일 (배경 이미지 X, "no-bg" 클래스 추가, 상품 1.5열 슬라이드) -->
|
|
<c:if test="${ relmList.relmDvCd eq '08'}">
|
|
<c:forEach items="${ resultMap.baseCase }" var="baseCase" varStatus="status" >
|
|
<c:if test="${ baseCase.relmDvCd eq '08' && relmList.ordr eq baseCase.sOrdr }">
|
|
<c:choose>
|
|
<c:when test="${ empty baseCase.filCours}">
|
|
<section class="main-section main-section__time-sale no-bg">
|
|
</c:when>
|
|
<c:otherwise>
|
|
<section class="main-section main-section__time-sale" style="background-image: url('${cdnurl}${ baseCase.filCours }/${ baseCase.sysFilNm }');" >
|
|
</c:otherwise>
|
|
</c:choose>
|
|
</c:if>
|
|
</c:forEach>
|
|
|
|
<div class="main-section-header">
|
|
<div class="main-section-title">
|
|
<span class="main-section-title__description">얼마 남지 않았어요!</span>
|
|
<h2 class="main-section-title__title">
|
|
타임세일⏰
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="product-list-vertical-oneAndaHalf">
|
|
<div class="swiper product-list-vertical-oneAndaHalf__swiper">
|
|
<div class="swiper-wrapper">
|
|
<c:forEach items="${ resultMap.case08 }" var="case08" varStatus="status">
|
|
<c:if test="${ relmList.ordr eq case08.sOrdr }">
|
|
|
|
<div class="swiper-slide">
|
|
<div class="product-unit">
|
|
|
|
<div class="product-unit-image">
|
|
<c:choose>
|
|
<c:when test="${case08.goodsSttusCd eq '02'}">
|
|
<div class="sold-out">
|
|
<span>입고 대기중</span>
|
|
</div>
|
|
</c:when>
|
|
<c:when test="${case08.goodsSttusCd eq '03'}">
|
|
<div class="sold-out">
|
|
<span>${case08.goodsSttusNm}</span>
|
|
</div>
|
|
</c:when>
|
|
</c:choose>
|
|
<c:if test="${(case08.evtTmeExpsrAt eq 'Y' and case08.remainTime ne 'N') or (case08.rltmQyBannerExpsrAt eq 'Y' and case08.remainQy > 0) }">
|
|
<div class="time-sale__top">
|
|
<c:if test="${case08.evtTmeExpsrAt eq 'Y' and case08.remainTime ne 'N'}">
|
|
<span class="time" name="remainTime">${case08.remainTime}</span>
|
|
|
|
<%-- <span class="time" name="tmeSetup">${case08.tmeSetup}</span> --%>
|
|
<%-- <input type="hidden" name="tmeSetupValue" value="${ case08.tmeSetup }" /> --%>
|
|
</c:if>
|
|
<c:if test="${case08.rltmQyBannerExpsrAt eq 'Y' and case08.remainQy > 0 }">
|
|
<span class="left">남은수량 ${ case08.remainQy }개</span>
|
|
</c:if>
|
|
</div>
|
|
</c:if>
|
|
<a href="javascript:void(0);" onclick="fn_move_goods_dtl(${case08.goodsInnb});">
|
|
<img src="${cdnurl}${ case08.goodsImgCours }" alt="${ case08.goodsNm }" onerror="this.src='/pc/images/image_placeholder.png'">
|
|
</a>
|
|
</div>
|
|
|
|
<div class="product-unit-info">
|
|
<div class="product-unit-info__inner d-flex flex-column" style="flex-direction:column">
|
|
|
|
<c:if test="${case08.iconExpsrAt eq 'Y'}">
|
|
<div class="product-badge-container col order-${case08.iconExpsrOrdr-1}" style="order:${case08.iconExpsrOrdr-1}">
|
|
<c:if test="${not empty case08.goodsIconCd}">
|
|
<c:forEach items="${fn:split(case08.goodsIconCd, ',')}" var="iconCdNm" varStatus="iconStatus">
|
|
<c:choose>
|
|
<c:when test="${fn:contains(iconCdNm, '-')}">
|
|
<span class="product-badge ${fn:toLowerCase(iconCdNm)}">${fn:replace(fn:toUpperCase(iconCdNm), '-', ' ')}</span>
|
|
</c:when>
|
|
<c:otherwise>
|
|
<span class="product-badge ${fn:toLowerCase(iconCdNm)}">${fn:toUpperCase(iconCdNm)}</span>
|
|
</c:otherwise>
|
|
</c:choose>
|
|
</c:forEach>
|
|
</c:if>
|
|
</div>
|
|
</c:if>
|
|
<c:if test="${case08.goodsNmExpsrAt eq 'Y'}">
|
|
<div class="product-unit-title col order-${case08.goodsNmExpsrOrdr-1}" style="order:${case08.goodsNmExpsrOrdr-1}">
|
|
<a href="javascript:void(0);" onclick="fn_move_goods_dtl(${case08.goodsInnb});">${ case08.goodsNm }</a>
|
|
</div>
|
|
</c:if>
|
|
<c:if test="${case08.pricExpsrAt eq 'Y'}">
|
|
<div class="product-unit-price col order-${case08.pricExpsrOrdr-1}" style="order:${case08.pricExpsrOrdr-1}">
|
|
<div class="product-unit-price__price">
|
|
<span class="product-unit-price__original <c:if test="${case08.slePercent eq 0}">visually-hidden</c:if>"><fmt:formatNumber value="${case08.cnsmrpric}" pattern="#,###"/>${curUnit}</span>
|
|
<span class="product-unit-price__current"><fmt:formatNumber value="${case08.slepric}" pattern="#,###"/>${curUnit}</span>
|
|
</div>
|
|
<div class="product-unit-price__sale <c:if test="${case08.slePercent eq 0}">visually-hidden</c:if>">
|
|
<span class="percent">${ case08.slePercent }%</span>
|
|
</div>
|
|
</div>
|
|
</c:if>
|
|
<c:if test="${case08.reprsntDcExpsrAt eq 'Y'}">
|
|
<div class="product-unit-price__monthly-payment col order-${case08.reprsntDcExpsrOrdr-1}" style="order:${case08.reprsntDcExpsrOrdr-1}">
|
|
${case08.reprsntDc}
|
|
</div>
|
|
</c:if>
|
|
<c:if test="${case08.rvwEvlScreExpsrAt eq 'Y'}">
|
|
<div class="product-unit-rating col order-${case08.rvwEvlScreExpsrOrdr-1}" style="order:${case08.rvwEvlScreExpsrOrdr-1}">
|
|
<i class="icon icon_rating-star"></i>
|
|
<span class="product-unit-rating__score"><c:out value="${case08.avgEvlScore}" default="0.0"/></span>
|
|
<span class="product-unit-rating__count">(<fmt:formatNumber value="${case08.cntEvlScor}" pattern="#,###"/>)</span>
|
|
</div>
|
|
</c:if>
|
|
<c:if test="${case08.dlvyExpsrAt eq 'Y'}">
|
|
<div class="product-unit-price__monthly-payment col order-${case08.dlvyExpsrOrdr-1}" style="order:${case08.dlvyExpsrOrdr-1}">
|
|
<c:out value="${case08.dlvyGroupNm}"/>
|
|
</div>
|
|
</c:if>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</c:if>
|
|
</c:forEach>
|
|
</div>
|
|
<!-- <div class="swiper-scrollbar"></div> -->
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
</c:if>
|
|
|
|
<!-- 베스트 리뷰 -->
|
|
<c:if test="${ relmList.relmDvCd eq '09'}">
|
|
<section class="main-section main-section__best-review">
|
|
<c:forEach items="${ resultMap.baseCase }" var="baseCase" varStatus="status">
|
|
<c:if test="${ baseCase.relmDvCd == '09' && relmList.ordr eq baseCase.sOrdr }">
|
|
<div class="main-section-header">
|
|
<div class="main-section-title">
|
|
<span class="main-section-title__description">${ baseCase.subSj }</span>
|
|
<h2 class="main-section-title__title">
|
|
${ baseCase.mainSj }
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
</c:if>
|
|
</c:forEach>
|
|
|
|
<div class="product-list-vertical-oneAndaHalf">
|
|
<div class="swiper product-list-vertical-oneAndaHalf__swiper">
|
|
<div class="swiper-wrapper">
|
|
|
|
<c:forEach items="${ resultMap.case09 }" var="case09" varStatus="status">
|
|
<c:if test="${ relmList.ordr eq case09.sOrdr }">
|
|
|
|
<div class="swiper-slide" >
|
|
<div class="best-review__item">
|
|
|
|
<div class="best-review__review" >
|
|
<a href="javascript:void(0);" onclick="fn_move_goods_dtl(${case09.goodsInnb});" class="best-review__review_a">
|
|
<div class="best-review__review-image" >
|
|
<input type="hidden" class="npayBbscttSnb" value="${ case09.npayBbscttSnb }"/>
|
|
|
|
<c:choose>
|
|
<c:when test="${ case09.photoRvwAt eq 'Y' }">
|
|
<img src="${cdnurl}${ case09.reviwImg }" class="reviwImg" alt="해당 이미지에 대한 설명" onerror="this.src='/pc/images/image_placeholder.png'">
|
|
</c:when>
|
|
<c:when test="${ case09.photoRvwAt eq 'N' }">
|
|
<img src="${cdnurl}${ case09.goodsImgCours }" class="reviwImg" alt="해당 이미지에 대한 설명" onerror="this.src='/pc/images/image_placeholder.png'">
|
|
</c:when>
|
|
</c:choose>
|
|
</div>
|
|
<span class="best-review__title">
|
|
${ case09.sj }
|
|
</span>
|
|
<div class="best-review__paragraph">
|
|
${ case09.cn }
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="best-review__product">
|
|
<div class="best-review__product-image">
|
|
<a href="javascript:void(0);" onclick="fn_move_goods_dtl(${case09.goodsInnb});">
|
|
<img src="${cdnurl}${ case09.goodsImgCours }" alt="${case09.goodsNm }" onerror="this.src='/pc/images/image_placeholder.png'">
|
|
</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(${case09.goodsInnb});">${ case09.goodsNm }</a>
|
|
</div>
|
|
</div>
|
|
<div class="product-unit-misc">
|
|
<div class="product-unit-rating">
|
|
<i class="icon icon_rating-star"></i>
|
|
<span class="product-unit-rating__score"><c:out value="${case09.avgEvlScore}" default="0.0"/></span>
|
|
</div>
|
|
<div class="product-unit-price">
|
|
<span class="product-unit-price__original <c:if test="${case09.slePercent eq 0}">visually-hidden</c:if>"><fmt:formatNumber value="${case09.cnsmrpric}" pattern="#,###"/>${curUnit}</span>
|
|
<span class="product-unit-price__current"><fmt:formatNumber value="${case09.slepric}" pattern="#,###"/>${curUnit}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</c:if>
|
|
</c:forEach>
|
|
|
|
</div>
|
|
<!-- <div class="swiper-scrollbar"></div> -->
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
</c:if>
|
|
|
|
<!-- 매거진 -->
|
|
<c:if test="${ relmList.relmDvCd eq '10'}">
|
|
<!-- 매거진 -->
|
|
<!-- 이미지 사이즈 350x250 -->
|
|
<section class="main-section main-section__magazine">
|
|
|
|
<div class="main-section-header">
|
|
<div class="main-section-title">
|
|
<span class="main-section-title__description">${ relmList.subSj }</span>
|
|
<h2 class="main-section-title__title">
|
|
${ relmList.mainSj }
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="magazine">
|
|
<div class="swiper magazine__swiper">
|
|
<div class="swiper-wrapper">
|
|
<c:forEach items="${ resultMap.case10 }" var="case10" varStatus="status">
|
|
<c:if test="${ relmList.ordr eq case10.sOrdr }">
|
|
<div class="swiper-slide">
|
|
<a href="/sopmal/csc/selectBbscttAuth?authDv=REDNG&reqUrl=detail&bbsId=${ case10.bbsId }&bbscttInnb=${ case10.bbscttInnb }">
|
|
<img src="${cdnurl}${ case10.reprsntImgSysFilNm }" alt="해당 이미지에 대한 설명" onerror="this.src='/pc/images/image_placeholder.png'">
|
|
</a>
|
|
</div>
|
|
</c:if>
|
|
</c:forEach>
|
|
</div>
|
|
</div>
|
|
<div class="magazine__link">
|
|
<a href="/sopmal/csc/selectBbscttAuth?authDv=REDNG&reqUrl=subPage&bbsId=magazine" class="magazine__more-link">매거진 더보기</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</c:if>
|
|
|
|
<!-- 브랜드 소개 -->
|
|
<c:if test="${ relmList.relmDvCd eq '11'}">
|
|
<!-- 브랜드 및 제품 바로가기 -->
|
|
<!-- 이미지 가로 사이즈 720px -->
|
|
<section class="main-section main-section__brand-link">
|
|
<div class="brand-link">
|
|
<c:forEach items="${ resultMap.case11 }" var="case11" varStatus="status">
|
|
<c:if test="${ relmList.ordr eq case11.sOrdr }">
|
|
<div class="brand-link__image">
|
|
<a href="${ case11.itmeCnncUrl }">
|
|
<c:choose>
|
|
<c:when test="${ status.index == '0' }">
|
|
<img src="${cdnurl}${ case11.filCours }/${ case11.sysFilNm }" alt="해당 이미지에 대한 설명" onerror="this.src='/pc/images/image_placeholder.png'"loading="lazy">
|
|
</c:when>
|
|
<c:otherwise>
|
|
<img src="${cdnurl}${ case11.filCours }/${ case11.sysFilNm }" alt="해당 이미지에 대한 설명" onerror="this.src='/pc/images/image_placeholder.png'"loading="lazy">
|
|
</c:otherwise>
|
|
</c:choose>
|
|
</a>
|
|
</div>
|
|
</c:if>
|
|
</c:forEach>
|
|
</div>
|
|
</section>
|
|
</c:if>
|
|
|
|
<!-- 띠배너 -->
|
|
<c:if test="${ relmList.relmDvCd eq '12'}">
|
|
<!-- 중간 띠 배너 -->
|
|
<!-- 이미지 가로 사이즈 720px -->
|
|
<section class="main-section main-section__small-banner">
|
|
<div class="small-banner">
|
|
<div class="small-banner__swiper">
|
|
<div class="swiper-wrapper">
|
|
<c:forEach items="${ resultMap.case12 }" var="case12" varStatus="status">
|
|
<c:if test="${ relmList.ordr eq case12.sOrdr }">
|
|
<div class="swiper-slide">
|
|
<a href="${ case12.itmeCnncUrl }">
|
|
<img src="${cdnurl}${ case12.filCours }/${ case12.sysFilNm }" alt="배너 내용 입력" onerror="this.src='/pc/images/image_placeholder.png'" loading="lazy">
|
|
</a>
|
|
</div>
|
|
</c:if>
|
|
</c:forEach>
|
|
</div>
|
|
<div class="swiper-pagination theme-pagination"></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</c:if>
|
|
|
|
<!-- 공지사항 -->
|
|
<c:if test="${ relmList.relmDvCd eq '13'}">
|
|
<section class="main-section main-section__notice">
|
|
<div class="mainNotice__wrapper">
|
|
<div class="mainNotice">
|
|
<h2 class="mainNotice__title">공지사항</h2>
|
|
<ul class="mainNotice__list">
|
|
<c:forEach items="${ resultMap.case13 }" var="case13" varStatus="status">
|
|
<c:if test="${ relmList.ordr eq case13.sOrdr }">
|
|
<li>
|
|
<a href="/sopmal/csc/selectBbscttAuth?authDv=CM&reqUrl=csc&bbsId=${ case13.bbsId }&bbscttInnb=${ case13.bbscttInnb }">
|
|
<i class="icon icon_notice-speaker"></i>
|
|
<span>${ case13.sj }</span>
|
|
</a>
|
|
</li>
|
|
</c:if>
|
|
</c:forEach>
|
|
</ul>
|
|
<div class="mainNotice__link">
|
|
<a href="/sopmal/csc/selectBbscttAuth?authDv=REDNG&reqUrl=csc&bbsId=notice">더보기</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</c:if>
|
|
|
|
<!-- FAQ -->
|
|
<c:if test="${ relmList.relmDvCd eq '14'}">
|
|
<section class="main-section main-section__notice">
|
|
<div class="mainNotice__wrapper">
|
|
<div class="mainNotice__customerLink">
|
|
<c:forEach items="${ resultMap.case14 }" var="case14" varStatus="status">
|
|
<c:if test="${ relmList.ordr eq case14.sOrdr }">
|
|
<c:if test="${ case14.iOrdr eq '1' }">
|
|
<a class="mainNotice__customerLink__link" href="/sopmal/csc/selectBbscttAuth?authDv=REDNG&reqUrl=csc&bbsId=faq">${ case14.itemMainSj }</a>
|
|
</c:if>
|
|
<c:if test="${ case14.iOrdr eq '2' }">
|
|
<a class="mainNotice__customerLink__link primary" href="/sopmal/csc/selectBbscttAuth?authDv=REDNG&reqUrl=useGuidance&bbsId=use_guidance">${ case14.itemMainSj }</a>
|
|
</c:if>
|
|
</c:if>
|
|
</c:forEach>
|
|
</div>
|
|
<div class="mainNotice__customerContact">
|
|
<c:forEach items="${ resultMap.case14 }" var="case14" varStatus="status">
|
|
<c:if test="${ relmList.ordr eq case14.sOrdr }">
|
|
<c:if test="${ case14.iOrdr eq '3' }">
|
|
<i class="icon icon_notice03"></i>
|
|
<div class="mainNotice__customerContact__right">
|
|
<h4 class="notice__title customer-service">${ case14.itemMainSj }</h4>
|
|
<span class="notice__number">${ case14.cscTelnb }</span>
|
|
<p class="notice__paragraph">
|
|
<span class="notice__text01">${ case14.cscWkdayWorkTme }</span>
|
|
<span class="notice__text02">(${ case14.cscLunchTme })</span>
|
|
<br>
|
|
<span class="notice__text03">${ case14.cscRstde }</span>
|
|
</p>
|
|
</div>
|
|
</c:if>
|
|
</c:if>
|
|
</c:forEach>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</c:if>
|
|
|
|
</c:forEach>
|
|
|
|
<!-- Top 버튼 -->
|
|
<div class="quick-menu__to-top">
|
|
<button><i class="icon icon_quick-to-top"></i>
|
|
<span class="visually-hidden">위로 가기</span>
|
|
</button>
|
|
</div>
|
|
</main>
|
|
<!-- 푸터 -->
|
|
<jsp:include page="/WEB-INF/views/comm/mobile/Footer.jsp"/>
|
|
</body>
|
|
<!-- 모달 -->
|
|
<!-- 메인 팝업-->
|
|
<c:if test="${ !empty resultMap.popup }">
|
|
<c:forEach items="${ resultMap.popup }" var="popup" varStatus="status">
|
|
|
|
<div class="main-popup" id="main-popup-${ popup.popupInnb }"
|
|
style="top:${ popup.mblPopupLcY }px; left:${ popup.mblPopupLcX }px; z-index: ${ status.index +10 };">
|
|
<div class="main-popup-content"
|
|
style=" width:${ popup.mblPopupMgWth }px; height:${ popup.mblPopupMgVtc }px;">
|
|
<a href="${ popup.cnncUrl }">
|
|
<img src="${cdnurl}${ popup.filCours }/${ popup.sysFilNm }"
|
|
onerror="this.src='/pc/images/image_placeholder.png'">
|
|
</a>
|
|
<c:if test="${ popup.tmeSetupAt eq 'Y' }">
|
|
<div class="main-popup-time">
|
|
<input type="hidden" name="tmeSetupValue" value="${ popup.tmeSetup }" />
|
|
<span name="tmeSetup">${ popup.tmeSetup }</span>
|
|
</div>
|
|
</c:if>
|
|
</div>
|
|
<div class="main-popup-footer">
|
|
<label class="b-checkbox checkbox is-small">
|
|
<input type="checkbox" name="checked" value="false">
|
|
<span class="check"></span>
|
|
<span class="control-label">오늘 하루 팝업 창 닫기</span>
|
|
</label>
|
|
<a href="javascript:void(0);" class="main-popup-btn" onclick="closePopup(this)">닫기</a>
|
|
</div>
|
|
</div>
|
|
|
|
</c:forEach>
|
|
</c:if>
|
|
</c:when>
|
|
<c:otherwise>
|
|
<!-- 영역 리스트 -->
|
|
<c:forEach items="${ resultMap.relmList }" var="relmList" varStatus="status">
|
|
<!-- 메인 롤링 배너 -->
|
|
<!-- 이미지 사이즈 720x600 -->
|
|
<c:if test="${ relmList.relmDvCd eq '01'}">
|
|
<div class="main-section main-section__main-banner">
|
|
<div class="swiper main-banner" id="main-banner${ relmList.ordr }">
|
|
<div class="swiper-wrapper">
|
|
<c:forEach items="${ resultMap.case01 }" var="case01" varStatus="status">
|
|
<c:if test="${ relmList.ordr eq case01.sOrdr }">
|
|
<div class="swiper-slide">
|
|
<a href="${ case01.itmeCnncUrl }">
|
|
<img src="${cdnurl}${ case01.filCours }/${ case01.sysFilNm }" alt=""
|
|
onerror="this.src='/pc/images/image_placeholder.png'">
|
|
</a>
|
|
</div>
|
|
</c:if>
|
|
</c:forEach>
|
|
</div>
|
|
<div class="main-banner__controls">
|
|
<div class="swiper-pagination" id="swiper-pagination${ relmList.ordr }"></div>
|
|
<button class="main-banner__controls__btn play"
|
|
id="main-banner__controls__btn${ relmList.ordr }">
|
|
<span class="visually-hidden">배너 재생</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</c:if>
|
|
<!-- 상품 - 그룹별 타입 -->
|
|
<c:if test="${ relmList.relmDvCd eq '02'}">
|
|
<section class="main-section section-2">
|
|
<input type="hidden" name="section-ordr" value="${ relmList.ordr }"/>
|
|
<div class="main-section-header">
|
|
<div class="main-section-title">
|
|
<span class="main-section-title__description">${ relmList.subSj }</span>
|
|
<h2 class="main-section-title__title">
|
|
${ relmList.mainSj }
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
<div class="product-tab">
|
|
<ul>
|
|
<!-- 그룹별 리스트 출력 -->
|
|
<c:forEach items="${ resultMap.baseCase }" var="baseCase" varStatus="status">
|
|
<c:if test="${ baseCase.relmDvCd == '02' && relmList.ordr eq baseCase.sOrdr }">
|
|
<li>
|
|
<button class="product-tab__btn product-tab__btn-${ relmList.ordr }"
|
|
id="product-tab__btn-${ relmList.ordr }-${ baseCase.iOrdr }"
|
|
onclick="fn_product_group_type('${ relmList.ordr }', '${baseCase.iOrdr}'); return false;">${ baseCase.goodsGroupNm }</button>
|
|
</li>
|
|
</c:if>
|
|
</c:forEach>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- 상품 리스트 출력 -->
|
|
<c:forEach items="${ resultMap.baseCase }" var="baseCase" varStatus="status">
|
|
<c:if test="${ baseCase.relmDvCd == '02' && relmList.ordr eq baseCase.sOrdr }">
|
|
|
|
<div class="product-list-type-1col product-list-type-1col_group product-list-type-1col_group-${ relmList.ordr }" id="product-list-type-1col_group-${ relmList.ordr }-${ baseCase.iOrdr }">
|
|
<div class="swiper product-list-type-1col__swiper">
|
|
<div class="swiper-wrapper">
|
|
|
|
<c:set var="cnt" value="0" />
|
|
<c:set var="openFlag" value="0" />
|
|
<c:set var="closeFlag" value="0" />
|
|
|
|
<c:forEach items="${ resultMap.case02 }" var="case02" varStatus="status">
|
|
<c:if test="${ relmList.ordr eq case02.sOrdr && baseCase.iOrdr eq case02.iOrdr }">
|
|
|
|
<c:set var="cnt" value="${ cnt + 1 }" />
|
|
<c:choose>
|
|
<c:when test="${ cnt == 1 || cnt % 4 == 1 }">
|
|
<c:set var="openFlag" value="1" />
|
|
</c:when>
|
|
<c:otherwise>
|
|
<c:set var="openFlag" value="2" />
|
|
</c:otherwise>
|
|
</c:choose>
|
|
<c:choose>
|
|
<c:when test="${ cnt % 4 == 0 }">
|
|
<c:set var="closeFlag" value="1" />
|
|
</c:when>
|
|
<c:otherwise>
|
|
<c:set var="closeFlag" value="2" />
|
|
</c:otherwise>
|
|
</c:choose>
|
|
|
|
|
|
<c:if test="${ openFlag == 1 }">
|
|
<div class="swiper-slide">
|
|
<div class="product-list-type-1col__list">
|
|
</c:if>
|
|
|
|
<div class="product-unit">
|
|
<div class="product-unit-image">
|
|
<c:choose>
|
|
<c:when test="${case02.goodsSttusCd eq '02'}">
|
|
<div class="sold-out">
|
|
<span>입고 대기중</span>
|
|
</div>
|
|
</c:when>
|
|
<c:when test="${case02.goodsSttusCd eq '03'}">
|
|
<div class="sold-out">
|
|
<span>${case02.goodsSttusNm}</span>
|
|
</div>
|
|
</c:when>
|
|
</c:choose>
|
|
<i class="icon icon_product-image-badge01"></i>
|
|
<a href="javascript:void(0);" onclick="fn_move_goods_dtl(${case02.goodsInnb});">
|
|
<img src="${cdnurl}${ case02.goodsImgCours }" alt="${case02.goodsNm }" onerror="this.src='/pc/images/image_placeholder.png'" loading="lazy">
|
|
</a>
|
|
</div>
|
|
<div class="product-unit-info">
|
|
<div class="product-unit-info__inner d-flex flex-column" style="flex-direction:column">
|
|
|
|
<c:if test="${case02.iconExpsrAt eq 'Y'}">
|
|
<div class="product-badge-container col order-${case02.iconExpsrOrdr-1}" style="order:${case02.iconExpsrOrdr-1}">
|
|
<c:if test="${not empty case02.goodsIconCd}">
|
|
<c:forEach items="${fn:split(case02.goodsIconCd, ',')}" var="iconCdNm" varStatus="iconStatus">
|
|
<c:choose>
|
|
<c:when test="${fn:contains(iconCdNm, '-')}">
|
|
<span class="product-badge ${fn:toLowerCase(iconCdNm)}">${fn:replace(fn:toUpperCase(iconCdNm), '-', ' ')}</span>
|
|
</c:when>
|
|
<c:otherwise>
|
|
<span class="product-badge ${fn:toLowerCase(iconCdNm)}">${fn:toUpperCase(iconCdNm)}</span>
|
|
</c:otherwise>
|
|
</c:choose>
|
|
</c:forEach>
|
|
</c:if>
|
|
</div>
|
|
</c:if>
|
|
<c:if test="${case02.goodsNmExpsrAt eq 'Y'}">
|
|
<div class="product-unit-title col order-${case02.goodsNmExpsrOrdr-1}" style="order:${case02.goodsNmExpsrOrdr-1}">
|
|
<a href="javascript:void(0);" onclick="fn_move_goods_dtl(${case02.goodsInnb});">${ case02.goodsNm }</a>
|
|
</div>
|
|
</c:if>
|
|
<c:if test="${case02.pricExpsrAt eq 'Y'}">
|
|
<div class="product-unit-price col order-${case02.pricExpsrOrdr-1}" style="order:${case02.pricExpsrOrdr-1}">
|
|
<div class="product-unit-price__price">
|
|
<span class="product-unit-price__original <c:if test="${case02.slePercent eq 0}">visually-hidden</c:if>"><fmt:formatNumber value="${case02.cnsmrpric}" pattern="#,###"/>${curUnit}</span>
|
|
<span class="product-unit-price__current"><fmt:formatNumber value="${case02.slepric}" pattern="#,###"/>${curUnit}</span>
|
|
</div>
|
|
<div class="product-unit-price__sale <c:if test="${case02.slePercent eq 0}">visually-hidden</c:if>">
|
|
<span class="percent"><c:out value="${case02.slePercent}"/>%</span>
|
|
</div>
|
|
</div>
|
|
</c:if>
|
|
<c:if test="${case02.reprsntDcExpsrAt eq 'Y'}">
|
|
<div class="product-unit-price__monthly-payment col order-${case02.reprsntDcExpsrOrdr-1}" style="order:${case02.reprsntDcExpsrOrdr-1}">
|
|
<c:out value="${case02.reprsntDc}"/>
|
|
</div>
|
|
</c:if>
|
|
<c:if test="${case02.rvwEvlScreExpsrAt eq 'Y'}">
|
|
<div class="product-unit-rating col order-${case02.rvwEvlScreExpsrOrdr-1}" style="order:${case02.rvwEvlScreExpsrOrdr-1}">
|
|
<i class="icon icon_rating-star"></i>
|
|
<span class="product-unit-rating__score"><c:out value="${case02.avgEvlScore}" default="0.0"/></span>
|
|
<span class="product-unit-rating__count">(<fmt:formatNumber value="${case02.cntEvlScor}" pattern="#,###"/>)</span>
|
|
</div>
|
|
</c:if>
|
|
<c:if test="${case02.dlvyExpsrAt eq 'Y'}">
|
|
<div class="product-unit-price__monthly-payment col order-${case02.dlvyExpsrOrdr-1}" style="order:${case02.dlvyExpsrOrdr-1}">
|
|
<c:out value="${case02.dlvyGroupNm}"/>
|
|
</div>
|
|
</c:if>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<c:if test="${ closeFlag == 1 }">
|
|
</div>
|
|
</div>
|
|
</c:if>
|
|
</c:if>
|
|
</c:forEach>
|
|
<c:if test="${ closeFlag == 2 }">
|
|
</div>
|
|
</div>
|
|
</c:if>
|
|
|
|
</div>
|
|
<div class="swiper-pagination theme-pagination"></div>
|
|
</div>
|
|
</div>
|
|
</c:if>
|
|
</c:forEach>
|
|
</section>
|
|
</c:if>
|
|
|
|
<!-- 상품 - 카테고리별 타입 -->
|
|
<c:if test="${ relmList.relmDvCd eq '03'}">
|
|
|
|
|
|
<section class="main-section main-section__category-type section-3">
|
|
<input type="hidden" name="section-ordr" value="${ relmList.ordr }"/>
|
|
<div class="main-section-header">
|
|
<div class="main-section-title">
|
|
<span class="main-section-title__description">${ relmList.subSj }</span>
|
|
<h2 class="main-section-title__title">
|
|
${ relmList.mainSj }
|
|
</h2>
|
|
</div>
|
|
<div class="swiper category-type-tab">
|
|
<ul class="swiper-wrapper category-type-tab__list">
|
|
<c:forEach items="${ resultMap.baseCase }" var="baseCase" varStatus="status">
|
|
<c:if test="${ baseCase.relmDvCd == '03' && relmList.ordr eq baseCase.sOrdr }">
|
|
<li class="swiper-slide">
|
|
<button class="category-type-tab__btn category-type-tab__btn-${ relmList.ordr }"
|
|
id="category-type-tab__btn-${ relmList.ordr }-${ baseCase.iOrdr }"
|
|
onclick="fn_product_category_type('${ relmList.ordr }', '${ baseCase.iOrdr }'); return false;">
|
|
<c:if test="${not empty baseCase.sysFilNm}">
|
|
<i class="icon icon_category-type-tab01">
|
|
<img src="${cdnurl}${ baseCase.filCours }/${ baseCase.sysFilNm }"
|
|
onerror="this.src='/pc/images/image_placeholder.png'">
|
|
</i>
|
|
</c:if>
|
|
<span class="category-type-tab__name">${ baseCase.ctgryNm }</span>
|
|
</button>
|
|
</li>
|
|
</c:if>
|
|
</c:forEach>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<c:forEach items="${ resultMap.baseCase }" var="baseCase" varStatus="status">
|
|
<c:if test="${ baseCase.relmDvCd == '03' && relmList.ordr eq baseCase.sOrdr }">
|
|
<div class="product-list-type-1col product-list-type-1col_category product-list-type-1col_category-${ relmList.ordr }"
|
|
id="product-list-type-1col_category-${ relmList.ordr }-${ baseCase.iOrdr }">
|
|
<%-- <div class="swiper product-list-type-1col__swiper" id="product-list-type-1col__swiper-category-${ baseCase.iOrdr }"> --%>
|
|
<!-- <div class="swiper-wrapper"> -->
|
|
|
|
<!-- </div> -->
|
|
<!-- <div class="swiper-pagination theme-pagination"></div> -->
|
|
<!-- </div> -->
|
|
</div>
|
|
</c:if>
|
|
</c:forEach>
|
|
|
|
</section>
|
|
</c:if>
|
|
|
|
<!-- 상품 - 이미지 배너 타입 -->
|
|
<c:if test="${ relmList.relmDvCd eq '04'}">
|
|
<section class="main-section main-section__product-banner">
|
|
<div class="main-section-header">
|
|
<div class="main-section-title">
|
|
<span class="main-section-title__description">${ relmList.subSj }</span>
|
|
<h2 class="main-section-title__title">
|
|
${ relmList.mainSj }
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
<div class="product-banner">
|
|
<c:forEach items="${ resultMap.baseCase }" var="baseCase" varStatus="status">
|
|
<c:if test="${ baseCase.relmDvCd eq '04' && relmList.ordr eq baseCase.sOrdr }">
|
|
<a href="${ baseCase.itmeCnncUrl }">
|
|
<div class="product-banner__image">
|
|
<img src="${cdnurl}${ baseCase.filCours }/${ baseCase.sysFilNm }" style="height: 310px;"
|
|
alt="기획전 이미지 내용 입력" onerror="this.src='/pc/images/image_placeholder.png'">
|
|
</div>
|
|
</a>
|
|
</c:if>
|
|
</c:forEach>
|
|
</div>
|
|
<div class="product-list-vertical-twoAndaHalf">
|
|
<div class="swiper product-list-vertical-twoAndaHalf__swiper">
|
|
<div class="swiper-wrapper">
|
|
|
|
<c:forEach items="${ resultMap.case04 }" var="case04" varStatus="status">
|
|
<c:if test="${ relmList.ordr eq case04.sOrdr }">
|
|
|
|
<div class="swiper-slide">
|
|
<div class="product-unit">
|
|
<div class="product-unit-image">
|
|
<c:choose>
|
|
<c:when test="${case04.goodsSttusCd eq '02'}">
|
|
<div class="sold-out">
|
|
<span>입고 대기중</span>
|
|
</div>
|
|
</c:when>
|
|
<c:when test="${case04.goodsSttusCd eq '03'}">
|
|
<div class="sold-out">
|
|
<span>${case04.goodsSttusNm}</span>
|
|
</div>
|
|
</c:when>
|
|
</c:choose>
|
|
<a href="javascript:void(0);" onclick="fn_move_goods_dtl(${case04.goodsInnb});">
|
|
<img src="${cdnurl}${ case04.goodsImgCours }" alt="${case04.goodsNm }"
|
|
onerror="this.src='/pc/images/image_placeholder.png'" loading="lazy">
|
|
</a>
|
|
</div>
|
|
|
|
<div class="product-unit-info">
|
|
<div class="product-unit-info__inner d-flex flex-column"
|
|
style="flex-direction:column">
|
|
|
|
<c:if test="${case04.iconExpsrAt eq 'Y'}">
|
|
<div class="product-badge-container col order-${case04.iconExpsrOrdr-1}"
|
|
style="order:${case04.iconExpsrOrdr-1}">
|
|
<c:if test="${not empty case04.goodsIconCd}">
|
|
<c:forEach items="${fn:split(case04.goodsIconCd, ',')}"
|
|
var="iconCdNm" varStatus="iconStatus">
|
|
<c:choose>
|
|
<c:when test="${fn:contains(iconCdNm, '-')}">
|
|
<span class="product-badge ${fn:toLowerCase(iconCdNm)}">${fn:replace(fn:toUpperCase(iconCdNm), '-', ' ')}</span>
|
|
</c:when>
|
|
<c:otherwise>
|
|
<span class="product-badge ${fn:toLowerCase(iconCdNm)}">${fn:toUpperCase(iconCdNm)}</span>
|
|
</c:otherwise>
|
|
</c:choose>
|
|
</c:forEach>
|
|
</c:if>
|
|
</div>
|
|
</c:if>
|
|
<c:if test="${case04.goodsNmExpsrAt eq 'Y'}">
|
|
<div class="product-unit-title col order-${case04.goodsNmExpsrOrdr-1}"
|
|
style="order:${case04.goodsNmExpsrOrdr-1}">
|
|
<a href="javascript:void(0);"
|
|
onclick="fn_move_goods_dtl(${case04.goodsInnb});">${ case04.goodsNm }</a>
|
|
</div>
|
|
</c:if>
|
|
<c:if test="${case04.pricExpsrAt eq 'Y'}">
|
|
<div class="product-unit-price col order-${case04.pricExpsrOrdr-1}"
|
|
style="order:${case04.pricExpsrOrdr-1}">
|
|
<div class="product-unit-price__price">
|
|
<span class="product-unit-price__original <c:if test="${case04.slePercent eq 0}">visually-hidden</c:if>"><fmt:formatNumber
|
|
value="${case04.cnsmrpric}" pattern="#,###"/>${curUnit}</span>
|
|
<span class="product-unit-price__current"><fmt:formatNumber
|
|
value="${case04.slepric}" pattern="#,###"/>${curUnit}</span>
|
|
</div>
|
|
<div class="product-unit-price__sale <c:if test="${case04.slePercent eq 0}">visually-hidden</c:if>">
|
|
<span class="percent">${ case04.slePercent }%</span>
|
|
</div>
|
|
</div>
|
|
</c:if>
|
|
<c:if test="${case04.reprsntDcExpsrAt eq 'Y'}">
|
|
<div class="product-unit-price__monthly-payment col order-${case04.reprsntDcExpsrOrdr-1}"
|
|
style="order:${case04.reprsntDcExpsrOrdr-1}">
|
|
${case04.reprsntDc}
|
|
</div>
|
|
</c:if>
|
|
<c:if test="${case04.rvwEvlScreExpsrAt eq 'Y'}">
|
|
<div class="product-unit-rating col order-${case04.rvwEvlScreExpsrOrdr-1}"
|
|
style="order:${case04.rvwEvlScreExpsrOrdr-1}">
|
|
<i class="icon icon_rating-star"></i>
|
|
<span class="product-unit-rating__score"><c:out
|
|
value="${case04.avgEvlScore}" default="0.0"/></span>
|
|
<span class="product-unit-rating__count">(<fmt:formatNumber
|
|
value="${case04.cntEvlScor}" pattern="#,###"/>)</span>
|
|
</div>
|
|
</c:if>
|
|
<c:if test="${case04.dlvyExpsrAt eq 'Y'}">
|
|
<div class="product-unit-price__monthly-payment col order-${case04.dlvyExpsrOrdr-1}"
|
|
style="order:${case04.dlvyExpsrOrdr-1}">
|
|
<c:out value="${case04.dlvyGroupNm}"/>
|
|
</div>
|
|
</c:if>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</c:if>
|
|
</c:forEach>
|
|
|
|
|
|
</div>
|
|
<!-- <div class="swiper-scrollbar"></div> -->
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</c:if>
|
|
|
|
<!-- url 기획전 -->
|
|
<c:if test="${ relmList.relmDvCd eq '05'}">
|
|
<section class="main-section main-section__product-banner">
|
|
<div class="main-section-header">
|
|
<div class="main-section-title">
|
|
<span class="main-section-title__description">${ relmList.subSj }</span>
|
|
<h2 class="main-section-title__title">
|
|
${ relmList.mainSj }
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
<div class="product-banner">
|
|
<c:forEach items="${ resultMap.baseCase }" var="baseCase" varStatus="status">
|
|
<c:if test="${ baseCase.relmDvCd eq '05' && relmList.ordr eq baseCase.sOrdr }">
|
|
<a href="${ baseCase.itmeCnncUrl }">
|
|
<div class="product-banner__image">
|
|
<img src="${cdnurl}${ baseCase.filCours }/${ baseCase.sysFilNm }" alt="기획전 이미지 내용 입력"
|
|
onerror="this.src='/pc/images/image_placeholder.png'">
|
|
</div>
|
|
<div class="product-banner__description">
|
|
<h4 class="product-banner__description-title">${ baseCase.itemMainDc }</h4>
|
|
<c:if test="${not empty baseCase.itemSubDc}">
|
|
<span class="product-banner__description-subtitle">${ baseCase.itemSubDc }
|
|
<i class="icon icon_product-banner-arrow"></i>
|
|
</span>
|
|
</c:if>
|
|
</div>
|
|
</a>
|
|
</c:if>
|
|
</c:forEach>
|
|
</div>
|
|
<div class="product-list-type-1col">
|
|
<div class="swiper product-list-type-1col__swiper">
|
|
<div class="swiper-wrapper">
|
|
|
|
<c:set var="cnt" value="0" />
|
|
<c:set var="openFlag" value="0" />
|
|
<c:set var="closeFlag" value="0" />
|
|
|
|
<c:forEach items="${ resultMap.case05 }" var="case05" varStatus="status" >
|
|
<c:if test="${ relmList.ordr eq case05.sOrdr }">
|
|
|
|
<c:set var="cnt" value="${ cnt + 1 }" />
|
|
<c:choose>
|
|
<c:when test="${ cnt == 1 || cnt % 4 == 1 }">
|
|
<c:set var="openFlag" value="1" />
|
|
</c:when>
|
|
<c:otherwise>
|
|
<c:set var="openFlag" value="2" />
|
|
</c:otherwise>
|
|
</c:choose>
|
|
<c:choose>
|
|
<c:when test="${ cnt % 4 == 0 }">
|
|
<c:set var="closeFlag" value="1" />
|
|
</c:when>
|
|
<c:otherwise>
|
|
<c:set var="closeFlag" value="2" />
|
|
</c:otherwise>
|
|
</c:choose>
|
|
|
|
<c:if test="${ openFlag == 1 }">
|
|
<div class="swiper-slide">
|
|
<div class="product-list-type-1col__list">
|
|
</c:if>
|
|
|
|
<div class="product-unit">
|
|
<div class="product-unit-image">
|
|
<c:choose>
|
|
<c:when test="${case05.goodsSttusCd eq '02'}">
|
|
<div class="sold-out">
|
|
<span>입고 대기중</span>
|
|
</div>
|
|
</c:when>
|
|
<c:when test="${case05.goodsSttusCd eq '03'}">
|
|
<div class="sold-out">
|
|
<span>${case05.goodsSttusNm}</span>
|
|
</div>
|
|
</c:when>
|
|
</c:choose>
|
|
<i class="icon icon_product-image-badge01"></i>
|
|
<a href="javascript:void(0);" onclick="fn_move_goods_dtl(${case05.goodsInnb});">
|
|
<img src="${cdnurl}${ case05.goodsImgCours }" alt="${case05.goodsNm }" onerror="this.src='/pc/images/image_placeholder.png'" loading="lazy">
|
|
</a>
|
|
</div>
|
|
<div class="product-unit-info">
|
|
<div class="product-unit-info__inner d-flex flex-column" style="flex-direction:column">
|
|
|
|
<c:if test="${case05.iconExpsrAt eq 'Y'}">
|
|
<div class="product-badge-container col order-${case05.iconExpsrOrdr-1}" style="order:${case05.iconExpsrOrdr-1}">
|
|
<c:if test="${not empty case05.goodsIconCd}">
|
|
<c:forEach items="${fn:split(case05.goodsIconCd, ',')}" var="iconCdNm" varStatus="iconStatus">
|
|
<c:choose>
|
|
<c:when test="${fn:contains(iconCdNm, '-')}">
|
|
<span class="product-badge ${fn:toLowerCase(iconCdNm)}">${fn:replace(fn:toUpperCase(iconCdNm), '-', ' ')}</span>
|
|
</c:when>
|
|
<c:otherwise>
|
|
<span class="product-badge ${fn:toLowerCase(iconCdNm)}">${fn:toUpperCase(iconCdNm)}</span>
|
|
</c:otherwise>
|
|
</c:choose>
|
|
</c:forEach>
|
|
</c:if>
|
|
</div>
|
|
</c:if>
|
|
<c:if test="${case05.goodsNmExpsrAt eq 'Y'}">
|
|
<div class="product-unit-title col order-${case05.goodsNmExpsrOrdr-1}" style="order:${case05.goodsNmExpsrOrdr-1}">
|
|
<a href="javascript:void(0);" onclick="fn_move_goods_dtl(${case05.goodsInnb});">${ case05.goodsNm }</a>
|
|
</div>
|
|
</c:if>
|
|
<c:if test="${case05.pricExpsrAt eq 'Y'}">
|
|
<div class="product-unit-price col order-${case05.pricExpsrOrdr-1}" style="order:${case05.pricExpsrOrdr-1}">
|
|
<div class="product-unit-price__price">
|
|
<span class="product-unit-price__original <c:if test="${case05.slePercent eq 0}">visually-hidden</c:if>"><fmt:formatNumber value="${case05.cnsmrpric}" pattern="#,###"/>${curUnit}</span>
|
|
<span class="product-unit-price__current"><fmt:formatNumber value="${case05.slepric}" pattern="#,###"/>${curUnit}</span>
|
|
</div>
|
|
<div class="product-unit-price__sale <c:if test="${case05.slePercent eq 0}">visually-hidden</c:if>">
|
|
<span class="percent"><c:out value="${case05.slePercent}"/>%</span>
|
|
</div>
|
|
</div>
|
|
</c:if>
|
|
<c:if test="${case05.reprsntDcExpsrAt eq 'Y'}">
|
|
<div class="product-unit-price__monthly-payment col order-${case05.reprsntDcExpsrOrdr-1}" style="order:${case05.reprsntDcExpsrOrdr-1}">
|
|
<c:out value="${case05.reprsntDc}"/>
|
|
</div>
|
|
</c:if>
|
|
<c:if test="${case05.rvwEvlScreExpsrAt eq 'Y'}">
|
|
<div class="product-unit-rating col order-${case05.rvwEvlScreExpsrOrdr-1}" style="order:${case05.rvwEvlScreExpsrOrdr-1}">
|
|
<i class="icon icon_rating-star"></i>
|
|
<span class="product-unit-rating__score"><c:out value="${case05.avgEvlScore}" default="0.0"/></span>
|
|
<span class="product-unit-rating__count">(<fmt:formatNumber value="${case05.cntEvlScor}" pattern="#,###"/>)</span>
|
|
</div>
|
|
</c:if>
|
|
<c:if test="${case05.dlvyExpsrAt eq 'Y'}">
|
|
<div class="product-unit-price__monthly-payment col order-${case05.dlvyExpsrOrdr-1}" style="order:${case05.dlvyExpsrOrdr-1}">
|
|
<c:out value="${case05.dlvyGroupNm}"/>
|
|
</div>
|
|
</c:if>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<c:if test="${ closeFlag == 1 }">
|
|
</div>
|
|
</div>
|
|
</c:if>
|
|
</c:if>
|
|
</c:forEach>
|
|
|
|
<c:if test="${ closeFlag == 2 }">
|
|
</div>
|
|
</div>
|
|
</c:if>
|
|
|
|
</div>
|
|
<div class="swiper-pagination theme-pagination"></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</c:if>
|
|
|
|
<!-- 상품 - 4열 슬라이드 타입 -->
|
|
<c:if test="${ relmList.relmDvCd eq '07'}">
|
|
<section class="main-section main-section__time-sale no-bg">
|
|
|
|
<c:forEach items="${ resultMap.baseCase }" var="baseCase" varStatus="status">
|
|
<c:if test="${ baseCase.relmDvCd == '07' && relmList.ordr eq baseCase.sOrdr }">
|
|
<div class="main-section-header">
|
|
<div class="main-section-title">
|
|
<span class="main-section-title__description">${ baseCase.subSj }</span>
|
|
<h2 class="main-section-title__title">
|
|
${ baseCase.mainSj }
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
</c:if>
|
|
</c:forEach>
|
|
<div class="product-list-vertical-twoAndaHalf">
|
|
<div class="swiper product-list-vertical-twoAndaHalf__swiper">
|
|
<div class="swiper-wrapper">
|
|
|
|
<c:forEach items="${ resultMap.case07 }" var="case07" varStatus="status">
|
|
<c:if test="${ relmList.ordr eq case07.sOrdr }">
|
|
<div class="swiper-slide">
|
|
<div class="product-unit">
|
|
<div class="product-unit-image">
|
|
<c:choose>
|
|
<c:when test="${case07.goodsSttusCd eq '02'}">
|
|
<div class="sold-out">
|
|
<span>입고 대기중</span>
|
|
</div>
|
|
</c:when>
|
|
<c:when test="${case07.goodsSttusCd eq '03'}">
|
|
<div class="sold-out">
|
|
<span>${case07.goodsSttusNm}</span>
|
|
</div>
|
|
</c:when>
|
|
</c:choose>
|
|
<a href="javascript:void(0);" onclick="fn_move_goods_dtl(${case07.goodsInnb});">
|
|
<img src="${cdnurl}${ case07.goodsImgCours }" alt="${ case07.goodsNm }" onerror="this.src='/pc/images/image_placeholder.png'" loading="lazy">
|
|
</a>
|
|
</div>
|
|
<div class="product-unit-info">
|
|
<div class="product-unit-info__inner d-flex flex-column" style="flex-direction:column">
|
|
<c:if test="${case07.iconExpsrAt eq 'Y'}">
|
|
<div class="product-badge-container col order-${case07.iconExpsrOrdr-1}" style="order:${case07.iconExpsrOrdr-1}">
|
|
<c:if test="${not empty case07.goodsIconCd}">
|
|
<c:forEach items="${fn:split(case07.goodsIconCd, ',')}" var="iconCdNm" varStatus="iconStatus">
|
|
<c:choose>
|
|
<c:when test="${fn:contains(iconCdNm, '-')}">
|
|
<span class="product-badge ${fn:toLowerCase(iconCdNm)}">${fn:replace(fn:toUpperCase(iconCdNm), '-', ' ')}</span>
|
|
</c:when>
|
|
<c:otherwise>
|
|
<span class="product-badge ${fn:toLowerCase(iconCdNm)}">${fn:toUpperCase(iconCdNm)}</span>
|
|
</c:otherwise>
|
|
</c:choose>
|
|
</c:forEach>
|
|
</c:if>
|
|
</div>
|
|
</c:if>
|
|
<c:if test="${case07.goodsNmExpsrAt eq 'Y'}">
|
|
<div class="product-unit-title col order-${case07.goodsNmExpsrOrdr-1}" style="order:${case07.goodsNmExpsrOrdr-1}">
|
|
<a href="javascript:void(0);" onclick="fn_move_goods_dtl(${case07.goodsInnb});">${ case07.goodsNm }</a>
|
|
</div>
|
|
</c:if>
|
|
<c:if test="${case07.pricExpsrAt eq 'Y'}">
|
|
<div class="product-unit-price col order-${case07.pricExpsrOrdr-1}" style="order:${case07.pricExpsrOrdr-1}">
|
|
<div class="product-unit-price__price">
|
|
<span class="product-unit-price__original <c:if test="${case07.slePercent eq 0}">visually-hidden</c:if>"><fmt:formatNumber value="${case07.cnsmrpric}" pattern="#,###"/>${curUnit}</span>
|
|
<span class="product-unit-price__current"><fmt:formatNumber value="${case07.slepric}" pattern="#,###"/>${curUnit}</span>
|
|
</div>
|
|
<div class="product-unit-price__sale <c:if test="${case07.slePercent eq 0}">visually-hidden</c:if>">
|
|
<span class="percent">${ case07.slePercent }%</span>
|
|
</div>
|
|
</div>
|
|
</c:if>
|
|
<c:if test="${case07.reprsntDcExpsrAt eq 'Y'}">
|
|
<div class="product-unit-price__monthly-payment col order-${case07.reprsntDcExpsrOrdr-1}" style="order:${case07.reprsntDcExpsrOrdr-1}">
|
|
${case07.reprsntDc}
|
|
</div>
|
|
</c:if>
|
|
<c:if test="${case07.rvwEvlScreExpsrAt eq 'Y'}">
|
|
<div class="product-unit-rating col order-${case07.rvwEvlScreExpsrOrdr-1}" style="order:${case07.rvwEvlScreExpsrOrdr-1}">
|
|
<i class="icon icon_rating-star"></i>
|
|
<span class="product-unit-rating__score"><c:out value="${case07.avgEvlScore}" default="0.0"/></span>
|
|
<span class="product-unit-rating__count">(<fmt:formatNumber value="${case07.cntEvlScor}" pattern="#,###"/>)</span>
|
|
</div>
|
|
</c:if>
|
|
<c:if test="${case07.dlvyExpsrAt eq 'Y'}">
|
|
<div class="product-unit-price__monthly-payment col order-${case07.dlvyExpsrOrdr-1}" style="order:${case07.dlvyExpsrOrdr-1}">
|
|
<c:out value="${case07.dlvyGroupNm}"/>
|
|
</div>
|
|
</c:if>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</c:if>
|
|
</c:forEach>
|
|
|
|
</div>
|
|
<!-- <div class="swiper-scrollbar"></div> -->
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</c:if>
|
|
|
|
<!-- 타임세일 -->
|
|
<!-- 타임세일 (배경 이미지 X, "no-bg" 클래스 추가, 상품 1.5열 슬라이드) -->
|
|
<c:if test="${ relmList.relmDvCd eq '08'}">
|
|
<c:forEach items="${ resultMap.baseCase }" var="baseCase" varStatus="status" >
|
|
<c:if test="${ baseCase.relmDvCd eq '08' && relmList.ordr eq baseCase.sOrdr }">
|
|
<c:choose>
|
|
<c:when test="${ empty baseCase.filCours}">
|
|
<section class="main-section main-section__time-sale no-bg">
|
|
</c:when>
|
|
<c:otherwise>
|
|
<section class="main-section main-section__time-sale" style="background-image: url('${cdnurl}${ baseCase.filCours }/${ baseCase.sysFilNm }');" >
|
|
</c:otherwise>
|
|
</c:choose>
|
|
</c:if>
|
|
</c:forEach>
|
|
|
|
<div class="main-section-header">
|
|
<div class="main-section-title">
|
|
<span class="main-section-title__description">얼마 남지 않았어요!</span>
|
|
<h2 class="main-section-title__title">
|
|
타임세일⏰
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="product-list-vertical-oneAndaHalf">
|
|
<div class="swiper product-list-vertical-oneAndaHalf__swiper">
|
|
<div class="swiper-wrapper">
|
|
<c:forEach items="${ resultMap.case08 }" var="case08" varStatus="status">
|
|
<c:if test="${ relmList.ordr eq case08.sOrdr }">
|
|
|
|
<div class="swiper-slide">
|
|
<div class="product-unit">
|
|
|
|
<div class="product-unit-image">
|
|
<c:choose>
|
|
<c:when test="${case08.goodsSttusCd eq '02'}">
|
|
<div class="sold-out">
|
|
<span>입고 대기중</span>
|
|
</div>
|
|
</c:when>
|
|
<c:when test="${case08.goodsSttusCd eq '03'}">
|
|
<div class="sold-out">
|
|
<span>${case08.goodsSttusNm}</span>
|
|
</div>
|
|
</c:when>
|
|
</c:choose>
|
|
<c:if test="${(case08.evtTmeExpsrAt eq 'Y' and case08.remainTime ne 'N') or (case08.rltmQyBannerExpsrAt eq 'Y' and case08.remainQy > 0) }">
|
|
<div class="time-sale__top">
|
|
<c:if test="${case08.evtTmeExpsrAt eq 'Y' and case08.remainTime ne 'N'}">
|
|
<span class="time" name="remainTime">${case08.remainTime}</span>
|
|
|
|
<%-- <span class="time" name="tmeSetup">${case08.tmeSetup}</span> --%>
|
|
<%-- <input type="hidden" name="tmeSetupValue" value="${ case08.tmeSetup }" /> --%>
|
|
</c:if>
|
|
<c:if test="${case08.rltmQyBannerExpsrAt eq 'Y' and case08.remainQy > 0 }">
|
|
<span class="left">남은수량 ${ case08.remainQy }개</span>
|
|
</c:if>
|
|
</div>
|
|
</c:if>
|
|
<a href="javascript:void(0);" onclick="fn_move_goods_dtl(${case08.goodsInnb});">
|
|
<img src="${cdnurl}${ case08.goodsImgCours }" alt="${ case08.goodsNm }" onerror="this.src='/pc/images/image_placeholder.png'">
|
|
</a>
|
|
</div>
|
|
|
|
<div class="product-unit-info">
|
|
<div class="product-unit-info__inner d-flex flex-column" style="flex-direction:column">
|
|
|
|
<c:if test="${case08.iconExpsrAt eq 'Y'}">
|
|
<div class="product-badge-container col order-${case08.iconExpsrOrdr-1}" style="order:${case08.iconExpsrOrdr-1}">
|
|
<c:if test="${not empty case08.goodsIconCd}">
|
|
<c:forEach items="${fn:split(case08.goodsIconCd, ',')}" var="iconCdNm" varStatus="iconStatus">
|
|
<c:choose>
|
|
<c:when test="${fn:contains(iconCdNm, '-')}">
|
|
<span class="product-badge ${fn:toLowerCase(iconCdNm)}">${fn:replace(fn:toUpperCase(iconCdNm), '-', ' ')}</span>
|
|
</c:when>
|
|
<c:otherwise>
|
|
<span class="product-badge ${fn:toLowerCase(iconCdNm)}">${fn:toUpperCase(iconCdNm)}</span>
|
|
</c:otherwise>
|
|
</c:choose>
|
|
</c:forEach>
|
|
</c:if>
|
|
</div>
|
|
</c:if>
|
|
<c:if test="${case08.goodsNmExpsrAt eq 'Y'}">
|
|
<div class="product-unit-title col order-${case08.goodsNmExpsrOrdr-1}" style="order:${case08.goodsNmExpsrOrdr-1}">
|
|
<a href="javascript:void(0);" onclick="fn_move_goods_dtl(${case08.goodsInnb});">${ case08.goodsNm }</a>
|
|
</div>
|
|
</c:if>
|
|
<c:if test="${case08.pricExpsrAt eq 'Y'}">
|
|
<div class="product-unit-price col order-${case08.pricExpsrOrdr-1}" style="order:${case08.pricExpsrOrdr-1}">
|
|
<div class="product-unit-price__price">
|
|
<span class="product-unit-price__original <c:if test="${case08.slePercent eq 0}">visually-hidden</c:if>"><fmt:formatNumber value="${case08.cnsmrpric}" pattern="#,###"/>${curUnit}</span>
|
|
<span class="product-unit-price__current"><fmt:formatNumber value="${case08.slepric}" pattern="#,###"/>${curUnit}</span>
|
|
</div>
|
|
<div class="product-unit-price__sale <c:if test="${case08.slePercent eq 0}">visually-hidden</c:if>">
|
|
<span class="percent">${ case08.slePercent }%</span>
|
|
</div>
|
|
</div>
|
|
</c:if>
|
|
<c:if test="${case08.reprsntDcExpsrAt eq 'Y'}">
|
|
<div class="product-unit-price__monthly-payment col order-${case08.reprsntDcExpsrOrdr-1}" style="order:${case08.reprsntDcExpsrOrdr-1}">
|
|
${case08.reprsntDc}
|
|
</div>
|
|
</c:if>
|
|
<c:if test="${case08.rvwEvlScreExpsrAt eq 'Y'}">
|
|
<div class="product-unit-rating col order-${case08.rvwEvlScreExpsrOrdr-1}" style="order:${case08.rvwEvlScreExpsrOrdr-1}">
|
|
<i class="icon icon_rating-star"></i>
|
|
<span class="product-unit-rating__score"><c:out value="${case08.avgEvlScore}" default="0.0"/></span>
|
|
<span class="product-unit-rating__count">(<fmt:formatNumber value="${case08.cntEvlScor}" pattern="#,###"/>)</span>
|
|
</div>
|
|
</c:if>
|
|
<c:if test="${case08.dlvyExpsrAt eq 'Y'}">
|
|
<div class="product-unit-price__monthly-payment col order-${case08.dlvyExpsrOrdr-1}" style="order:${case08.dlvyExpsrOrdr-1}">
|
|
<c:out value="${case08.dlvyGroupNm}"/>
|
|
</div>
|
|
</c:if>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</c:if>
|
|
</c:forEach>
|
|
</div>
|
|
<!-- <div class="swiper-scrollbar"></div> -->
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
</c:if>
|
|
|
|
<!-- 브랜드 소개 -->
|
|
<c:if test="${ relmList.relmDvCd eq '11'}">
|
|
<!-- 브랜드 및 제품 바로가기 -->
|
|
<!-- 이미지 가로 사이즈 720px -->
|
|
<section class="main-section main-section__brand-link">
|
|
<div class="brand-link">
|
|
<c:forEach items="${ resultMap.case11 }" var="case11" varStatus="status">
|
|
<c:if test="${ relmList.ordr eq case11.sOrdr }">
|
|
<div class="brand-link__image">
|
|
<a href="${ case11.itmeCnncUrl }">
|
|
<c:choose>
|
|
<c:when test="${ status.index == '0' }">
|
|
<img src="${cdnurl}${ case11.filCours }/${ case11.sysFilNm }" alt="해당 이미지에 대한 설명" onerror="this.src='/pc/images/image_placeholder.png'"loading="lazy">
|
|
</c:when>
|
|
<c:otherwise>
|
|
<img src="${cdnurl}${ case11.filCours }/${ case11.sysFilNm }" alt="해당 이미지에 대한 설명" onerror="this.src='/pc/images/image_placeholder.png'"loading="lazy">
|
|
</c:otherwise>
|
|
</c:choose>
|
|
</a>
|
|
</div>
|
|
</c:if>
|
|
</c:forEach>
|
|
</div>
|
|
</section>
|
|
</c:if>
|
|
|
|
<!-- 띠배너 -->
|
|
<c:if test="${ relmList.relmDvCd eq '12'}">
|
|
<!-- 중간 띠 배너 -->
|
|
<!-- 이미지 가로 사이즈 720px -->
|
|
<section class="main-section main-section__small-banner">
|
|
<div class="small-banner">
|
|
<div class="small-banner__swiper">
|
|
<div class="swiper-wrapper">
|
|
<c:forEach items="${ resultMap.case12 }" var="case12" varStatus="status">
|
|
<c:if test="${ relmList.ordr eq case12.sOrdr }">
|
|
<div class="swiper-slide">
|
|
<a href="${ case12.itmeCnncUrl }">
|
|
<img src="${cdnurl}${ case12.filCours }/${ case12.sysFilNm }" alt="배너 내용 입력" onerror="this.src='/pc/images/image_placeholder.png'" loading="lazy">
|
|
</a>
|
|
</div>
|
|
</c:if>
|
|
</c:forEach>
|
|
</div>
|
|
<div class="swiper-pagination theme-pagination"></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</c:if>
|
|
</c:forEach>
|
|
</c:otherwise>
|
|
</c:choose>
|
|
<style>
|
|
.main-popup {
|
|
display:none;
|
|
/* max-width: 520px; */
|
|
position:absolute;
|
|
border-radius: 24px;
|
|
overflow: hidden;
|
|
background: #fff;
|
|
box-sizing: border-box;
|
|
|
|
|
|
max-width: 400px;
|
|
max-height: 100vh;
|
|
}
|
|
|
|
.main-popup-content {
|
|
max-height: 640px;
|
|
overflow-y: auto;
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
|
|
|
|
overflow: hidden;
|
|
}
|
|
|
|
.main-popup-footer {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 4px 8px;
|
|
}
|
|
|
|
.main-popup-footer label{
|
|
margin-left: 12px;
|
|
color: #16191d
|
|
}
|
|
|
|
.main-popup-content img {
|
|
width:100%;
|
|
height:100%;
|
|
/* object-fit: cover; */
|
|
|
|
|
|
position : absolute;
|
|
top:0; left:0;
|
|
background-size:cover;
|
|
}
|
|
|
|
.main-popup-btn {
|
|
height:28px;
|
|
font-size: 14px;
|
|
background-color: transparent;
|
|
color: #16191d;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0 18px;
|
|
}
|
|
|
|
.main-popup-btn:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.main-popup-time {
|
|
position: absolute;
|
|
bottom:0; left:0;
|
|
width: 100%;
|
|
height:30px;
|
|
background-color: black;
|
|
opacity:0.6;
|
|
z-index: 1;
|
|
text-align: center;
|
|
display: flex;
|
|
justify-content: center;
|
|
|
|
}
|
|
|
|
.main-popup-time span {
|
|
/* width:100%; */
|
|
text-align: center;
|
|
color: white;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
</style>
|
|
<script>
|
|
$(document).ready(function () {// 상품 그룹 탭
|
|
//fn_product_group_type('1');
|
|
$('.section-2').each(function () {
|
|
let ordr = $(this).find('input[name="section-ordr"]').val();
|
|
fn_product_group_type(ordr, "1");
|
|
});
|
|
|
|
// 상품 카테고리 탭
|
|
//fn_product_category_type('1');
|
|
$('.section-3').each(function () {
|
|
let ordr = $(this).find('input[name="section-ordr"]').val();
|
|
fn_product_category_type(ordr, "1");
|
|
});
|
|
|
|
// 베스트리뷰 네이버페이 이미지 수정
|
|
$('.best-review__review > .best-review__review_a').each(function () {
|
|
let npay = $(this).find('.npayBbscttSnb').val();
|
|
|
|
// 네이버페이인 경우
|
|
if (npay != "") {
|
|
let cn = $(this).find('.best-review__paragraph').html();
|
|
let tempDiv = $('<div>').html(cn);
|
|
let firstImg = tempDiv.find('img').first();
|
|
|
|
$(this).find('.reviwImg').attr('src', firstImg.attr('src'));
|
|
}
|
|
});
|
|
|
|
// 베스트리뷰 내용에 태그 제거
|
|
$('.best-review__paragraph').each(function () {
|
|
let prevValue = $(this).text();
|
|
$(this).text(prevValue.trim());
|
|
});
|
|
|
|
// 타임이벤트시 시간 떨어뜨리는 함수
|
|
startCountdown();
|
|
|
|
openPopup();
|
|
});
|
|
|
|
|
|
// 상품 그룹 탭 클릭 시
|
|
const fn_product_group_type = function (ordr, tabNo) {
|
|
$('.product-tab__btn-' + ordr).removeClass('active');
|
|
$('#product-tab__btn-' + ordr + '-' + tabNo).addClass('active');
|
|
|
|
$('.product-list-type-1col_group-' + ordr).hide();
|
|
$('#product-list-type-1col_group-' + ordr + '-' + tabNo).show();
|
|
}
|
|
|
|
|
|
// 상품 카테고리 탭 클릭 시
|
|
const fn_product_category_type = function (ordr, tabNo) {
|
|
$('.category-type-tab__btn-' + ordr).removeClass('active');
|
|
$('#category-type-tab__btn-' + ordr + '-' + tabNo).addClass('active');
|
|
|
|
fn_select_product_category(ordr, tabNo);
|
|
|
|
$('.product-list-type-1col_category-' + ordr).hide();
|
|
$('#product-list-type-1col_category-' + ordr + '-' + tabNo).show();
|
|
}
|
|
|
|
|
|
// 상품 카테고리 가져오기
|
|
const fn_select_product_category = function (ordr, tabNo) {
|
|
|
|
$.ajax({
|
|
type: "post",
|
|
url: "/sopmal/main/selectMainSiteDesignCtgryListInqire",
|
|
data: {
|
|
ordr: ordr,
|
|
expsrOrdr: tabNo
|
|
},
|
|
success: function (data) {
|
|
let result = JSON.parse(data.resBody.result);
|
|
fn_product_category_setting(result, ordr, tabNo);
|
|
}
|
|
|
|
});
|
|
}
|
|
|
|
// 상품 카테고리
|
|
const fn_product_category_setting = function (data, ordr, tabNo) {
|
|
let result = data.resultMap;
|
|
let str = "";
|
|
var curUnit = '${curUnit}';
|
|
|
|
let cnt = 0;
|
|
let openFlag = 0;
|
|
let closeFlag = 0;
|
|
let showCnt = 4;
|
|
|
|
str += '<div class="swiper product-list-type-1col__swiper">';
|
|
|
|
str += '<div class="swiper-wrapper">';
|
|
|
|
$.each(result, function (index, result) {
|
|
cnt = cnt + 1;
|
|
if (cnt == 1 || cnt % showCnt == 1) {
|
|
openFlag = 1;
|
|
} else {
|
|
openFlag = 2;
|
|
}
|
|
|
|
if (cnt % showCnt == 0) {
|
|
closeFlag = 1;
|
|
} else {
|
|
closeFlag = 2;
|
|
}
|
|
|
|
if (openFlag == 1) {
|
|
str += '<div class="swiper-slide">';
|
|
str += ' <div class="product-list-type-1col__list">';
|
|
}
|
|
|
|
str += '<div class="product-unit">';
|
|
str += ' <div class="product-unit-image">';
|
|
if (result.goodsSttusCd === '02') {
|
|
str += '<div class="sold-out">';
|
|
str += ' <span>입고 대기중</span>';
|
|
str += '</div>';
|
|
} else if (result.goodsSttusCd === '03') {
|
|
str += '<div class="sold-out">';
|
|
str += ' <span>'+result.goodsSttusNm+'</span>';
|
|
str += '</div>';
|
|
}
|
|
str += ' <a href="javascript:void(0);" onclick="fn_move_goods_dtl(' + result.goodsInnb + ');">';
|
|
str += ' <img src="${cdnurl}' + result.goodsImgCours + '" alt="' + result.goodsNm + '" onerror="this.src=\'/pc/images/image_placeholder.png\'" >';
|
|
str += ' </a>';
|
|
str += ' </div>';
|
|
str += ' <div class="product-unit-info">';
|
|
str += ' <div class="product-unit-info__inner d-flex flex-column" style="flex-direction:column">';
|
|
|
|
if (result.iconExpsrAt == 'Y') {
|
|
str += '<div class="product-badge-container col order-' + (result.iconExpsrOrdr - 1) + '" style="order:' + (result.iconExpsrOrdr - 1) + '">';
|
|
|
|
if (result.goodsIconCd != null && result.goodsIconCd != "") {
|
|
let iconCdNm = result.goodsIconCd.split(',');
|
|
|
|
$.each(iconCdNm, function (index, iconCdNm) {
|
|
let lower = iconCdNm.toLowerCase();
|
|
let upper = iconCdNm.toUpperCase();
|
|
|
|
if (iconCdNm.includes('-')) {
|
|
let temp = upper.replace(/-/g, ' ');
|
|
str += '<span class="product-badge ' + lower + '">' + temp + '</span>';
|
|
} else {
|
|
str += '<span class="product-badge ' + lower + '">' + upper + '</span>';
|
|
}
|
|
});
|
|
}
|
|
|
|
str += '</div>';
|
|
}
|
|
if (result.goodsNmExpsrAt == 'Y') {
|
|
str += '<div class="product-unit-title col order-' + (result.goodsNmExpsrOrdr - 1) + '" style="order:' + (result.goodsNmExpsrOrdr - 1) + '">';
|
|
str += ' <a href="javascript:void(0);" onclick="fn_move_goods_dtl(' + result.goodsInnb + ');">' + result.goodsNm + '</a>';
|
|
str += '</div>';
|
|
}
|
|
if (result.pricExpsrAt == 'Y') {
|
|
str += '<div class="product-unit-price col order-' + (result.pricExpsrOrdr - 1) + '" style="order:' + (result.pricExpsrOrdr - 1) + '">';
|
|
str += ' <div class="product-unit-price__price">';
|
|
str += ' <span class="product-unit-price__original' + (result.slePercent == 0 ? ' visually-hidden' : '') + new Intl.NumberFormat('ko-KR').format(result.cnsmrpric) + curUnit + '</span>';
|
|
str += ' <span class="product-unit-price__current">' + new Intl.NumberFormat('ko-KR').format(result.slepric) + curUnit + '</span>';
|
|
str += ' </div>';
|
|
str += ' <div class="product-unit-price__sale' + (result.slePercent == 0 ? ' visually-hidden' : '') + '">';
|
|
str += ' <span class="percent">' + result.slePercent + '%</span>';
|
|
str += ' </div>';
|
|
str += '</div>';
|
|
}
|
|
if (result.reprsntDcExpsrAt == 'Y') {
|
|
str += '<div class="product-unit-price__monthly-payment col order-' + (result.reprsntDcExpsrOrdr - 1) + '" style="order:' + (result.reprsntDcExpsrOrdr - 1) + '">';
|
|
// str += ' ' + result.reprsntDc + '';
|
|
str += ' '+fn_default_message(result.reprsntDc, '')+'';
|
|
str += '</div>';
|
|
}
|
|
if (result.rvwEvlScreExpsrAt == 'Y') {
|
|
str += '<div class="product-unit-rating col order-' + (result.rvwEvlScreExpsrOrdr - 1) + '" style="order:' + (result.rvwEvlScreExpsrOrdr - 1) + '">';
|
|
str += ' <i class="icon icon_rating-star"></i>';
|
|
// str += ' <span class="product-unit-rating__score">' + result.avgEvlScore + '</span>';
|
|
str += ' <span class="product-unit-rating__score">'+fn_default_message(result.avgEvlScore, '0.0')+'</span>';
|
|
str += ' <span class="product-unit-rating__count">(' + new Intl.NumberFormat('ko-KR').format(result.cntEvlScor) + ')</span>';
|
|
str += '</div>';
|
|
}
|
|
if (result.dlvyExpsrAt == 'Y') {
|
|
str += '<div class="product-unit-price__monthly-payment col order-' + (result.dlvyExpsrOrdr - 1) + '" style="order:' + (result.dlvyExpsrOrdr - 1) + '">';
|
|
str += ' ' + result.dlvyGroupNm + '';
|
|
str += '</div>';
|
|
}
|
|
|
|
str += ' </div>';
|
|
str += ' </div>';
|
|
str += '</div>';
|
|
|
|
|
|
if (closeFlag == 1) {
|
|
str += ' </div>';
|
|
str += '</div>';
|
|
}
|
|
});
|
|
|
|
if (closeFlag == 2) {
|
|
str += ' </div>';
|
|
str += '</div>';
|
|
}
|
|
|
|
str += ' </div>';
|
|
str += '<div class="swiper-pagination theme-pagination"></div>';
|
|
|
|
str += '</div>';
|
|
|
|
|
|
$('#product-list-type-1col_category-' + ordr + '-' + tabNo).html(str);
|
|
|
|
// Swiper 초기화
|
|
const swiper = new Swiper('.product-list-type-1col_category > .swiper', {
|
|
pagination: {
|
|
el: '.swiper-pagination',
|
|
clickable: true,
|
|
},
|
|
});
|
|
|
|
}
|
|
|
|
|
|
// 기본 값 설정
|
|
function fn_default_message(key, defaultMessage) {
|
|
return key ? key : defaultMessage;
|
|
}
|
|
|
|
//타임 이벤트 카운트 다운
|
|
function startCountdown() {
|
|
// 각 span 태그의 remainTime을 처리합니다.
|
|
$('span[name^="remainTime"]').each(function () {
|
|
let remainTime = $(this).text().trim(); // 현재 span의 텍스트 가져오기
|
|
|
|
// 시간을 시, 분, 초로 분리
|
|
if (remainTime === 'N') {
|
|
return false; // remainTime이 'N'이면 중지
|
|
}
|
|
|
|
let [hours, minutes, seconds] = remainTime.split(':').map(Number);
|
|
|
|
// 타이머 업데이트 함수
|
|
function updateTimer() {
|
|
// 현재 시간을 표시
|
|
let formattedHours = hours < 10 ? '0' + hours : hours;
|
|
let formattedMinutes = minutes < 10 ? '0' + minutes : minutes;
|
|
let formattedSeconds = seconds < 10 ? '0' + seconds : seconds;
|
|
|
|
let result_days = Math.floor(formattedHours / 24);
|
|
let result_hours = formattedHours % 24;
|
|
|
|
let result;
|
|
|
|
if (result_days >= 1) {
|
|
// console.log("일수 필요");
|
|
result = result_days + '일 ' + result_hours + ':' + formattedMinutes + ':' + formattedSeconds;
|
|
|
|
} else {
|
|
result = result_hours + ':' + formattedMinutes + ':' + formattedSeconds;
|
|
}
|
|
|
|
$(this).text(result);
|
|
|
|
// 현재 span 태그에 업데이트
|
|
// $(this).text(formattedHours + ':' + formattedMinutes + ':' + formattedSeconds);
|
|
|
|
// 1초 감소
|
|
seconds--;
|
|
|
|
// 초가 0보다 작아지면 분에서 1을 빼고 초를 59로 설정
|
|
if (seconds < 0) {
|
|
seconds = 59;
|
|
minutes--;
|
|
}
|
|
|
|
// 분이 0보다 작아지면 시간에서 1을 빼고 분을 59로 설정
|
|
if (minutes < 0) {
|
|
minutes = 59;
|
|
hours--;
|
|
}
|
|
|
|
// 시간이 0보다 작아지면 타이머 중지
|
|
if (hours < 0) {
|
|
$(this).text("00:00:00");
|
|
clearInterval(timerInterval);
|
|
}
|
|
}
|
|
|
|
// `this`를 업데이트 함수에서 사용할 수 있도록 바인딩
|
|
const timerInterval = setInterval(updateTimer.bind(this), 1000);
|
|
});
|
|
}
|
|
|
|
|
|
|
|
|
|
// 팝업 창 열기
|
|
function openPopup() {
|
|
let popupId;
|
|
$('.main-popup').each(function () {
|
|
popupId = $(this).attr('id');
|
|
let popupFlag = getCookie(popupId);
|
|
|
|
if (popupFlag) {
|
|
$('#' + popupId).css('display', 'none');
|
|
} else {
|
|
$('#' + popupId).css('display', 'block');
|
|
}
|
|
});
|
|
}
|
|
|
|
// 쿠키 불러오기
|
|
function getCookie(name) {
|
|
const cookies = document.cookie.split(';')
|
|
|
|
for (let i = 0; i < cookies.length; i++) {
|
|
let cookie = cookies[i].trim();
|
|
|
|
if (cookie.startsWith(name + '=')) {
|
|
return true;
|
|
}
|
|
}
|
|
|
|
return false;
|
|
}
|
|
|
|
// 쿠키 설정 expiredays 후의 클릭한 시간까지
|
|
function setCookie24(name, value, expiredays) {
|
|
var todayDate = new Date();
|
|
todayDate.setDate(todayDate.getDate() + expiredays);
|
|
|
|
document.cookie = name + "=" + escape(value) + "; path=/; expires=" + todayDate.toGMTString() + ";";
|
|
}
|
|
|
|
// 팝업 닫기
|
|
function closePopup(ele) {
|
|
$(ele).closest('.main-popup').css('display', 'none');
|
|
|
|
let cookieName = $(ele).closest('.main-popup').attr('id');
|
|
let checkFlag = $(ele).closest('.main-popup').find('input[name="checked"]').is(':checked');
|
|
|
|
// console.log("cookieName = "+cookieName);
|
|
// console.log("checkFlag = "+checkFlag);
|
|
|
|
// 체크가 되어 있으면
|
|
if (checkFlag) {
|
|
setCookie24(cookieName, 'Y', 1);
|
|
}
|
|
}
|
|
|
|
|
|
|
|
// 팝업 시간 카운트
|
|
function countDown() {
|
|
|
|
$('span[name^="tmeSetup"]').each(function() {
|
|
|
|
let targetDateString = $(this).siblings('input[name="tmeSetupValue"]').val();
|
|
let targetDate = new Date(targetDateString);
|
|
|
|
let now = new Date();
|
|
let difference = targetDate - now;
|
|
|
|
if (difference <= 0) {
|
|
console.log("시간이 지났습니다!");
|
|
clearInterval(timer); // 카운트다운 종료
|
|
|
|
$(this).text('00:00:00');
|
|
return;
|
|
}
|
|
|
|
let hours = Math.floor( difference / (1000 * 60 * 60) );
|
|
let minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60));
|
|
let seconds = Math.floor((difference % (1000 * 60)) / 1000);
|
|
|
|
// 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(hours / 24);
|
|
let result_hours = hours % 24;
|
|
|
|
let result;
|
|
|
|
if(result_days >= 1) {
|
|
console.log("일수 필요");
|
|
result = result_days + '일 ' + result_hours + ':' + formattedMinutes + ':' + formattedSeconds;
|
|
|
|
}else {
|
|
result = result_hours + ':' + formattedMinutes + ':' + formattedSeconds;
|
|
}
|
|
|
|
|
|
$(this).text(result);
|
|
|
|
});
|
|
|
|
}
|
|
|
|
// 1초마다 카운트다운 업데이트
|
|
const timer = setInterval(countDown, 1000);
|
|
|
|
// 241105 카테고리별 타입탭 슬라이드
|
|
|
|
const categoryTypeSwipers = Array.from(document.querySelectorAll('.category-type-tab.swiper'));
|
|
|
|
categoryTypeSwipers.forEach((categoryType, index) => {
|
|
const categoryTypeSwiper = new Swiper(categoryType, {
|
|
slidesPerView: 4.5,
|
|
slidesPerGroup: 4,
|
|
spaceBetween: 12,
|
|
breakpoints: {
|
|
640: {
|
|
slidesPerView: 6.5,
|
|
slidesPerGroup: 6,
|
|
|
|
}
|
|
}
|
|
});
|
|
});
|
|
|
|
|
|
// 메인 롤링 배너
|
|
const mainSwiper = new Swiper(".main-banner", {
|
|
loop: true,
|
|
pagination: {
|
|
el: ".main-banner .swiper-pagination",
|
|
type: "fraction",
|
|
},
|
|
autoplay: {
|
|
delay: 4000,
|
|
},
|
|
});
|
|
|
|
const playPauseBtn = document.querySelector('.main-banner__controls__btn.play');
|
|
let isAutoplay = true;
|
|
|
|
if(!fn_is_empty(playPauseBtn)){
|
|
playPauseBtn.addEventListener('click', function () {
|
|
if (isAutoplay) {
|
|
mainSwiper.autoplay.stop();
|
|
this.classList.add('paused');
|
|
this.querySelector('.visually-hidden').textContent = '배너 재생'; // Changing button text for screen readers
|
|
} else {
|
|
mainSwiper.autoplay.start();
|
|
this.classList.remove('paused');
|
|
this.querySelector('.visually-hidden').textContent = '배너 멈춤'; // Changing button text for screen readers
|
|
}
|
|
isAutoplay = !isAutoplay;
|
|
});
|
|
}
|
|
|
|
|
|
let main_banner = $('.main-banner');
|
|
|
|
for (let i = 1; i <= main_banner.length; i++) {
|
|
let main_banner = "#main-banner" + i;
|
|
let swiper_pagination = "#swiper-pagination" + i;
|
|
|
|
const mainSwiper = new Swiper(main_banner, {
|
|
loop: true,
|
|
pagination: {
|
|
el: swiper_pagination,
|
|
type: "fraction",
|
|
},
|
|
autoplay: {
|
|
delay: 4000,
|
|
},
|
|
});
|
|
|
|
const playPauseBtn = '#main-banner__controls__btn' + i;
|
|
let isAutoplay = true;
|
|
|
|
$(playPauseBtn).on('click', function () {
|
|
if (isAutoplay) {
|
|
mainSwiper.autoplay.stop();
|
|
this.classList.add('paused');
|
|
this.querySelector('.visually-hidden').textContent = '배너 재생'; // Changing button text for screen readers
|
|
} else {
|
|
mainSwiper.autoplay.start();
|
|
this.classList.remove('paused');
|
|
this.querySelector('.visually-hidden').textContent = '배너 멈춤'; // Changing button text for screen readers
|
|
}
|
|
isAutoplay = !isAutoplay;
|
|
});
|
|
}
|
|
|
|
|
|
// 상품 2열
|
|
const productListType2colsSwipers = Array.from(document.querySelectorAll('.product-list-type-2cols__swiper'));
|
|
|
|
productListType2colsSwipers.forEach((productListElement, index) => {
|
|
const productListType1Swiper = new Swiper(productListElement, {
|
|
slidesPerView: 1,
|
|
pagination: {
|
|
el: productListElement.querySelector('.swiper-pagination.theme-pagination'), // Select the .swiper-pagination.theme-pagination that is a child of the current .product-list-type-2cols__swiper element
|
|
clickable: true,
|
|
},
|
|
loop: true,
|
|
});
|
|
});
|
|
|
|
// 상품 1열
|
|
const productListType1Swipers = Array.from(document.querySelectorAll('.product-list-type-1col__swiper'));
|
|
|
|
productListType1Swipers.forEach((productListElement, index) => {
|
|
const productListType1Swiper = new Swiper(productListElement, {
|
|
slidesPerView: 1,
|
|
pagination: {
|
|
el: productListElement.querySelector('.swiper-pagination.theme-pagination'), // Select the .swiper-pagination.theme-pagination that is a child of the current .product-list-type-1col__swiper element
|
|
clickable: true,
|
|
},
|
|
loop: true,
|
|
});
|
|
});
|
|
|
|
|
|
// 상품 가로 슬라이드 (2.5열 슬라이드)
|
|
const twoAndaHalfElements = Array.from(document.querySelectorAll('.product-list-vertical-twoAndaHalf__swiper'));
|
|
|
|
twoAndaHalfElements.forEach((twoAndaHalf, index) => {
|
|
const twoAndaHalfSwiper = new Swiper(twoAndaHalf, {
|
|
spaceBetween: 12,
|
|
slidesPerView: 2.3,
|
|
// scrollbar: {
|
|
// el: twoAndaHalf.querySelector('.swiper-scrollbar'), // Select the .swiper-scrollbar that is a child of the current .time-sale__swiper element
|
|
// hide: false,
|
|
// },
|
|
freeMode: true,
|
|
});
|
|
});
|
|
|
|
|
|
// 상품 가로 슬라이드 (1.5열 슬라이드)
|
|
const oneAndaHalfElements = Array.from(document.querySelectorAll('.product-list-vertical-oneAndaHalf__swiper'));
|
|
|
|
oneAndaHalfElements.forEach((oneAndaHalf, index) => {
|
|
const oneAndaHalfSwiper = new Swiper(oneAndaHalf, {
|
|
spaceBetween: 12,
|
|
slidesPerView: 1.5,
|
|
// scrollbar: {
|
|
// el: oneAndaHalf.querySelector('.swiper-scrollbar'), // Select the .swiper-scrollbar that is a child of the current .time-sale__swiper element
|
|
// hide: false,
|
|
// },
|
|
freeMode: true,
|
|
});
|
|
});
|
|
|
|
// 상품 가로 슬라이드 (1.5열 슬라이드 센터)
|
|
const oneAndaHalfCenterElements = Array.from(document.querySelectorAll('.product-list-vertical-oneAndaHalfCenter__swiper'));
|
|
|
|
oneAndaHalfCenterElements.forEach((oneAndaHalfCenter, index) => {
|
|
const oneAndaHalfCenterSwiper = new Swiper(oneAndaHalfCenter, {
|
|
spaceBetween: 12,
|
|
slidesPerView: 1.5,
|
|
centeredSlides: true,
|
|
loop: true,
|
|
// scrollbar: {
|
|
// el: oneAndaHalfCenter.querySelector('.swiper-scrollbar'), // Select the .swiper-scrollbar that is a child of the current .time-sale__swiper element
|
|
// hide: false,
|
|
// },
|
|
});
|
|
});
|
|
|
|
// 중간 띠 배너 슬라이드
|
|
const smallBannerSwipers = Array.from(document.querySelectorAll('.small-banner__swiper'));
|
|
|
|
smallBannerSwipers.forEach((smallBannerElement, index) => {
|
|
const smallBannerSwiper = new Swiper(smallBannerElement, {
|
|
loop: true,
|
|
pagination: {
|
|
el: smallBannerElement.querySelector('.swiper-pagination'),
|
|
clickable: true,
|
|
},
|
|
});
|
|
});
|
|
|
|
// 매거진 슬라이드
|
|
|
|
const magazineSwiper = new Swiper(".magazine__swiper", {
|
|
// slidesPerView: 1.8,
|
|
slidesPerView: 'auto',
|
|
// spaceBetween: 4,
|
|
centeredSlides: true,
|
|
loop: true,
|
|
});
|
|
|
|
|
|
// data-micromodal-trigger 속성을 가진 버튼을 클릭하면 해당 ID의 모달이 열림
|
|
// 모달 배경화면 스크롤 방지
|
|
MicroModal.init(
|
|
{
|
|
disableScroll: true,
|
|
awaitCloseAnimation: true,
|
|
});
|
|
|
|
|
|
// 풀스크린 팝업 트리거 이벤트 리스너
|
|
$('.fullscreen-trigger').on('click', function (e) {
|
|
e.preventDefault();
|
|
var modalId = $(this).attr('data-micromodal-trigger');
|
|
openModal(modalId);
|
|
});
|
|
|
|
// 풀스크린 팝업 닫기 이벤트 리스너
|
|
$('.microModal .microModal__close').on('click', function () {
|
|
var modalId = $(this).closest('.microModal').attr('id');
|
|
closeModal(modalId);
|
|
});
|
|
|
|
// 풀스크린 팝업 뒤로가기 이벤트 리스너
|
|
window.addEventListener('popstate', function (event) {
|
|
var modalId = window.location.hash.replace('#', '');
|
|
if (modalId) {
|
|
closeModal(modalId);
|
|
} else {
|
|
$('.microModal').each(function () {
|
|
MicroModal.close($(this).attr('id'));
|
|
});
|
|
}
|
|
|
|
document.body.style.overflow = '';
|
|
|
|
});
|
|
|
|
if (window.location.hash) {
|
|
var modalId = window.location.hash.replace('#', '');
|
|
openModal(modalId);
|
|
}
|
|
|
|
|
|
let gnbTyCd = '${topBarInfo.topbar.gnbTyCd}';
|
|
if (gnbTyCd !== '03' && !fn_is_empty($("#search-trend"))) {
|
|
if(!fn_is_empty($("#search-trend"))){
|
|
// 실시간 검색
|
|
$("#search-trend").vTicker({
|
|
speed: 500,
|
|
pause: 3000,
|
|
showItems: 1,
|
|
mousePause: true,
|
|
height: 0,
|
|
animate: true,
|
|
margin: 0,
|
|
padding: 0,
|
|
startPaused: false,
|
|
});
|
|
}
|
|
}
|
|
</script>
|
|
</html> |