(async () => { const { EventManager, pageHelper, utils } = ShopbySkin; const $timeSaleBanner = $('time-sale-banner'); const $timeSaleProducts = $('time-sale-products'); const $productTotalCount = $('product-total-count'); const $skeleton = $('skeleton'); // 상품 리스트 스켈레톤 컴포넌트 const param = utils.getQueryParams(); const pageSize = 1000; // 상품개수 1000개 고정(더보기 처리 귀찮아서) const skeletonHtml = renderHtml($skeleton); $skeleton.append(skeletonHtml); const displayDetailActionMap = { MOVE_PRODUCT_DETAIL: ({ event }) => { if (!utils.isAdultVerified(event)) { EventManager.fire('MODAL_CONFIRM_OPEN', { message: '성인인증이 필요한 상품입니다.', noticeType: 'CAUTION', onConfirm: () => { location.href = '/pages/intro/adult-certification.html'; }, }); } }, }; // [Aaron] 타임세일 배너 API 조회 및 렌더 const bannerId = 'time_sale_banner_pc'; const { result: bannerData } = await callShopApi( `/display/banners/id/${bannerId}`, ); const html = renderHtml($timeSaleBanner, bannerData[0].accounts[0]); $timeSaleBanner.append(html); // End const params = { queryString: { pageNumber: 1, pageSize: pageSize, hasTotalCount: true, hasOptionValues: true, soldout: false, includeStopProduct: false, }, }; getDisplaySectionData('SC0001', params).then( ({ result: customDisplayProductData, statusCode }) => { const totalCountHtml = renderHtml( $productTotalCount, customDisplayProductData.productTotalCount || 0, ); if (customDisplayProductData.productTotalCount <= pageSize) { document.querySelector('.more-event').style.display = 'none'; } const customDisplayHtml = renderHtml( $timeSaleProducts, customDisplayProductData, ); $productTotalCount.append(totalCountHtml); $timeSaleProducts.append(customDisplayHtml); // [Jay] 상품 데이터가 없는 경우 더보기 버튼 숨김처리 if (customDisplayProductData.products.length === 0) { $('.more-event').hide(); } // [Jay] 스켈레톤 렌더 $('#skeleton').hide(); // 상품에 타이머 노출 setTimer(customDisplayProductData); $timeSaleProducts .find('.display-product__contents') .velocity({ opacity: 1 }, { duration: 500 }); }, ); $(document).on('click', '.more-event', ({ target }) => { $('#skeleton').show(); let currentPage; if (!target.getAttribute('current-page')) { currentPage = target.parentNode.getAttribute('current-page'); } else { currentPage = target.getAttribute('current-page'); } currentPage = Number(currentPage) + 1; const params = { queryString: { pageNumber: currentPage, pageSize: pageSize, hasTotalCount: true, hasOptionValues: true, soldout: false, includeStopProduct: false, }, }; getDisplaySectionData('SC0001', params).then( ({ result: customDisplayProductData, statusCode }) => { const customDisplayHtml = renderHtml( $timeSaleProducts, customDisplayProductData, ); $timeSaleProducts.append(customDisplayHtml); // [Jay] 스켈레톤 렌더 $('#skeleton').hide(); // 상품에 타이머 노출 setTimer(customDisplayProductData); $timeSaleProducts .find('.display-product__contents') .velocity({ opacity: 1 }, { duration: 500 }); if ( currentPage * pageSize >= customDisplayProductData.productTotalCount ) $('.more-event').remove(); if (!target.getAttribute('current-page')) { $(target).parent().attr('current-page', currentPage); } else { $(target).attr('current-page', currentPage); } }, ); }); // 즉시할인 타이머 (즉시할인 적용상품) function setTimer(productData) { try { if (!productData.products) { return false; } productData?.products.forEach((product, index) => { const timeSaleEl = document.querySelectorAll( '.display-product__contents', ); // 즉시 할인가 종료시간 const endSaleYmdt = product.immediateDiscountEndYmdt; if (endSaleYmdt === null) { // 할인종료시간 데이터가 없을 경우 타임세일 영역 숨김처리 $(timeSaleEl[index]).find('.thumb-time').hide(); } else { const getEndSaleTime = new Date(endSaleYmdt).getTime(); // 즉시할인 종료시간이 현재 시간을 지나지 않았을 경우에만 타이머 실행 if ( endSaleYmdt && new Date(endSaleYmdt).getTime() > new Date().getTime() ) { $('.countdown').removeClass('dn'); let target_date = new Date(endSaleYmdt).getTime() + 1000 * 3600 * 48; let timerHtml = getCountdown(getEndSaleTime); // [Jay] 상품에 해당하는 카운트 다운 요소에 html 추가 $(timeSaleEl[index]).find('.countDown').html(timerHtml); let timer = setInterval(async function () { let current_date = new Date().getTime(); if (getEndSaleTime > current_date) { $('.countdown').removeClass('dn'); let timerHtml = getCountdown(getEndSaleTime); // [Jay] 상품에 해당하는 카운트 다운 요소에 html 추가 $(timeSaleEl[index]).find('.countDown').html(timerHtml); } else { clearInterval(timer); } }, 1000); } } }); // eslint-disable-next-line no-inner-declarations function getCountdown(getEndSaleTime, currentDate) { let days, hours, minutes, seconds; let current_date = !currentDate ? new Date().getTime() : currentDate; // find the amount of "seconds" between now and target let seconds_left = getEndSaleTime - current_date; // 타이머가 0초가 될 경우 타이머 영역 비노출 처리 if (Number.isNaN(seconds_left) || Number(seconds_left) === 0) { $('.countdown').addClass('dn'); } // 남은 일자를 시간으로 합산 days = Math.floor(seconds_left / (1000 * 60 * 60 * 24)); hours = Math.floor( (seconds_left % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60), ); const hoursCalc = days * 24 + hours; hours = pad(hoursCalc); minutes = pad( Math.floor((seconds_left % (1000 * 60 * 60)) / (1000 * 60)), ); seconds = pad(Math.floor((seconds_left % (1000 * 60)) / 1000)); let divideHours = [...hours]; let divideMinutes = [...minutes]; let divideSecond = [...seconds]; let timerHtml = '' + days + 'DAY ' + divideHours[0] + divideHours[1] + ' : ' + divideMinutes[0] + divideMinutes[1] + ' : ' + divideSecond[0] + divideSecond[1] + ''; return timerHtml; } // eslint-disable-next-line no-inner-declarations function pad(n) { return (n < 10 ? '0' : '') + n; } } catch (error) { console.log(error); } } /** * [Aaron] 진열 상품 조회 * @param sectionId 상품 진열 ID * @param params */ async function getDisplaySectionData(sectionId, params) { try { const result = await callShopApi( `/display/sections/ids/${sectionId}?`, 'GET', params, ); return result; } catch (e) { throw new Error(e); } } })();