[모바일] 가격,할인율 필터

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

@@ -194,82 +194,82 @@
 										</ul>
 									</div>
 								</li>
-								<li class="price">
+								<li class="price" 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">
-										<li>
-											<a href="javascript:void(0)">
-												<div class="form_field">
-													<div>
-														<input id="price1" type="checkbox"><label for="price1"> <span>9천원 이하</span> </label>
-													</div>
-												</div>
-											</a>
-										</li>
-										<li>
-											<a href="javascript:void(0)">
-												<div class="form_field">
-													<div>
-														<input id="price2" type="checkbox"><label for="price2"> <span>9천원 ~ 23만원</span> </label>
-													</div>
-												</div>
-											</a>
-										</li>
-										<li>
-											<a href="javascript:void(0)">
-												<div class="form_field">
-													<div>
-														<input id="price3" type="checkbox" checked><label for="price3"> <span>23만원 ~ 48만원 7천원</span> </label>
-													</div>
-												</div>
-											</a>
-										</li>
-										<li>
-											<a href="javascript:void(0)">
-												<div class="form_field">
-													<div>
-														<input id="price4" type="checkbox" ><label for="price4"> <span>48만원 7천원 ~ 79만원</span> </label>
-													</div>
-												</div>
-											</a>
-										</li>
-										<li>
-											<a href="javascript:void(0)">
-												<div class="form_field">
-													<div>
-														<input id="price5" type="checkbox" checked><label for="price5"> <span>70만원 ~ 99만원</span> </label>
-													</div>
-												</div>
-											</a>
-										</li>
-										<li>
-											<a href="javascript:void(0)">
-												<div class="form_field">
-													<div>
-														<input id="price6" type="checkbox"><label for="price6"> <span>99만원 ~ 136만원</span> </label>
-													</div>
-												</div>
-											</a>
-										</li>
-										<li>
-											<a href="javascript:void(0)">
-												<div class="form_field">
-													<div>
-														<input id="price7" type="checkbox"><label for="price7"> <span>136만원 ~ 179만원 9천원</span> </label>
-													</div>
-												</div>
-											</a>
-										</li>
+									<ul class="daps2" id="priceArea">
+<!--										<li>-->
+<!--											<a href="javascript:void(0)">-->
+<!--												<div class="form_field">-->
+<!--													<div>-->
+<!--														<input id="price1" type="checkbox"><label for="price1"> <span>9천원 이하</span> </label>-->
+<!--													</div>-->
+<!--												</div>-->
+<!--											</a>-->
+<!--										</li>-->
+<!--										<li>-->
+<!--											<a href="javascript:void(0)">-->
+<!--												<div class="form_field">-->
+<!--													<div>-->
+<!--														<input id="price2" type="checkbox"><label for="price2"> <span>9천원 ~ 23만원</span> </label>-->
+<!--													</div>-->
+<!--												</div>-->
+<!--											</a>-->
+<!--										</li>-->
+<!--										<li>-->
+<!--											<a href="javascript:void(0)">-->
+<!--												<div class="form_field">-->
+<!--													<div>-->
+<!--														<input id="price3" type="checkbox" checked><label for="price3"> <span>23만원 ~ 48만원 7천원</span> </label>-->
+<!--													</div>-->
+<!--												</div>-->
+<!--											</a>-->
+<!--										</li>-->
+<!--										<li>-->
+<!--											<a href="javascript:void(0)">-->
+<!--												<div class="form_field">-->
+<!--													<div>-->
+<!--														<input id="price4" type="checkbox" ><label for="price4"> <span>48만원 7천원 ~ 79만원</span> </label>-->
+<!--													</div>-->
+<!--												</div>-->
+<!--											</a>-->
+<!--										</li>-->
+<!--										<li>-->
+<!--											<a href="javascript:void(0)">-->
+<!--												<div class="form_field">-->
+<!--													<div>-->
+<!--														<input id="price5" type="checkbox" checked><label for="price5"> <span>70만원 ~ 99만원</span> </label>-->
+<!--													</div>-->
+<!--												</div>-->
+<!--											</a>-->
+<!--										</li>-->
+<!--										<li>-->
+<!--											<a href="javascript:void(0)">-->
+<!--												<div class="form_field">-->
+<!--													<div>-->
+<!--														<input id="price6" type="checkbox"><label for="price6"> <span>99만원 ~ 136만원</span> </label>-->
+<!--													</div>-->
+<!--												</div>-->
+<!--											</a>-->
+<!--										</li>-->
+<!--										<li>-->
+<!--											<a href="javascript:void(0)">-->
+<!--												<div class="form_field">-->
+<!--													<div>-->
+<!--														<input id="price7" type="checkbox"><label for="price7"> <span>136만원 ~ 179만원 9천원</span> </label>-->
+<!--													</div>-->
+<!--												</div>-->
+<!--											</a>-->
+<!--										</li>-->
 									</ul>
 								</li>
