검색레이어 검색결과_추천상품

src/main/java/com/style24/front/biz/thirdparty/EigeneaiApi.java

@@ -513,4 +513,22 @@ public class EigeneaiApi {
 		return gson.fromJson(responseJson, Eigeneai.class);
 	}
 
+	/**
+	 * 검색어 연관 상품 추천 목록
+	 * @return
+	 * @author bin2107
+	 * @since 2021. 7. 26
+	 */
+	public Collection<Result> getRecommendItemList(int size, String keyword) {
+		String requestUrl = "";
+		requestUrl = apiUrl + "/s003?size="+size+"&cuid=" + cuid + "&st=" + keyword + "&cps=true&cpt=m004";
+
+		Eigeneai eigeneai = this.getEigeneaiInfo(requestUrl);
+		if (eigeneai.getResults() != null && !eigeneai.getResults().isEmpty()) {
+			return eigeneai.getResults();
+		}
+
+		return new ArrayList<Result>();
+	}
+
 }

src/main/java/com/style24/front/biz/web/TsfDisplayController.java

@@ -1400,4 +1400,20 @@ public class TsfDisplayController extends TsfBaseController {
 		Collection<Item> goodsList = eigeneaiApi.getRealtimeViewGoodsList(20);
 		return goodsList;
 	}
+
+	/**
+	 * 검색어 연관 상품 추천 목록
+	 * @return
+	 * @author bin2107
+	 * @since 2021. 7. 26
+	 */
+	@GetMapping("/recommend/item/list")
+	@ResponseBody
+	public Collection<Result> getRecommendItemList(@RequestParam HashMap<String, String> paramMap) {
+		String keyword = paramMap.get("keyword");
+		int size = 5;
+		Collection<Result> itemList = eigeneaiApi.getRecommendItemList(size, keyword);
+
+		return itemList;
+	}
 }

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

@@ -343,120 +343,35 @@
 						<div class="store_product">
 							<div class="swiper-container recommand_slide">
 								<h3>이런 상품은 어떤가요?</h3>
