【9月7日(土)開催】E3系＆E7系撮影会 in 新潟新幹線車両センター(JR東日本　新潟支社) | JR東日本が運営【JRE MALLチケット】 (2024)

`; const nextArrow = `

`; const _ = { el: { body: d.querySelector('body'), calendar: d.querySelector('#js-calendar338'), calendarSelectWrapper: d.querySelector('#js-calendar-ym338'), modal: d.querySelector('#js-modal338'), modalClose: d.querySelectorAll('#js-modal338 .js-modal-close'), modalNext: d.querySelectorAll('#js-modal338 .js-modal-next'), modalPrev: d.querySelectorAll('#js-modal338 .js-modal-prev'), modalForm: d.querySelector('#js-modal338 .js-activity-form'), tooltipWrapper: d.querySelector('#js-tooltip-wrapper338'), }, params: { currentYear: activityYear, currentMonth: activityMonth, currentDay: 0, activityProductId: activityProductId, activityCalendarAjaxUrl: activityCalendarAjaxUrl, activityAddCartAjaxUrl: activityAddCartAjaxUrl, activityRedirectCartUrl: activityRedirectCartUrl, currentCalendarData: {}, currentMergeSlots: {}, currentFormData: {}, isEventPeriod: isEventPeriod }, init: function () { _.calendar.func.setCalendarSelector(activityYear, activityMonth, activityYear, activityMonth); _.calendar.func.getCalendar(); // calendar関連 _.el.calendarSelectWrapper.addEventListener('click', function(e) { const target = e.target; console.log(target); if (target.classList.contains('js-calendar-prev')) { _.calendar.event.clickPrev(); } if (target.classList.contains('js-calendar-next')) { _.calendar.event.clickNext(); } if (target.classList.contains('js-calendar-ym')) { _.calendar.event.clickSelect(e); } }); _.el.calendar.addEventListener('click', _.calendar.event.clickCalendarItem); // modal関連 _.el.modalClose.forEach(el => { el.addEventListener('click', _.modal.event.close); }); // modal 内部の動的要素がクリックされた際のイベント _.el.modal.addEventListener('click', _.modal.event.clickDynamicElements); }, calendar: { event: { clickPrev: function () { if (_.params.currentYear < activityYear || (_.params.currentYear === activityYear && _.params.currentMonth <= activityMonth)) { //alert('カレンダーの先頭です'); return; } _.params.currentMonth--; if (_.params.currentMonth < 1) { _.params.currentMonth = 12; _.params.currentYear--; } // calendarSelectWrapper 内の 対象のタブをactiveにする const current = d.querySelector('#js-calendar-ym338 .js-calendar-ym.is-current'); if (current) { current.classList.remove('is-current'); } const target = d.querySelector('#js-calendar-ym338 .js-calendar-ym[data-year="' + _.params.currentYear + '"][data-month="' + _.params.currentMonth + '"]'); if (target) { target.classList.add('is-current'); } else { let startYear = _.params.currentYear; let startMonth = _.params.currentMonth - 6; if (startMonth < 1) { startYear--; startMonth = 12 + startMonth; } _.calendar.func.setCalendarSelector(startYear, startMonth, _.params.currentYear, _.params.currentMonth); } _.calendar.func.getCalendar(); _.calendar.func.updateCalendarSelectorPrevNextDisable(); }, clickNext: function () { if (_.params.currentYear > activityYearEnd || (_.params.currentYear === activityYearEnd && _.params.currentMonth >= activityMonthEnd)) { //alert('カレンダーの末尾です'); return; } _.params.currentMonth++; if (_.params.currentMonth > 12) { _.params.currentMonth = 1; _.params.currentYear++; } // calendarSelectWrapper 内の 対象のタブをactiveにする const current = d.querySelector('#js-calendar-ym338 .js-calendar-ym.is-current'); if (current) { current.classList.remove('is-current'); } const target = d.querySelector('#js-calendar-ym338 .js-calendar-ym[data-year="' + _.params.currentYear + '"][data-month="' + _.params.currentMonth + '"]'); if (target) { target.classList.add('is-current'); } else { _.calendar.func.setCalendarSelector(_.params.currentYear, _.params.currentMonth, _.params.currentYear, _.params.currentMonth); } _.calendar.func.getCalendar(); _.calendar.func.updateCalendarSelectorPrevNextDisable(); }, clickSelect: function (e) { const current = d.querySelector('#js-calendar-ym338 .js-calendar-ym.is-current'); if (current) { current.classList.remove('is-current'); } const target = e.target; target.classList.add('is-current'); const year = target.dataset.year; const month = target.dataset.month; if (!year || !month) { return; } _.params.currentYear = year * 1; _.params.currentMonth = month * 1; _.calendar.func.getCalendar(); _.calendar.func.updateCalendarSelectorPrevNextDisable(); }, clickCalendarItem: function (e) { const target = e.target; if (!target.classList.contains('js-calendar-action')) { return; } const currentDay = target.dataset.day; if (!currentDay || !_.params.currentCalendarData[currentDay]) { return; } _.params.currentDay = currentDay; if(_.params.isEventPeriod){ _.modal.event.open(); } else { // 曜日を取得 dow = Number(target.getAttribute("data-dow")); // ツールチップ 曜日ごとに動的に位置を調整 contentTransform = ""; arrowLeft = ""; switch (dow) { case 0: // 日曜日 contentTransform = "translateX(-5%)"; arrowLeft = "5%"; break; case 1: // 月曜日 contentTransform = "translateX(-20%)"; arrowLeft = "20%"; break; case 2: // 火曜日 contentTransform = "translateX(-35%)"; arrowLeft = "35%"; break; case 3: // 水曜日 contentTransform = "translateX(-50%)"; arrowLeft = "50%"; break; case 4: // 木曜日 contentTransform = "translateX(-65%)"; arrowLeft = "65%"; break; case 5: // 金曜日 contentTransform = "translateX(-80%)"; arrowLeft = "80%"; break; case 6: // 土曜日 contentTransform = "translateX(-95%)"; arrowLeft = "95%"; break; } const hasChildWithClass = target.querySelector('.tooltip-content') !== null; if(!hasChildWithClass){ const tooltipEle = document.createElement('div'); tooltipEle.style.transform = contentTransform; tooltipEle.classList.add('tooltip-content'); tooltipEle.innerHTML = _.el.tooltipWrapper.innerHTML; const arrowElement = document.createElement('div'); arrowElement.style.left = arrowLeft; arrowElement.classList.add('tooltip-arrow'); tooltipEle.appendChild(arrowElement); target.appendChild(tooltipEle); } } }, }, func: { setCalendarSelector: function (startYear, startMonth, currentYear, currentMonth) { startYear　= startYear * 1; startMonth = startMonth * 1; currentYear = currentYear * 1; currentMonth = currentMonth * 1; --startMonth; const calendarSelectWrapper = _.el.calendarSelectWrapper; calendarSelectWrapper.innerHTML = ''; // month button let button = ''; for (let i = 0; i < 7; i++) { const year = startYear + Math.floor((startMonth + i) / 12); const month = (startMonth + i) % 12 + 1; // 終了年月を超えたら終了 if (year > activityYearEnd || (year === activityYearEnd && month > activityMonthEnd)) { break; } let className = 'activity-calendar__month js-calendar-ym'; if (year === currentYear && month === currentMonth) { className += ' is-current'; } button += ``; } calendarSelectWrapper.innerHTML = prevArrow + button + nextArrow; _.calendar.func.updateCalendarSelectorPrevNextDisable(); }, updateCalendarSelectorPrevNextDisable: function () { const prev = d.querySelector('#js-calendar-ym338 .js-calendar-prev'); const next = d.querySelector('#js-calendar-ym338 .js-calendar-next'); if (_.params.currentYear < activityYear || (_.params.currentYear === activityYear && _.params.currentMonth <= activityMonth)) { prev.setAttribute('disabled', ''); } else { prev.removeAttribute('disabled'); } if (_.params.currentYear > activityYearEnd || (_.params.currentYear === activityYearEnd && _.params.currentMonth >= activityMonthEnd)) { next.setAttribute('disabled', ''); } else { next.removeAttribute('disabled'); } }, getCalendar: function () { const url = _.params.activityCalendarAjaxUrl + '/' + _.params.currentYear + '/' + _.params.currentMonth; fetch(url) .then(response => response.json()) .then(data => { if (data.status !== 'success') { alert('error'); return; } // renderCalendar _.el.calendar.innerHTML = ''; _.el.calendar.insertAdjacentHTML('beforeend', data.data.html); w.activitySetTabBoxHeight(); const currentCalendarData = {}; for (let i = 0; i <= data.data.calendar.length; i++) { if (data.data.calendar[i] && data.data.calendar[i].day) { currentCalendarData[data.data.calendar[i].day] = data.data.calendar[i]; } } _.params.currentCalendarData = currentCalendarData; }); }, }, }, modal: { event: { open: function () { // 表示関連 _.el.body.style.top = `-${window.scrollY}px`; _.el.body.classList.add('--modal-open'); _.el.modal.classList.add('--visible'); _.modal.func.resetForm(); _.modal.event.viewForm(); }, close: function () { // 表示関連 _.el.modal.classList.remove('--visible'); _.el.body.classList.remove('--modal-open'); const currentScrollSetting = d.documentElement.style.scrollBehavior; d.documentElement.style.scrollBehavior = 'auto'; const bodyTop = _.el.body.style.top; const topHeight = bodyTop.replace('px', '').replace('-', ''); w.scroll({ top: topHeight, left: 0, behavior: 'auto' }) d.documentElement.style.scrollBehavior = currentScrollSetting; _.params.currentFormData = {} }, clickDynamicElements: function (e) { // ProductClass の 減算 if (e.target.classList.contains('js-quantity-decrement')) { const parentElement = e.target.parentElement; const target = parentElement.nextElementSibling; if (target.value * 1 > 0) { target.value = target.value * 1 - 1; _.modal.func.calculationPriceAndPoint(); } } // ProductClass の 加算 if (e.target.classList.contains('js-quantity-increment')) { const parentElement = e.target.parentElement; const target = parentElement.previousElementSibling; target.value = target.value * 1 + 1; _.modal.func.calculationPriceAndPoint(); } // 変更する (Modal Jump) if (e.target.classList.contains('js-modal-jump')) { const state = e.target.dataset.state; // date の場合 modal を閉じる if (state === 'date') { _.modal.event.close(); } else { _.params.currentFormData['activity_product_modal[forceState]'] = state; _.modal.event.viewForm(); } } }, viewForm: function () { const url = `/activity/activity_product/modal_ajax/${_.params.activityProductId}/${_.params.currentYear}/${_.params.currentMonth}/${_.params.currentDay}`; if ( _.params.currentFormData.hasOwnProperty('activity_product_modal[final]') && _.params.currentFormData['activity_product_modal[final]'] === '1' && _.params.currentFormData['activity_product_modal[forceState]'] === '' ) { _.params.currentFormData['activity_product_modal[finish]'] = 1 } $.ajax({ url: url, method: 'POST', data: _.params.currentFormData }) .done(res => { _.modal.func.resetForm(); _.el.modalForm.insertAdjacentHTML('beforeend', res.html); //GA4データレイヤー設定 const tempDiv = document.createElement('div'); tempDiv.innerHTML = res.html; // 指定した要素を取得 const activityTitle = tempDiv.querySelector('.activity-modal__title'); const selectedDate = tempDiv.querySelector('#selectedDate'); const selectedTime = tempDiv.querySelector('#selectedTime'); const selectedQuantity = tempDiv.querySelector('#selectedQuantity'); //体験名 if (activityTitle) { activityTitleValue = activityTitle.innerText.trim(); } else { activityTitleValue = ""; } //選択日付 if (selectedDate) { selectedDateValue = selectedDate.innerText.trim(); } else { selectedDateValue = ""; } //選択時間 if (selectedTime) { selectedTimeValue = selectedTime.innerText.trim(); } else { selectedTimeValue = ""; } //選択年代 if (selectedQuantity) { selectedQuantityValue = selectedQuantity.innerText.trim(); selectedQuantityValue = selectedQuantityValue.replace(/\s+/g, ' '); } else { selectedQuantityValue = ""; } //各モーダルでデータレイヤーをプッシュ if(activityTitleValue !== "" && selectedDateValue !== "" && selectedTimeValue == ""){ eventName = "view_plan_schedule"; w.dataLayer = w.dataLayer || []; dataLayer.push({ event: "view_plan_schedule", content_type: "体験イベント", plan_name: activityTitleValue, plan_schedule: selectedDateValue }); } if(activityTitleValue !== "" && selectedDateValue !== "" && selectedTimeValue !== "" && selectedQuantityValue == ""){ eventName = "view_plan_number"; w.dataLayer = w.dataLayer || []; dataLayer.push({ event: "view_plan_number", content_type: "体験イベント", plan_name: activityTitleValue, plan_time: selectedTimeValue }); } if(activityTitleValue !== "" && selectedDateValue !== "" && selectedTimeValue !== "" && selectedQuantityValue !== ""){ let totalQuantity = 0; //各年代の選択人数を合計 for (let key in _.params.currentFormData) { if (_.params.currentFormData.hasOwnProperty(key) && key.startsWith('activity_product_class_modal[quantity_')) { totalQuantity += parseInt(_.params.currentFormData[key], 10); } } eventName = "view_plan_confirm"; w.dataLayer = w.dataLayer || []; dataLayer.push({ event: "view_plan_confirm", content_type: "体験イベント", plan_name: activityTitleValue, plan_schedule: selectedDateValue, plan_number: totalQuantity, plan_time: selectedTimeValue, plan_age: selectedQuantityValue }); } console.log(dataLayer); // 金額表示リセット _.modal.func.calculationPriceAndPoint(); // 次へのイベント付与 _.el.modal.querySelectorAll('.js-modal-next').forEach(el => { el.addEventListener('click', _.modal.event.next); }); _.el.modal.querySelectorAll('.js-modal-close').forEach(el => { el.addEventListener('click', _.modal.event.close); }); _.el.modal.querySelectorAll('.js-modal-add-cart').forEach(el => { el.addEventListener('click', _.modal.event.addCart); }); try { //ActivitySpotモーダル内のスライダー画像 $(".slider").slick({ autoplay: false, dots: true, adaptiveHeight: false, }); let count = parseInt(d.getElementById('activitySpot').dataset.count, 10); $(".thumbnail").slick({ slidesToShow: count, asNavFor: ".slider", focusOnSelect: true, }); } catch (e) { } }); }, next: function () { const targetButton = this; if (targetButton.classList.contains('js-modal-next-submit')) { // modal 内 js-activity-sum-price が 0 なら submit 禁止 const price = _.el.modal.querySelector('.js-activity-sum-price'); if (price.textContent === '0円') { alert('選択してください'); return; } } targetButton.disabled = true; targetButton.style.pointerEvents = 'none'; targetButton.style.opacity = '0.5'; let postBody = {}; // TODO: プロパティにする const formElement = d.getElementById('activityProductModalForm'); if (formElement !== null) { postBody = {}; const formData = new FormData(formElement) for (let [key, value] of formData.entries()) { postBody[key] = value; } } _.params.currentFormData = postBody; _.modal.event.viewForm(); }, addCart: function () { const targetButton = this; targetButton.disabled = true; targetButton.style.pointerEvents = 'none'; targetButton.style.opacity = '0.5'; // Convert the array to a JSON string const elementOrigin = d.getElementById('postBody') const addData = elementOrigin.value; const element = d.getElementById('postBodyJson') let classDataJson = element.value; try { // 1回の購入限度数超過フラグ let singlePurchaseLimit = null; let singlePurchaseLimitQuantity = 0; // タグログ let arrayClassDataJson = JSON.parse(classDataJson); let arrayData = []; $.each(arrayClassDataJson, function(index, data) { //1回の購入限度数量の存在・比較チェック if ( data.hasOwnProperty('singlePurchaseLimit') && data.singlePurchaseLimit !== null && data.singlePurchaseLimit !== '' ) { singlePurchaseLimit = data.singlePurchaseLimit; singlePurchaseLimitQuantity += data.quantity * 1; } arrayData.push([data.activityProductId, data.quantity, Math.round(data.price02IncTax)].join(':')); }); // 1回の購入限度数超過している場合は、fetchリクエストを送信しないよう制御 if (singlePurchaseLimit !== null && singlePurchaseLimitQuantity > singlePurchaseLimit) { targetButton.disabled = false; targetButton.style.pointerEvents = 'auto'; targetButton.style.opacity = '1'; alert('一度に購入できる最大数（'+singlePurchaseLimit+'）を超える購入はできません。'); return; } let dataString = arrayData.join(','); _ukwq.push(['_setReqURL', 'https://' + location.hostname + '/cart']); _ukwq.push(['_setRefURL', location.href]); _ukwq.push(['_setCartIn', dataString]); _ukwq.push(['_sendCartLog']); } catch (e) { console.warn('error',e); } // Send the JSON string in the AJAX request fetch(_.params.activityAddCartAjaxUrl, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: addData }) .then(response => response.json()) .then(data => { if (!data.done) { if (data.messages) { for (let i = 0; i < data.messages.length; i++) { if (data.messages[i].indexOf('exception') !== -1) { continue; } alert(data.messages[i]); } } else { alert('error'); } return; } location.href = _.params.activityRedirectCartUrl; }) .catch(error => { console.error('Error:', error); }); }, }, func: { calculationPriceAndPoint: function() { try { const classesQuantity = _.el.modal.querySelectorAll('input.js-price-quantity'); let i = 0; let price = 0; let point = 0; classesQuantity.forEach(el => { el.classList.remove('form-control'); const quantity = el.value * 1; const calcPrice = el.dataset.price * quantity; // カンマ区切りを削除して処理 const calcPoint = (_.modal.func.removeComma(el.dataset.jrePoint) * 1) * quantity; price += calcPrice; point += calcPoint; i++; }); const priceElement = _.el.modal.querySelector('.js-activity-sum-price'); priceElement.textContent = price.toLocaleString() + '円'; const pointElement = _.el.modal.querySelector('.js-activity-sum-point'); pointElement.textContent = point.toLocaleString(); } catch (e) { console.warn('error',e); } }, resetForm: function () { // .js-activity-form の すべてのinnerHTMLを削除 const allModalForm = d.querySelectorAll('.js-activity-form'); allModalForm.forEach(el => { el.innerHTML = ''; }); }, removeComma: function (val) { return val.replace(/,/g, ''); }, }, }, }; _.init(); });})(window,document,jQuery);