https://www.san-ai.com/base/js/itemSearch.js?cacheKey=202609b

1// ページ読み込み時
2Sys(function () {
3
4  /**
5  * 選択必須ではないラジオボタンのイベント操作
6  *
7  * name属性：_nos_per_group_noと部分一致
8  * type属性：radio（ラジオボタン）
9  * data-required-flag属性：false（選択必須ではない）
10  */
11  Sys('input[name*=_nos_per_group_no][type=radio][data-required-flag!=1]').click(function(event){
12
13    // フォーム要素のdata-is-checked属性を取得する
14    var isChecked = Sys(this).attr('data-is-checked');
15
16    // クリックしたチェックボックスのnameを取得（セレクタに使用する為、[]はエスケープ）
17    var thisName = (Sys(this).attr("name")).replace(/[\[\]]/g, '\\$&');
18
19    // クリックしたチェックボックスが所属するform配下（※）の、nameが同一のラジオボタンのdata-is-checked属性を除去する
20    // ※商品検索ページ内に機能パーツ（商品検索）がある場合に、２つのformのチェックボックスが全て対象になってしまうことを避けるため
21    Sys(this).parents('form').find('input[name=' + thisName + '][type=radio]').removeAttr('data-is-checked');
22
23    // 2回目タップの場合
24    if (isChecked !== undefined) {
25
26      // 選択解除する
27      Sys(this).attr('checked', false);
28      Sys(this).trigger('change');
29
30    } else {
31
32      // フォーム要素にdata-is-checked属性を追加する
33      Sys(this).attr('data-is-checked', '');
34    }
35  });
36
37  /**
38  * 選択必須チェックボックスをクリック時のイベント操作
39  *
40  * name属性：_nos_per_group_noと部分一致
41  * type属性：checkbox（チェックボックス）
42  * data-required-flag属性：true（選択必須）
43  */
44  Sys('input[name*=_nos_per_group_no][type=checkbox][data-required-flag=1]').click(function(event){
45
46    // クリックしたチェックボックスのnameを取得（セレクタに使用する為、[]はエスケープ）
47    var thisName = (Sys(this).attr("name")).replace(/[\[\]]/g, '\\$&');
48
49    // クリックしたチェックボックスが所属するform配下（※）の、nameが同一のチェックボックスが全て解除状態の場合
50    // ※商品検索ページ内に機能パーツ（商品検索）がある場合に、２つのformのチェックボックスが全て対象になってしまうことを避けるため
51    if ((Sys(this).parents('form').find('input[name=' + thisName + '][type=checkbox]:checked')).length === 0) {
52
53      // クリックしたチェックボックスを選択状態にする
54      Sys(this).prop('checked', true);
55    }
56  });
57
58  /**
59  * カテゴリグループ、PRグループ選択肢変更時のイベント操作
60  *
61  * name属性：_nos_per_group_noと部分一致
62  */
63  Sys('input[name*=_nos_per_group_no]').change(function(event){
64
65    var thisForm = Sys(this).parents('form');
66
67    // ajax
68    Sys.ajax({
69
70      type: 'POST',
71      url: '/api/front/item/itemPreSearch',
72      data: thisForm.serialize()
73
74    }).done(function (res) {
75
76      var resObj = JSON.parse(res);
77
78      // ボタンのラベルに件数を表示
79      var display_item_count_search_button = thisForm.find('input[name=display_item_count_search_button]').val();
80      if (display_item_count_search_button) {
81        var item_count = resObj['item_count'];
82          thisForm.find('input[type=submit]').val('検索 ' + item_count + '件');
83      }
84
85    }).fail(function () {
86      console.error('エラーが発生しました。');
87    }).always(function () {
88
89    });
90  });
91
92  /**
93  * カラーチップ hover でサムネイル画像をバリエーション画像に切替える
94  *
95  * - sysItemColorIcon の mouseenter で同じ li 内の img.thumbnail を data-variation-image-path に切替
96  *   （値が空のチップでは何もしない）
97  * - leave 判定はチップ単体ではなく親 .sysItemColorIcons で行う
98  *   （チップ間移動時のちらつきを防ぐため）
99  * - 起動時にバリエーション画像をプリロードして空白フラッシュを抑制
100  * - 同じ src への再設定はスキップ
101  */
102  Sys('.sysItemColorIcon').each(function () {
103    var path = Sys(this).attr('data-variation-image-path');
104    if (path) {
105      // ブラウザキャッシュに乗せておく
106      var preloader = new Image();
107      preloader.src = path;
108    }
109  });
110
111  // チップ境目での mouseenter 連発によるちらつきを抑えるためのデバウンス用タイマ
112  var sysVariationImageSwapTimer = null;
113
114  function sysVariationChipActivate(chipElement) {
115    var $chip = Sys(chipElement);
116    var thumbnail = $chip.closest('li').find('img.thumbnail');
117    var imagePath = $chip.attr('data-variation-image-path');
118
119    // バリエーション画像が紐付いていないチップは選択状態にしない。
120    // 直前に画像紐付け有りチップが active 状態だった場合は、
121    // 他チップから is-active を外し、サムネを元画像に戻す。
122    if (!imagePath) {
123      $chip.siblings('.sysItemColorIcon').removeClass('is-active');
124      var revertSrc = thumbnail.attr('data-original-src');
125      if (!revertSrc) {
126        return;
127      }
128      if (sysVariationImageSwapTimer) {
129        clearTimeout(sysVariationImageSwapTimer);
130      }
131      sysVariationImageSwapTimer = setTimeout(function () {
132        if (thumbnail.attr('src') !== revertSrc) {
133          thumbnail.attr('src', revertSrc);
134        }
135      }, 30);
136      return;
137    }
138
139    // 同グループ内の他チップから is-active を外し、当該チップに付与
140    $chip.siblings('.sysItemColorIcon').removeClass('is-active');
141    $chip.addClass('is-active');
142
143    if (sysVariationImageSwapTimer) {
144      clearTimeout(sysVariationImageSwapTimer);
145    }
146    sysVariationImageSwapTimer = setTimeout(function () {
147      if (thumbnail.attr('src') !== imagePath) {
148        thumbnail.attr('src', imagePath);
149      }
150    }, 30);
151  }
152
153  function sysVariationChipDeactivateGroup(groupElement) {
154    var $group = Sys(groupElement);
155
156    // グループ内全チップの is-active を外す
157    $group.find('.sysItemColorIcon').removeClass('is-active');
158
159    // サムネを元画像に戻す
160    var thumbnail = $group.closest('li').find('img.thumbnail');
161    var originalSrc = thumbnail.attr('data-original-src');
162    if (!originalSrc) {
163      return;
164    }
165    if (sysVariationImageSwapTimer) {
166      clearTimeout(sysVariationImageSwapTimer);
167    }
168    sysVariationImageSwapTimer = setTimeout(function () {
169      if (thumbnail.attr('src') !== originalSrc) {
170        thumbnail.attr('src', originalSrc);
171      }
172    }, 30);
173  }
174
175  // PC: hover で切替、チップ群から離れたら元に戻す
176  Sys(document).on('mouseenter', '.sysItemColorIcon', function () {
177    sysVariationChipActivate(this);
178  });
179
180  Sys(document).on('mouseleave', '.sysItemColorIcons', function () {
181    sysVariationChipDeactivateGroup(this);
182  });
183
184  // タッチ端末対応: 端末/ブラウザによって mouseenter がタップで発火しないケースがあるため
185  // click イベントも併用する（click は全端末で確実に発火する）。
186  // タッチでは「タップで切替→そのまま保持」になる（mouseleave が発火しないため自動で戻らない）。
187  Sys(document).on('click', '.sysItemColorIcon', function () {
188    sysVariationChipActivate(this);
189  });
190
191});