-								<div class="swiper-wrapper">
-									<div class="swiper-slide">
-										<div class="item_prod">
-											<div class="item_state">
-												<button type="button" class="itemLike">관심상품 추가</button>
-												<a href="#none" class="itemLink">
-													<div class="itemPic">
-														<img class="vLHTC pd_img" src="/images/mo/thumb/br_main03.png" alt="">
-													</div>
-													<p class="itemBrand">BRAND NAME</p>
-													<div class="itemName">남성 헤링본 기모 팬츠 헤링본 기모 팬츠</div>
-													<p class="itemPrice">
-														<span class="itemPrice_original">89,000</span>
-														80,100
-														<span class="itemPercent">10%</span>
-													</p>
-													<div class="itemcolorchip">
-														<span class="chip_color35" value="ABM">BEIGE</span>
-														<span class="chip_color54" value="BDS">BLACK</span>
-														<span class="chip_color40" value="YBR">WHITE</span>
-													</div>
-													<p class="itemBadge">
-														<span class="badge13">베스트 </span>
-													</p>
-													<div class="itemComment">#주문 폭주 상품</div>
-												</a>
-											</div>
-										</div>
-
-									</div>
-									<div class="swiper-slide">
-										<div class="item_prod">
-											<div class="item_state">
-												<button type="button" class="itemLike">관심상품 추가</button>
-												<a href="#none" class="itemLink">
-													<div class="itemPic">
-														<img class="vLHTC pd_img" src="/images/mo/thumb/br_main03.png" alt="">
-													</div>
-													<p class="itemBrand">BRAND NAME</p>
-													<div class="itemName">남성 헤링본 기모 팬츠 헤링본 기모 팬츠</div>
-													<p class="itemPrice">
-														<span class="itemPrice_original">89,000</span>
-														80,100
-														<span class="itemPercent">10%</span>
-													</p>
-													<div class="itemcolorchip">
-														<span class="chip_color35" value="ABM">BEIGE</span>
-														<span class="chip_color54" value="BDS">BLACK</span>
-														<span class="chip_color40" value="YBR">WHITE</span>
-													</div>
-													<p class="itemBadge">
-														<span class="badge13">베스트 </span>
-													</p>
-													<div class="itemComment">#주문 폭주 상품</div>
-												</a>
-											</div>
-										</div>
-									</div>
-									<div class="swiper-slide">
-										<div class="item_prod">
-											<div class="item_state">
-												<button type="button" class="itemLike">관심상품 추가</button>
-												<a href="#none" class="itemLink">
-													<div class="itemPic">
-														<img class="vLHTC pd_img" src="/images/mo/thumb/br_main03.png" alt="">
-													</div>
-													<p class="itemBrand">BRAND NAME</p>
-													<div class="itemName">남성 헤링본 기모 팬츠 헤링본 기모 팬츠</div>
-													<p class="itemPrice">
-														<span class="itemPrice_original">89,000</span>
-														80,100
-														<span class="itemPercent">10%</span>
-													</p>
-													<div class="itemcolorchip">
-														<span class="chip_color35" value="ABM">BEIGE</span>
-														<span class="chip_color54" value="BDS">BLACK</span>
-														<span class="chip_color40" value="YBR">WHITE</span>
-													</div>
-													<p class="itemBadge">
-														<span class="badge13">베스트 </span>
-													</p>
-													<div class="itemComment">#주문 폭주 상품</div>
-												</a>
-											</div>
-										</div>
-									</div>
-									<div class="swiper-slide">
-										<div class="item_prod">
-											<div class="item_state">
-												<button type="button" class="itemLike">관심상품 추가</button>
-												<a href="#none" class="itemLink">
-													<div class="itemPic">
-														<img class="vLHTC pd_img" src="/images/mo/thumb/br_main03.png" alt="">
-													</div>
-													<p class="itemBrand">BRAND NAME</p>
-													<div class="itemName">남성 헤링본 기모 팬츠 헤링본 기모 팬츠</div>
-													<p class="itemPrice">
-														<span class="itemPrice_original">89,000</span>
-														80,100
-														<span class="itemPercent">10%</span>
-													</p>
-													<div class="itemcolorchip">
-														<span class="chip_color35" value="ABM">BEIGE</span>
-														<span class="chip_color54" value="BDS">BLACK</span>
-														<span class="chip_color40" value="YBR">WHITE</span>
-													</div>
-													<p class="itemBadge">
-														<span class="badge13">베스트 </span>
-													</p>
-													<div class="itemComment">#주문 폭주 상품</div>
-												</a>
-											</div>
-										</div>
-									</div>
+								<div class="swiper-wrapper" id="recommendItemArea">
+<!--									<div class="swiper-slide">-->
+<!--										<div class="item_prod">-->
+<!--											<div class="item_state">-->
+<!--												<button type="button" class="itemLike">관심상품 추가</button>-->
+<!--												<a href="#none" class="itemLink">-->
+<!--													<div class="itemPic">-->
+<!--														<img class="vLHTC pd_img" src="/images/mo/thumb/br_main03.png" alt="">-->
+<!--													</div>-->
+<!--													<p class="itemBrand">BRAND NAME</p>-->
+<!--													<div class="itemName">남성 헤링본 기모 팬츠 헤링본 기모 팬츠</div>-->
+<!--													<p class="itemPrice">-->
+<!--														<span class="itemPrice_original">89,000</span>-->
+<!--														80,100-->
+<!--														<span class="itemPercent">10%</span>-->
+<!--													</p>-->
+<!--													<div class="itemcolorchip">-->
+<!--														<span class="chip_color35" value="ABM">BEIGE</span>-->
+<!--														<span class="chip_color54" value="BDS">BLACK</span>-->
+<!--														<span class="chip_color40" value="YBR">WHITE</span>-->
+<!--													</div>-->
+<!--													<p class="itemBadge">-->
+<!--														<span class="badge13">베스트 </span>-->
+<!--													</p>-->
+<!--													<div class="itemComment">#주문 폭주 상품</div>-->
+<!--												</a>-->
+<!--											</div>-->
+<!--										</div>-->
+<!--									</div>-->
 								</div>
 							</div>
 						</div>
