[모바일] 상품리스트 필터

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

@@ -102,22 +102,22 @@
 						</div>
 						<div class="filter_body">
 							<!-- 필터메뉴 -->
-							<ul>
-								<li class="brand" th:if="${filterBrandList != null and !filterBrandList.empty}" id="brandGroupFilterDiv">
+							<ul class="allFilter">
+								<li class="brand chkFilter" th:if="${filterBrandList != null and !filterBrandList.empty}" id="brandGroupFilterDiv">
 									<a href="javascript:void(0)" class="daps1">브랜드</a>
 									<ul class="daps2">
 										<li th:each="oneData, status : ${filterBrandList}">
 											<a href="javascript:void(0)">
 												<div class="form_field">
 													<div>
-														<input th:id="${'chkFilterBrand' + status.index}" name="brandGroup" type="checkbox" th:value="${oneData.filterCd}" th:data-id="${oneData.filterNm}" onclick="filterSel(this,'brandGroup','off','','Mob');"><label th:for="${'chkFilterBrand' + status.index}"><span th:text="${oneData.filterNm}"></span></label>
+														<input th:id="${'chkFilterBrand' + status.index}" name="brandGroup" type="checkbox" th:value="${oneData.filterCd}" th:data-id="${oneData.filterNm}" onclick="fnSelectFilerMob(this,'brandGroup','off','');"><label th:for="${'chkFilterBrand' + status.index}"><span th:text="${oneData.filterNm}"></span></label>
 													</div>
 												</div>
 											</a>
 										</li>
 									</ul>
 								</li>
-								<li calss="size" th:if="${filterSizeList != null and !filterSizeList.empty}" id="sizeFilterDiv">
+								<li class="size chkFilter" th:if="${filterSizeList != null and !filterSizeList.empty}" id="sizeFilterDiv">
 									<a href="javascript:void(0)" class="daps1">사이즈</a>
 									<div class="daps2">
 										<ul class="sizebox">
@@ -125,7 +125,7 @@
 												<strong>상의</strong>
 												<th:block th:each="oneData, status : ${filterSizeList}" th:if="${#strings.startsWith(oneData.filterCd,'T')}">
 													<label class="size_btn">
-														<input type="checkbox" group="filterValue" th:id="${'chkFilterTSize' + status.index}" name="size" th:vale="${oneData.filterNm}" th:data-id="${oneData.filterNm}" data-idx="1" onclick="filterSel(this,'size','off','1','Mob');"><span th:text="${oneData.filterNm}">80</span>
+														<input type="checkbox" group="filterValue" th:id="${'chkFilterTSize' + status.index}" name="size" th:vale="${oneData.filterNm}" th:data-id="${oneData.filterNm}" data-idx="1" onclick="fnSelectFilerMob(this,'size','off','1');"><span th:text="${oneData.filterNm}">80</span>
 													</label>
 												</th:block>
 											</li>
@@ -133,7 +133,7 @@
 												<strong>하의</strong>
 												<th:block th:each="oneData, status : ${filterSizeList}" th:if="${#strings.startsWith(oneData.filterCd,'B')}">
 													<label class="size_btn">
-														<input type="checkbox" group="filterValue" th:id="${'chkFilterBSize' + status.index}" name="size" th:vale="${oneData.filterNm}" th:data-id="${oneData.filterNm}" data-idx="2" onclick="filterSel(this,'size','off','2','Mob');"><span th:text="${oneData.filterNm}">44</span>
+														<input type="checkbox" group="filterValue" th:id="${'chkFilterBSize' + status.index}" name="size" th:vale="${oneData.filterNm}" th:data-id="${oneData.filterNm}" data-idx="2" onclick="fnSelectFilerMob(this,'size','off','2');"><span th:text="${oneData.filterNm}">44</span>
 													</label>
 												</th:block>
 											</li>
