몰메인 > 당신을위한추천

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

@@ -491,13 +491,8 @@
 								<h2 th:text="${mainData.contentsTitle}">당신을 위한 제안</h2>
 							</div>
 
-							<div class="swiper-container post-sug">
-								<div class="swiper-wrapper" id="recomItemArea">
+							<div class="swiper-container post-sug" id="recomItemArea">
 
-
-								</div>
-								<!-- Add Pagination -->
-								<div class="swiper-pagination"></div>
 							</div>
 						</div>
 					</div>
@@ -585,10 +580,9 @@
 		// 컨텐츠 호출
 		$(document).ready(function() {
 			// 당신을 위한 제안 쿠키값 확인 (로그인시 확인됨)
-			/*
+
 			var pcId = gagajf.getCookie("RB_PCID");
-			20210927 xodud1202 > 수빈과장님 요청
-			fnGetEigenApi(pcId); */
+			fnGetEigenApi(pcId);
 
 			post_visual.slideTo(2, 0, false); // 접속 시, 슬라이드페이지 이동
 
@@ -682,6 +676,7 @@
 				if (status === 'success') {
 					if (!gagajf.isNull(result.products) && result.products.length > 0) {
 						$("#recomItemArea").html('');
+						itemTag += '<div class="swiper-wrapper" >';
 
 						$.each(result.products, function (idx, item) {
 							if (idx == 0 || idx == 5) {
@@ -695,7 +690,11 @@
 								itemTag += '	<ol class="list_cate">\n';
 							}
 
-							itemTag += '			<li class="first" id="key'+idx+'" data-idx="'+idx+'">\n';
+							itemTag += '			<li ';
+							if (idx == 0 || idx == 5) {
+								itemTag += ' class="first" ';
+							}
+							itemTag += ' id="key'+idx+'" data-idx="'+idx+'" onclick="fnClickRecommendKey(this,\''+idx+'\');">\n';
 							itemTag += '				<dl>\n';
 							itemTag += '					<dt>\n';
 							itemTag += '						<button>\n';
@@ -755,6 +754,9 @@
 							}
 						});
 
+						itemTag += '</div>';
+						itemTag += '<div class="swiper-pagination"></div>';
+
 						if(itemTag.indexOf('swiper-slide') >-1 ){
 							$("#recomItemArea").html(itemTag);
 							fnSwiperScript();
@@ -763,112 +765,124 @@
 				}
 			});
 		}
-
 		/*]]>*/
 
 	</script>
 
 	<script type="text/javascript">
