상품리스트 인피니티스크롤

src/main/webapp/WEB-INF/views/mob/display/CategoryGoodsListFormMob.html

@@ -948,14 +948,14 @@
 		}
 
 		var fnGoodsListSearch = function (){
-			console.log('ya');
+			// debugger;
 			gagaInfiniteScroll.getHistory();
 		}
 
 		// 상품 검색
 		var fnGetInfiniteScrollDataList = function (pageNum){
 			$("#searchGoodsForm input[name=pageNo]").val(pageNum+1);
-			gagajf.ajaxFormSubmit("/display/category/goods/list", document.searchGoodsForm,  gagaInfiniteScroll.jsonToHtml);
+			gagajf.ajaxFormSubmit("/display/category/goods/list", document.searchGoodsForm,  gagaInfiniteScroll.jsonToHtml , true);
 		}
 
 		var fnDrawInfiniteScrollData = function (result){
@@ -1039,8 +1039,7 @@
 				$(this).attr('checked', true);
 			});
 			if ( (event.originalEvent && event.originalEvent.persisted) || (window.performance && window.performance.navigation.type == 2)) {
-				if( history.scrollRestoration ) window.history.scrollRestoration = 'manual';
-
+				// if( history.scrollRestoration ) window.history.scrollRestoration = 'manual';
 				var historyData = sessionStorage.getItem(document.location.href);
 				if(historyData!=null){
 					historyData = JSON.parse(historyData);
@@ -1083,7 +1082,8 @@
 					fnSortingChange(this,historyData.sortingType,'back','Mob');
 				}else{
 					// fnCategoryGoodsInfiniteScrollInit();
-					console.log('here*'+historyData.scroll);
+					// console.log('here*'+historyData.scroll);
+					// debugger;
 					fnGoodsListSearch();
 					// $('html, body').animate({scrollTop: historyData.backScroll});
 					// window.scrollTo(0, historyData.backScroll);

src/main/webapp/WEB-INF/views/web/common/fragments/GnbWeb.html

@@ -869,30 +869,30 @@
 									tag +=' 	<button class="btn_toggle_bnr">열기</button>';
 								}
 								tag +='</div>';
-								//if(item.strVar8=='Y'){
-								//	tag+='<div class="close_bnr_area">';
-								//	tag+=' 	<form class="form_wrap">';
-								//	tag+=' 		<div class="form_field">';
-								//	tag+=' 			<input id="chk-cookie" type="checkbox"><label for="chk-cookie"><span>오늘 하루 보지 않기</span></label>';
-								//	tag+=' 		</div>';
-								//	tag+=' 	</form>';
-								//	tag+=' 	<button id="btn_close_bnr" class="btn_close" onclick="fnGnbTobBannerClose(1);"><span>닫기</span></button>';
-								//	tag+='</div>';
-								//}
+								if(item.strVar8=='Y'){
+									tag+='<div class="close_bnr_area">';
+									tag+=' 	<form class="form_wrap">';
+									tag+=' 		<div class="form_field">';
+									tag+=' 			<input id="chk-cookie" type="checkbox"><label for="chk-cookie"><span>오늘 하루 보지 않기</span></label>';
+									tag+=' 		</div>';
+									tag+=' 	</form>';
+									tag+=' 	<button id="btn_close_bnr" class="btn_close" onclick="fnGnbTobBannerClose(1);"><span>닫기</span></button>';
+									tag+='</div>';
+								}
 							}else if(item.contentsType == 'IMG'){
 								tag+='<div class="bnrtype_img" style="background-color:#'+item.strVar5+';">';
 								tag+=' 	<a href="'+item.strVar1+'" target="">';
 								tag+=' 		<img src="'+bannerImgUrl+''+item.imgPath1+'" alt=""/>';
 								tag+=' 	</a>';
 								tag+='</div>';
-								//tag+='<div class="close_bnr_area">';
-								//tag+=' 	<form class="form_wrap">';
-								//tag+=' 		<div class="form_field">';
-								//tag+=' 			<input id="chk-cookie" type="checkbox"><label for="chk-cookie"><span>오늘 하루 보지 않기</span></label>';
-								//tag+=' 		</div>';
-								//tag+=' 	</form>';
-								//tag+=' 	<button id="btn_close_bnr" class="btn_close" onclick="fnGnbTobBannerClose(1);"><span>닫기</span></button>';
-								//tag+='</div>';
+								tag+='<div class="close_bnr_area">';
+								tag+=' 	<form class="form_wrap">';
+								tag+=' 		<div class="form_field">';
+								tag+=' 			<input id="chk-cookie" type="checkbox"><label for="chk-cookie"><span>오늘 하루 보지 않기</span></label>';
+								tag+=' 		</div>';
+								tag+=' 	</form>';
+								tag+=' 	<button id="btn_close_bnr" class="btn_close" onclick="fnGnbTobBannerClose(1);"><span>닫기</span></button>';
+								tag+='</div>';
 							}else{
 								tag+='<div class="bnrtype_text" style="background-color:#fd4801;">';
 								tag+=' 	<a href="'+item.strVar1+'" target="">';
@@ -901,25 +901,25 @@
 								tag+=' 		</div>';
 								tag+=' 	</a>';
 								tag+='</div>';
-								//tag+='<div class="close_bnr_area">';
-								//tag+=' 	<form class="form_wrap">';
-								//tag+=' 		<div class="form_field">';
-								//tag+=' 			<input id="chk-cookie" type="checkbox"><label for="chk-cookie"><span>오늘 하루 보지 않기</span></label>';
-								//tag+=' 		</div>';
-								//tag+=' 	</form>';
-								//tag+=' 	<button id="btn_close_bnr" class="btn_close" onclick="fnGnbTobBannerClose(1);"><span>닫기</span></button>';
-								//tag+='</div>';
-							}
-							tag+='<div class="close_bnr_area">';
-							tag+=' 	<form class="form_wrap">';
-							tag+=' 		<div class="form_field">';
-							tag+=' 			<input id="chk-cookie" type="checkbox"><label for="chk-cookie"><span>오늘 하루 보지 않기</span></label>';
-							tag+=' 		</div>';
-							tag+=' 	</form>';
-							if(item.contentsType != 'OPEN' || (item.contentsType == 'OPEN' && item.strVar8=='Y')){
+								tag+='<div class="close_bnr_area">';
+								tag+=' 	<form class="form_wrap">';
+								tag+=' 		<div class="form_field">';
+								tag+=' 			<input id="chk-cookie" type="checkbox"><label for="chk-cookie"><span>오늘 하루 보지 않기</span></label>';
+								tag+=' 		</div>';
+								tag+=' 	</form>';
 								tag+=' 	<button id="btn_close_bnr" class="btn_close" onclick="fnGnbTobBannerClose(1);"><span>닫기</span></button>';
+								tag+='</div>';
 							}
