[베스트메인]구매 성별/연령 select 이벤트 수정

src/main/java/com/style24/front/biz/service/TsfDisplayService.java

@@ -805,7 +805,7 @@ public class TsfDisplayService {
 			goodsList = goodsDao.getContentsCategoryGoodsList(cate4Srch);
 			log.info("goodsList 1::::::{}",goodsList);
 		}
-
+/*
 		if (goodsList.size() < 100) {
 			// TODO 추천솔루션
 			log.info("goodsList.size()::::::{}",goodsList.size());
@@ -841,7 +841,7 @@ public class TsfDisplayService {
 			}
 			log.info("goodsList 2::::::{}",goodsList);
 		}
-
+*/
 		return goodsList;
 	}
 

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

@@ -111,11 +111,9 @@
 				</div>
 				<div class="popup_con">
 					<div class="button_list clear">
-						<button type="button" class="on"><span>구매성별 전체</span></button>
-						<button type="button"><span>구매성별1</span></button>
-						<button type="button"><span>구매성별2</span></button>
-						<button type="button"><span>구매성별3</span></button>
-						<button type="button"><span>구매성별4</span></button>
+						<button type="button" class="on" onclick="fnGetEigenD002(this, 'gender');" data-id="" ><span>구매성별 전체</span></button>
+						<button type="button" onclick="fnGetEigenD002(this, 'gender');" data-id="A" ><span>남성</span></button>
+						<button type="button" onclick="fnGetEigenD002(this, 'gender');" data-id="B" ><span>여성</span></button>
 					</div>
 				</div>
 			</div>
@@ -128,11 +126,12 @@
 				</div>
 				<div class="popup_con">
 					<div class="button_list clear">
-						<button type="button" class="on"><span>구매연령 전체</span></button>
-						<button type="button"><span>구매연령1</span></button>
-						<button type="button"><span>구매연령2</span></button>
-						<button type="button"><span>구매연령3</span></button>
-						<button type="button"><span>구매연령4</span></button>
+						<button type="button" class="on" onclick="fnGetEigenD002(this, 'age');" data-id="" ><span>구매연령 전체</span></button>
+						<button type="button" onclick="fnGetEigenD002(this, 'age');" data-id="10" ><span>10대</span></button>
+						<button type="button" onclick="fnGetEigenD002(this, 'age');" data-id="20" ><span>20대</span></button>
+						<button type="button" onclick="fnGetEigenD002(this, 'age');" data-id="30" ><span>30대</span></button>
+						<button type="button" onclick="fnGetEigenD002(this, 'age');" data-id="40" ><span>40대</span></button>
+						<button type="button" onclick="fnGetEigenD002(this, 'age');" data-id="50" ><span>50대 이상</span></button>
 					</div>
 				</div>
 			</div>