-		var fnSwiperScript = function (){
-		// post_sug
 		var numCnt = 0;
-		var post_sug = new Swiper('.swiper-container.post-sug', {
+		var foryouIndex = 0;
+		var cntNum = 0;
+		var fnSwiperScript = function (){
+			// post_sug
+			var post_sug = new Swiper('.swiper-container.post-sug', {
 
-			a11y: {
-				enabled: true,
-				notificationClass: 'swiper-notification',
-				prevSlideMessage: '이전 슬라이드',
-				nextSlideMessage: '다음 슬라이드',
-				firstSlideMessage: '첫번째 슬라이드 입니다',
-				lastSlideMessage: '마지막 슬라이드 입니다',
-				paginationBulletMessage: '슬라이드 {{index}}로 이동',
-			},
-			pagination: {
-				el: '.swiper-pagination',
-			},
-			// autoplay: {
-			// 	delay: 24700,
-			// 	disableOnInteraction: false,
-			// },
-			on : {
-				slideChange: function(){
-					foryouIndex = 0;
-					if(numCnt === 0){
-						$(".swiper-slide.type1 .list_cate > li").removeClass('on');
-						$(".swiper-slide.type2 .list_cate > li").removeClass('on');
-						$(".swiper-slide.type2 .list_cate .first").addClass('on');
-						numCnt = 1;
-					} else {
-						$(".swiper-slide.type1 .list_cate > li").removeClass('on');
-						$(".swiper-slide.type2 .list_cate > li").removeClass('on');
-						$(".swiper-slide.type1 .list_cate .first").addClass('on');
-						numCnt = 0;
+				a11y: {
+					enabled: true,
+					notificationClass: 'swiper-notification',
+					prevSlideMessage: '이전 슬라이드',
+					nextSlideMessage: '다음 슬라이드',
+					firstSlideMessage: '첫번째 슬라이드 입니다',
+					lastSlideMessage: '마지막 슬라이드 입니다',
+					paginationBulletMessage: '슬라이드 {{index}}로 이동',
+				},
+				pagination: {
+					el: '.swiper-pagination',
+				},
+				// autoplay: {
+				// 	delay: 24700,
+				// 	disableOnInteraction: false,
+				// },
+				on : {
+					slideChange: function(){
+						foryouIndex = 0;
+						if(numCnt === 0){
+							$(".swiper-slide.type1 .list_cate > li").removeClass('on');
+							$(".swiper-slide.type2 .list_cate > li").removeClass('on');
+							$(".swiper-slide.type2 .list_cate .first").addClass('on');
+							numCnt = 1;
+						} else {
+							$(".swiper-slide.type1 .list_cate > li").removeClass('on');
+							$(".swiper-slide.type2 .list_cate > li").removeClass('on');
+							$(".swiper-slide.type1 .list_cate .first").addClass('on');
+							numCnt = 0;
+						}
 					}
-				}
-			},
+				},
 
-		});
+			});
 
-		var foryouIndex = 0;
-		var cntNum = 0;
-		function foryouInterval(_foryouIndex) {
-			var foryouCateItems1 = $(".main_foryou .post-sug .swiper-slide.type1.swiper-slide-active .list_cate li");
-			var foryouCateItems2 = $(".main_foryou .post-sug .swiper-slide.type2.swiper-slide-active .list_cate li");
-			$(".main_foryou .post-sug .swiper-slide.type1 .list_cate li").removeClass("on");
-			$(".main_foryou .post-sug .swiper-slide.type2 .list_cate li").removeClass("on");
-
-			if($(".main_foryou .post-sug .swiper-slide.type1").hasClass("swiper-slide-active")){
-				$(foryouCateItems1[(_foryouIndex ) % 5]).addClass("on");
-				if (_foryouIndex >= 5) foryouIndex = 0;
-				foryouIndex++;
-				(foryouCateItems1).click(function () {
-					foryouIndex = $(this).index();
-					clearInterval(stopInter);
-					stopInter = startTimeInterval();
-				});
+			function foryouInterval(_foryouIndex) {
+				var foryouCateItems1 = $(".main_foryou .post-sug .swiper-slide.type1.swiper-slide-active .list_cate li");
+				var foryouCateItems2 = $(".main_foryou .post-sug .swiper-slide.type2.swiper-slide-active .list_cate li");
+				$(".main_foryou .post-sug .swiper-slide.type1 .list_cate li").removeClass("on");
+				$(".main_foryou .post-sug .swiper-slide.type2 .list_cate li").removeClass("on");
+
+				if($(".main_foryou .post-sug .swiper-slide.type1").hasClass("swiper-slide-active")){
+					$(foryouCateItems1[(_foryouIndex) % 5]).addClass("on");
+					if (_foryouIndex >= 5) foryouIndex = 0;
+					foryouIndex++;
+					// $(foryouCateItems1).click(function () {
+					// 	foryouIndex = $(this).index();
+					// 	clearInterval(stopInter);
+					// 	stopInter = startTimeInterval();
+					// });
+				}
+				if($(".main_foryou .post-sug .swiper-slide.type2").hasClass("swiper-slide-active")){
+					$(foryouCateItems2[(_foryouIndex) % 5]).addClass("on");
+					if (_foryouIndex >= 5) foryouIndex = 0;
+					foryouIndex++;
+					// $(foryouCateItems2).click(function () {
+					// 	foryouIndex = $(this).index();
+					// 	clearInterval(stopInter);
+					// 	stopInter = startTimeInterval();
+					// });
+				}
 			}
-			if($(".main_foryou .post-sug .swiper-slide.type2").hasClass("swiper-slide-active")){
-				$(foryouCateItems2[(_foryouIndex ) % 5]).addClass("on");
-				if (_foryouIndex >= 5) foryouIndex = 0;
-				foryouIndex++;
-				$(foryouCateItems2).click(function () {
-					foryouIndex = $(this).index();
-					clearInterval(stopInter);
-					stopInter = startTimeInterval();
-				});
+			function startTimeInterval(){
+				return setInterval(function () {
+					foryouInterval(foryouIndex);
+				}, 5000);
 			}
-		}
-		function startTimeInterval(){
-			return setInterval(function () {
-				foryouInterval(foryouIndex);
-			}, 5000);
-		}
-
-		var stopInter = startTimeInterval();
+			var stopInter = startTimeInterval();
 
-		//setTimeout(function () {
-		//		foryouInterval(foryouIndex);
-		//		if (foryouIndex >= 5) foryouIndex = 0;
-		//		foryouIndex++;
-		//}, 2000);
+			var post_sug_items = new Swiper ('.swiper-container.post-sug-items', {
+				autoHeight: true, //210720_ 추가
+				slidesPerView: 3,
+				spaceBetween: 10,
+				speed : 1000,
+				a11y: {
+					enabled: true,
+					notificationClass: 'swiper-notification',
+					prevSlideMessage: '이전 슬라이드',
+					nextSlideMessage: '다음 슬라이드',
+					firstSlideMessage: '첫번째 슬라이드 입니다',
+					lastSlideMessage: '마지막 슬라이드 입니다',
+					paginationBulletMessage: '슬라이드 {{index}}로 이동',
+				},
+			});
+		}
 
+		var fnClickRecommendKey = function (obj, key){
+			var onIdx = '';
+			$(".main_foryou .post-sug .swiper-slide .list_cate li").each(function (){
+				if($(this).hasClass("on")){
+					onIdx = $(this).attr('data-idx');
+					$(this).removeClass("on");
+				}
+			});
 
+			if(onIdx == key){
+				$("#key"+key).removeClass("on");
+			}else{
+				$("#key"+key).addClass("on");
+			}
 
-		var post_sug_items = new Swiper ('.swiper-container.post-sug-items', {
-			autoHeight: true, //210720_ 추가
-			slidesPerView: 3,
-			spaceBetween: 10,
-			speed : 1000,
-			a11y: {
-				enabled: true,
-				notificationClass: 'swiper-notification',
-				prevSlideMessage: '이전 슬라이드',
-				nextSlideMessage: '다음 슬라이드',
-				firstSlideMessage: '첫번째 슬라이드 입니다',
-				lastSlideMessage: '마지막 슬라이드 입니다',
-				paginationBulletMessage: '슬라이드 {{index}}로 이동',
-			},
-		});
+			$(".main_foryou .post-sug .swiper-slide .list_cate li").each(function (){
+				if($(this).hasClass("on")){
+					foryouIndex = $(this).attr('data-idx');
+				}
+			});
 		}
 	</script>
 

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

@@ -618,13 +618,11 @@ $(document).ready( function() {
 	$(".it_nav .btn").eq(randomNum).trigger('click');
 
 	// 당신을 위한 제안 쿠키값 확인 (로그인시 확인됨)
-	/* 20210927 xodud1202 > 수빈과장님 요청
 	var pcId = gagajf.getCookie("RB_PCID");
 	// 추천솔루션 API 호출
 	//if(!gagajf.isNull(pcId)){
 		fnGetEigenApi(pcId);
 	//}
-	 */
 });
 
 /**