-							tag+='</div>';
+							// tag+='<div class="close_bnr_area">';
+							// tag+=' 	<form class="form_wrap">';
+							// tag+=' 		<div class="form_field">';
+							// tag+=' 			<input id="chk-cookie" type="checkbox"><label for="chk-cookie"><span>오늘 하루 보지 않기</span></label>';
+							// tag+=' 		</div>';
+							// tag+=' 	</form>';
+							// if(item.contentsType != 'OPEN' || (item.contentsType == 'OPEN' && item.strVar8=='Y')){
+							// 	tag+=' 	<button id="btn_close_bnr" class="btn_close" onclick="fnGnbTobBannerClose(1);"><span>닫기</span></button>';
+							// }
+							// tag+='</div>';
 
 							if(bannerYn=="Y"){
 								$('#divTopbanner').html(tag);

src/main/webapp/WEB-INF/views/web/common/layout/BrandLayoutWeb.html

@@ -20,14 +20,14 @@
 <th:block th:if="${brandGroupInfo == null }">
 	<header id="header" th:replace="~{web/common/fragments/GnbWeb :: gnb}"></header>
 </th:block>
-<th:block th:if="${brandGroupInfo != null }">
+<th:block th:unless="${brandGroupInfo == null }">
 	<header id="header" th:replace="~{web/common/fragments/BrandGnbWeb :: gnb}"></header>
 </th:block>
 <!--// GNB -->
 
 <!-- CONTENT AREA -->
 <th:block layout:fragment="content"></th:block>
-<!-- // CONTENT AREA -->
+<!-- // CONTENT AREA-->
 
 <!-- Footer -->
 <footer id="footer" th:replace="~{web/common/fragments/FooterWeb :: footer}"></footer>
@@ -42,7 +42,6 @@
 		}else{
 			$("#container").css('backgroundColor','#fff');
 		}
