검색 레이어 화면 수정

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

@@ -172,106 +172,24 @@
 						<div class="store_product">
 							<div class="allresult-tit">
 								<h3>지금 많이 보고 있어요</h3>
-								<button class="btn_refresh"><span>17:30</span> 기준</button>
+								<button type="button" class="btn_refresh" onclick="fnRealtimeGoodsList();"><span th:text="${#calendars.format(#calendars.createNow(), 'HH:mm')}">17:30</span> 기준</button>
 							</div>
 							<div class="swiper-container sch_product">
-								<div class="swiper-wrapper">
-									<div class="swiper-slide">
-										<div class="item_prod">
-											<button type="button" class="itemLike">관심상품 추가</button>
-											<a href="#">
-												<img src="/images/mo/br_main03.png" alt="">
-												<div class="s-text">
-													<div class="itemName">여성 오버핏 투마일 웨어 아노락 에코</div>
-													<p class="itemTag">508명 보는중</p>
-												</div>
-											</a>
-										</div>
-									</div>
-									<div class="swiper-slide">
-										<div class="item_prod">
-											<button type="button" class="itemLike">관심상품 추가</button>
-											<a href="#">
-												<img src="/images/mo/br_main03.png" alt="">
-												<div class="s-text">
-													<div class="itemName">여성 오버핏 투마일 웨어 아노락 에코</div>
-													<p class="itemTag">508명 보는중</p>
-												</div>
-											</a>
-										</div>
-									</div>
-									<div class="swiper-slide">
-										<div class="item_prod">
-											<button type="button" class="itemLike">관심상품 추가</button>
-											<a href="#">
-												<img src="/images/mo/br_main03.png" alt="">
-												<div class="s-text">
-													<div class="itemName">여성 오버핏 투마일 웨어 아노락 에코</div>
-													<p class="itemTag">508명 보는중</p>
-												</div>
-											</a>
-										</div>
-									</div>
-									<div class="swiper-slide">
-										<div class="item_prod">
-											<button type="button" class="itemLike">관심상품 추가</button>
-											<a href="#">
-												<img src="/images/mo/br_main03.png" alt="">
-												<div class="s-text">
-													<div class="itemName">여성 오버핏 투마일 웨어 아노락 에코</div>
-													<p class="itemTag">508명 보는중</p>
-												</div>
-											</a>
-										</div>
-									</div>
-									<div class="swiper-slide">
-										<div class="item_prod">
-											<button type="button" class="itemLike">관심상품 추가</button>
-											<a href="#">
-												<img src="/images/mo/br_main03.png" alt="">
-												<div class="s-text">
-													<div class="itemName">여성 오버핏 투마일 웨어 아노락 에코</div>
-													<p class="itemTag">508명 보는중</p>
-												</div>
-											</a>
-										</div>
-									</div>
-									<div class="swiper-slide">
-										<div class="item_prod">
-											<button type="button" class="itemLike">관심상품 추가</button>
-											<a href="#">
-												<img src="/images/mo/br_main03.png" alt="">
-												<div class="s-text">
-													<div class="itemName">여성 오버핏 투마일 웨어 아노락 에코</div>
-													<p class="itemTag">508명 보는중</p>
-												</div>
-											</a>
-										</div>
-									</div>
-									<div class="swiper-slide">
-										<div class="item_prod">
-											<button type="button" class="itemLike">관심상품 추가</button>
-											<a href="#">
-												<img src="/images/mo/br_main03.png" alt="">
-												<div class="s-text">
-													<div class="itemName">여성 오버핏 투마일 웨어 아노락 에코</div>
-													<p class="itemTag">508명 보는중</p>
-												</div>
-											</a>
-										</div>
-									</div>
-									<div class="swiper-slide">
-										<div class="item_prod">
-											<button type="button" class="itemLike">관심상품 추가</button>
-											<a href="#">
-												<img src="/images/mo/br_main03.png" alt="">
-												<div class="s-text">
-													<div class="itemName">여성 오버핏 투마일 웨어 아노락 에코</div>
-													<p class="itemTag">508명 보는중</p>
-												</div>
-											</a>
+								<div class="swiper-wrapper" id="itemViewArea">
+									<th:block th:each="item, status : ${realtimeGoodsList}">
+										<div class="swiper-slide">
+											<div class="item_prod">
+												<button type="button" class="itemLike" th:classappend="${item.wishCnt > 0}? 'likeit' : ''" onclick="cfnMoPutWishList(this);" th:attr="goodsCd=${item.itemId}">관심상품 추가</button>
+												<a th:href="${item.itemUrl}">
+													<img th:src="${item.imageUrl}" alt="">
+													<div class="s-text">
+														<div class="itemName" th:text="${item.itemName}"></div>
+														<p class="itemTag" th:text="${item.count < 10 ? '10명 미만' : item.count + '명 보는중'}">508명 보는중</p>
+													</div>
+												</a>
+											</div>
 										</div>
-									</div>
+									</th:block>
 								</div>
 							</div>
 						</div>
