(() => { const { pageHelper, EventManager, utils, actions } = ShopbySkin; const eventDetailHelper = pageHelper.eventDetailHelper(); const { getQueryParams, replaceHistory, isSignIn } = utils; const containerEl = document.querySelector('[shopby-helper-key="event-detail-helper-key"]'); const { event: eventNoOrId, pageSize, pageNumber, sectionNo } = getQueryParams(location); const eventDetailRequest = { eventKey: eventNoOrId, }; const eventDetailProductRequest = { sortType: 'ADMIN_SETTING', soldOut: true, includeStopProduct: true, }; const searchParams = new URLSearchParams(location.search); const eventDetailProductRequestParamType = [ 'event', 'sectionNo', 'pageNumber', 'pageSize', 'sortType', 'direction', 'soldOut', 'includeStopProduct', ]; const redirectLoginPage = () => { const nextUrl = '/pages/sign-in/sign-in.html'; location.href = `${nextUrl}?from=${encodeURIComponent(location.href)}`; }; const convertEventDetailRequestParam = (params, filterTypes) => Object.fromEntries(params?.filter(([key]) => !filterTypes.includes(key))); eventDetailHelper.initialize({ helperKey: 'event-detail-helper-key', }); const likeHelper = { toggleClassName: (likeEl) => { likeEl.classList.toggle('is-active'); }, toggleLikeStatus: async (likeEl) => { const productNo = likeEl.getAttribute('shopby-product-no') ?? 0; await actions.toggleLikeStatus({ productNo: Number(productNo), }); }, }; const CLICK_EVENT_HANDLER_MAP = { HANDLE_COUPON_BTN_CLICK: () => { if (!isSignIn()) { ShopbySkin.EventManager.fire('MODAL_CONFIRM_OPEN', { noticeType: 'CAUTION', message: '로그인하셔야 본 서비스를 이용하실 수 있습니다.', onConfirm: redirectLoginPage, }); return; } const { coupon, eventNo } = document.querySelector('event-detail-product-list-v2').store.state ?? {}; ShopbySkin.EventManager.fire('OPEN_LAYER_MODAL', { title: '쿠폰받기', name: 'coupon-download', data: { coupons: coupon?.coupons?.filter(({ downloadable }) => downloadable) ?? [], eventNo, }, isFull: false, onClose: () => null, }); }, HANDLE_SECTION_ID_CLICK: ({ target, helper }) => { const tabId = target.getAttribute('shopby-tab-id'); const currentSectionNo = target.getAttribute('shopby-section-no'); const { eventNo } = document.querySelector('event-detail-product-list-v2').store.state ?? {}; helper.eventAction.selectEventCategoryV2({ tabId, sectionNo: currentSectionNo }); searchParams.set('sectionNo', currentSectionNo); searchParams.set('pageNumber', 1); const param = Object.fromEntries(searchParams); replaceHistory({ query: param, }); const { event, ...rest } = param; eventDetailHelper.eventAction.fetchEventDetailProducts({ ...eventDetailProductRequest, ...rest, eventNo, sectionNo: currentSectionNo, pageSize, pageNumber: 1, }); }, LIKE_PRODUCT: ({ target }) => { if (!isSignIn()) { ShopbySkin.EventManager.fire('MODAL_CONFIRM_OPEN', { noticeType: 'CAUTION', message: '로그인하셔야 본 서비스를 이용하실 수 있습니다.', onConfirm: redirectLoginPage, }); return; } const likeEl = target.closest('[shopby-product-no]'); likeHelper.toggleClassName(likeEl); likeHelper.toggleLikeStatus(likeEl); }, OPEN_PRODUCT_OPTION_MODAL: ({ target }) => { target?.preventDefault?.(); const btns = target.closest('[shopby-product-no]'); const productNo = Number(btns.getAttribute('shopby-product-no') ?? 0); const isSoldOut = utils.convertStringBooleanToBoolean( btns.getAttribute('shopby-is-sold-out') ); if (isSoldOut) { return; } EventManager.fire('OPEN_LAYER_MODAL', { name: 'select-product-option', title: '옵션 선택', isFull: false, modalAddClass: 'select-product-option-modal', data: { productNo, }, }); } }; const CHANGE_EVENT_HANDLER_MAP = { HANDLE_SORT_CHANGE: ({ target, helper }) => { const paramArray = Array.from(searchParams.entries()); const eventDetailRequestParam = convertEventDetailRequestParam(paramArray, eventDetailProductRequestParamType); helper.eventAction.fetchEventDetailV2({ ...eventDetailRequestParam, ...eventDetailRequest, sortType: target.value, }); }, }; EventManager.fire('INIT_EVENT_PRODUCT_SECTION_SLIDER', { spaceBetween: 32, direction: 'horizontal', effect: 'slide', slidesPerView: 'auto', }); EventManager.on('PAGE_LOAD_COMPLETED', (commonData) => { const paramArray = Array.from(searchParams.entries()); const eventDetailRequestParam = convertEventDetailRequestParam(paramArray, eventDetailProductRequestParamType); eventDetailHelper.eventAction.fetchEventDetailV2({ ...eventDetailRequestParam, ...eventDetailRequest }); EventManager.on('QUERY_DISPLAY_EVENTS_EVENT_NO', (data) => { const currentSectionNo = sectionNo ?? data.listOfExhibition[0]?.sectionNo; if (!currentSectionNo) { return; } searchParams.set('sectionNo', currentSectionNo); const param = Object.fromEntries(searchParams); replaceHistory({ query: param, }); const { event, ...rest } = param; eventDetailHelper.eventAction.fetchEventDetailProducts({ ...eventDetailProductRequest, ...rest, eventNo: data.eventNo, sectionNo: currentSectionNo, pageSize, pageNumber, }); }); EventManager.on('QUERY_DISPLAY_EVENTS_EVENT_NO_SECTIONS_SECTION_NO', (data) => { if ( !ShopbySkin.utils.isSignIn() || '93747' == commonData?.profile?.memberGradeNo ) { if ( data?.products?.[0] ) { data?.products?.forEach((v)=>{ let hasTheIcon = false; for ( const icon of ( v.stickerInfos || [] ) ) { if ( icon?.label?.includes('점주전용') ) { hasTheIcon = true; break; } } if ( hasTheIcon ) { const itemDom = document.querySelector(`event-detail-product-list-v2 .thumb-item[shopby-product-no="${v.productNo}"]`); itemDom.querySelector('.thumb-item__info-price').innerHTML = `

매장 사업자 전용 상품

`; itemDom.querySelectorAll('a').forEach((v)=>{ v.href = `javascript:alertTheProduct();`; }); itemDom.querySelector('[shopby-action="OPEN_PRODUCT_OPTION_MODAL"]').remove(); } }); } } }); }); const clickEventListener = ({ target }) => { const actionType = target.getAttribute('shopby-action') ?? target.closest('button')?.getAttribute('shopby-action'); CLICK_EVENT_HANDLER_MAP[actionType]?.({ helper: eventDetailHelper, target, }); }; const changeEventListener = ({ target }) => { const actionType = target.getAttribute('shopby-action'); CHANGE_EVENT_HANDLER_MAP[actionType]?.({ helper: eventDetailHelper, target, }); }; containerEl.addEventListener('click', clickEventListener); containerEl.addEventListener('change', changeEventListener); })();