https://bestcarweb.jp/wp-content/themes/bestcar/js/carview-assessment.js

1document.addEventListener('DOMContentLoaded', function() {
2
3    // デバイス幅に応じてsrcパラメータの値を設定する。
4    const deviceSrcField = document.getElementById('device_src');
5    deviceSrcField.value = window.innerWidth >= 768 ? 'bestcar_rightmodule_pc' : 'bestcar_rightmodule_sp';
6    
7    // ウィンドウサイズが変更されたときに再設定する。
8    const mediaQuery = window.matchMedia('(min-width: 768px)');
9    function handleChange(e) {
10        if (e.matches) {
11            deviceSrcField.value = 'bestcar_rightmodule_pc';
12        } else {
13            deviceSrcField.value = 'bestcar_rightmodule_sp';
14        }
15    }
16    handleChange(mediaQuery);
17    mediaQuery.addEventListener('change', handleChange);
18    
19    // セレクト要素を取得
20    const makerSelect = document.getElementById('maker');
21    const modelSelect = document.getElementById('model');
22
23    // メーカー選択用セレクトに「読み込み中」状態を設定
24    makerSelect.disabled = true;
25    const loadingOption = document.createElement('option');
26    loadingOption.text = '読み込み中...';
27    makerSelect.add(loadingOption);
28
29    // APIからメーカー一覧を取得
30    fetch('/wp-json/carview/v1/makers')
31        .then(response => response.json())
32        .then(data => {
33            // 読み込み状態を解除
34            makerSelect.innerHTML = '';
35            makerSelect.disabled = false;
36
37            // デフォルトオプションを追加
38            const defaultOption = document.createElement('option');
39            defaultOption.value = '';
40            defaultOption.text = 'メーカーを選択';
41            makerSelect.add(defaultOption);
42
43            // メーカーリストを取得
44            const makerList = data.scope[0].entry[0].maker_list[0];
45            // 国内メーカーと輸入メーカーを１つの配列に統合
46            const allMakers = [];
47            if (makerList.domestic && makerList.domestic.length > 0) {
48                allMakers.push(...makerList.domestic);
49            }
50            if (makerList.imported && makerList.imported.length > 0) {
51                allMakers.push(...makerList.imported);
52            }
53
54            // すべてのメーカーをセレクトに追加
55            allMakers.forEach(maker => {
56                const option = document.createElement('option');
57                option.value = maker.mkid;
58                option.text = maker.mkname;
59                makerSelect.add(option);
60            });
61        })
62        .catch(error => {
63            console.error('Error fetching makers:', error);
64            makerSelect.innerHTML = '<option value="">エラーが発生しました</option>';
65            makerSelect.disabled = false;
66        });
67
68    // メーカー選択変更時の処理
69    makerSelect.addEventListener('change', function() {
70
71        // モデル選択用セレクトをリセットし無効化する。
72        modelSelect.innerHTML = '<option value="">モデルを選択</option>';
73        modelSelect.disabled = true;
74
75        if (this.value) {
76            const modelLoadingOption = document.createElement('option');
77            modelLoadingOption.text = '読み込み中...';
78            modelSelect.innerHTML = '';
79            modelSelect.add(modelLoadingOption);
80
81            const mkParam = encodeURIComponent(this.value);
82            fetch(`/wp-json/carview/v1/models?maker_id=${mkParam}`)
83                .then(response => response.json())
84                .then(data => {
85                    modelSelect.innerHTML = '';
86                    modelSelect.disabled = false;
87
88                    const defaultModelOption = document.createElement('option');
89                    defaultModelOption.value = '';
90                    defaultModelOption.text = 'モデルを選択';
91                    modelSelect.add(defaultModelOption);
92
93                    if (data && data.scope && data.scope[0] && data.scope[0].entry && 
94                        data.scope[0].entry[0] && data.scope[0].entry[0].model_list) {
95                        
96                        const modelList = data.scope[0].entry[0].model_list;
97                        
98                        // 車種名でソート
99                        modelList.sort((a, b) => a.mdname.localeCompare(b.mdname));
100                        
101                        // 全てのモデルをセレクトに追加
102                        modelList.forEach(model => {
103                            const option = document.createElement('option');
104                            option.value = model.mdid;
105                            option.text = model.mdname;
106                            modelSelect.add(option);
107                        });
108                    }
109                })
110                .catch(error => {
111                    console.error('Error fetching models:', error);
112                    modelSelect.innerHTML = '<option value="">エラーが発生しました</option>';
113                    modelSelect.disabled = false;

114                });
115        }
116    });
117});