https://staaack.kr/_hashcorp/common/js/function.js

1/**
2 * =============================================================================================
3 * 여기 아래부터는 만든사람의 저작권이 존재하는 코드입니다.
4 * 절대 지우거나 수정하지 마세요!!!
5 * ---------------------------------------------------------------------------------------------
6 * 만든날짜 : 2022-05-01
7 * 수정날짜 : 2022-05-17
8 * 만든사람 : 박세헌
9 * 연락처 : [email protected]
10 * ---------------------------------------------------------------------------------------------
11 * 모든 코드의 저작권 해시코퍼레이션에 있습니다.
12 * 무단 도용 및 코드의 재가공은 법적 책임을 물을 수 있습니다.
13 * ---------------------------------------------------------------------------------------------
14 * Copyright © HASH Corporation. All rights reserved.
15 * =============================================================================================
16 **/
17
18/**
19 * 세팅 변수 초기화
20 * -----------------------------------------------------
21 * !!!지우거나 수정하지 마세요!!!
22======================================================== */
23var HASHCORP = {} || HASHCORP;
24HASHCORP.isCopyright = false;
25HASHCORP.copyrightLog = console.log;
26HASHCORP.copyright = `Copyright © HASHCORP All right reserved.
27--------------------------------------
28작업자 : 해시코퍼레이션
29연락처 : 010-5738-3314
30이메일 : [email protected]
31작업일 : 2023-11-11
32--------------------------------------
33`;
34
35var setting = {
36	categorySubLevel: 0,
37	categoryBannerLinks: [],
38	isThumbAddImage: {
39		isActive: 1,
40		count: undefined,
41	},
42};
43
44/**
45 * 세팅관련 입력부분
46 * -----------------------------------------------------
47 * !!!지우거나 수정하지 마세요!!!
48======================================================== */
49function setCategorySubLevel(level) {
50	if (level) {
51		setting.categorySubLevel = level;
52	}
53}
54
55function setCategoryBannerLink(no, link, text) {
56	if (no && link) {
57		setting.categoryBannerLinks.push({
58			no: no,
59			link: link,
60			description: text,
61		});
62	}
63}
64
65function setIsThumbAddImage(isActive, count) {
66	setting.isThumbAddImage = {
67		isActive: isActive,
68		count: count,
69	};
70}
71
72/**
73 * 세팅관련 출력부분
74 * -----------------------------------------------------
75 * !!!지우거나 수정하지 마세요!!!
76======================================================== */
77/* 서브카테고리 레벨 값 출력 */
78function getCategorySubLevel() {
79	return setting.categorySubLevel;
80}
81/* 배너링크 값 출력 */
82function getBannerLinks() {
83	return setting.categoryBannerLinks;
84}
85
86/**
87 * 기능 함수 부분
88 * -----------------------------------------------------
89 * !!!지우거나 수정하지 마세요!!!
90======================================================== */
91
92/**
93 * 이메일 규칙 검사
94 * ----------------------------------------------------------- */
95function validateEmail(email) {
96	var re = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
97	return re.test(String(email).toLowerCase());
98}
99
100/**
101 * 메인상품리스트 기간할인 불러오기
102 * 타임세일 기능
103 * --------------------------------------------------------------------------------------------------
104 * getProductMainLTimeSale(디스플레이 그룹, 매칭할 상품 갯수, 구현될 Element Selector)
105-------------------------------------------------------------------------------------------------- */
106function getProductMainLTimeSale(displayGroup, count, selector) {
107	// 타임세일 종료시
108	function closeTimesale(selector) {
109		/**
110		 * 타임세일 죵로시 Dimmed 처리
111		 -------------------------------------------------------- */
112		/* Create Element */
113		var div = document.createElement('div');
114		var span = document.createElement('span');
115		div.classList.add('item__dimmed');
116		span.classList.add('dimmed__timesale');
117		span.textContent = '이벤트가 종료 되었습니다.';
118		div.append(span);
119		selector.append(div);
120	}
121
122	/**
123	 * iOS 날짜 인코딩
124	 * iOS에서는 ISO8601 형식을 지원하지않아 NaN으로 뜨는 문제를 해결
125	 * ----------------------------------------------------------- */
126	function convertDateForIos(dateString) {
127		var convertString = dateString.replace(/-/g, '/');
128		return new Date(convertString);
129	}
130
131	// 타임세일 실시간 시간
132	function timesale(targetDate, endDate, elSelector, parentSelector, intervalId, isOpen) {
133		if (targetDate && elSelector && intervalId) {
134			var now = new Date(); // 현재시간
135			var diffDate = targetDate - now;
136			var diffDay = Math.floor(diffDate / (1000 * 60 * 60 * 24));
137			var diffHour = Math.floor((diffDate / (1000 * 60 * 60)) % 24);
138			var diffMin = Math.floor((diffDate / (1000 * 60)) % 60);
139			var diffSec = Math.floor((diffDate / 1000) % 60);
140
141			elSelector.querySelector('.date__day').textContent = diffDay;
142			elSelector.querySelector('.date__hour').textContent = String(diffHour).padStart(2, '0');
143			elSelector.querySelector('.date__minute').textContent = String(diffMin).padStart(2, '0');
144			elSelector.querySelector('.date__second').textContent = String(diffSec).padStart(2, '0');
145
146			//elSelector.querySelector('.timesale__date').textContent = diffDay + '일 ' + String(diffHour).padStart(2, '0') + ':' + String(diffMin).padStart(2, '0') + ':' + String(diffSec).padStart(2, '0');
147
148			// 시간이 다됐을때
149			if (diffDay <= 0 && diffHour <= 0 && diffMin <= 0 && diffSec <= 0) {
150				if (isOpen) {
151					clearInterval(intervalId);
152					parentSelector.querySelector('.item__dimmed-open').remove();
153					var iso = CAFE24.SHOP.getLanguage().replace('_', '-');
154					var currency = CAFE24.SHOP.getCurrency();
155
156					$.ajax({

157						url: '/exec/front/Product/ApiProductMain?display_group=' + displayGroup + '&count=' + count,
158						dataType: 'json',
159						success: function (aData) {
160							if (aData.rtn_code === '1000' && aData.rtn_data.data && aData.rtn_data.data.length > 0) {
161								var data = aData.rtn_data.data;
162
163								for (var i = 0; i < data.length; i++) {
164									var isPromotion = data[i].product_promotion_display;
165
166									// 상품의 아이디값과 오픈되는 이벤트의 아이디값이 같을 경우
167									if (isPromotion && 'time-sale__' + data[i].product_id === parentSelector.closest('.list__item').id) {
168										var id = data[i].product_id;
169
170										/* Create Element */
171										var div = document.createElement('div');
172										var span = document.createElement('span');
173										div.classList.add('item__timesale');
174										span.classList.add('timesale__date');
175										div.append(span);
176
177										/**
178										 * 클로저를 통해 남은시간을 계산하여 DOM에 넣어준다
179										 * --------------------------------------------------- */
180										(function (j) {
181											var promotion = {
182												id: id,
183												el: parentSelector,
184												isPromotion: isPromotion, // 프로모션 노출여부
185												startDate: data[j].product_promotion_start_date, // 시작날짜
186												endDate: data[j].product_promotion_end_date, // 종료날짜
187												promotionDate: data[j].product_promotion_date, // 프로모션 기간
188												dcPrice: data[j].product_promotion_dc_price, // 프로모션 할인가
189												optimumPrice: data[j].optimum_discount_price_api, // 최적할인가
190												periodSalePrice: data[j].origin_prd_price_sale, // 기간할인가
191												price: data[j].product_price, // 원래가격
192												unit: data[j].price_unit_tail, // 화폐유닛
193											};
194											var endDate = convertDateForIos(promotion.endDate); // 이벤트 마감시간
195											var startDate = convertDateForIos(promotion.startDate); // 이벤트 시작시간
196											var today = new Date(); // 현재시간
197
198											var spanTitle = document.createElement('span');
199											var spanDay = document.createElement('span');
200											var spanHour = document.createElement('span');
201											var spanMinute = document.createElement('span');
202											var spanSecond = document.createElement('span');
203											spanTitle.classList.add('timesale__title');
204											spanDay.classList.add('date__day');
205											spanHour.classList.add('date__hour');
206											spanMinute.classList.add('date__minute');
207											spanSecond.classList.add('date__second');
208
209											var infoDiscountPrice = parentSelector.querySelector('.info__discount-price');
210											var infoPrice = parentSelector.querySelector('.info__price del');
211											infoDiscountPrice.classList.remove('displaynone');
212											infoPrice.classList.remove('displaynone');
213
214											var price = parseInt(promotion.price) - parseInt(promotion.dcPrice.replace(',', ''));
215											var productPrice = new Intl.NumberFormat(iso, { style: 'decimal', currency: currency }).format(price);
216											infoDiscountPrice.querySelector('strong').textContent = productPrice + promotion.unit;
217
218											spanTitle.textContent = '남은시간';
219											div.prepend(spanTitle);
220											parentSelector.append(div);
221
222											var timeSaleDate = promotion.el.querySelector('.timesale__date');
223											timeSaleDate.append(spanDay, '일', spanHour, '시간', spanMinute, '분', spanSecond, '초');
224
225											var intervalId = null;
226											intervalId = setInterval(function () {
227												timesale(endDate, null, timeSaleDate, promotion.el, intervalId, false);
228											}, 1000);
229										})(i);
230									} //if
231									else {
232									}
233								} //for
234							} //if
235						}, //success
236					}); //ajax
237				} else {
238					clearInterval(intervalId);
239					parentSelector.querySelector('.info__discount-price').remove();
240					parentSelector.querySelector('.info__price').remove();
241					parentSelector.querySelector('.item__timesale').remove();
242					closeTimesale(parentSelector);
243				}
244			}
245		}
246	}
247

248	// 날짜 정보 비동기로 가져오기
249	$.ajax({
250		url: '/exec/front/Product/ApiProductMain?display_group=' + displayGroup + '&count=' + count,
251		dataType: 'json',
252		success: function (aData) {
253			if (aData.rtn_code === '1000' && aData.rtn_data.data && aData.rtn_data.data.length > 0) {
254				var data = aData.rtn_data.data;
255				for (var i = 0; i < data.length; i++) {
256					var isPromotion = data[i].product_promotion_display;
257					if (isPromotion) {
258						var id = data[i].product_id;
259						var el = document.querySelector(selector + id + ' .product__item');
260
261						/* Create Element */
262						var div = document.createElement('div');
263						var span = document.createElement('span');
264						div.classList.add('item__timesale');
265						span.classList.add('timesale__date');
266						div.append(span);
267
268						/**
269						 * 클로저를 통해 남은시간을 계산하여 DOM에 넣어준다
270						 * --------------------------------------------------- */
271						(function (j) {
272							var promotion = {
273								id: id,
274								el: el,
275								isPromotion: isPromotion, // 프로모션 노출여부
276								startDate: data[j].product_promotion_start_date, // 시작날짜
277								endDate: data[j].product_promotion_end_date, // 종료날짜
278								promotionDate: data[j].product_promotion_date, // 프로모션 기간
279								dcPrice: data[j].product_promotion_dc_price, // 프로모션 할인가
280								optimumPrice: data[j].optimum_discount_price_api, // 최적할인가
281								periodSalePrice: data[j].origin_prd_price_sale, // 기간할인가
282							};
283
284							var endDate = convertDateForIos(promotion.endDate); // 이벤트 마감시간
285							var startDate = convertDateForIos(promotion.startDate); // 이벤트 시작시간
286							var today = new Date(); // 현재시간
287
288							var spanTitle = document.createElement('span');
289							var spanDay = document.createElement('span');
290							var spanHour = document.createElement('span');
291							var spanMinute = document.createElement('span');
292							var spanSecond = document.createElement('span');
293							spanTitle.classList.add('timesale__title');
294							spanDay.classList.add('date__day');
295							spanHour.classList.add('date__hour');
296							spanMinute.classList.add('date__minute');
297							spanSecond.classList.add('date__second');
298
299							// 이벤트 전이라면
300							if (startDate > today) {
301								spanTitle.textContent = '오픈시간';
302								div.prepend(spanTitle);
303
304								/* Create Element */
305								var dimmedDiv = document.createElement('div');
306								var dimmedTitleSpan = document.createElement('span');
307								dimmedDiv.classList.add('item__dimmed-open');
308								dimmedTitleSpan.classList.add('dimmed-open__timesale');
309								dimmedTitleSpan.textContent = '이벤트가 오픈 전입니다.';
310								dimmedDiv.append(dimmedTitleSpan);
311								dimmedDiv.append(div);
312								el.append(dimmedDiv);
313
314								var timeSaleDate = promotion.el.querySelector('.timesale__date');
315								timeSaleDate.append(spanDay, '일', spanHour, '시간', spanMinute, '분', spanSecond, '초');
316
317								var intervalId = null;
318								intervalId = setInterval(function () {
319									timesale(startDate, endDate, timeSaleDate, promotion.el, intervalId, true);
320								}, 1000);
321							}
322							// 이벤트가 종료되었다면
323							else if (today > endDate) {
324								return;
325							}
326							// 이벤트 진행중이라면
327							else {
328								spanTitle.textContent = '남은시간';
329								div.prepend(spanTitle);
330								el.append(div);
331
332								var timeSaleDate = promotion.el.querySelector('.timesale__date');
333								timeSaleDate.append(spanDay, '일', spanHour, '시간', spanMinute, '분', spanSecond, '초');
334
335								var intervalId = null;
336								intervalId = setInterval(function () {
337									timesale(endDate, null, timeSaleDate, promotion.el, intervalId, false);
338								}, 1000);
339							}
340						})(i);
341					} //if
342					else {
343						/**
344						 * 타임세일 리스트에 있지만 프로모션 기간이 종료된 상품
345						 -------------------------------------------------------- */
346						var id = data[i].product_id;
347						var el = document.querySelector(selector + id + ' .product__item');
348						if (el) {
349							closeTimesale(el);
350						}
351					} // else
352				} //for
353			} //if
354		}, //success
355	}); //ajax
356}
357
358/**
359 * 치환 코드로 변경됨 / 기존기능은 삭제
360 * 메인상품리스트 추가이미지 불러오기
361 * --------------------------------------------------------------------------------------------------
362 * getProductMainListAddImages(그룹ID, 불러들일 상품개수, 불러들일 추가이미지개수, 구현될 Element Selector);
363-------------------------------------------------------------------------------------------------- */
364/*
365function getProductMainListAddImages(displayGroup, count, imgCount, selector) {
366
367	if(setting.isThumbAddImage.isActive) {
368
369		var sCount = imgCount;
370		if(setting.isThumbAddImage.count !== undefined) {
371			sCount = setting.isThumbAddImage.count;
372		}
373
374		$.ajax({

375			url : '/exec/front/Product/ApiProductMain?display_group=' + displayGroup + '&count=' + count,
376			dataType: 'json',
377			success: function(aData) {
378				if(aData.rtn_code === '1000' && aData.rtn_data.data && aData.rtn_data.data.length > 0) {
379					var data = aData.rtn_data.data;
380					for(var i=0; i<data.length; i++) {
381						var id = data[i].product_id;
382						var el = document.querySelector(selector + id + ' .product__item');
383						var elChildName = el.querySelector('.item__info');
384						var max = 0;
385						var ul = document.createElement('ul');
386						ul.classList.add('item__add-images');
387						for(var j=0; j<sCount; j++) {
388							if( data[i]['add_image_src' + (j+1)] ) {
389								var li = document.createElement('li');
390								li.classList.add('add-images__item');
391								var button = document.createElement('div');
392								button.classList.add('item__button');
393								var img = document.createElement('img');
394								img.src = data[i]['add_image_src' + (j+1)];
395
396								img.onmouseover = function(e) {
397									e.target.closest('.list__item').querySelector('.item__thumb img').setAttribute('src', e.target.getAttribute('src'));
398								}
399								img.onmouseout = function(e) {
400									var origin = e.target.closest('.list__item').querySelector('.item__thumb img');
401									origin.setAttribute('src', origin.getAttribute('data-origin-src'));
402								}
403
404								button.append(img);
405								li.append(button);
406								ul.append(li);
407							}
408						}
409						el.insertBefore(ul, elChildName);
410					}
411				}
412			}
413		});
414	}
415}
416*/
417
418function scrollToTarget(target) {
419	const targetElement = document.getElementById(target);
420	targetElement.scrollIntoView({ behavior: 'smooth' });
421}
422
423function isMobileDevice() {
424	const userAgent = navigator.userAgent.toLowerCase();
425	const isMobile = /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/.test(userAgent);
426	const isNarrowScreen = window.innerWidth <= 720;
427	return isMobile || isNarrowScreen;
428}