1111

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

@@ -347,7 +347,7 @@
 								</ul>
 							</li>
 							<li class="brand chkFilter" th:if="${filterBrandList != null and !filterBrandList.empty}" id="brandGroupFilterDiv">
-								<a href="javascript:void(0)" class="daps1">브랜드</a>
+								<a href="javascript:void(0)" class="daps1">브랜드<span class="pic"></span></a>
 								<ul class="daps2">
 									<li th:each="oneData, status : ${filterBrandList}">
 										<a href="javascript:void(0)">
@@ -361,7 +361,7 @@
 								</ul>
 							</li>
 							<li calss="size chkFilter" th:if="${filterSizeList != null and !filterSizeList.empty}" id="sizeFilterDiv">
-								<a href="javascript:void(0)" class="daps1">사이즈</a>
+								<a href="javascript:void(0)" class="daps1">사이즈<span class="pic"></span></a>
 								<div class="daps2">
 									<ul class="sizebox">
 										<li id="sizeLi1">
@@ -394,7 +394,7 @@
 							<li class="price chkFilter" id="priceFilterDiv">
 								<input type="hidden" id="hPriceFrom" name="hPriceFrom" value=""/>
 								<input type="hidden" id="hPriceTo" name="hPriceTo" value=""/>
-								<a href="javascript:void(0)" class="daps1">가격</a>
+								<a href="javascript:void(0)" class="daps1">가격<span class="pic"></span></a>
 								<ul class="daps2" id="priceArea">
 
 								</ul>
@@ -402,7 +402,7 @@
 							<li class="discount chkFilter" id="dcRateFilterDiv">
 								<input type="hidden" id="hDcRateFrom" name="hDcRateFrom" value=""/>
 								<input type="hidden" id="hDcRateTo" name="hDcRateTo" value=""/>
-								<a href="javascript:void(0)" class="daps1">할인율</a>
+								<a href="javascript:void(0)" class="daps1">할인율<span class="pic"></span></a>
 								<ul class="daps2" id="dcRateArea">
 									<li>
 										<a href="javascript:void(0)">
@@ -497,7 +497,7 @@
 								</ul>
 							</li>
 							<li class="age chkFilter" th:if="${filterAgeList != null and !filterAgeList.empty}" id="ageFilterDiv">
-								<a href="javascript:void(0)" class="daps1">연령</a>
+								<a href="javascript:void(0)" class="daps1">연령<span class="pic"></span></a>
 								<ul class="daps2">
 									<li th:each="oneData, status : ${filterAgeList}">
 										<a href="javascript:void(0)">
@@ -511,7 +511,7 @@
 								</ul>
 							</li>
 							<li class="season chkFilter" th:if="${filterSeasonList != null and !filterSeasonList.empty}" id="seasonFilterDiv">
-								<a href="javascript:void(0)" class="daps1">시즌</a>
+								<a href="javascript:void(0)" class="daps1">시즌<span class="pic"></span></a>
 								<ul class="daps2">
 									<li th:each="oneData, status : ${filterSeasonList}">
 										<a href="javascript:void(0)">
@@ -541,7 +541,7 @@
 								</div>
 							</li>
 							<li class="benefit chkFilter" th:if="${filterBenefitList != null and !filterBenefitList.empty}" id="benefitFilterDiv">
-								<a href="javascript:void(0)" class="daps1">혜택</a>
+								<a href="javascript:void(0)" class="daps1">혜택<span class="pic"></span></a>
 								<ul class="daps2">
 									<li th:each="oneData, status : ${filterBenefitList}">
 										<a href="javascript:void(0)">
@@ -593,16 +593,55 @@
 
 	<script th:inline="javascript">
 	/*<![CDATA[*/