@@ -247,7 +246,7 @@
 
 			$.getJSON('/display/realtime/best/list' , data, function (result, status){
 				$("#itemViewArea").html('');
-				console.log(result);
+				// console.log(result);
 				if(result.length > 0){
 					$.each(result, function (idx, item){
 						// 2021.08.30 이미지 null 처리
@@ -306,9 +305,15 @@
 			gagajf.ajaxFormSubmit("/display/best/main/goods/list", document.bestGoodsForm,  fnCallbackBestTop100);
 		}
 
+		let bestCnt = 0;
+		let eigenBestCnt = 0;
+
 		var fnCallbackBestTop100 = function (result){
 			$("#prodArea").html('');
 			var tag = '';
+
+			bestCnt = result.dataList.length;
+
 			if(result.dataList.length > 0){
 				$.each(result.dataList, function (idx, item){
 					tag += '<div class="item_prod">\n';
@@ -381,6 +386,128 @@
 
 				$("#prodArea").append(tag);
 			}
+
+			// 수동설정이 100미만이면 추천솔루션 데이터 추가 조회
+			if(bestCnt < 100){
+				eigenBestCnt = 100 - bestCnt;
+				fnGetEigenBestData(eigenBestCnt);
+			}
+		}
+
+		// 추천솔루션 데이터 추가 조회
+		var fnGetEigenBestData = function (cnt){
+			var eigenUrl = '';
+			var selectCateNo = $("#bestGoodsForm input[name=cateNo]").val();
+
+			if(gagajf.isNull(selectCateNo)){
+				/* cateNo 전체 일 때 */
+				eigenUrl = 'https://api.eigene.io/rec/m061?size='+cnt+'&cuid=1252aed4-78dc-46e8-b784-94ac42e86dd4';
+			}else{
+				eigenUrl = 'https://api.eigene.io/rec/m060?size='+cnt+'&cuid=1252aed4-78dc-46e8-b784-94ac42e86dd4&incids='+selectCateNo;
+			}
+			var tag = '';
+
+			$.getJSON(eigenUrl, function (result, status){
+				if (status === 'success') {
+					if (!gagajf.isNull(result.results)) {
+						$.each(result.results, function (idx, item) {
+							tag += '<div class="item_prod">\n';
+							tag += '	<div class="item_state">\n';
+							tag += '		<button type="button" class="itemLike"  onclick="wishlistDelete(this)" goodsCd="'+item.product.itemId+'" goodsNm="'+ item.product.itemName+'" ithrCd="" contentsLoc="IN10_01" planDtlSq="">관심상품 추가</button>\n';
+							tag += '		<a href="javascript:void(0);" class="itemLink" onclick="cfnGoToGoodsDetail(\''+item.product.itemId+'\', \'\')">\n';
+							tag += '<div class="shape ';
+							if(cnt == 100 && idx==0){
+								tag += ' ranker';
+							}
+							tag += '"><span>'+(idx+1)+'</span></div>\n';
+							tag += '			<div class="itemPic">\n';
+							tag += '				<img alt="BLUE-a" class=" vLHTC pd_img" src="'+ item.product.itemImage +'">\n';
+							tag += '			</div>\n';
+							tag += '			<p class="itemBrand">'+item.product.brandName+'</p>\n';
+							tag += '			<div class="itemName">'+item.product.itemName+'</div>\n';
+							tag += '			<p class="itemPrice">';
+							if (item.product.originalPrice != item.product.salePrice) {
+								tag += '						<span class="itemPrice_original">' + item.product.originalPrice.addComma() + '</span>\n';
+							}
+							tag += item.product.salePrice.addComma();
+							if (item.product.originalPrice != item.product.salePrice) {
+								tag+='						<span class=" itemPercent">'+ Math.round((item.product.originalPrice - item.product.salePrice) / (item.product.originalPrice * 1.0) * 100) +'%</span>\n';
+							}
+							tag += '			</p>\n';
+							tag += '		</a>\n';
+							tag += '	</div>\n';
+							tag += '</div>\n';
+						});
+						$("#prodArea").append(tag);
+					}
+				}
+			});
+		}
+
+		// 구매 성별/연령 별 베스트 상품 추천
+		var fnGetEigenD002 = function (obj, key){
+			var gender = '';
+			var age = '';
+
+			if(key == 'gender'){
+				gender = $(obj).attr("data-id");
+				$("#odDatePop2").find(".popup_con .button_list").find("button").each(function (){
+					if($(this).hasClass("on")){
+						age = $(this).attr("data-id");
+					}
+				});
+			}else{
+				age = $(obj).attr("data-id");
+				$("#odDatePop1").find(".popup_con .button_list").find("button").each(function (){
+					if($(this).hasClass("on")){
+						gender = $(this).attr("data-id");
+					}
+				});
+			}
+
+			if(gagajf.isNull(gender) && gagajf.isNull(age)){
+				$("#prodArea").html('');
+				fnGetEigenBestData(100);
+			}else{
+				$("#prodArea").html('');
+				var eigenUrl = 'https://api.eigene.io/rec/d002?size=100&cuid=1252aed4-78dc-46e8-b784-94ac42e86dd4&gender='+gender+'&age='+age;
+				var tag = '';
+				$.getJSON(eigenUrl, function (result, status){
+					if (status === 'success') {
+						if (!gagajf.isNull(result.results)) {
+							$.each(result.results, function (idx, item) {
+								tag += '<div class="item_prod">\n';
+								tag += '	<div class="item_state">\n';
+								tag += '		<button type="button" class="itemLike"  onclick="wishlistDelete(this)" goodsCd="'+item.product.itemId+'" goodsNm="'+ item.product.itemName+'" ithrCd="" contentsLoc="IN10_01" planDtlSq="">관심상품 추가</button>\n';
+								tag += '		<a href="javascript:void(0);" class="itemLink" onclick="cfnGoToGoodsDetail(\''+item.product.itemId+'\', \'\')">\n';
+								tag += '<div class="shape ';
+								if(idx==0){
+									tag += ' ranker';
+								}
+								tag += '"><span>'+(idx+1)+'</span></div>\n';
+								tag += '			<div class="itemPic">\n';
+								tag += '				<img alt="BLUE-a" class=" vLHTC pd_img" src="'+ item.product.itemImage +'">\n';
+								tag += '			</div>\n';
+								tag += '			<p class="itemBrand">'+item.product.brandName+'</p>\n';
+								tag += '			<div class="itemName">'+item.product.itemName+'</div>\n';
+								tag += '			<p class="itemPrice">';
+								if (item.product.originalPrice != item.product.salePrice) {
+									tag += '						<span class="itemPrice_original">' + item.product.originalPrice.addComma() + '</span>\n';
+								}
+								tag += item.product.salePrice.addComma();
+								if (item.product.originalPrice != item.product.salePrice) {
+									tag+='						<span class=" itemPercent">'+ Math.round((item.product.originalPrice - item.product.salePrice) / (item.product.originalPrice * 1.0) * 100) +'%</span>\n';
+								}
+								tag += '			</p>\n';
+								tag += '		</a>\n';
+								tag += '	</div>\n';
+								tag += '</div>\n';
+							});
+							$("#prodArea").append(tag);
+						}
+					}
+				});
+			}
 		}
 
 		$(document).ready(function() {

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

@@ -98,9 +98,9 @@
 											<div class="select">구매 성별 전체</div>
 											<ul class="list">
 												<!-- 선택처리 class="selected" / 선택불가 aria-disabled="true" 추가  -->
-												<li class="selected">전체</li>
-												<li>남성</li>
-												<li>여성</li>
+												<li class="selected" data-id="" onclick="fnGetEigenD002(this, 'gender');">전체</li>
+												<li data-id="A" onclick="fnGetEigenD002(this, 'gender');">남성</li>
+												<li data-id="B" onclick="fnGetEigenD002(this, 'gender');">여성</li>
 											</ul>
 										</div>
 									</div>
@@ -109,12 +109,12 @@
 											<div class="select">구매 연령 전체</div>
 											<ul class="list">
 												<!-- 선택처리 class="selected" / 선택불가 aria-disabled="true" 추가  -->
-												<li class="selected">전체</li>
-												<li>10대</li>
-												<li>20대</li>
-												<li>30대</li>
-												<li>40대</li>
-												<li>50대 이상</li>
+												<li class="selected" data-id="" onclick="fnGetEigenD002(this, 'age');">전체</li>
+												<li data-id="10" onclick="fnGetEigenD002(this, 'age');">10대</li>
+												<li data-id="20" onclick="fnGetEigenD002(this, 'age');">20대</li>
+												<li data-id="30" onclick="fnGetEigenD002(this, 'age');">30대</li>
+												<li data-id="40" onclick="fnGetEigenD002(this, 'age');">40대</li>
+												<li data-id="50" onclick="fnGetEigenD002(this, 'age');">50대 이상</li>
 											</ul>
 										</div>
 									</div>
@@ -185,7 +185,6 @@
 
 		$.getJSON('/display/realtime/best/list' , data, function (result, status){
 			$("#itemViewArea").html('');
-			console.log(result);
 			if(result.length > 0){
 				$.each(result, function (idx, item){
 					// 2021.08.30 이미지 null 처리
@@ -235,9 +234,15 @@
 		gagajf.ajaxFormSubmit("/display/best/main/goods/list", document.bestGoodsForm,  fnCallbackBestTop100);
 	}
 
+	let bestCnt = 0;
+	let eigenBestCnt = 0;
+
 	var fnCallbackBestTop100 = function (result){
 		$("#prodArea").html('');
 		var tag = '';
+
+		bestCnt = result.dataList.length;
+
 		if(result.dataList.length > 0){
 			$.each(result.dataList, function (idx, item){
 				tag += '<div class="item_prod">\n';
@@ -307,6 +312,120 @@
 
 			$("#prodArea").append(tag);
 		}
+		// 수동설정이 100미만이면 추천솔루션 데이터 추가 조회
+		if(bestCnt < 100){
+			eigenBestCnt = 100 - bestCnt;
+			fnGetEigenBestData(eigenBestCnt);
+		}
+	}
+
+	// 추천솔루션 데이터 추가 조회
+	var fnGetEigenBestData = function (cnt){
+		var eigenUrl = '';
+		var selectCateNo = $("#bestGoodsForm input[name=cateNo]").val();
+
+		if(gagajf.isNull(selectCateNo)){
+			/* cateNo 전체 일 때 */
+			eigenUrl = 'https://api.eigene.io/rec/m061?size='+cnt+'&cuid=1252aed4-78dc-46e8-b784-94ac42e86dd4';
+		}else{
+			eigenUrl = 'https://api.eigene.io/rec/m060?size='+cnt+'&cuid=1252aed4-78dc-46e8-b784-94ac42e86dd4&incids='+selectCateNo;
+		}
+		var tag = '';
+		$.getJSON(eigenUrl, function (result, status){
+			if (status === 'success') {
+				if (!gagajf.isNull(result.results)) {
+					$.each(result.results, function (idx, item) {
+						tag += '<div class="item_prod">\n';
+						tag += '	<div class="item_state">\n';
+						tag += '		<button type="button" class="itemLike" onclick="wishlistDelete(this)" goodsCd="'+item.product.itemId+'" goodsNm="'+ item.product.itemName+'" ithrCd="" contentsLoc="IN10_01" planDtlSq="">관심상품 추가</button>\n';
+						tag += '		<a href="javascript:void(0);" class="itemLink" onclick="cfnGoToGoodsDetail(\''+item.product.itemId+'\', \'\',\'IN10_01\')">\n';
+						tag += '<div class="shape ';
+						if(cnt == 100 && idx==0){
+							tag += ' ranker';
+						}
+						tag += '"><span>'+(bestCnt+idx+1)+'</span></div>\n';
+						tag += '			<div class="itemPic">\n';
+						tag += '				<img alt="BLUE-a" class=" vLHTC pd_img" src="'+ item.product.itemImage +'">\n';
+						tag += '			</div>\n';
+						tag += '			<p class="itemBrand">'+item.product.brandName+'</p>\n';
+						tag += '			<div class="itemName">'+item.product.itemName+'</div>\n';
+						tag += '			<p class="itemPrice">'+item.product.salePrice.addComma();
+						if (item.product.originalPrice != item.product.salePrice) {
+							tag+='						<span class="itemPrice_original">'+item.product.originalPrice.addComma()+'</span>\n';
+							tag+='						<span class=" itemPercent">'+ Math.round((item.product.originalPrice - item.product.salePrice) / (item.product.originalPrice * 1.0) * 100) +'%</span>\n';
+						}
+						tag += '			</p>\n';
+						tag += '		</a>\n';
+						tag += '	</div>\n';
+						tag += '</div>\n';
+					});
+					$("#prodArea").append(tag);
+				}
+			}
+		});
+	}
+
+	// 구매 성별/연령 별 베스트 상품 추천
+	var fnGetEigenD002 = function (obj, key){
+		var gender = '';
+		var age = '';
+
+		if(key == 'gender'){
+			gender = $(obj).attr("data-id");
+			$('.select_age .list').find('li').each(function (){
+				if($(this).hasClass("selected")){
+					age = $(this).attr("data-id");
+				}
+			});
+		}else{
+			age = $(obj).attr("data-id");
+			$('.select_sex .list').find('li').each(function (){
+				if($(this).hasClass("selected")){
+					gender = $(this).attr("data-id");
+				}
+			});
+		}
+
+		if(gagajf.isNull(gender) && gagajf.isNull(age)){
+			$("#prodArea").html('');
+			fnGetEigenBestData(100);
+		}else{
+			$("#prodArea").html('');
+			var eigenUrl = 'https://api.eigene.io/rec/d002?size=100&cuid=1252aed4-78dc-46e8-b784-94ac42e86dd4&gender='+gender+'&age='+age;
+			var tag = '';
+			$.getJSON(eigenUrl, function (result, status){
+				if (status === 'success') {
+					if (!gagajf.isNull(result.results)) {
+						$.each(result.results, function (idx, item) {
+							tag += '<div class="item_prod">\n';
+							tag += '	<div class="item_state">\n';
+							tag += '		<button type="button" class="itemLike" onclick="wishlistDelete(this)" goodsCd="'+item.product.itemId+'" goodsNm="'+ item.product.itemName+'" ithrCd="" contentsLoc="IN10_01" planDtlSq="">관심상품 추가</button>\n';
+							tag += '		<a href="javascript:void(0);" class="itemLink" onclick="cfnGoToGoodsDetail(\''+item.product.itemId+'\', \'\',\'IN10_01\')">\n';
+							tag += '<div class="shape ';
+							if(idx==0){
+								tag += ' ranker';
+							}
+							tag += '"><span>'+(idx+1)+'</span></div>\n';
+							tag += '			<div class="itemPic">\n';
+							tag += '				<img alt="BLUE-a" class=" vLHTC pd_img" src="'+ item.product.itemImage +'">\n';
+							tag += '			</div>\n';
+							tag += '			<p class="itemBrand">'+item.product.brandName+'</p>\n';
+							tag += '			<div class="itemName">'+item.product.itemName+'</div>\n';
+							tag += '			<p class="itemPrice">'+item.product.salePrice.addComma();
+							if (item.product.originalPrice != item.product.salePrice) {
+								tag+='						<span class="itemPrice_original">'+item.product.originalPrice.addComma()+'</span>\n';
+								tag+='						<span class=" itemPercent">'+ Math.round((item.product.originalPrice - item.product.salePrice) / (item.product.originalPrice * 1.0) * 100) +'%</span>\n';
+							}
+							tag += '			</p>\n';
+							tag += '		</a>\n';
+							tag += '	</div>\n';
+							tag += '</div>\n';
+						});
+						$("#prodArea").append(tag);
+					}
+				}
+			});
+		}
 	}
 
 	$(document).ready(function() {