@@ -549,6 +464,8 @@
 			$("#noDataArea").find('#noDataKeyword').text($("#searchMainForm").find('input[name=keyword]').val());
 			$("#noDataArea").show();
 			$("#recommandArea").show();
+			// 검색어 연관 상품 추천
+			fnRecommendItemList($("#searchMainForm").find('input[name=keyword]').val());
 		}else{
 			// 자동완성 키워드
 			if(result.autoKeywords != null && result.autoKeywords.length > 0){
@@ -557,7 +474,7 @@
 				tag += '<ul>\n';
 				$.each(result.autoKeywords, function (idx,item){
 					tag += '<li>\n';
-					tag += '	<a href="javascript:void(0);">\n';
+					tag += '	<a href="javascript:void(0);" onclick="fnSearchKeyword(\''+result.autoKeywords[idx]+'\');">\n';
 					tag += '		<p><span>'+result.autoKeywords[idx]+'</span></p>\n';
 					tag += '	</a>\n';
 					tag += '</li>\n';
@@ -747,6 +664,56 @@
 		});
 	}
 
+	// 검색어 연관 상품 추천
+	var fnRecommendItemList = function (keyword){
+		if(gagajf.isNull(keyword)){
+			keyword = "";
+		}
+		var data = {keyword : keyword};
+		var html = '';
+
+		$.getJSON('/display/recommend/item/list', data, function (result){
+			$("#recommendItemArea").html('');
+			if(result.length > 0){
+				$.each(result, function (idx, item){
+					html += '<div class="swiper-slide">\n';
+					html += '	<div class="item_prod">\n';
+					html += '		<div class="item_state">\n';
+					html += '			<button type="button" class="itemLike">관심상품 추가</button>\n';
+					html += '			<a href="'+item.product.itemUrl+'" class="itemLink">\n';
+					html += '				<div class="itemPic">\n';
+					html += '					<img class="vLHTC pd_img" src="'+item.product.itemImage+'" alt="">\n';
+					html += '				</div>\n';
+					html += '				<p class="itemBrand">'+item.product.brandName+'</p>\n';
+					html += '				<div class="itemName">'+item.product.itemName+'</div>\n';
+					html += '				<p class="itemPrice">\n';
+					if(item.product.salePrice < item.product.originalPrice) {
+						html += '			<span class="itemPrice_original">'+ item.product.originalPrice.addComma() +'</span>\n';
+					}
+					html += item.product.salePrice.addComma() ;
+					if(item.product.salePrice < item.product.originalPrice) {
+						html += '			<span class="itemPercent">' + Math.round((item.product.originalPrice - item.product.salePrice) / (item.product.originalPrice * 1.0) * 100) + '%</span>\n';
+					}
+					html += '				</p>\n';
+					html += '			</a>\n';
+					html += '		</div>\n';
+					html += '	</div>\n';
+					html += '</div>\n';
+				});
+			}
+			$("#recommendItemArea").append(html);
+
+			var swiperschProduct3 = new Swiper('.swiper-container.recommand_slide', {
+				slidesPerView: 2.2,
+				spaceBetween: 8,
+				autoplay: {
+					delay: 4000,
+				},
+				freeMode: true,
+				//centeredSlides: true,
+			});
+		});
+	}
 	/*]]>*/
 </script>
 

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

@@ -166,97 +166,25 @@
 			</div>
 			<div class="pd_list recommend">
 				<h3>이런 상품은 어떤가요?</h3>
-				<div class="itemsGrp">
-					<div class="item_prod">
-						<div class="item_state">
-							<a href="#none" class="itemLink">
-								<div class="itemPic">
-									<img alt="" class="vLHTC pd_img" src="/images/pc/thumb/tmp_pdLookbook_item1.jpg">
-								</div>
-								<p class="itemBrand">BRAND NAME1</p>
-								<div class="itemName">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
-								<!-- cols 클래스 추가 후 itemPrice_original태그 위로 올려주시면 됩니다. -->
-								<p class="itemPrice cols">
-									<span class="itemPrice_original">89,000</span>
-									80,100
-									<span class="itemPercent">10%</span>
-								</p>
-								<!-- //cols 클래스 추가 후 itemPrice_original태그 위로 올려주시면 됩니다. -->
-							</a>
-						</div>
-					</div>
-					<div class="item_prod">
-						<div class="item_state">
-							<a href="#none" class="itemLink">
-								<div class="itemPic">
-									<img alt="" class="vLHTC pd_img" src="/images/pc/thumb/tmp_pdLookbook_item1.jpg">
-								</div>
-								<p class="itemBrand">BRAND NAME1</p>
-								<div class="itemName">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
-								<!-- cols 클래스 추가 후 itemPrice_original태그 위로 올려주시면 됩니다. -->
-								<p class="itemPrice cols">
-									<span class="itemPrice_original">89,000</span>
-									80,100
-									<span class="itemPercent">10%</span>
-								</p>
-								<!-- //cols 클래스 추가 후 itemPrice_original태그 위로 올려주시면 됩니다. -->
-							</a>
-						</div>
-					</div>
-					<div class="item_prod">
-						<div class="item_state">
-							<a href="#none" class="itemLink">
-								<div class="itemPic">
-									<img alt="" class="vLHTC pd_img" src="/images/pc/thumb/tmp_pdLookbook_item1.jpg">
-								</div>
-								<p class="itemBrand">BRAND NAME1</p>
-								<div class="itemName">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
-								<!-- cols 클래스 추가 후 itemPrice_original태그 위로 올려주시면 됩니다. -->
-								<p class="itemPrice cols">
-									<span class="itemPrice_original">89,000</span>
-									80,100
-									<span class="itemPercent">10%</span>
-								</p>
-								<!-- //cols 클래스 추가 후 itemPrice_original태그 위로 올려주시면 됩니다. -->
-							</a>
-						</div>
-					</div>
-					<div class="item_prod">
-						<div class="item_state">
-							<a href="#none" class="itemLink">
-								<div class="itemPic">
-									<img alt="" class="vLHTC pd_img" src="/images/pc/thumb/tmp_pdLookbook_item1.jpg">
-								</div>
-								<p class="itemBrand">BRAND NAME1</p>
-								<div class="itemName">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
-								<!-- cols 클래스 추가 후 itemPrice_original태그 위로 올려주시면 됩니다. -->
-								<p class="itemPrice cols">
-									<span class="itemPrice_original">89,000</span>
-									80,100
-									<span class="itemPercent">10%</span>
-								</p>
-								<!-- //cols 클래스 추가 후 itemPrice_original태그 위로 올려주시면 됩니다. -->
-							</a>
-						</div>
-					</div>
-					<div class="item_prod">
-						<div class="item_state">
-							<a href="#none" class="itemLink">
-								<div class="itemPic">
-									<img alt="" class="vLHTC pd_img" src="/images/pc/thumb/tmp_pdLookbook_item1.jpg">
-								</div>
-								<p class="itemBrand">BRAND NAME1</p>
-								<div class="itemName">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
-								<!-- cols 클래스 추가 후 itemPrice_original태그 위로 올려주시면 됩니다. -->
-								<p class="itemPrice cols">
-									<span class="itemPrice_original">89,000</span>
-									80,100
-									<span class="itemPercent">10%</span>
-								</p>
-								<!-- //cols 클래스 추가 후 itemPrice_original태그 위로 올려주시면 됩니다. -->
-							</a>
-						</div>
-					</div>
+				<div class="itemsGrp" id="recommendItemArea">
+<!--					<div class="item_prod">-->
+<!--						<div class="item_state">-->
+<!--							<a href="#none" class="itemLink">-->
+<!--								<div class="itemPic">-->
+<!--									<img alt="" class="vLHTC pd_img" src="/images/pc/thumb/tmp_pdLookbook_item1.jpg">-->
+<!--								</div>-->
+<!--								<p class="itemBrand">BRAND NAME1</p>-->
+<!--								<div class="itemName">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>-->
+<!--								&lt;!&ndash; cols 클래스 추가 후 itemPrice_original태그 위로 올려주시면 됩니다. &ndash;&gt;-->
+<!--								<p class="itemPrice cols">-->
+<!--									<span class="itemPrice_original">89,000</span>-->
+<!--									80,100-->
+<!--									<span class="itemPercent">10%</span>-->
+<!--								</p>-->
+<!--								&lt;!&ndash; //cols 클래스 추가 후 itemPrice_original태그 위로 올려주시면 됩니다. &ndash;&gt;-->
+<!--							</a>-->
+<!--						</div>-->
+<!--					</div>-->
 				</div>
 			</div>
 		</div>
@@ -355,6 +283,8 @@
 			$('.common_search .area_result .searching_box').hide();
 			$('.common_search .area_result .empty_box').show();
 			$('.empty_box .nodata').find('#noDataKeyword').text("'"+$("#searchMainForm").find('input[name=keyword]').val()+"'");
+			// 검색어 연관 상품 추천
+			fnRecommendItemList($("#searchMainForm").find('input[name=keyword]').val());
 		}else{
 			$('.common_search .area_result .default_box').hide();
 			$('.common_search .area_result .searching_box').show();
@@ -366,7 +296,7 @@
 				tag += '<ul>\n';
 				$.each(result.autoKeywords, function (idx, item){
 					//<a href="javascript:void(0);"><em>가</em>을컬리수</a>
-					tag += '<li><a href="javascript:void(0);">'+result.autoKeywords[idx]+'</a></li>\n';
+					tag += '<li><a href="javascript:void(0);" onclick="fnSearchKeyword(\''+result.autoKeywords[idx]+'\');">'+result.autoKeywords[idx]+'</a></li>\n';
 				});
 				tag += '</ul>\n';
 				$(".autokeyword_blk").append(tag);
@@ -521,9 +451,45 @@
 			}
 			$("#itemViewArea").append(html);
 		});