+	var filterPriceList = [[${filterPriceList}]];
+
 	$(window).on("pageshow", function(event) {
+		$('#filterForm input[name=brandGroup]:checked').each(function(){
+			$(this).attr('checked', true);
+		});
+		$('#filterForm input[name=size]:checked').each(function(){
+			$(this).attr('checked', true);
+		});
+		$('#filterForm input[name=dcRate]:checked').each(function(){
+			$(this).attr('checked', true);
+		});
+		$('#filterForm input[name=age]:checked').each(function(){
+			$(this).attr('checked', true);
+		});
+		$('#filterForm input[name=season]:checked').each(function(){
+			$(this).attr('checked', true);
+		});
+		$('#filterForm input[name=color]:checked').each(function(){
+			$(this).attr('checked', true);
+		});
+		$('#filterForm input[name=benefit]:checked').each(function(){
+			$(this).attr('checked', true);
+		});
+		$('#filterForm input[name=price]:checked').each(function(){
+			$(this).attr('checked', true);
+		});
 		if ( (event.originalEvent && event.originalEvent.persisted) || (window.performance && window.performance.navigation.type == 2)) {
 			var historyData = sessionStorage.getItem(document.location.href);
+			// console.log(historyData);
 			if(historyData!=null){
 				// console.log('historyData>>'+historyData);
 				historyData = JSON.parse(historyData);
 			}else{
 				historyData = {};
 			}
-
+			// if(typeof historyData.filterHtml!='undefined' && historyData.filterHtml!=''){
+			// 	//console.log('historyData.filterHtml>>>'+historyData.filterHtml);
+			// 	$("#searchGoodsForm").append(historyData.filterHtml);
+			// 	filterHtml = historyData.filterHtml;
+			// }
+			// if(typeof historyData.filterStatHtml!='undefined' && historyData.filterStatHtml!=''){
+			// 	$("#filterForm").append(historyData.filterStatHtml);
+			// 	filterStatHtml = historyData.filterStatHtml;
+			// }
+			fnReCheckFilterList();
+			if(typeof historyData.totalCount!='undefined' && historyData.totalCount!=''){
+				$("#totCntId").text(historyData.totalCount);
+			}
 			if(typeof historyData.sortingType!='undefined' && historyData.sortingType!=''){
 				$("#searchGoodsForm input:hidden[name=sortingType]").val(historyData.sortingType);
 				fnSortingChange(this,historyData.sortingType,'back','Mob');
@@ -610,6 +649,7 @@
 				fnSearchGoodsListSearch();
 			}
 		}else{
+			console.log('2');
 			fnCategoryGoodsInfiniteScrollInit();
 
 			var sortingType = $("#searchGoodsForm input:hidden[name=sortingType]").val();
@@ -776,6 +816,34 @@
 
 
 	$(document).ready( function() {
+		if(filterPriceList.length > 0){
+			$("#priceArea").html('');
+			var priceHtml = '';
+			var minPrice;
+			var maxPrice;
+			for(let i=0; i<filterPriceList.length-1; i++){
+				if(i==filterPriceList.length-2){
+					minPrice = filterPriceList[i].filterNm;
+					maxPrice = filterPriceList[i+1].filterNm;
+				}else{
+					minPrice = filterPriceList[i].filterNm;
+					maxPrice = filterPriceList[i+1].filterNm;
+				}
+
+				priceHtml += '<li>\n';
+				priceHtml += '	<a href="javascript:void(0)">\n';
+				priceHtml += '		<div class="form_field">\n';
+				priceHtml += '			<div>\n';
+				priceHtml += '				<input type="checkbox" id="price'+(i+1)+'" name="price" value="'+minPrice+','+maxPrice+'" data-id="'+minPrice.addComma()+'원 ~ '+maxPrice.addComma()+'원" onclick="filterPriceMob(this,\'price\',\'off\',\''+(i+1)+'\');"><label for="price'+(i+1)+'">\n';
+				priceHtml += '				<span id="pricdSpan'+(i+1)+'">'+minPrice.addComma()+'원 ~ '+maxPrice.addComma()+'원</span> </label>\n';
+				priceHtml += '			</div>\n';
+				priceHtml += '		</div>\n';
+				priceHtml += '	</a>\n';
+				priceHtml += '</li>\n';
+			}
+			$("#priceArea").append(priceHtml);
+		}
+
 		$("#htopSub").find('.search').hide();
 
 		// btPop_full
@@ -999,10 +1067,8 @@
 		$("#searchGoodsForm input:hidden[name=cate5No]").remove();
 		$("#searchGoodsForm input:hidden[name=brandGroupArr]").remove();
 		$("#searchGoodsForm input:hidden[name=sizeArr]").remove();
-		$("#searchGoodsForm input:hidden[name=dcRateFrom]").remove();
-		$("#searchGoodsForm input:hidden[name=dcRateTo]").remove();
-		$("#searchGoodsForm input:hidden[name=priceFrom]").remove();
-		$("#searchGoodsForm input:hidden[name=priceTo]").remove();
+		$("#searchGoodsForm input:hidden[name=dcRateArr]").remove();
+		$("#searchGoodsForm input:hidden[name=priceArr]").remove();
 		$("#searchGoodsForm input:hidden[name=ageArr]").remove();
 		$("#searchGoodsForm input:hidden[name=seasonArr]").remove();
 		$("#searchGoodsForm input:hidden[name=colorArr]").remove();
@@ -1047,7 +1113,7 @@
 		var searchKeyword = '[[${params.keyword}]]';
 		window._eglqueue = window._eglqueue || [];
 		_eglqueue.push(['setVar', 'cuid', eglqueueCuid]);
-		_eglqueue.push(['setVar', 'searchTerm', [[${params.keyword}]]]);
+		_eglqueue.push(['setVar', 'searchTerm', '[[${params.keyword}]]']);
 		_eglqueue.push(['setVar', 'userId', hCustId]); // optional
 		_eglqueue.push(['track', 'search']);
 		(function (s, x) {

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

@@ -580,7 +580,7 @@
 	<script th:src="@{'/biz/search.js?v=' + ${#calendars.format(#calendars.createNow(), 'yyyyMMddHHmmss')}}" src="/biz/search.js"></script>
 
 	<script th:inline="javascript">
-		// var filterPriceList = [[${filterPriceList}]];
+		var filterPriceList = [[${filterPriceList}]];
 		var custom_values = [];
 
 		var fnSearchGoodsListSearch = function (){
@@ -640,6 +640,33 @@
 		}
 
 		$(window).on("pageshow", function(event) {
+			$('#filterForm input[name=brandGroup]:checked').each(function(){
+				let filterGb = 'brandGroup';
+				$(this).attr('onclick','filterSel(this,\''+filterGb+'\',\'on\');');
+				$(this).parent().addClass("active");
+			});
+			$('#filterForm input[name=size]:checked').each(function(){
+				let filterGb = 'size';
+				let rowNum = $(this).attr('data-idx');
+				$(this).attr('onclick','filterSel(this,\''+filterGb+'\',\'on\',\''+rowNum+'\');');
+				$(this).parent().addClass("active");
+			});
+			$('#filterForm input[name=season]:checked').each(function(){
+				let filterGb = 'season';
+				$(this).attr('onclick','filterSel(this,\''+filterGb+'\',\'on\');');
+				$(this).parent().addClass("active");
+			});
+			$('#filterForm input[name=color]:checked').each(function(){
+				let filterGb = 'color';
+				$(this).attr('onclick','filterSel(this,\''+filterGb+'\',\'on\');');
+				$(this).parent().addClass("active");
+			});
+			$('#filterForm input[name=benefit]:checked').each(function(){
+				let filterGb = 'benefit';
+				$(this).attr('onclick','filterSel(this,\''+filterGb+'\',\'on\');');
+				$(this).parent().addClass("active");
+			});
+
 			//할인율
 			custom_values02 = ['0%', '10%', '20%', '30%', '40%', '50%', '60%', '70%', '80%', '90%', '100%'];
 			var my_from02 = custom_values02.indexOf('0%');
@@ -670,12 +697,45 @@
 
 			if ( (event.originalEvent && event.originalEvent.persisted) || (window.performance && window.performance.navigation.type == 2)) {
 				var historyData = sessionStorage.getItem(document.location.href);
+				// console.log('historyData>>'+historyData);
 				if(historyData!=null){
-					// console.log('historyData>>'+historyData);
 					historyData = JSON.parse(historyData);
 				}else{
 					historyData = {};
 				}
+				if(typeof historyData.sortingTypeNm!='undefined' && historyData.sortingTypeNm!=''){
+					$(".arrayWrap .btn").text(historyData.sortingTypeNm);
+				}
+				if(typeof historyData.filterHtml!='undefined' && historyData.filterHtml!=''){
+					// console.log('filterHtml>>'+historyData.filterHtml);
+					$("#searchGoodsForm").append(historyData.filterHtml);
+					filterHtml = historyData.filterHtml;
+				}
+				if(typeof historyData.filterStatHtml!='undefined' && historyData.filterStatHtml!=''){
+					// console.log('filterStatHtml>>'+historyData.filterStatHtml);
+					$("#filterData").append(historyData.filterStatHtml);
+					filterStatHtml = historyData.filterStatHtml;
+				}
+				if(typeof historyData.totalCount!='undefined' && historyData.totalCount!=''){
+					$("#totCntId").text(historyData.totalCount);
+				}
+				if(!gagajf.isNull($("#searchGoodsForm").find('input[name=priceArr]').val())){
+					let tempPrice = $("#searchGoodsForm").find('input[name=priceArr]').val();
+					let temp  = tempPrice.split(",");
+					$("#filterForm").find('input[name=hPriceFrom]').val(temp[0]);
+					$("#filterForm").find('input[name=hPriceTo]').val(temp[1]);
+				}
+
+				if(typeof historyData.sortingType!='undefined' && historyData.sortingType!=''){
+					$("#searchGoodsForm input:hidden[name=sortingType]").val(historyData.sortingType);
+					fnSortingChange(this,historyData.sortingType,'back');
+					$(".fillter").show();
+				}else{
+					$(".fillter").show();
+					fnSearchGoodsListSearch();
+					fnSetPriceFilter();
+					fnImgOnoff();
+				}
 			}else{
 				fnCategoryGoodsInfiniteScrollInit();
 				fnSearchGoodsListSearch();
@@ -684,6 +744,34 @@
 			}
 		});
 
+		var fnSetPriceFilter = function (){
+			if(!gagajf.isNull(filterPriceList)){
+				let min = 0;
+				let max = 5;
+				let priceFrom = '';
+				let priceTo = '';
+				if(!gagajf.isNull($("#searchGoodsForm").find("input:hidden[name=hPriceFrom]").val())){
+					priceFrom = $("#searchGoodsForm").find("input:hidden[name=hPriceFrom]").val().replace(',','');
+				}
+				if(!gagajf.isNull($("#searchGoodsForm").find("input:hidden[name=hPriceTo]").val())){
+					priceTo = $("#searchGoodsForm").find("input:hidden[name=hPriceTo]").val().replace(',','');
+				}
+				// console.log('priceFrom>>'+priceFrom);
+				// console.log('priceTo>>'+priceTo);
+				$.each(filterPriceList, function (priceIdx, priceItem){
+					custom_values[priceIdx] = priceItem.filterNm;
+					// console.log('custom_values[priceIdx]>>'+custom_values[priceIdx])
+					if(custom_values[priceIdx] == priceFrom){
+						min = priceIdx;
+					}
+					if(custom_values[priceIdx] == priceTo){
+						max = priceIdx;
+					}
+				});
+				fnFilterSliderMove(min,max);
+			}
+		}
+
 		// 이벤트 리스트
 		let fnGetSearchEventList = function (){
 			gagajf.ajaxFormSubmit("/display/search/event/list", document.searchGoodsForm, fnReturnEventList);
@@ -776,7 +864,6 @@
 	
 		$(document).ready( function() {
 			let priceLen;
-			var filterPriceList = [[${filterPriceList}]];
 			console.log(filterPriceList);
 			if(!gagajf.isNull(filterPriceList)){
 				priceLen = filterPriceList.length-1;

src/main/webapp/biz/search.js

@@ -822,4 +822,149 @@ var fnSetMobCateFilter = function (obj, cate1No, cate2No, cate3No, cate4No, cate
 		}
 	}
 }
+
+// 모바일 할인 필터
+var filterDcRateMob = function (obj, gubun, staus, idx){
+	if(staus=='on'){
+		$(obj).attr('onclick','filterDcRateMob(this,\''+gubun+'\',\'off\',\''+idx+'\');');
+	}else{
+		$(obj).attr('onclick','filterDcRateMob(this,\''+gubun+'\',\'on\',\''+idx+'\');');
+	}
+	fnFilterSet(gubun, 'dcRate', 'Mob');
+}
+
+// 모바일 가격 필터
+var filterPriceMob = function (obj, gubun, staus, idx){
+	if(staus=='on'){
+		$(obj).attr('onclick','filterPriceMob(this,\''+gubun+'\',\'off\',\''+idx+'\');');
+	}else{
+		$(obj).attr('onclick','filterPriceMob(this,\''+gubun+'\',\'on\',\''+idx+'\');');
+	}
+
+	fnFilterSet(gubun, 'price', 'Mob');
+}
+
+var fnReCheckFilterList = function (){
+	var searchId = '';
+	$('#filterForm').find('.allFilter').find('.chkFilter').each(function() {
+		if(!gagajf.isNull($(this).attr('id'))){
+			if($(this).attr('id') == 'sizeFilterDiv'){
+				searchId = 'size';
+			}else{
+				searchId = $(this).attr('id').replace('FilterDiv','');
+			}
+		}
+
+		if(!gagajf.isNull(searchId)){
+			var data = '';
+			if(searchId == 'price'){
+				let priceSpan = '';
+				$('#searchGoodsForm').find('input[name=priceArr]').each(function (idx){
+					let formPrice = $(this).val();
+					$('#filterForm #priceArea').find('li').each(function(index){
+						let filterPrice = $(this).find('input[name=price]').val();
+						if(formPrice == filterPrice){
+							$("#price"+(index+1)).prop('checked',true);
+							if(idx>0){
+								priceSpan += ',';
+							}
+							priceSpan += $("#pricdSpan"+(index+1)).text();
+						}
+					});
+				});
+				// $('#filterForm #priceArea').find('li').each(function(index){
+				// 	if($(this).find('input[name=price]').prop('checked') == true){
+				// 		if(index > 0){
+				// 			priceSpan += ',';
+				// 		}
+				// 		priceSpan += $("#pricdSpan"+(index+1)).text();
+				// 	}
+				// });
+				$("#priceFilterDiv").find('.daps1').append('<span class="pic">'+priceSpan+'</span>');
+			}else if(searchId == 'dcRate'){
+				let dcRateSpan = '';
+				$('#filterForm #dcRateArea').find('li').each(function(index){
+					if($(this).find('input[name=dcRate]').prop('checked') == true){
+						if(index > 1){
+							dcRateSpan += ',';
+						}
+						dcRateSpan += $("#dcRateText"+(index+1)).text();
+					}
+				});
+				$("#dcRateFilterDiv").find('.daps1').append('<span class="pic">'+dcRateSpan+'</span>');
+			}else{
+				$('#filterForm input[name='+searchId+']:checked').each(function(idx){
+					if(searchId=='color'){
+						$('#'+searchId+'FilterDiv').find('.daps1').find('.pic').find('span').html('');
+						var mobTag = '';
+						var color = $(this).attr('data-id');
+						console.log('color::'+$(this).attr('data-id'));
+						if(color=='FFFFFF'){
+							mobTag += '<span class="pdColor-color" style="background-color:#'+color+';border:1px solid #aaa;"></span>';
+						}else{
+							mobTag += '<span class="pdColor-color" style="background-color:#'+color+'"></span>';
+						}
+						$("#"+searchId+"FilterDiv").find('.daps1').find('.pic').append(mobTag);
+					}else if(searchId=='brandGroup'){
+						$('#'+searchId+'FilterDiv').find('.daps1').find('span').html('');
+						if(idx>0){
+							data += ',';
+						}
+						data += $(this).attr('data-id');
+						$("#"+searchId+"FilterDiv").find('.daps1').append('<span class="pic">'+data+'</span>');
+					}else if(searchId=='size'){
+						$('#'+searchId+'FilterDiv').find('.daps1').find('span').html('');
+						if(idx>0){
+							data += ',';
+						}
+						data += $(this).attr('data-id');
+						$("#"+searchId+"FilterDiv").find('.daps1').append('<span class="pic">'+data+'</span>');
+					}else if(searchId=='season'){
+						$('#'+searchId+'FilterDiv').find('.daps1').find('span').html('');
+						if(idx>0){
+							data += ',';
+						}
+						data += $(this).attr('data-id');
+						$("#"+searchId+"FilterDiv").find('.daps1').append('<span class="pic">'+data+'</span>');
+					}else if(searchId=='benefit'){
+						$('#'+searchId+'FilterDiv').find('.daps1').find('span').html('');
+						if(idx>0){
+							data += ',';
+						}
+						data += $(this).attr('data-id');
+						$("#"+searchId+"FilterDiv").find('.daps1').append('<span class="pic">'+data+'</span>');
+					}else{
+						$('#'+searchId+'FilterDiv').find('.daps1').find('span').html('');
+						if(idx>0){
+							data += ',';
+						}
+						data += $(this).attr('data-id');
+						$("#"+searchId+"FilterDiv").find('.daps1').append('<span class="pic">'+data+'</span>');
+					}
+				});
+			}
+
+		}
+
+	});
+}
+
+var fnFilterSliderMove = function (min, max){
+	var $range = $(".dp .js-range-slider01, .sch_result .js-range-slider01");
+	var $inputFrom = $("#price_input_from");
+	var $inputTo = $("#price_input_to");
+	var instance;
+
+	instance = $range.data("ionRangeSlider");
+	instance.update({
+		from: min
+	});
+	//$inputFrom.val(min);
+
+	instance.update({
+		to: max
+	});
+	//$inputTo.prop("value",max);
+	fnSetFilterHtml();
+}
 //****************상품리스트  end **********************************