@@ -784,6 +702,51 @@
 		}
 	});
 
+	// 실시간 상품 새로고침
+	var fnRealtimeGoodsList = function (){
+		$("#itemViewArea").html('');
+		var html = '';
+
+		$.getJSON('/display/realtime/goods/list', function (result){
+			console.log(result);
+			if(result.length > 0){
+				$.each(result, function (idx, item){
+					html += '<div class="swiper-slide">\n';
+					html += '	<div class="item_prod">\n';
+					html += '		<button type="button" class="itemLike';
+					if(item.wishCnt > 0){
+						html += ' likeit';
+					}
+					html += '" onclick="cfnMoPutWishList(this);" goodsCd="'+item.itemId+'">관심상품 추가</button>\n';
+					html += '		<a href="'+item.itemUrl+'">\n';
+					html += '			<img src="'+item.imageUrl+'" alt="">\n';
+					html += '				<div class="s-text">\n';
+					html += '					<div class="itemName">'+item.itemName+'</div>\n';
+					if(item.count < 10){
+						html += '			<p class="itemTag">10명 미만</p>\n';
+					}else{
+						html += '			<p class="itemTag">'+item.count.addComma()+'명 보는중</p>\n';
+					}
+					html += '				</div>\n';
+					html += '		</a>\n';
+					html += '	</div>\n';
+					html += '</div>\n';
+				});
+			}
+			$("#itemViewArea").append(html);
+
+			var swiperschProduct2 = new Swiper('.swiper-container.sch_product', {
+				slidesPerView: 3,
+				spaceBetween: 7,
+				autoplay: {
+					delay: 4000,
+				},
+				freeMode: true,
+				//centeredSlides: true,
+			});
+		});
+	}
+
 	/*]]>*/
 </script>
 

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

@@ -322,8 +322,6 @@
 	});
 
 	$(document).ready( function() {
-		console.log('xxxx brandNo::'+[[${brandGroupNo}]]);
-
 		$("#layer_search").addClass('active');
 
 		if (trendKeywordList.length > 0) {
@@ -501,27 +499,29 @@
 	var fnRealtimeGoodsList = function (){
 		$("#itemViewArea").html('');
 		var html = '';
-		$.getJSON('/display/realtime/goods/list'),function (result){
-			console.log(result);
+		$.getJSON('/display/realtime/goods/list', function (result){
 			if(result.length > 0){
 				$.each(result, function (idx, item){
-					html += ' <div class="item_prod">\n';
-					html += ' 	<div class="item_state">\n';
-					html += ' 		<a th:href="'+item.itemUrl+'" class="itemLink">\n';
-					html += ' 			<div class="itemPic">\n';
-					html += ' 				<img alt="" class="vLHTC pd_img" th:src="'+item.imageUrl+'">\n';
-					html += ' 			</div>\n';
-					html += ' 			<div class="itemName" th:text="'+item.itemName+'"></div>\n';
+					html += '<div class="item_prod">\n';
+					html += '	<div class="item_state">\n';
+					html += '		<a href="'+item.itemUrl+'" class="itemLink">\n';
+					html += '			<div class="itemPic">\n';
+					html += '				<img alt="" class="vLHTC pd_img" src="'+item.imageUrl+'">\n';
+					html += '			</div>\n';
+					html += '			<div class="itemName">'+item.itemName+'</div>\n';
 					if(item.count < 10){
-						html += '<div class="viewCount"><span>10명</span> 미만</div>\n';
+						html += '			<div class="viewCount"><span>10명</span> 미만</div>\n';
 					}else{
-						html += '				<div class="viewCount"><span>'+item.count.addComma()+'</span>명 보는중</div>\n';
+						html += '			<div class="viewCount"><span>'+item.count.addComma()+'</span>명 보는중</div>\n';
 					}
-					html += ' 		</a>\n';
-					html += ' </div>\n';
+					html += '		</a>\n';
+					html += '	</div>\n';
+					html += '</div>\n';
 				});
 			}
-		}
+			$("#itemViewArea").append(html);
+		});
+
 	}
 
 	/*]]>*/

src/main/webapp/biz/search.js

@@ -65,7 +65,7 @@ var fnCreateGoodsList = function(result, ithrCd, contentLoc, goodsUrl, lastPage,
 				}
 			}
 			var imgUrl = "//image.istyle24.com/Upload/ProductImage/";
-			tag += '		<img class=" vLHTC pd_img" src="'+item.sysImgNm.replace(imgUrl,"")+'" data-img="'+item.sysImgNm2.replace(imgUrl,"")+'" onerror="noneImg(this)">';
+			tag += '		<img class=" vLHTC pd_img" src="' + goodsUrl + '/' +item.sysImgNm.replace(imgUrl,"")+'" data-img="' + goodsUrl + '/' + item.sysImgNm2.replace(imgUrl,"")+'" onerror="noneImg(this)">';
 			if(!gagajf.isNull(item.sizes) && item.selfGoodsYn=='Y'){
 				var sizeArr = item.sizes.split(",");
 				var minSize;