-								<li class="discount">
+								<li class="discount" id="dcRateFilterDiv">
 									<a href="javascript:void(0)" class="daps1">할인율</a>
 									<ul class="daps2">
 										<li>
 											<a href="javascript:void(0)">
 												<div class="form_field">
 													<div>
-														<input id="discount1" type="checkbox"><label for="discount1"> <span>10% 이하</span> </label>
+														<input id="discount1" name="dcRate" type="checkbox" value="0,10" onclick="filterDcRateMob(this,'dcRate','off','1');"><label for="discount1"> <span id="dcRateText1">10% 이하</span> </label>
 													</div>
 												</div>
 											</a>
@@ -278,7 +278,7 @@
 											<a href="javascript:void(0)">
 												<div class="form_field">
 													<div>
-														<input id="discount2" type="checkbox"><label for="discount2"> <span>10~20%</span> </label>
+														<input id="discount2" name="dcRate" type="checkbox" value="10,20" onclick="filterDcRateMob(this,'dcRate','off','2');"><label for="discount2"> <span id="dcRateText2">10~20%</span> </label>
 													</div>
 												</div>
 											</a>
@@ -287,7 +287,7 @@
 											<a href="javascript:void(0)">
 												<div class="form_field">
 													<div>
-														<input id="discount3" type="checkbox"><label for="discount3"> <span>20~30%</span> </label>
+														<input id="discount3" name="dcRate" type="checkbox" value="20,30" onclick="filterDcRateMob(this,'dcRate','off','3');"><label for="discount3"> <span id="dcRateText3">20~30%</span> </label>
 													</div>
 												</div>
 											</a>
@@ -296,7 +296,7 @@
 											<a href="javascript:void(0)">
 												<div class="form_field">
 													<div>
-														<input id="discount4" type="checkbox"><label for="discount4"> <span>30~40%</span> </label>
+														<input id="discount4" name="dcRate" type="checkbox" value="30,40" onclick="filterDcRateMob(this,'dcRate','off','4');"><label for="discount4"> <span id="dcRateText4">30~40%</span> </label>
 													</div>
 												</div>
 											</a>
@@ -305,7 +305,7 @@
 											<a href="javascript:void(0)">
 												<div class="form_field">
 													<div>
-														<input id="discount5" type="checkbox"><label for="discount5"> <span>40~50%</span> </label>
+														<input id="discount5" name="dcRate" type="checkbox" value="40,50" onclick="filterDcRateMob(this,'dcRate','off','5');"><label for="discount5"> <span id="dcRateText5">40~50%</span> </label>
 													</div>
 												</div>
 											</a>
@@ -314,7 +314,7 @@
 											<a href="javascript:void(0)">
 												<div class="form_field">
 													<div>