-
 	});
 /*]]>*/
 </script>

src/main/webapp/WEB-INF/views/web/display/CategoryGoodsListFormWeb.html

@@ -306,7 +306,7 @@
 		var custom_values = [];
 		var custom_values02  = [];
 		var currUrl = document.location.href;
-		var brandGroupInfo =  [[${brandGroupInfo}]];
+		let brandGroupInfo =  [[${brandGroupInfo}]];
 		var brandGroupNm = '';
 		if(!gagajf.isNull(brandGroupInfo)){
 			brandGroupNm = brandGroupInfo.brandGroupNm;
@@ -314,8 +314,10 @@
 
 		// 컨텐츠 호출
 		$(document).ready( function() {
-			if(!gagajf.isNull([[${brandGroupInfo.brandGroupNo}]])){
-				$(".br_header").css('background-color','#fff');
+			if(!gagajf.isNull(brandGroupInfo)){
+				if(!gagajf.isNull(brandGroupInfo.brandGroupNo)){
+					$(".br_header").css('background-color','#fff');
+				}
 			}
 			//가격 슬라이드
 			//var custom_values = ['9,000원', '230,000원', '487,000원', '700,000원', '1,360,000원', '1,799,000원'];
@@ -404,7 +406,7 @@
 			});*/
 
 			fnCreateCategoryList();
-			
+
 			if ($('#sizeLi1').find('label').length == 0) $('#sizeLi1').hide();
 			if ($('#sizeLi2').find('label').length == 0) $('#sizeLi2').hide();
 			if ($('#sizeLi3').find('label').length == 0) $('#sizeLi3').hide();
@@ -500,7 +502,7 @@
 		// 상품 검색
 		var fnGetInfiniteScrollDataList = function (pageNum){
 			$("#searchGoodsForm input[name=pageNo]").val(pageNum+1);
-			gagajf.ajaxFormSubmit("/display/category/goods/list", document.searchGoodsForm,  gagaInfiniteScroll.jsonToHtml);
+			gagajf.ajaxFormSubmit("/display/category/goods/list", document.searchGoodsForm,  gagaInfiniteScroll.jsonToHtml, true);
 		}
 
 		var fnDrawInfiniteScrollData = function (result){
@@ -548,74 +550,74 @@
 			}else{
 				actionUrl = '/display/brand/cate/list?brandGroupNo=' + [[${cateInfo.brandGroupNo}]];
 			}
-			
+
 			$.getJSON(actionUrl
-				, function(result, status) {
-					//if (status == 'success') {
-					if (result.length > 0) {
-						let formalGb = [[${cateInfo.formalGb}]];
-						if(formalGb == 'G009_10'){
-							formalGb = '';
-						}
-						let cateGb = 'G032_101';
-						let navNm = '';
-						$('#ulAllCate').html('');
-						if(brandGroupNo>0) {
-							$("#brandNm").show();
-							$("#brandNm").text(brandGroupNm);
-							$("#navNm").hide();
-							$('#ulAllCate').append('<li><a href="javascript:void(0);" onclick="cfnGoToGoodsList(\''+brandGroupNo+'\',\''+cateGb+'\');" class="on">전체</a></li>\n');
-							navNm += '<li class="bread_2depth" id="navNm1">전체</li>';
-						}else{
-							if(formalGb=='G009_20'){
+					, function(result, status) {
+						//if (status == 'success') {
+						if (result.length > 0) {
+							let formalGb = [[${cateInfo.formalGb}]];
+							if(formalGb == 'G009_10'){
+								formalGb = '';
+							}
+							let cateGb = 'G032_101';
+							let navNm = '';
+							$('#ulAllCate').html('');
+							if(brandGroupNo>0) {
+								$("#brandNm").show();
+								$("#brandNm").text(brandGroupNm);
 								$("#navNm").hide();
-								$('#ulAllCate').append('<li><a href="javascript:void(0);" onclick="cfnGoToGoodsList(0,\''+cateGb+'\',\'\',\'\',\'\',\'\',\'\',\''+formalGb+'\');">전체</a></li>\n');
-								navNm += '<li class="bread_2depth" id="navNm">아울렛</li><li class="bread_2depth" id="navNm1">전체</li>';
+								$('#ulAllCate').append('<li><a href="javascript:void(0);" onclick="cfnGoToGoodsList(\''+brandGroupNo+'\',\''+cateGb+'\');" class="on">전체</a></li>\n');
+								navNm += '<li class="bread_2depth" id="navNm1">전체</li>';
 							}else{
-								$("#navNm").hide();
-								// $('#ulAllCate').append('<li><a href="javascript:void(0);" onclick="cfnGoToGoodsList(0,\''+cateGb+'\');">전체</a></li>\n');
-								// navNm += '<li class="bread_2depth" id="navNm1">전체</li>';
+								if(formalGb=='G009_20'){
+									$("#navNm").hide();
+									$('#ulAllCate').append('<li><a href="javascript:void(0);" onclick="cfnGoToGoodsList(0,\''+cateGb+'\',\'\',\'\',\'\',\'\',\'\',\''+formalGb+'\');">전체</a></li>\n');
+									navNm += '<li class="bread_2depth" id="navNm">아울렛</li><li class="bread_2depth" id="navNm1">전체</li>';
+								}else{
+									$("#navNm").hide();
+									// $('#ulAllCate').append('<li><a href="javascript:void(0);" onclick="cfnGoToGoodsList(0,\''+cateGb+'\');">전체</a></li>\n');
+									// navNm += '<li class="bread_2depth" id="navNm1">전체</li>';
+								}
 							}
-						}
 
-						if(gagajf.isNull($("#searchGoodsForm").find("[name=cate1No]").val())){
-							$("#navArea").append(navNm);
-							$("#formTitle").text('전체');
-						}
+							if(gagajf.isNull($("#searchGoodsForm").find("[name=cate1No]").val())){
+								$("#navArea").append(navNm);
+								$("#formTitle").text('전체');
+							}
 
-						let allCate = [[${cateList}]];
-						if(brandGroupNo > 0){
-							$.each(result, function(idx, item) {
-								$.each(allCate, function(brandCateIdx, brandCateItem) {
-									if (item.cate1No == brandCateItem.cate1No) {
-										$('#ulAllCate').append(fnGetBrandCategoryList(item));
-									}
-								});
-							});
-						}else{
-							if(formalGb == 'G009_20'){
+							let allCate = [[${cateList}]];
+							if(brandGroupNo > 0){
 								$.each(result, function(idx, item) {
-									$.each(allCate, function(allCateIdx, allCateItem) {
-										if (item.cate1No == allCateItem.cate1No) {
-											$('#ulAllCate').append(fnGetCategoryList(item));
+									$.each(allCate, function(brandCateIdx, brandCateItem) {
+										if (item.cate1No == brandCateItem.cate1No) {
+											$('#ulAllCate').append(fnGetBrandCategoryList(item));
 										}
 									});
 								});
 							}else{
-								$.each(result, function(idx, item) {
-									$.each(allCate, function(allCateIdx, allCateItem) {
-										if (item.cate1No == allCateItem.cate1No) {
-											$('#ulAllCate').append(fnGetCategoryList(item));
-										}
+								if(formalGb == 'G009_20'){
+									$.each(result, function(idx, item) {
+										$.each(allCate, function(allCateIdx, allCateItem) {
+											if (item.cate1No == allCateItem.cate1No) {
+												$('#ulAllCate').append(fnGetCategoryList(item));
+											}
+										});
 									});
-								});
+								}else{
+									$.each(result, function(idx, item) {
+										$.each(allCate, function(allCateIdx, allCateItem) {
+											if (item.cate1No == allCateItem.cate1No) {
+												$('#ulAllCate').append(fnGetCategoryList(item));
+											}
+										});
+									});
+								}
 							}
 						}
-					}
-					//}
-				});
+						//}
+					});
 		}
-		
+
 		let fnGetBrandCategoryList = function (cate1){
 			var brandGroupNo = [[${cateInfo.brandGroupNo}]];
 			var cateGb =  [[${cateInfo.cateGb}]];
@@ -624,7 +626,7 @@
 			var cate2No = [[${cateInfo.cate2No}]];
 			var cate3No = [[${cateInfo.cate3No}]];
 			var cate4No = [[${cateInfo.cate4No}]];
-			
+
 			var navNm = "";
 			var formTitle = "";
 			let tag = '';
@@ -632,7 +634,7 @@
 			if(formalGb!='G009_20'){
 				formalGb = '';
 			}
-		
+
 			if(cate1 != null){
 				tag += '<li';
 				if (cate1.cate1No == cate1No) {
@@ -683,7 +685,7 @@
 							$("#navArea").append(navNm);
 						}
 						tag += '	onclick="cfnGoToGoodsList(' + brandGroupNo + ',\'' + cateGb + '\',' + cate1.cate1No + ',' + cate2.cate2No + ');">' + cate2.cate2Nm + '</a>\n';
-						
+
 						if (cate2.leafYn == 'N' && cate2.cate3List != null && cate2.cate3List.length > 0) {
 							tag += '<div class="sub_cate"';
 							if (cate2.cate2No == cate2No) {
@@ -707,7 +709,7 @@
 									navNm = '<li class="bread_2depth" id="navNm2">' + cate2.cate2Nm + '</li><li class="bread_2depth" id="navNm3">' + cate3.cate3Nm + '</li>';
 								}
 								tag += ' onclick="cfnGoToGoodsList(' + brandGroupNo + ',\'' + cateGb + '\',' + cate1.cate1No + ',' + cate2.cate2No + ',' + cate3.cate3No + ');">' + cate3.cate3Nm + '</a>';
-								
+
 								if (cate3.leafYn == 'N' && cate3.cate4List != null && cate3.cate4List.length > 0) {
 									tag += '<div class="sub_cate"';
 									if (cate3.cate3No == cate3No) {
@@ -809,7 +811,7 @@
 				}else{
 					tag += '	onclick="cfnGoToGoodsList(' + brandGroupNo + ',\'' + cateGb + '\',' + cate1.cate1No + ');" >' + cate1.cate1Nm + '</a>\n';
 				}
-				
+
 				if (cate1.leafYn == 'N' && cate1.cate2List.length > 0) {
 					tag += '<div class="sub_cate"';
 					if (cate1.cate1No == cate1No) {
@@ -1034,7 +1036,7 @@
 				}
 			});
 			if ( (event.originalEvent && event.originalEvent.persisted) || (window.performance && window.performance.navigation.type == 2)) {
-				// if( history.scrollRestoration ) window.history.scrollRestoration = 'manual';
+				if( history.scrollRestoration ) window.history.scrollRestoration = 'manual';
 				var historyData = sessionStorage.getItem(document.location.href);
 				if(historyData!=null){
 					// console.log('historyData>>'+historyData);
@@ -1076,13 +1078,11 @@
 					$(".fillter").show();
 				}else{
 					$(".fillter").show();
-					// fnCategoryGoodsInfiniteScrollInit();
-					// $('html, body').animate({scrollTop: historyData.scroll}, 'slow');
 					fnGoodsListSearch();
 					fnSetPriceFilter();
 					fnImgOnoff();
-					console.log('here*++ '+historyData.scroll);
-					$('html, body').animate({scrollTop: historyData.backScroll});
+					// console.log('here*++ '+historyData.scroll);
+					// $('html, body').animate({scrollTop: historyData.backScroll});
 				}
 			}else{
 				fnCategoryGoodsInfiniteScrollInit();
@@ -1128,9 +1128,9 @@
 			}
 		}
 
-		
+
 		/*]]>*/
-		
+
 		// 동영상 플레이어
 		// var iframe= document.createElement('iframe');
 		// iframe.setAttribute('allowFullScreen', '');
@@ -1170,10 +1170,6 @@
 
 	<script>
 		//(진행 중)
-		$(document).ready( function() {
-			
-		});
-		
 		/* 210427_수정 : err 이미지 스크립트 */
 		function noneImg(noneSrc){
 			$(noneSrc).parents('.itemPic').css({'background':'url(/images/pc/thumb/bg_item_none.png)'});

src/main/webapp/biz/goods.js

@@ -875,7 +875,7 @@ var fnReCheckFilterList = function (){
 	});
 }
 
-window.addEventListener('beforeunload', (event) => {
+/*window.addEventListener('beforeunload', (event) => {
 	console.log('addEventListener-1');
 	// 표준에 따라 기본 동작 방지
 	event.preventDefault();
@@ -886,12 +886,14 @@ window.addEventListener('beforeunload', (event) => {
 	console.log('addEventListener->'+scrollTop);
 	gagaInfiniteScroll.pageStatus.backScroll = scrollTop;
 
-});
+});*/
 
 var fnClickGoodsCd = function (goodsCd, mainColorCd){
 	// let scrollTop = document.documentElement.scrollTop;
 	// gagaInfiniteScroll.pageStatus.backScroll = scrollTop;
-	fnPushHistory();
+	let scrollpos = $(window).scrollTop();
+	localStorage.setItem('scrollpos', scrollpos);
+	// fnPushHistory();
 	cfnGoToGoodsDetail(goodsCd, mainColorCd);
 }
 

src/main/webapp/ux/plugins/gaga/gaga.infinite.scrollSession.js

@@ -76,6 +76,13 @@ var gagaInfiniteScroll = {
 				this.getDataList();
 			};
 		}
+
+		// 히스토리백 스크롤 위치
+		let pos = localStorage.getItem('scrollpos');
+		if ( pos != null && $(window).scrollTop() < pos ) {
+			$("html, body").scrollTop(pos);
+			localStorage.clear();
+		};
 	},
 	getDataList : function() {
 		/*if (this.pageStatus.loadAlign == 'prev') {
@@ -83,7 +90,7 @@ var gagaInfiniteScroll = {
 		} else if (this.pageStatus.loadAlign == 'next') {
 			this.obj.$ajaxBoxOuter.append($(this.obj.$loadingBar));
 		};*/
-
+		// debugger;
 		$(".wrap-loading").removeClass('display-none');
 
 		// 인피니트 스크롤 이벤트에서 호출될 함수(데이터 가져오기 등)
@@ -119,10 +126,7 @@ var gagaInfiniteScroll = {
 			this.pageStatus.totalCount = historyData.totalCount;
 			this.pageStatus.backScroll = historyData.scroll;
 
-			console.log('historyData.backScroll:::'+historyData.scroll);
-			console.log('infiniteContainer:::'+$("#infiniteContainer").height());
 			gagaInfiniteScroll.draw(historyData.htm);
-			// gagaInfiniteScroll.draw(historyData.htm, historyData.scroll, 0);
 		};
 
 		$(window).on('scroll', function() {
@@ -162,12 +166,8 @@ var gagaInfiniteScroll = {
 						, gagaInfiniteScroll.pageStatus.backScroll
 					);
 				if (scrollTop && containerHeight) {
-					// console.log('here3');
 					// gagaInfiniteScroll.obj.$window.scrollTop.scrollTop(0).scrollTop(scrollTop);
 				} else {
-					// console.log('here4');
-					// gagaInfiniteScroll.obj.$window.scrollTop = scrollTop+1;
-					// gagaInfiniteScroll.obj.$window.scrollTop(scrollTop+1);
 					// gagaInfiniteScroll.obj.$window.scrollTop(gagaInfiniteScroll.obj.$window.scrollTop() + 1);
 				}
 			};
@@ -177,17 +177,18 @@ var gagaInfiniteScroll = {
 			// Append HTML
 			this.obj.$ajaxBox.append($addHtm);
 
-			console.log('scrollTop::'+scrollTop);
-			console.log('containerHeight::'+containerHeight);
-			if (scrollTop && containerHeight) { //&& containerHeight
-				// console.log('here5');
+			if (scrollTop && containerHeight) {
 				// gagaInfiniteScroll.obj.$window.scrollTop.scrollTop(0).scrollTop(scrollTop);
-				// gagaInfiniteScroll.obj.$window.scrollTop = scrollTop;
 			} else {
-				// console.log('here6');
 				// $(window).scrollTop($(window).scrollTop() + 1);
 			}
 
+			// 히스토리백 스크롤 위치
+			let pos = localStorage.getItem('scrollpos');
+			if ( pos != null && $(window).scrollTop() < pos ) {
+				$("html, body").scrollTop(pos);
+				// localStorage.clear();
+			};
 			this.pageStatus.loadAlign = 'not';
 		}
 	},