@@ -141,19 +141,19 @@
 												<strong>신발</strong>
 												<th:block th:each="oneData, status : ${filterSizeList}" th:if="${#strings.startsWith(oneData.filterCd,'S')}">
 													<label class="size_btn">
-														<input type="checkbox" group="filterValue" th:id="${'chkFilterSSize' + status.index}" name="size" th:vale="${oneData.filterNm}" th:data-id="${oneData.filterNm}" data-idx="3" onclick="filterSel(this,'size','off','3','Mob');"><span th:text="${oneData.filterNm}">120</span>
+														<input type="checkbox" group="filterValue" th:id="${'chkFilterSSize' + status.index}" name="size" th:vale="${oneData.filterNm}" th:data-id="${oneData.filterNm}" data-idx="3" onclick="fnSelectFilerMob(this,'size','off','3');"><span th:text="${oneData.filterNm}">120</span>
 													</label>
 												</th:block>
 											</li>
 										</ul>
 									</div>
 								</li>
-								<li class="price" id="priceFilterDiv">
+								<li class="price chkFilter" id="priceFilterDiv">
 									<a href="javascript:void(0)" class="daps1">가격<!--<span class="pic">230,000원~487,000원, 700,000원~990,000원</span>--></a>
 									<ul class="daps2" id="priceArea">
 									</ul>
 								</li>
-								<li class="discount" id="dcRateFilterDiv">
+								<li class="discount chkFilter" id="dcRateFilterDiv">
 									<a href="javascript:void(0)" class="daps1">할인율</a>
 									<ul class="daps2">
 										<li>
@@ -248,35 +248,35 @@
 										</li>
 									</ul>
 								</li>
-								<li class="age" th:if="${filterAgeList != null and !filterAgeList.empty}" id="ageFilterDiv">
+								<li class="age chkFilter" th:if="${filterAgeList != null and !filterAgeList.empty}" id="ageFilterDiv">
 									<a href="javascript:void(0)" class="daps1">연령</a>
 									<ul class="daps2">
 										<li th:each="oneData, status : ${filterAgeList}">
 											<a href="javascript:void(0)">
 												<div class="form_field">
 													<div>
-														<input th:id="${'chkFilterAge' + status.index}" name="age" th:value="${oneData.filterCd}" th:data-id="${oneData.filterNm}" onclick="filterSel(this,'age','off','','Mob');" type="checkbox"><label th:for="${'chkFilterAge' + status.index}"> <span th:text="${oneData.filterNm}"></span> </label>
+														<input th:id="${'chkFilterAge' + status.index}" name="age" th:value="${oneData.filterCd}" th:data-id="${oneData.filterNm}" onclick="fnSelectFilerMob(this,'age','off','');" type="checkbox"><label th:for="${'chkFilterAge' + status.index}"> <span th:text="${oneData.filterNm}"></span> </label>
 													</div>
 												</div>
 											</a>
 										</li>
 									</ul>
 								</li>
-								<li class="season" th:if="${filterSeasonList != null and !filterSeasonList.empty}" id="seasonFilterDiv">
+								<li class="season chkFilter" th:if="${filterSeasonList != null and !filterSeasonList.empty}" id="seasonFilterDiv">
 									<a href="javascript:void(0)" class="daps1">시즌</a>
 									<ul class="daps2">
 										<li th:each="oneData, status : ${filterSeasonList}">
 											<a href="javascript:void(0)">
 												<div class="form_field">
 													<div>
-														<input th:id="${'chkFilterSeason' + status.index}" name="season" th:value="${oneData.filterCd}" th:data-id="${oneData.filterNm}" onclick="filterSel(this,'season','off','','Mob');" type="checkbox"><label th:for="${'chkFilterSeason' + status.index}"> <span th:text="${oneData.filterNm}">봄</span> </label>
+														<input th:id="${'chkFilterSeason' + status.index}" name="season" th:value="${oneData.filterCd}" th:data-id="${oneData.filterNm}" onclick="fnSelectFilerMob(this,'season','off','');" type="checkbox"><label th:for="${'chkFilterSeason' + status.index}"> <span th:text="${oneData.filterNm}">봄</span> </label>
 													</div>
 												</div>
 											</a>
 										</li>
 									</ul>
 								</li>