-														<input id="discount6" type="checkbox"><label for="discount6"> <span>50~60%</span> </label>
+														<input id="discount6" name="dcRate" type="checkbox" value="50,60" onclick="filterDcRateMob(this,'dcRate','off','6');"><label for="discount6"> <span id="dcRateText6">50~60%</span> </label>
 													</div>
 												</div>
 											</a>
@@ -323,7 +323,7 @@
 											<a href="javascript:void(0)">
 												<div class="form_field">
 													<div>
-														<input id="discount7" type="checkbox"><label for="discount7"> <span>60~70%</span> </label>
+														<input id="discount7" name="dcRate" type="checkbox" value="60,70" onclick="filterDcRateMob(this,'dcRate','off','7');"><label for="discount7"> <span id="dcRateText7">60~70%</span> </label>
 													</div>
 												</div>
 											</a>
@@ -332,7 +332,7 @@
 											<a href="javascript:void(0)">
 												<div class="form_field">
 													<div>
-														<input id="discount8" type="checkbox"><label for="discount8"> <span>70~80%</span> </label>
+														<input id="discount8" name="dcRate" type="checkbox" value="70,80" onclick="filterDcRateMob(this,'dcRate','off','8');"><label for="discount8"> <span id="dcRateText8">70~80%</span> </label>
 													</div>
 												</div>
 											</a>
@@ -341,7 +341,7 @@
 											<a href="javascript:void(0)">
 												<div class="form_field">
 													<div>
-														<input id="discount9" type="checkbox"><label for="discount9"> <span>80~90%</span> </label>
+														<input id="discount9" name="dcRate" type="checkbox" value="80,90" onclick="filterDcRateMob(this,'dcRate','off','9');"><label for="discount9"> <span id="dcRateText9">80~90%</span> </label>
 													</div>
 												</div>
 											</a>
@@ -350,7 +350,7 @@
 											<a href="javascript:void(0)">
 												<div class="form_field">
 													<div>
-														<input id="discount10" type="checkbox"><label for="discount10"> <span>90이상</span> </label>
+														<input id="discount10" name="dcRate" type="checkbox" value="90,0" onclick="filterDcRateMob(this,'dcRate','off','10');"><label for="discount10"> <span id="dcRateText10">90이상</span> </label>
 													</div>
 												</div>
 											</a>
@@ -466,7 +466,37 @@
 	<script th:src="@{'/biz/goods.js?v=' + ${#calendars.format(#calendars.createNow(), 'yyyyMMddHHmmss')}}" src="/biz/goods.js"></script>
 
 	<script th:inline="javascript">
