style24
/
style24.front


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561
							<!DOCTYPE html>
<html lang="ko"
	  xmlns:th="http://www.thymeleaf.org">
<!--
 *******************************************************************************
 * @source  : SearchLayerMob.html
 * @desc    : 검색 레이어 Page
 *============================================================================
 * STYLE24
 * Copyright(C) 2020 TSIT, All rights reserved.
 *============================================================================
 * VER  DATE         AUTHOR      DESCRIPTION
 * ===  ===========  ==========  =============================================
 * 1.0  2021.06.14   bin2107     최초 작성
 *******************************************************************************
 -->
<body>
<div class="modal-dialog" role="document">
	<div class="modal-content">
		<div class="modal-header htop">
			<h5 class="modal-title sr-only" id="schPopLabel">통합검색</h5>
		</div>
		<div class="modal-body">
			<section class="sch_result">
				<!-- 1.통합검색 default -->
				<div class="inner">
					<form id="searchMainForm" name="searchMainForm">
						<input type="hidden" name="brandGroupNo" th:value="${brandGroupNo}"/>
						<div class="sch_title">
							<input type="text" class="form_control" name="keyword" placeholder="검색어를 입력하세요." autocomplete="off" onkeyup="fnOnkeyupKeyword(this);">
							<button type="button" class="btn_x" id="deleteKeyword" style="display:none;">X</button>
							<button type="button" class="btn_sch" id="btnSearchKeyword"><img th:src="${@environment.getProperty('domain.uximage')} + '/images/mo/ico_btn_search.png'" alt=""></button>
						</div>
					</form>
				</div>

				<div class="inner default_box" id="defaultArea">
					<div class="filter-list">
						<div class="f_left">
							<h3>최근 검색어</h3>
						</div>
						<div class="f_right">
						</div>
					</div>
					<div class="search-list" th:classappend="${#lists.isEmpty(recentlyKeywordList)?'nodata':''}"> <!-- 검색데이터 없을시 nodata 클래스 추가. -->
						<ul>
							<li th:if="${recentlyKeywordList}" th:each="oneData, status : ${recentlyKeywordList}">
								<a href="javascript:void(0);" th:onclick="fnSearchKeyword([[${oneData}]])">
									<p th:text="${oneData}"></p>
								</a>
								<button type="button" class="xBtn" th:onclick="fnDeleteCookie(this,[[${oneData}]]);"><span>삭제</span></button>
							</li>
						</ul>
						<p class="nodata_txt" th:if="${#lists.isEmpty(recentlyKeywordList)}">최근 검색어가 없습니다.</p>
					</div>
					<h3 class="hot-key" th:if="${brandGroupNo==null}">STYLE24에서 검색되고 있어요</h3>
					<div class="related_keyword" th:if="${brandGroupNo==null}">
						<div class="sub_category">
							<div class="cate_wrap" id="popularKeyArea">
								<!--						<a href="javascript:;" class="on">전체</a>-->
							</div>
						</div>
					</div>
				</div>
				<!-- //1.통합검색 default -->

				<!-- 3.지금 많이 보고 있어요 상품. -->
				<!--820임시주석 <div class="inner default_box" id="popularArea">
					<div class="now_view">
						<div class="store_product">
							<div class="allresult-tit">
								<h3>지금 많이 보고 있어요</h3>
								<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" 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>
									</th:block>
								</div>
							</div>
						</div>
					</div>
				</div> -->
				<!-- //3.지금 많이 보고 있어요 상품. -->

				<!-- 4.검색어 타이핑 -->
				<div class="inner searching_box" id="keyupArea" style="display:none;" th:if="${brandGroupNo==null}">
					<div class="filter-list store-list" id="brandStoreArea">
					</div>
					<div class="relative-list">
					</div>
				</div>
				<div class="inner searching_box" id="keyupCateArea" style="display:none;" th:if="${brandGroupNo==null}">
					<div class="sch_category">
					</div>
				</div>
				<div class="inner empty_box2" id="relateArea" style="display:none;">
					<div class="recommand_product">
						<div class="store_product">
							<div class="swiper-container recommand_slide">
								<h3>관련상품</h3>
								<div class="swiper-wrapper" id="relateItemArea">

								</div>
							</div>
						</div>
					</div>
				</div>
				<!-- //4.검색어 타이핑 -->

				<!-- 3.검색결과 없을때 -->
				<div class="inner empty_box" id="noDataArea" style="display:none;">
					<div class="relative-list nodata"> <!-- 검색결과 없을 시 nodata 클래스 추가 -->
						<p class="nodata_txt">&lsquo;<span id="noDataKeyword"></span>&rsquo; 에 맞는 상품을 찾지 못했습니다.<br>검색어를 변경해 보세요.</p>
					</div>
					<h3 class="hot-key">STYLE24에서 검색되고 있어요</h3>
					<div class="related_keyword">
						<div class="sub_category">
							<div class="cate_wrap" id="noDataRelatedKeyword">

							</div>
						</div>
					</div>
				</div>
				<div class="inner empty_box" id="recommandArea" style="display:none;">
					<div class="recommand_product">
						<div class="store_product">
							<div class="swiper-container recommand_slide">
								<h3>이런 상품은 어떤가요?</h3>
								<div class="swiper-wrapper" id="recommendItemArea">

								</div>
							</div>
						</div>
					</div>
				</div>
				<!-- //3.검색결과 없을때 -->
			</section>
		</div>
	</div>