-
 	}
 
+	// 검색어 연관 상품 추천
+	var fnRecommendItemList = function (keyword){
+		if(gagajf.isNull(keyword)){
+			keyword = "";
+		}
+		var data = {keyword : keyword};
+		var html = '';
+
+		$.getJSON('/display/recommend/item/list', data, function (result){
+			$("#recommendItemArea").html('');
+			if(result.length > 0){
+				$.each(result, function (idx, item){
+					html += '<div class="item_prod">\n';
+					html += '	<div class="item_state">\n';
+					html += '		<a href="'+item.product.itemUrl+'" class="itemLink">\n';
+					html += '			<div class="itemPic">\n';
+					html += '				<img alt="" class="vLHTC pd_img" src="'+item.product.itemImage+'">\n';
+					html += '			</div>\n';
+					html += '			<p class="itemBrand">'+item.product.brandName+'</p>\n';
+					html += '			<div class="itemName">'+item.product.itemName+'</div>\n';
+					html += '			<p class="itemPrice cols">\n';
+					if(item.product.salePrice < item.product.originalPrice) {
+						html += '			<span class="itemPrice_original">'+ item.product.originalPrice.addComma() +'</span>\n';
+					}
+					html += item.product.salePrice.addComma() ;
+					if(item.product.salePrice < item.product.originalPrice) {
+						html += '			<span class="itemPercent">' + Math.round((item.product.originalPrice - item.product.salePrice) / (item.product.originalPrice * 1.0) * 100) + '%</span>\n';
+					}
+					html += '			</p>\n';
+					html += '		</a>\n';
+					html += '	</div>\n';
+					html += '</div>\n';
+				});
+			}
+			$("#recommendItemArea").append(html);
+		});
+	}
 	/*]]>*/
 </script>
 </html>