https://www.goo-net.com/existing_https/common_v2/js/estimate/cart_customize.js?20260805

1
2let customizeData = null;
3let currentStockId = null;
4let lastStockId = null;
5let packOptionsChecked = {};
6
7/*
8* API¤«¤é¥ª¥×¥·¥ç¥ó¾ðÊó¤ò¼èÆÀ
9* @param {string} stockIds
10* @returns {Promise<Object|null>}
11*/
12async function getCustomizeData(stockIds) {
13    if (!stockIds) return null;
14    const url = `/php/api/getCustomize.php?stock_id=${stockIds}`;
15    try {
16        const response = await fetch(url);
17        const json = await response.json();
18        return json.code === 200 ? json.data : null;
19    } catch (error) {
20        console.error("Error fetching customize data:", error);
21        return null;
22    }
23}
24
25/**
26 * ÂоݤÎstock_id¤ò¼èÆÀ 
27 * @returns {string|null}
28 */
29function getCurrentStockId() {
30    return new URLSearchParams(window.location.search).get("stock_id");
31}
32
33/*
34* ÂоݼÖξ¤Î¥ª¥×¥·¥ç¥ó¾ðÊó̵ͭ¤ò³Îǧ
35* @param {string} stockId
36* @returns {boolean}
37*/
38function isCustomizeCar(stockId) {
39    return customizeData?.some(item => item.node.legacyStockId === stockId) || false;
40}
41
42/**
43 * ÂоݼÖ¹ØÆþ¥Ñ¥Ã¥¯¤«¤éÁ«°Ü¤·¤¿¤Î¤«¤ò³Îǧ
44 * @param {string} stockId
45 * @returns {boolean}
46 */
47function isFromPack(stockId) {
48    const packElement = document.querySelector(`input[name="pack_${stockId}"]:checked`);
49    const packValue = packElement ? packElement.value : null;
50    return ['1', '2', '3'].includes(packValue);
51}
52
53/**
54 * ¥ª¥×¥·¥ç¥óÀÚ¤êÂؤ¨»þ¤ÎÀ©¸æ
55 * @param {string} stockId
56 * @returns {boolean}
57 */
58async function optionClick(changeRadio, stockId, customizeOption, skipConfirm) {
59    const changeBeforeValue = packOptionsChecked[changeRadio.name];
60    const changeValue = changeRadio.value;
61    const changeBeforeRadio = document.querySelector(`input[name="${changeRadio.name}"][value="${changeBeforeValue}"]`);
62
63    let confirmFlg = 0;
64    if (changeValue == '-1' && changeBeforeValue != '-1') {
65        confirmFlg = 1;
66        gtag('event', 'event_click',{ 'position':'option_select','detail':'select','link_type': 'text' });
67    } else if (changeValue != '-1' && changeBeforeValue == '-1') {
68        confirmFlg = 2;
69    }
70    
71    if (confirmFlg == 0) {
72        return;
73    }
74    
75    if (changeBeforeRadio) {
76        changeBeforeRadio.checked = true;
77    }
78    
79    // GOO_OPE_PRJ-17692 the highlighted CTA opens the modal without the switch confirmation

80    const popupConfirmFlg = skipConfirm ? true : await popupConfirm(confirmFlg, stockId);
81    
82    if (!popupConfirmFlg) {
83        return;
84    }
85
86    changeRadio.checked = true;
87    // ÁªÂòºÑ¤ß¤Î¥ª¥×¥·¥ç¥ó¤òÊݸ
88    packOptionsChecked[changeRadio.name] = changeRadio.value;
89
90    if (confirmFlg == 1) {
91        popupCustomizePage(stockId);
92    }else if (confirmFlg == 2) {
93        delStoreCustomize(stockId);
94    }
95
96    if (changeRadio.value == '-1') {
97        customizeOption.querySelector('#options_selection').style.display = 'none';
98        customizeOption.querySelector('#options_change').style.display = 'table-cell';  
99    } else {
100        customizeOption.querySelector('#options_selection').style.display = 'table-cell';
101        customizeOption.querySelector('#options_change').style.display = 'none';
102    }
103}
104
105/**
106 * ¥¹¥¯¥í¡¼¥ë¤Î¶Ø»ß
107 */
108function lockScroll() {
109    originalScrollPosition = window.scrollY;
110    document.documentElement.style.overflow = 'hidden';
111    document.documentElement.style.paddingRight = `${getScrollbarWidth()}px`;
112}
113
114/**
115 * ¥¹¥¯¥í¡¼¥ë¤Î²ò½ü
116 */
117function unlockScroll() {
118    document.documentElement.style.overflow = '';
119    document.documentElement.style.paddingRight = '';
120    window.scrollTo(0, originalScrollPosition);
121}
122
123/**
124 * ¥¹¥¯¥í¡¼¥ë¤ÎÉý¤ò¼èÆÀ
125 */
126function getScrollbarWidth() {
127    if (!getScrollbarWidth.cachedWidth) {
128        const div = document.createElement('div');
129        div.style.visibility = 'hidden';
130        div.style.overflow = 'scroll';
131        document.body.appendChild(div);
132        getScrollbarWidth.cachedWidth = div.offsetWidth - div.clientWidth;
133        document.body.removeChild(div);
134    }
135    return getScrollbarWidth.cachedWidth;
136}
137
138/**
139 * ¡ÖÁªÂò¤òÀÚ¤êÂؤ¨¤ë¡×¤Î½èÍý
140 * @param {number} confirmFlg
141 * @returns {Promise<boolean>}
142 */
143function popupConfirm(confirmFlg) {
144    return new Promise((resolve) => {
145        let confirmPopup = null;
146        if (confirmFlg == 1) {
147            confirmPopup = document.getElementById('pack_to_customize_confirm_pop');
148        } else if (confirmFlg == 2) {
149            confirmPopup = document.getElementById('customize_to_pack_confirm_pop');
150        }
151
152        confirmPopup.style.display = 'block';
153        lockScroll();
154
155        // ¥æ¡¼¥¶¡¼¤¬¡ÖÁªÂò¤òÀÚ¤êÂؤ¨¤ë¡×¥Ü¥¿¥ó¤ò¥¯¥ê¥Ã¥¯¤¹¤ë¤È½èÍý¤·¤Þ¤¹¡£
156        confirmPopup.querySelector('.confirm_switch').addEventListener('click', () => {
157            confirmPopup.style.display = 'none';
158            unlockScroll();
159            resolve(true);
160        });
161
162        // ¥æ¡¼¥¶¡¼¤¬¡Ö¥­¥ã¥ó¥»¥ë¡×¥Ü¥¿¥ó¤ò¥¯¥ê¥Ã¥¯¤¹¤ë¤È½èÍý¤·¤Þ¤¹¡£
163        confirmPopup.querySelector('.confirm_close').addEventListener('click', () => {
164            confirmPopup.style.display = 'none';
165            unlockScroll();
166            resolve(false);
167        });
168    });
169}
170
171/**
172 * ¥«¥¹¥¿¥Þ¥¤¥º¸«ÀÑ¥Õ¥í¡¼¥È¤Îɽ¼¨
173 * @param {string} stockId
174 * @returns {Promise<boolean>}
175 */
176function popupCustomizePage(stockId) {
177    if (!stockId) return;
178    const customizePopup = document.getElementById('customize_pop');
179    const customizeIframe = customizePopup.querySelector('iframe');
180    customizeIframe.src = '/php/search/customize.php?stock_id=' + stockId;
181    window.onmessage = function(event) {
182        if (event.origin !== window.location.origin) return;
183        if (event.data == 'closeCustomizePopup') {
184            customizePopup.style.display = 'none';
185            customizeIframe.src = '';
186            unlockScroll();
187        } else if (event.data == 'openCustomizePopup'){
188            customizePopup.style.display = 'block';
189            lockScroll();
190        }
191    };
192}
193
194document.addEventListener('DOMContentLoaded', async () => {
195    const gooStockIds = GOO_STOCK_ID.split(",");
196    // ¥«¥¹¥¿¥Þ¥¤¥º¾ðÊó¤ò¼èÆÀ
197    customizeData = await getCustomizeData(GOO_STOCK_ID);
198    // ÂоݼÖξ¤Îstock_id¤ò¼èÆÀ
199    currentStockId = getCurrentStockId();
200    // ËöÈø¼Öξ¤Îstock_id¤ò¼èÆÀ
201    lastStockId = gooStockIds[gooStockIds.length - 1]
202
203    // GOO_OPE_PRJ-17692 Dejam AB: GN_MODAL_OFF === '1' is the treatment group (renewal UI only)
204    const isModalOff = (typeof GN_MODAL_OFF !== 'undefined' && GN_MODAL_OFF === '1');
205    // Ä︫̾Àѥܥ¿¥ó¤«¤é¤ÎÁ«°Ü¤ò³Îǧ
206    const isFromNormal = Boolean(currentStockId) && gooStockIds.indexOf(currentStockId) !== -1;
207    const selectedValueElement = document.getElementById(`customize_page_selected_value_${lastStockId}`);
208    const selectedValue = selectedValueElement ? selectedValueElement.innerText : '';
209
210    gooStockIds.forEach((stockId) => {
211        // ¥«¥¹¥¿¥Þ¥¤¥ºÍ­Ìµ
212        const isCustomizeCarFlg = isCustomizeCar(stockId);
213        // LocalStorage̵ͭ
214        const isLocalStoreCar = Boolean(getStoreCustomize(stockId));
215        // ¥«¥¹¥¿¥Þ¥¤¥º¥ª¥×¥·¥ç¥ó¤ËÂбþ¤¹¤ë¥É¥­¥å¥á¥ó¥ÈÍ×ÁǤò¼èÆÀ
216        let customizeOption = document.getElementById(`customize_option_${stockId}`);
217
218        /* ¥«¡¼¥È¤Ç¥«¥¹¥¿¥Þ¥¤¥º¤ÎÁªÂò»è¤òɽ¼¨ */
219        if (customizeOption) {
220            customizeOption.style.display = isCustomizeCarFlg ? 'block' : 'none';
221            if (!isCustomizeCarFlg) {
222                customizeOption.remove();
223                customizeOption = null;
224            }
225
226        }
227
228        /* ¥«¡¼¥È¤Î¥«¥¹¥¿¥Þ¥¤¥ºÁªÂò»è¤òÁ«°Ü */
229        if (customizeOption) {
230            // GOO_OPE_PRJ-17692 treatment group pre-selects the option row only when options were actually chosen
231            const customizeOptionSelectFlag = isCustomizeCarFlg && !isFromPack(stockId) && (
232                isModalOff
233                    ? isLocalStoreCar
234                    : (isLocalStoreCar ||
235                        (isFromNormal && stockId === currentStockId) ||
236                        (!isFromNormal && stockId === lastStockId && ['', '-1'].includes(selectedValue)))
237            );
238            customizeOption.querySelector('input[type="radio"]').checked  = customizeOptionSelectFlag;
239            customizeOption.querySelector('#options_selection').style.display  = customizeOptionSelectFlag ? 'none' : 'table-cell';
240            customizeOption.querySelector('#options_change').style.display  = customizeOptionSelectFlag ? 'table-cell' : 'none';
241            customizeOption.querySelector('#options_selection').addEventListener('click', () => {
242                const optionRadio = customizeOption.querySelector('input[type="radio"]');
243                // GOO_OPE_PRJ-17692 treatment group skips the switch confirmation
244                if (isModalOff) {
245                    optionClick(optionRadio, stockId, customizeOption, true);
246                    return;
247                }
248                optionRadio.click();
249            });
250            customizeOption.querySelector('#options_change').addEventListener('click', () => {
251                gtag('event', 'event_click',{ 'position':'option_select','detail':'change','link_type': 'text' });
252                popupCustomizePage(stockId)
253            });
254
255        }
256
257        /* ³ºÅö¼Öξ¤ÎLocalStorage¤òºï½ü */
258        if (!isCustomizeCarFlg || isFromPack(stockId)) {
259            delStoreCustomize(stockId);
260        }
261
262        /* ¥«¥¹¥¿¥Þ¥¤¥º¤¬Â¸ºß¤¹¤ë¾ì¹ç¡¢¤½¤ÎÁªÂò»è¤Î¥¯¥ê¥Ã¥¯»þ¤ÎÀ©¸æ */
263        if (customizeOption) {
264            const packElement = document.querySelectorAll(`input[name="pack_${stockId}"]`);
265            packElement.forEach(element => {
266                if (element.checked) {
267                    packOptionsChecked[element.name] = element.value;
268                }
269                element.addEventListener('click', function () {
270                    optionClick(this, stockId, customizeOption);
271                });
272            });
273        }
274
275    });
276
277    /* ¥«¥¹¥¿¥Þ¥¤¥º¸«ÀÑ¥Õ¥í¡¼¥È¤ò³«¤¯ */
278    /* GOO_OPE_PRJ-17692 control group only */
279    if (!isModalOff) {
280        if (isFromNormal) {
281            if (isCustomizeCar(currentStockId) && !isFromPack(currentStockId)) {
282                popupCustomizePage(currentStockId);
283            }
284        } else if (isCustomizeCar(lastStockId) && !isFromPack(lastStockId) && selectedValue === '') {
285            popupCustomizePage(lastStockId);
286        }
287    }
288});