</div>
<script src="/ux/plugins/gaga/gaga.paging.js"></script>
<script th:inline="javascript">
	/*<![CDATA[*/
	var trendKeywordList = [[${trendKeywordList.trendList}]];

	var swiperschProduct = new Swiper('.swiper-container.sch_product', {
		slidesPerView: 3,
		spaceBetween: 7,
		autoplay: {
			delay: 4000,
		},
		freeMode: true,
		//centeredSlides: true,
	});

	var swiperschProduct = new Swiper('.swiper-container.recommand_slide', {
		slidesPerView: 2.2,
		spaceBetween: 8,
		autoplay: {
			delay: 4000,
		},
		freeMode: true,
		//centeredSlides: true,
	});

	$(".itemLike").click(function () {
		$(this).toggleClass("likeit");
	});

	var ckKeyword = "st24ck_today_keyword";
	var fnSetKeywordCookie = function(keyword) {
		var arrKeyword = new Array;
		var arrTempKeyword = new Array;
		var j = 0;

		arrKeyword = gagajf.getCookie(ckKeyword).split(",");

		if (arrKeyword.length > 0) {
			for (var i = 0; i < arrKeyword.length; i++) {
				// 쿠키에 없으면
				if (arrKeyword[i] != keyword && arrKeyword[i] != "") {
					arrTempKeyword[j++] = arrKeyword[i];
				}
			}

			arrTempKeyword[j++] = keyword;
		} else {
			gagajf.setCookie(ckKeyword, keyword, 1);
		}

		gagajf.setCookie(ckKeyword, arrTempKeyword, 1);
	}

	// 키워드 검색
	$('#btnSearchKeyword').on('click', function() {
		if (!gagajf.validation($('#searchMainForm'))) {
			return false;
		}

		let keyword = encodeURIComponent($('#searchMainForm input[name=keyword]').val());

		// 쿠키 세팅
		fnSetKeywordCookie(keyword);

		let actionUrl = _PAGE_SEARCH_GOODS + '?keyword=' + keyword + '&brandGroupNo=' + $('#searchMainForm input[name=brandGroupNo]').val();
		cfnGoToPage(actionUrl);
	});

	// 검색어 찾기
	var fnGetAutoSearch = function (){
		gagajf.ajaxFormSubmit("/display/search/auto/complete", document.searchMainForm, fnAutoCompleteList);
	}

	// 검색어 찾기 결과
	var fnAutoCompleteList = function (result){
		if(result.autoKeywords.length==0 && gagajf.isNull(result.brand.brandGroupNo) && result.cateList.length == 0 && gagajf.isNull(result.goodsList)){
			$('.sch_result .default_box').hide();
			$('.sch_result .searching_box').hide();
			$('.sch_result .empty_box').show();
			$("#noDataArea").find('#noDataKeyword').text($("#searchMainForm").find('input[name=keyword]').val());
			// 검색어 연관 상품 추천
			fnRecommendItemList($("#searchMainForm").find('input[name=keyword]').val());
			// 인기검색어
			fnTrendKeywordList();
		}else{
			$('.sch_result .default_box').hide();
			$('.sch_result .searching_box').show();
			$('.sch_result .empty_box').hide();
			$('.sch_result .empty_box2').hide();
			// 자동완성 키워드
			if(result.autoKeywords != null && result.autoKeywords.length > 0){
				$("#keyupArea").find(".relative-list").html('');
				let tag = '';
				tag += '<ul>\n';
				$.each(result.autoKeywords, function (idx,item){
					tag += '<li>\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';
				});
				tag += '</ul>\n';
				$("#keyupArea").find(".relative-list").append(tag);
			}else{
				$("#keyupArea").find(".relative-list").html('');
			}

			// 브랜드
			if(result.brand != null && !gagajf.isNull(result.brand.brandGroupNo)){
				$("#brandStoreArea").show();
				$("#keyupArea").find(".store-list").html('');
				let tag = '';
				tag += '<div class="f_left">\n';
				tag += '	<h3>'+result.brand.brandGroupNm+' 공식 스토어</h3>\n';
				tag += '</div>\n';
				tag += '<div class="f_right">\n';
				tag += '	<a href="javascript:void(0);" onclick="cfnGoToBrandMain('+result.brand.brandGroupNo+');">바로가기</a>\n';
				tag += '</div>\n';
				$("#keyupArea").find(".store-list").append(tag);
			}else{
				$("#keyupArea").find(".store-list").html('');
				$("#brandStoreArea").hide();
			}

			if(result.cateList != null && result.cateList.length > 0){
				$("#keyupCateArea").show();
				$("#keyupCateArea").find(".sch_category").html('');
				let tag = '';
				tag += '<h3>카테고리</h3>\n';
				tag += '<ul>\n';
				$.each(result.cateList, function (idx, item){
					tag +='<li>\n';
					tag +='	<a href="javascript:void(0);" onclick="cfnGoToGoodsList(0,\'G032_101\' ';
					if(item.cate1No != null){
						tag += ', '+item.cate1No;
					}
					if(item.cate2No != null){
						tag += ', '+item.cate2No;
					}
					if(item.cate3No != null){
						tag += ', '+item.cate3No;
					}
					if(item.cate4No != null){
						tag += ', '+item.cate4No;
					}
					if(item.cate5No != null){
						tag += ', '+item.cate5No;
					}
					tag += ');">\n';
					if(item.cate1Nm != null){
						tag += '		<span>'+item.cate1Nm+'</span>\n';
					}
					if(item.cate2Nm != null){
						tag += '		<span>'+item.cate2Nm+'</span>\n';
					}
					if(item.cate3Nm != null){
						tag += '		<span>'+item.cate3Nm+'</span>\n';
					}
					if(item.cate4Nm != null){
						tag += '		<span>'+item.cate4Nm+'</span>\n';
					}
					if(item.cate5Nm != null){
						tag += '		<span>'+item.cate5Nm+'</span>\n';
					}
					tag +='	</a>\n';
					tag +='</li>\n';
				});
				tag += '</ul>\n';

				$("#keyupCateArea").find(".sch_category").append(tag);
			}else{
				$("#keyupCateArea").find(".sch_category").html('');
				$("#keyupCateArea").hide();
			}
			
			if(!gagajf.isNull(result.goodsList)){
				$("#relateArea").show();
				$("#relateItemArea").html('');
				let tag = '';
				$.each(result.goodsList, function (idx, item){
					if(idx<5) {
						tag += '<div class="swiper-slide">\n';
						tag += '	<div class="item_prod">\n';
						tag += '		<div class="item_state">\n';
						tag += '		<button type="button" class="itemLike';
						if(item.likeIt == 'likeit'){
							tag += ' likeit';
						}
						tag += '" onclick="cfnMoPutWishList(this);" goodsCd="'+item.goodsCd+'">관심상품 추가</button>\n';
						//tag += '			<button type="button" class="itemLike">관심상품 추가</button>\n';
						tag += '			<a href="javascript:void(0);" class="itemLink" onclick="cfnGoToGoodsDetail(\'' + item.goodsCd + '\',\'' + item.colorCd + '\');">\n';
						tag += '				<div class="itemPic">\n';
						tag += '					<img class="vLHTC pd_img" src="'+item.sysImgNm+'" alt="">\n';
						tag += '				</div>\n';
						tag += '				<p class="itemBrand">'+item.brandGroupNm+'</p>\n';
						tag += '				<div class="itemName">'+item.goodsFullNm+'</div>\n';
						tag += '				<p class="itemPrice">\n';
						if(item.listPrice != item.currPrice) {
							tag += '			<span class="itemPrice_original">'+ item.listPrice.addComma() +'</span>\n';
						}
						tag += item.currPrice.addComma() ;
						if(item.listPrice != item.currPrice) {
							tag += '			<span class="itemPercent">' + Math.round((item.listPrice - item.currPrice) / (item.listPrice * 1.0) * 100) + '%</span>\n';
						}
						tag += '				</p>\n';
						tag += '			</a>\n';
						tag += '		</div>\n';
						tag += '	</div>\n';
						tag += '</div>\n';
					}
				});
				$("#relateItemArea").html(tag);
				var swiperschProduct4 = new Swiper('.swiper-container.recommand_slide', {
					slidesPerView: 2.2,
					spaceBetween: 8,
					autoplay: {
						delay: 4000,
					},
					freeMode: true,
					//centeredSlides: true,
				});
			}else{
				$("#relateItemArea").html('');
				$("#relateArea").hide();
			}
		}
	}

	// 검색어 입력
	var fnOnkeyupKeyword = function (obj){
		var searchValue = $(obj).val();
		if(searchValue.length > 0){
			fnGetAutoSearch();
		}else{
			$('.sch_result .default_box').show();
			$('.sch_result .searching_box').hide();
			$('.sch_result .empty_box').hide();
			$('.sch_result .empty_box2').hide();
		}
	}

	document.getElementById("deleteKeyword").onclick = function (){
		$("#searchMainForm").find("input[name=keyword]").val('');
		fnOnkeyupKeyword($("#searchMainForm").find("input[name=keyword]"));
	}

	$(document).ready( function() {
		if (trendKeywordList.length > 0) {
			$("#popularKeyArea").html('');

			trendKeywordList.forEach(function (item, idx) {
				var tag = '';
				if (idx < 10) {
					tag += '	<a href="javascript:void(0);" onclick="fnSearchKeyword(\''+item.keyword+'\');">'+ item.keyword +'</a>';
				}
				$("#popularKeyArea").append(tag);
			});
		}else{
			$("#popularKeyArea").html('');
		}
		
		$("#keyupArea").hide();
		$("#keyupCateArea").hide();
		$("#deleteKeyword").hide();
		$("#noDataArea").hide();
		$("#recommandArea").hide();
		$("#relateArea").hide();
	});

	// 선택 단어 검색
	var fnSearchKeyword = function (obj){
		$("#searchMainForm").find("input[name=keyword]").val(obj);
		$('#btnSearchKeyword').trigger('click');
	}

	// 선택 단어 삭제
	var fnDeleteCookie = function (obj, keyword){
		$(obj).closest('li').remove();
		gagajf.setCookie('st24ck_today_keyword',keyword, -1);
	}

	// 검색어 입력 후 엔터키
	$('#searchMainForm input[name=keyword]').keypress(function (event) {
		if (event.which === 13) {
			event.preventDefault();
			$('#btnSearchKeyword').trigger('click');
		}
	});

	// 인기검색어 조회
	var fnTrendKeywordList = function (){
		$("#noDataRelatedKeyword").html('');
		var html = '';
		$.getJSON('/display/search/trend/keyword/list', function (result){
			if(result.trendList.length > 0){
				$.each(result.trendList, function (idx, item){
					html += '<a href="javascript:void(0);" onclick="fnSearchKeyword(\''+item.keyword+'\');"><span>#</span>'+item.keyword+'</a>';
				});
			}
			$("#noDataRelatedKeyword").append(html);
		});
	}

	// 실시간 상품 새로고침
	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,
			});
		});
	}

	// 검색어 연관 상품 추천
	var fnRecommendItemList = function (keyword){
		if(gagajf.isNull(keyword)){
			keyword = "";
		}
		var data = {keyword : keyword.trim()};
		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';
					if(item.product.wishCnt > 0){
						html += ' likeit';
					}
					html += '" onclick="cfnMoPutWishList(this);" goodsCd="'+item.product.itemId+'">관심상품 추가</button>\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>

</body>
</html>