fix : 쇼핑몰 구독서비스 스크롤 상단바 추가
This commit is contained in:
이대환
@@ -74,60 +74,61 @@
|
||||
, CAST(@ROWNUM:=@ROWNUM + 1 AS UNSIGNED) AS RNUM
|
||||
FROM (
|
||||
SELECT COUNT(*) OVER() AS TOT_CNT
|
||||
, GC.SUBSVC_INNB
|
||||
, GC.SOPMAL_CD
|
||||
, GC.SUBSVC_NM
|
||||
, GC.SUBSVC_GNR
|
||||
, GC.SUBSVC_GNR_NM
|
||||
, GC.DLVY_CNT
|
||||
, GC.INVNTRY_QY
|
||||
, GC.INVNTRY_QY - GC.USEFUL_INVNTRY_QY AS AVAIL_QT /*가용제고*/
|
||||
, GC.SUBSVC_STTUS_CD
|
||||
, FN_GET_COMMCODE_NAME('GOODS_STTUS', GC.SUBSVC_STTUS_CD) AS SUBSVC_STTUS /*구독서비스 상태*/
|
||||
, FN_GET_COMMCODE_NAME('EXPSR_DV', GC.EXPSR_DV_CD) AS EXPSR_DV /*노출구분*/
|
||||
, GC.SUBSVC_CT /*구독료*/
|
||||
, GC.TME_DLVY_AMT /*1회배송비*/
|
||||
, GC.CNSMRPRIC /*소비자가*/
|
||||
, GC.SUBSVC_CT + (TME_DLVY_AMT * DLVY_CNT) as SELPRIC /*실판매가=구독료+(1회배송비X배송횟수)*/
|
||||
, GC.IMG /*섬네일 이미지*/
|
||||
, GC.LAST_PROCS_ODR /*최종차수*/
|
||||
FROM GC_SUBSVC GC
|
||||
WHERE GC.USE_AT = 'Y'
|
||||
AND GC.SOPMAL_CD = #{sopmalCd}
|
||||
, GS.SUBSVC_INNB
|
||||
, GS.SOPMAL_CD
|
||||
, CONCAT(GS.SUBSVC_NM, ' (', GS.SUBSVC_GNR_NM, ')') AS SUBSVC_CONCAT_NM
|
||||
, GS.SUBSVC_NM
|
||||
, GS.SUBSVC_GNR
|
||||
, GS.SUBSVC_GNR_NM
|
||||
, GS.DLVY_CNT
|
||||
, GS.INVNTRY_QY
|
||||
, GS.INVNTRY_QY - GS.USEFUL_INVNTRY_QY AS AVAIL_QT /*가용제고*/
|
||||
, GS.SUBSVC_STTUS_CD
|
||||
, FN_GET_COMMCODE_NAME('GOODS_STTUS', GS.SUBSVC_STTUS_CD) AS SUBSVC_STTUS /*구독서비스 상태*/
|
||||
, FN_GET_COMMCODE_NAME('EXPSR_DV', GS.EXPSR_DV_CD) AS EXPSR_DV /*노출구분*/
|
||||
, GS.SUBSVC_CT /*구독료*/
|
||||
, GS.TME_DLVY_AMT /*1회배송비*/
|
||||
, GS.CNSMRPRIC /*소비자가*/
|
||||
, GS.SUBSVC_CT + (TME_DLVY_AMT * DLVY_CNT) as SELPRIC /*실판매가=구독료+(1회배송비X배송횟수)*/
|
||||
, GS.IMG /*섬네일 이미지*/
|
||||
, GS.LAST_PROCS_ODR /*최종차수*/
|
||||
FROM GC_SUBSVC GS
|
||||
WHERE GS.USE_AT = 'Y'
|
||||
AND GS.SOPMAL_CD = #{sopmalCd}
|
||||
<if test="srchSelSubsvcNm != null and srchSelSubsvcNm != ''">
|
||||
AND GC.SUBSVC_NM = #{srchSelSubsvcNm} /*구독서비스 명*/
|
||||
AND GS.SUBSVC_NM = #{srchSelSubsvcNm} /*구독서비스 명*/
|
||||
</if>
|
||||
<if test="srchSelSubsvcGnr != null and srchSelSubsvcGnr != ''">
|
||||
AND GC.SUBSVC_GNR = #{srchSelSubsvcGnr} /*기수*/
|
||||
AND GS.SUBSVC_GNR = #{srchSelSubsvcGnr} /*기수*/
|
||||
</if>
|
||||
<if test="srchSubsvcNm != null and srchSubsvcNm != ''">
|
||||
AND GC.SUBSVC_NM LIKE CONCAT('%',#{srchSubsvcNm},'%') /*구독서비스 명*/
|
||||
AND GS.SUBSVC_NM LIKE CONCAT('%',#{srchSubsvcNm},'%') /*구독서비스 명*/
|
||||
</if>
|
||||
<if test="srchSubsvcGnrNm != null and srchSubsvcGnrNm != ''">
|
||||
AND GC.SUBSVC_GNR_NM LIKE CONCAT('%',#{srchSubsvcGnrNm},'%') /*기수명*/
|
||||
AND GS.SUBSVC_GNR_NM LIKE CONCAT('%',#{srchSubsvcGnrNm},'%') /*기수명*/
|
||||
</if>
|
||||
<choose>
|
||||
<when test="@com.wb.domainserver.util.dataaccess.MybaitsUtil@isNotEmpty(srchArrSubsvcSttusCd)">
|
||||
/*판매상태*/
|
||||
AND GC.SUBSVC_STTUS_CD IN
|
||||
AND GS.SUBSVC_STTUS_CD IN
|
||||
<foreach collection="srchArrSubsvcSttusCd" item="subsvcSttusCd" open="(" close=")" separator=",">
|
||||
#{subsvcSttusCd}
|
||||
</foreach>
|
||||
</when>
|
||||
</choose>
|
||||
<if test="srchExpsrDvCd != null and srchExpsrDvCd != ''">
|
||||
AND GC.EXPSR_DV_CD = #{srchExpsrDvCd} /*노출여부*/
|
||||
AND GS.EXPSR_DV_CD = #{srchExpsrDvCd} /*노출여부*/
|
||||
</if>
|
||||
ORDER BY
|
||||
<choose>
|
||||
<when test="sortDv == 'subsvcGnrAsc'">
|
||||
GC.SUBSVC_NM ASC, SUBSVC_GNR ASC,
|
||||
GS.SUBSVC_NM ASC, SUBSVC_GNR ASC,
|
||||
</when>
|
||||
<otherwise>
|
||||
GC.SUBSVC_NM DESC, SUBSVC_GNR DESC,
|
||||
GS.SUBSVC_NM DESC, SUBSVC_GNR DESC,
|
||||
</otherwise>
|
||||
</choose>
|
||||
GC.SUBSVC_INNB ASC
|
||||
GS.SUBSVC_INNB ASC
|
||||
) TB
|
||||
WHERE (@ROWNUM:=0)=0
|
||||
) PV
|
||||
|
||||
@@ -16,6 +16,7 @@
|
||||
|
||||
<head>
|
||||
<jsp:include page="/WEB-INF/views/comm/Include.jsp"/>
|
||||
<spring:eval expression="@environment.getProperty('sopmalfo.common.fileupload.cdnurl')" var="cdnurl"/>
|
||||
<spring:eval expression="@environment.getProperty('currency-unit.default')" var="curUnit"/>
|
||||
</head>
|
||||
|
||||
@@ -23,12 +24,14 @@
|
||||
$(document).ready(function() {
|
||||
var subsvcInnb = $('#subsvcInnb').val();
|
||||
fn_select_subsvcDetail(subsvcInnb);
|
||||
fn_scroll_event();
|
||||
});
|
||||
|
||||
/******************************************************
|
||||
* 구독서비스 상세 조회
|
||||
* ****************************************************/
|
||||
const fn_select_subsvcDetail = function(subsvcInnb) {
|
||||
var cdnurl = '${cdnurl}';
|
||||
var curUnit = '${curUnit}';
|
||||
|
||||
$.ajax({
|
||||
@@ -49,15 +52,23 @@
|
||||
$('#dscntRaito').text(data.dscntRaito + '%');
|
||||
$('#subsvcDc').html(data.subsvcDc);
|
||||
|
||||
$("#fixedImg").attr("src", cdnurl + data.img);
|
||||
$('#fixedTitle').text(data.subsvcConcatNm);
|
||||
$('#fixedPrice').text(fn_format_number(data.selpric));
|
||||
|
||||
switch (data.subsvcSttusCd) {
|
||||
case '01':
|
||||
$('#subscribeBtn').text('구독하기');
|
||||
$('#subscribeBtn').prop('disabled', false);
|
||||
$('#fixedButton').text('구독하기');
|
||||
$('#fixedButton').prop('disabled', false);
|
||||
break;
|
||||
case '02':
|
||||
case '03':
|
||||
$('#subscribeBtn').text(data.subsvcSttus);
|
||||
$('#subscribeBtn').prop('disabled', true);
|
||||
$('#fixedButton').text(data.subsvcSttus);
|
||||
$('#fixedButton').prop('disabled', true);
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
@@ -69,6 +80,47 @@
|
||||
const fn_format_number = function(number) {
|
||||
return Number(number).toLocaleString();
|
||||
}
|
||||
|
||||
/*************************************************************
|
||||
탭, 스크롤 이벤트
|
||||
**************************************************************/
|
||||
const fn_scroll_event = () => {
|
||||
function handleTabScroll() {
|
||||
var scrollTop = $(window).scrollTop();
|
||||
var fixedTabHeight = 100;
|
||||
var initialProductDetailTop = $('#subsvcDc').offset().top;
|
||||
|
||||
var threshold = initialProductDetailTop - fixedTabHeight;
|
||||
|
||||
if (scrollTop > threshold) {
|
||||
if (!$(".productDetailTab").hasClass("fixed")) {
|
||||
$(".productDetailTab").addClass("fixed");
|
||||
$(".fixedProduct").addClass("fixed");
|
||||
$('#subsvcDc').css("margin-top", 62 + "px");
|
||||
}
|
||||
} else {
|
||||
if ($(".productDetailTab").hasClass("fixed")) {
|
||||
$(".productDetailTab").removeClass("fixed");
|
||||
$(".fixedProduct").removeClass("fixed");
|
||||
$('#subsvcDc').css("margin-top", "");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
var debounce = function (func, delay) {
|
||||
var timer;
|
||||
return function () {
|
||||
var context = this,
|
||||
args = arguments;
|
||||
clearTimeout(timer);
|
||||
timer = setTimeout(function () {
|
||||
func.apply(context, args);
|
||||
}, delay);
|
||||
};
|
||||
};
|
||||
|
||||
$(window).scroll(debounce(handleTabScroll, 20));
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.container {
|
||||
@@ -112,6 +164,10 @@
|
||||
border: 1px solid #e9ecef;
|
||||
padding: clamp(12px, 3%, 18px);
|
||||
}
|
||||
|
||||
.productDetailTab.fixed {
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<%-- 공통 Header --%>
|
||||
@@ -167,7 +223,25 @@
|
||||
<span style="display: block; width: 100%; text-align: center; font-size: 32px;">구독 서비스 상품 준비중</span>
|
||||
</c:otherwise>
|
||||
</c:choose>
|
||||
|
||||
<div class="productDetailTab">
|
||||
<div class="fixedProduct">
|
||||
<div class="fixedProduct__left">
|
||||
<div class="fixedProduct__image">
|
||||
<img id="fixedImg" alt="상품이미지" onerror="this.src='/pc/images/image_placeholder.png'">
|
||||
</div>
|
||||
<div class="fixedProduct__product">
|
||||
<p id="fixedTitle" class="fixedProduct__title">상품명</p>
|
||||
<span class="fixedProduct__price">
|
||||
<span id="fixedPrice" class="comma">상품가격</span>
|
||||
<span class="priceUnit"></span><span class="priceUnit">${curUnit}</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="fixedProduct__right">
|
||||
<button type="button" id="fixedButton" class="btn theme lg purchsOrdr">구독하기</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="subsvcDc" class="ck-content">구독 서비스 상품 설명</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user