-								<li class="color" th:if="${filterColorList != null and !filterColorList.empty}" id="colorFilterDiv">
+								<li class="color chkFilter" th:if="${filterColorList != null and !filterColorList.empty}" id="colorFilterDiv">
 									<a href="javascript:void(0)" class="daps1">컬러
 										<span class="pic">
 <!--											<span class="pdColor-color01"></span><span class="pdColor-color02"></span>-->
@@ -286,7 +286,7 @@
 										<ul class="colorbox">
 											<li th:each="oneData, status : ${filterColorList}">
 												<label class="color-check">
-													<input type="checkbox" group="filterValue" th:id="${'chkFilterColor' + status.index}" name="color" th:value="${oneData.filterCd}" th:data-id="${oneData.filterNm.replace('#','')}" onclick="filterSel(this,'color','off','','Mob');">
+													<input type="checkbox" group="filterValue" th:id="${'chkFilterColor' + status.index}" name="color" th:value="${oneData.filterCd}" th:data-id="${oneData.filterNm.replace('#','')}" onclick="fnSelectFilerMob(this,'color','off','');">
 													<span class="pdColor-color" th:if="${oneData.filterNm=='#FFFFFF'}" th:style="${'background-color:'+oneData.filterNm+';'+' border:1px solid #aaa;'}" th:value="${oneData.filterCd}"></span>
 													<span class="pdColor-color" th:if="${oneData.filterNm!='#FFFFFF'}" th:style="${'background-color:'+oneData.filterNm}" th:value="${oneData.filterCd}"></span>
 												</label>
@@ -294,14 +294,14 @@
 										</ul>
 									</div>
 								</li>
-								<li class="benefit" th:if="${filterBenefitList != null and !filterBenefitList.empty}" id="benefitFilterDiv">
+								<li class="benefit chkFilter" th:if="${filterBenefitList != null and !filterBenefitList.empty}" id="benefitFilterDiv">
 									<a href="javascript:void(0)" class="daps1">혜택</a>
 									<ul class="daps2">
 										<li th:each="oneData, status : ${filterBenefitList}">
 											<a href="javascript:void(0)">
 												<div class="form_field">
 													<div>
-														<input th:id="${'chkFilterBenefits' + status.index}" name="benefit" th:value="${oneData.filterCd}" th:data-id="${oneData.filterNm}" onclick="filterSel(this,'benefit','off','','Mob');" type="checkbox"><label th:for="${'chkFilterBenefits' + status.index}"> <span th:text="${oneData.filterNm}"></span> </label>
+														<input th:id="${'chkFilterBenefits' + status.index}" name="benefit" th:value="${oneData.filterCd}" th:data-id="${oneData.filterNm}" onclick="fnSelectFilerMob(this,'benefit','off','');" type="checkbox"><label th:for="${'chkFilterBenefits' + status.index}"> <span th:text="${oneData.filterNm}"></span> </label>
 													</div>
 												</div>
 											</a>