+		var filterPriceList = [[${filterPriceList}]];
+
 		$(document).ready(function(){
+			console.log('filterPriceList len:::'+filterPriceList.length);
+			if(filterPriceList.length > 0){
+				$("#priceArea").html('');
+				var priceHtml = '';
+				var minPrice;
+				var maxPrice;
+				for(let i=0; i<filterPriceList.length; i++){
+					if(i<1){
+						minPrice = 0;
+						maxPrice = filterPriceList[i].filterNm;
+					}else{
+						minPrice = filterPriceList[i-1].filterNm;
+						maxPrice = filterPriceList[i].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+'" 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);
+			}
+
 			fnCreateCategoryList();
 
 			if ($('#sizeLi1').find('label').length == 0) $('#sizeLi1').hide();

src/main/webapp/biz/goods.js

@@ -631,4 +631,99 @@ var fnSortingChange = function (obj, sortingType, stat, appGb){
 	fnGoodsListSearch();
 }
 
+// 모바일 가격 필터
+var filterPriceMob = function (obj, gubun, staus, idx){
+	$("#searchGoodsForm input:hidden[name=priceFrom]").remove();
+	$("#searchGoodsForm input:hidden[name=priceTo]").remove();
+
+	if(staus=='on'){
+		$(obj).attr('onclick','filterPriceMob(this,\''+gubun+'\',\'off\',\''+idx+'\');');
+	}else{
+		$(obj).attr('onclick','filterPriceMob(this,\''+gubun+'\',\'on\',\''+idx+'\');');
+	}
+
+	$('#filterForm input[name=price]').each(function (ind){
+		$(this).prop("checked",false);
+	});
+
+	let price = $(obj).val().split(",");
+	let min = price[0];
+	let max = price[1];
+	var tag2 = '';
+
+	if(staus=='off'){
+		$("#price"+idx).prop("checked",true);
+		if(max<1){
+			tag2 += '<input type="hidden" name="priceFrom" value="'+min.replace(",", "")+'"/>\n';
+		}else{
+			tag2 += '<input type="hidden" name="priceFrom" value="'+min.replace(",", "")+'"/>\n';
+			tag2 += '<input type="hidden" name="priceTo" value="'+max.replace(",", "")+'"/>\n';
+		}
+	}else{
+		$("#searchGoodsForm input:hidden[name=priceFrom]").remove();
+		$("#searchGoodsForm input:hidden[name=priceTo]").remove();
+	}
+
+	$('#priceFilterDiv').find('.daps1').find('span').html('');
+	$('#filterForm input[name=price]:checked').each(function(index){
+		$("#priceFilterDiv").find('.daps1').append('<span class="pic">'+$("#pricdSpan"+idx).text()+'</span>');
+	});
+
+	$("#searchGoodsForm").append(tag2);
+	filterHtml += tag2;
+	fnCategoryGoodsInfiniteScrollInit();
+
+	gagaInfiniteScroll.pageStatus.filterHtml = filterHtml;
+	gagaInfiniteScroll.pageStatus.filterStatHtml = filterStatHtml;
+	fnGoodsListSearch();
+}
+
+// 모바일 할인 필터
+var filterDcRateMob = function (obj, gubun, staus, idx){
+	$("#searchGoodsForm input:hidden[name=dcRateFrom]").remove();
+	$("#searchGoodsForm input:hidden[name=dcRateTo]").remove();
+
+	if(staus=='on'){
+		$(obj).attr('onclick','filterDcRateMob(this,\''+gubun+'\',\'off\',\''+idx+'\');');
+	}else{
+		$(obj).attr('onclick','filterDcRateMob(this,\''+gubun+'\',\'on\',\''+idx+'\');');
+	}
+
+	$('#filterForm input[name=dcRate]').each(function (ind){
+		$(this).prop("checked",false);
+	});
+
+	let dcRate = $(obj).val().split(",");
+	let min = dcRate[0];
+	let max = dcRate[1];
+	var tag2 = '';
+
+	if(staus=='off') {
+		$("#discount" + idx).prop("checked", true);
+		if(max<1){
+			tag2 += '<input type="hidden" name="dcRateFrom" value="'+min.replace(",", "")+'"/>\n';
+		}else{
+			tag2 += '<input type="hidden" name="dcRateFrom" value="'+min.replace(",", "")+'"/>\n';
+			tag2 += '<input type="hidden" name="dcRateTo" value="'+max.replace(",", "")+'"/>\n';
+		}
+	}else{
+		$("#searchGoodsForm input:hidden[name=dcRateFrom]").remove();
+		$("#searchGoodsForm input:hidden[name=dcRateTo]").remove();
+	}
+
+	$('#dcRateFilterDiv').find('.daps1').find('span').html('');
+	$('#filterForm input[name=dcRate]:checked').each(function(index){
+		$("#dcRateFilterDiv").find('.daps1').append('<span class="pic">'+$("#dcRateText"+idx).text()+'</span>');
+	});
+
+	$("#searchGoodsForm").append(tag2);
+	filterHtml += tag2;
+	fnCategoryGoodsInfiniteScrollInit();
+
+	gagaInfiniteScroll.pageStatus.filterHtml = filterHtml;
+	gagaInfiniteScroll.pageStatus.filterStatHtml = filterStatHtml;
+	fnGoodsListSearch();
+
+}
+
 //****************상품리스트  end **********************************