@@ -744,7 +744,7 @@
 				if($("#searchGoodsForm input[name=pageNo]").val()==1){
 					// 필터 값으로 조회 데이터 없을때
 					$('.list_content .list_defult').show();
-					$('.list_content .count_wrap').hide();
+					//$('.list_content .count_wrap').hide();
 				}else{
 					// 마지막 페이지 일때
 					$('#endPage').show();
@@ -804,13 +804,10 @@
 			$('#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);
 				if(historyData!=null){
-					console.log('M historyData>>'+historyData);
+					//console.log('M historyData>>'+historyData);
 					historyData = JSON.parse(historyData);
 				}else{
 					historyData = {};
@@ -818,36 +815,93 @@
 				if(typeof historyData.filterHtml!='undefined' && historyData.filterHtml!=''){
 					$("#searchGoodsForm").append(historyData.filterHtml);
 					filterHtml = historyData.filterHtml;
+					fnReCheckFilterList();
 				}
 				if(typeof historyData.filterStatHtml!='undefined' && historyData.filterStatHtml!=''){
-					$(".filterstate .filter_div").append(historyData.filterStatHtml);
+					//TODO 작업해야함
+					console.log('M filterStatHtml>>'+historyData.filterStatHtml);
+					$("#filterForm").append(historyData.filterStatHtml);
 					filterStatHtml = historyData.filterStatHtml;
 				}
 				if(typeof historyData.totalCount!='undefined' && historyData.totalCount!=''){
 					$("#totCntId").text(historyData.totalCount);
 				}
-				if(typeof historyData.sortGb!='undefined' && historyData.sortGb!=''){
-					$("#sortSelect").val(historyData.sortGb);
-					$("#searchGoodsForm input:hidden[name=sortGb]").val(historyData.sortGb);
+				if(filterPriceList.length > 0){
+					let min = 0;
+					let max = 0;
+					var val = '';
+					if(!gagajf.isNull($("#searchGoodsForm").find("input:hidden[name=priceFrom]").val())){
+						min = $("#searchGoodsForm").find("input:hidden[name=priceFrom]").val();
+					}
+					if(!gagajf.isNull($("#searchGoodsForm").find("input:hidden[name=priceTo]").val())){
+						max = $("#searchGoodsForm").find("input:hidden[name=priceTo]").val();
+					}
+					val = min+','+max;
+
+					$('#filterForm input[name=price]').each(function (){
+						if(val == $(this).val()){
+							$(this).prop("checked",true);
+						}
+					});
+				}
+				if(typeof historyData.sortingType!='undefined' && historyData.sortingType!=''){
+					$("#searchGoodsForm input:hidden[name=sortingType]").val(historyData.sortingType);
+					fnSortingChange(this,historyData.sortingType,'back','Mob');
+				}else{
+					fnCategoryGoodsInfiniteScrollInit();
+					fnGoodsListSearch();
 				}
-				fnGoodsListSearch();
 			}else{
 				fnCategoryGoodsInfiniteScrollInit();
-				// var sortGb = [[${sortGb}]];
-				// if(sortGb=='new' || sortGb=='best'){
-				// 	$("#sortSelect").val(sortGb);
-				// 	$("#sortSelect").parent('div').children('span').text($("#sortSelect option:selected").text())
-				// 	fnSortChange(sortGb);
-				// }else{
-				// 	fnGoodsListSearch();
-				// }
-				fnGoodsListSearch();
+				var sortingType = $("#searchGoodsForm input:hidden[name=sortingType]").val();
+				if(sortingType=='BEST' || sortingType=='REVIEW'){
+					console.log('2222');
+					fnSortingChange(this,sortingType,'','Mob');
+				}else{
+					fnGoodsListSearch();
+				}
 			}
 
 		});
 
+		// var iframe= document.createElement('iframe');
+		// iframe.setAttribute('allowFullScreen', '');
+		// iframe.setAttribute('allow', 'fullscreen');
+		// var controller;
+		// var player = document.getElementById('player');
+		//
+		// player.onload = function() {
+		// 	try {
+		// 		var controller = new VgControllerClient({
+		// 			target_window: document.getElementById('pdThumbVideo').contentWindow
+		// 			// target_window: document.getElementsByClassName('pd_mov').contentWindow
+		// 		});
+		// 		var playMov;
+		//
+		// 		controller.on('ready', function(){
+		// 			//플레이어 준비 완료
+		// 			controller.set_ratio('fill');
+		// 			//  contain : 비율에 맞게 채웁니다.
+		// 			//fill : 화면에 꽉 차게 채웁니다.
+		// 			//enlargement : 세로 높이를 꽉 차게 맞춥니다. 좌우로 스크롤이 가능합니다
+		// 			controller.play();
+		// 		});
+		// 		controller.on('done', function(){
+		// 			//플레이어 재생 완료
+		// 			controller.play();
+		// 		});
+		//
+		// 	} catch(e) {
+		// 		// Videogateweay Controller Library는 window.postMessage API를 이용하기 때문에
+		// 		// 해당 기능을 지원하지 않는 웹브라우져에서는 동작하지 않습니다.
+		// 		// 이 부분에 적절한 fail-over 코드를 추가하여 주십시요.
+		// 	}
+		//
+		// }
+
 	</script>
 
+
 </th:block>
 </body>
 </html>

src/main/webapp/biz/goods.js

@@ -354,7 +354,7 @@ var filterHtml = '';
 var filterStatHtml = '';
 
 // 상품상세 필터 조회
-var filterSel = function (obj, gubun, staus, sizeGb, appGb){
+var filterSel = function (obj, gubun, staus, sizeGb){
 	filterHtml = '';
 	filterStatHtml = '';
 	gagaInfiniteScroll.pageStatus.filterHtml = filterHtml;
@@ -362,9 +362,9 @@ var filterSel = function (obj, gubun, staus, sizeGb, appGb){
 	let $obj = $(obj);
 	if(staus=='on'){
 		if(gubun=='size'){
-			$(obj).attr('onclick','filterSel(this,\''+gubun+'\',\'off\',\''+sizeGb+'\',\''+appGb+'\');');
+			$(obj).attr('onclick','filterSel(this,\''+gubun+'\',\'off\',\''+sizeGb+'\');');
 		}else{
-			$(obj).attr('onclick','filterSel(this,\''+gubun+'\',\'off\',\'\',\''+appGb+'\');');
+			$(obj).attr('onclick','filterSel(this,\''+gubun+'\',\'off\',\'\');');
 		}
 
 		$("#filterData").find('span').each(function(idx,item) {
@@ -380,9 +380,9 @@ var filterSel = function (obj, gubun, staus, sizeGb, appGb){
 		});
 	}else{
 		if(gubun=='size'){
-			$(obj).attr('onclick','filterSel(this,\''+gubun+'\',\'on\',\''+sizeGb+'\',\''+appGb+'\');');
+			$(obj).attr('onclick','filterSel(this,\''+gubun+'\',\'on\',\''+sizeGb+'\');');
 		}else{
-			$(obj).attr('onclick','filterSel(this,\''+gubun+'\',\'on\',\'\',\''+appGb+'\');');
+			$(obj).attr('onclick','filterSel(this,\''+gubun+'\',\'on\',\'\');');
 		}
 
 		let tag = '';
@@ -405,15 +405,13 @@ var filterSel = function (obj, gubun, staus, sizeGb, appGb){
 			tag += '</span>';
 		}
 
-		if(appGb != 'Mob'){
-			$("#filterData").append(tag);
-		}
+		$("#filterData").append(tag);
 
 		filterStatHtml += tag;
 	}
 
 	gagaInfiniteScroll.pageStatus.filterStatHtml = filterStatHtml;
-	fnFilterSet(gubun, sizeGb, appGb);
+	fnFilterSet(gubun, sizeGb);
 }
 
 var fnFilterSet = function (searchId, sizeGb, appGb){
@@ -437,6 +435,8 @@ var fnFilterSet = function (searchId, sizeGb, appGb){
 
 	if(appGb == 'Mob'){
 		var data = '';
+		var tag = '';
+		var filterSet = '';
 		$('#'+searchId+'FilterDiv').find('.daps1').find('span').html('');
 		$('#filterForm input[name='+searchId+']:checked').each(function(idx){
 			if(searchId=='color'){
@@ -458,10 +458,11 @@ var fnFilterSet = function (searchId, sizeGb, appGb){
 				data += $(this).attr('data-id');
 				$("#"+searchId+"FilterDiv").find('.daps1').append('<span class="pic">'+data+'</span>');
 			}
-
 		});
+
 	}
 	gagaInfiniteScroll.pageStatus.filterHtml = filterHtml;
+	gagaInfiniteScroll.pageStatus.filterStatHtml = filterStatHtml;
 	fnGoodsListSearch();
 }
 
@@ -612,12 +613,15 @@ var fnSortingChange = function (obj, sortingType, stat, appGb){
 		}
 	}
 
-	console.log('appGb:::'+appGb);
 	if(appGb != 'Mob'){
 		$("#sortArea").find('li').each(function (){
 			$(this).find('a').attr('class','off');
 		});
 	}else{
+		$("#sortArea").find('button').each(function (){
+			$(this).removeClass("on");
+		});
+		$("#sorting"+sortingType).addClass("on");
 		$("#filter").text($("#sorting"+sortingType).find('span').text());
 	}
 	
@@ -726,4 +730,88 @@ var filterDcRateMob = function (obj, gubun, staus, idx){
 
 }
 
+// 상품상세 필터 조회
+var fnSelectFilerMob = function (obj, gubun, staus, sizeGb){
+	filterHtml = '';
+	filterStatHtml = '';
+	gagaInfiniteScroll.pageStatus.filterHtml = filterHtml;
+	gagaInfiniteScroll.pageStatus.filterStatHtml = filterStatHtml;
+	let $obj = $(obj);
+	if(staus=='on'){
+		if(gubun=='size'){
+			$(obj).attr('onclick','fnSelectFilerMob(this,\''+gubun+'\',\'off\',\''+sizeGb+'\');');
+		}else{
+			$(obj).attr('onclick','fnSelectFilerMob(this,\''+gubun+'\',\'off\',\'\');');
+		}
+
+		$("#filterData").find('span').each(function(idx,item) {
+			if(gubun=='color'){
+				if($obj.attr('data-id').replace('#','').trim() == $(this).closest("span").attr('id')) {
+					$(this).closest("span").remove();
+				}
+			}else{
+				if($obj.attr('data-id') == $(this).closest("span").text()) {
+					$(this).closest("span").remove();
+				}
+			}
+		});
+	}else{
+		if(gubun=='size'){
+			$(obj).attr('onclick','fnSelectFilerMob(this,\''+gubun+'\',\'on\',\''+sizeGb+'\');');
+		}else{
+			$(obj).attr('onclick','fnSelectFilerMob(this,\''+gubun+'\',\'on\',\'\');');
+		}
+	}
+	fnFilterSet(gubun, sizeGb, 'Mob');
+}
+
+var fnReCheckFilterList = function (){
+	var data = '';
+	var searchId = '';
+	$('#filterForm').find('.allFilter').find('.chkFilter').each(function() {
+		console.log('name?'+$(this).attr('id'));
+
+		if(!gagajf.isNull($(this).attr('id'))){
+			if($(this).attr('id') == 'sizeFilterDiv'){
+				searchId = 'size';
+			}else{
+				searchId = $(this).attr('id').replace('FilterDiv','');
+			}
+		}
+
+		if(!gagajf.isNull(searchId)){
+			$('#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=='price'){
+					$('#filterForm input[name=price]:checked').each(function(index){
+						$("#priceFilterDiv").find('.daps1').append('<span class="pic">'+$("#pricdSpan"+idx).text()+'</span>');
+					});
+				}else if(searchId=='dcRate'){
+					$('#filterForm input[name=dcRate]:checked').each(function(index){
+						$("#dcRateFilterDiv").find('.daps1').append('<span class="pic">'+$("#dcRateText"+idx).text()+'</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>');
+				}
+			});
+		}
+
+	});
+}
+
 //****************상품리스트  end **********************************