https://www.sunrefre.jp/blog/wp-content/themes/in3d-10/js/search.js

1$(function(){
2  if($(window).width() < 641){
3    spParams = '?mode=pc';
4  }else{
5    spParams = '';
6  }
7  function showHideSeries() {
8    if ($('input[name="maker[]"][value!=指定なし]:checked').length > 0) {
9      $('.series_filter').addClass('un_blogWcSearch_panel2__flex');
10      $('.search_filter div[maker]').hide();
11      $.each($('input[name="maker[]"]'), function (idx, elm) {
12        if ($(elm).prop('checked')) {
13          $('.search_filter div[maker="' + $(elm).val() + '"]').show();
14        } else {
15          $('.search_filter div[maker="' + $(elm).val() + '"]').hide();
16        }
17      });
18      if ($('input[name="toilet_type[]"][value=指定なし]:checked').length == 0) {
19        $.each($('input[name="toilet_type[]"][value!=指定なし]'), function (idx, elm) {
20          if (!$(elm).attr('checked')) {
21            $('.series_item[series_type="' + $(elm).val() + '"]').hide();
22            $('.series_item[series_type="' + $(elm).val() + '"] input[type=checkbox]').prop('checked', false);
23          }
24        });
25      }
26    } else {
27      $('.series_filter').removeClass('un_blogWcSearch_panel2__flex');
28      $('.series_filter input[name="series[]"]').prop("checked", false);
29      $('.series_filter input[name="series[]"][value=指定なし]').prop("checked", true);
30    }
31  }
32
33
34  function selectorControl(selecterName) {
35    $('input[name="' + selecterName + '"]').on('click', function () {
36      var value = $(this).val();
37      if (value == '指定なし') {
38        if ($(this).prop('checked')) {
39          $('input[name="' + selecterName + '"]').prop('checked', false);
40          $(this).prop('checked', true);
41        }
42      } else {
43        $('input[name="' + selecterName + '"][value=指定なし]').prop('checked', false);
44      }
45      if ($('input[name="' + selecterName + '"][value!=指定なし]:checked').length == 0) {
46        $('input[name="' + selecterName + '"][value=指定なし]').prop('checked', true);
47      }
48      showHideSeries();
49    });
50  }
51
52  function reset() {
53    $("input[type=checkbox]").prop("checked", false);
54    $('input[type=checkbox][value=指定なし]').prop("checked", true);
55    $('select[name="prefecture[]"]').prop('selectedIndex', 0);
56    $("input[name=page]").val("1");
57  }
58
59  function doSearch(loading) {
60    $params = $('form[name=wcSearchForm]').serialize();
61    prefVal = $('select[name="prefecture[]"]').val();
62    $.ajax({

63      url: '/blog/wp-content/themes/in3d-10/wc-search-counts.php'+spParams,
64      type: 'GET',
65      data: $params,
66      dataType: 'json'
67    }).done(function (data) {
68      prefHtml = '';
69      $.each(data['count'], function (index, value) {
70        $.each(value, function (index2, value2) {
71          // 項目横の数値をコメントアウト
72          //$('input[name="' + index + '[]"][value="' + index2 + '"]').next('label').children('.num').text("(" + value2 + ")");
73          if (value2 > 0) {
74            if(index=="prefectures"){
75              if(index2 == prefVal){
76                prefHtml += '<option value="' + index2 + '" selected>' + index2 + '</option>';
77              }else{
78                prefHtml += '<option value="' + index2 + '">' + index2 + '</option>';
79              }
80            }else{
81              $('input[name="' + index + '[]"][value="' + index2 + '"]').removeAttr("disabled");
82              $('input[name="' + index + '[]"][value="' + index2 + '"]').next('label').removeAttr("disabled");
83            }
84          }else{
85            $('input[name="' + index + '[]"][value="' + index2 + '"]').attr("disabled", true);
86            $('input[name="' + index + '[]"][value="' + index2 + '"]').removeAttr("checked");
87            $('input[name="' + index + '[]"][value="' + index2 + '"]').next('label').attr("disabled", true);
88          }
89        });
90        if ($('input[name="' + index + '[]"][value!=指定なし]:checked').length == 0) {
91          $('input[name="' + index + '[]"][value=指定なし]').prop('checked', true);
92        }
93      });
94      $('select[name="prefecture[]"]').html(prefHtml);
95    }).fail(function (data) {
96      console.log(data);
97    });
98
99    $.ajax({

100      url: '/blog/wp-content/themes/in3d-10/wc-search-results.php'+spParams,
101      type: 'GET',
102      data: $params,
103      dataType: 'json'
104    }).done(function (data) {
105      if (data["searchCount"] != "") {
106        var count = Number(data["searchCount"]);
107        $(".product_filter_result_count").text(count.toLocaleString());
108        if(loading){
109          $(".result_total_cnt").text(count.toLocaleString());
110        }
111
112        var page = $("input[name=page]").val();
113        if (page > 1) {
114          $(".prevBtn").removeClass("hidden");
115          $(".prevBtn").attr("page", parseInt(page) - 1);
116        } else {
117          $(".prevBtn").addClass("hidden");
118        }
119        if (page - 0 < Math.ceil(data["searchCount"] / 40)) {
120          $(".nextBtn").removeClass("hidden");
121          $(".nextBtn").attr("page", parseInt(page) + 1);
122        } else {
123          $(".nextBtn").addClass("hidden");
124        }
125      }
126      $(".searchResult > a").remove();
127      $.each(data['searchResult'], function (index, value) {
128        $(".searchResult").append(value);
129      });
130    }).fail(function (data) {
131      console.log(data);
132    });
133  }
134
135  $('input[name="constraction_type[]"]').on('click', function () {
136    showHideSeries();
137  });
138
139  $('input[name="floor_replacement[]"]').on('click', function () {
140    var value = $(this).val();
141    if(value == '指定なし' || (value == '床の張替えあり' && !$(this).prop('checked'))){
142      $('input[name="floor_replacement[]"]').prop('checked', false);
143      $('input[name="floor_pattern[]"]').prop('checked', false);
144      $('input[name="floor_color[]"]').prop('checked', false);
145      $('input[name="floor_pattern[]"][value=指定なし]').prop('checked', true);
146      $('input[name="floor_color[]"][value=指定なし]').prop('checked', true);
147      $('.floor_filter').hide();
148    }else{
149      if($(this).prop('checked')){
150        $('.floor_filter').show();
151      }else{
152        $('.floor_filter').hide();
153      }
154    }
155  });
156
157  $('input[name="floor_pattern[]"]').on('click', function () {
158    var value = $(this).val();
159    if (value == '指定なし') {
160      if ($(this).prop('checked')) {
161        $('input[name="floor_pattern[]"]').prop('checked', false);
162        $(this).prop('checked', true);
163      }
164    } else {
165      $('input[name="floor_pattern[]"][value=指定なし]').prop('checked', false);
166      $('input[name="floor_replacement[]"]').prop('checked', true);
167      $('input[name="floor_replacement[]"][value=指定なし]').prop('checked', false);
168    }
169  });
170
171  $('input[name="floor_color[]"]').on('click', function () {
172    var value = $(this).val();
173    if (value == '指定なし') {
174      if ($(this).prop('checked')) {
175        $('input[name="floor_color[]"]').prop('checked', false);
176        $(this).prop('checked', true);
177      }
178    } else {
179      $('input[name="floor_color[]"][value=指定なし]').prop('checked', false);
180      $('input[name="floor_replacement[]"]').prop('checked', true);
181      $('input[name="floor_replacement[]"][value=指定なし]').prop('checked', false);
182    }
183  });
184
185  $('input[name="wallpaper_replacement[]"]').on('click', function () {
186    var value = $(this).val();
187    if(value == '指定なし' || (value == '壁紙の張替えあり' && !$(this).prop('checked'))){
188      $('input[name="wallpaper_replacement[]"]').prop('checked', false);
189      $('input[name="wallpaper_replacement_type[]"]').prop('checked', false);
190      $('input[name="wallpaper_color[]"]').prop('checked', false);
191      $('input[name="wallpaper_replacement_type[]"][value=指定なし]').prop('checked', true);
192      $('input[name="wallpaper_color[]"][value=指定なし]').prop('checked', true);
193      $('.wall_filter').hide();
194    } else {
195      $('input[name="wallpaper_replacement[]"][value=指定なし]').prop('checked', false);
196      if($(this).prop('checked')){
197        $('.wall_filter').show();
198      }else{
199        $('.wall_filter').hide();
200      }
201    }
202  });
203  $('input[name="wallpaper_replacement_type[]"]').on('click', function () {
204    var value = $(this).val();
205    if (value == '指定なし') {
206      if ($(this).prop('checked')) {
207        $('input[name="wallpaper_replacement_type[]"]').prop('checked', false);
208        $(this).prop('checked', true);
209      }
210    } else {
211      $('input[name="wallpaper_replacement_type[]"][value=指定なし]').prop('checked', false);
212      $('input[name="wallpaper_replacement[]"]').prop('checked', true);
213      $('input[name="wallpaper_replacement[]"][value=指定なし]').prop('checked', false);
214    }
215  });
216
217  $('input[name="wallpaper_color[]"]').on('click', function () {
218    var value = $(this).val();
219    var noneVal = $('input[name="wallpaper_color[]"][value=指定なし]').val();
220    if (value == noneVal) {
221      if ($(this).prop('checked')) {
222        $('input[name="wallpaper_color[]"]').prop('checked', false);
223        $(this).prop('checked', true);
224      }
225    } else {
226      $('input[name="wallpaper_color[]"][value=指定なし]').prop('checked', false);
227      $('input[name="wallpaper_replacement[]"]').prop('checked', true);
228      $('input[name="wallpaper_replacement[]"][value=指定なし]').prop('checked', false);
229    }
230  });
231
232
233  $(function () {
234
235    function getHeaderHeight() {
236      var $fixed = $('body').find('.is-fixed');
237      if ($fixed.length) {
238        return $fixed.outerHeight();
239      }
240      return $('header').outerHeight();
241    }
242
243    function scrollToSearchResult() {
244      var headerHeight = getHeaderHeight();
245
246      var header1 = $('.ly_header_secondArea_innerWrapper');
247      if (header1.length) {
248        var headerHeight = header1.outerHeight();
249        if (!header1.hasClass('is-fixed')) {
250          headerHeight += 2;
251        }
252      }
253
254      var header2 = $('.ly_header_fourthArea_wrapper');
255      if (header2.length) {
256        headerHeight += header2.outerHeight();
257
258        if (!header2.hasClass('is-fixed')) {
259          headerHeight -= 19;
260        }
261      }
262
263      var searchBtn = $('.product_filter_row').outerHeight(true);
264
265      $('html, body').animate({
266        scrollTop: (
267          $(".searchResult").offset().top - headerHeight - searchBtn
268        )
269      });
270    }
271
272    $(".search_button").on("click", function () {
273      scrollToSearchResult();
274    });

275
276    $(".reset-btn").on("click", function () {
277      reset();
278      showHideSeries();
279
280      doSearch();
281
282      $('html, body').stop().animate({
283        scrollTop: 0
284      }, 700);
285    });
286
287    $(".prevBtn, .nextBtn").on('click', function (e) {
288      e.preventDefault();
289      e.stopPropagation();
290
291      var page = $(this).attr("page");
292      $("input[name=page]").val(page);
293
294      doSearch();
295      scrollToSearchResult();
296
297      return false;
298    });
299
300  });
301
302
303  $(document).ready(function () {
304    selectorControl('toilet_type[]');
305    selectorControl('maker[]');
306    selectorControl('series[]');
307    selectorControl('budget[]');
308    selectorControl('floor_replacement[]');
309    selectorControl('floor_pattern[]');
310    selectorControl('floor_color[]');
311    selectorControl('wallpaper_replacement[]');
312    selectorControl('wallpaper_replacement_type[]');
313    selectorControl('wallpaper_color[]');
314
315    reset();
316
317    showHideSeries();
318
319    doSearch(1);
320
321    $('.un_blogWcSearch_panel2_inner_choice').each(function () {
322      const text = $(this).text().trim();
323      let textLength = 0;
324
325      for (let i = 0; i < text.length; i++) {
326        const char = text[i];
327
328        textLength += /^[\x00-\x7F]$/.test(char) ? 0.5 : 1;
329      }
330
331      if(textLength >= 9) {
332        $(this).addClass('spW100per');
333      }
334    });
335
336  });
337
338  $('input[type="checkbox"],select[name="prefecture[]"]').on('change', function () {
339    $("input[name=page]").val("1");
340    doSearch();
341  });
342
343  $('#searchDetailDisplayBtn').on('click', function () {
344    if ($(this).hasClass('open')) {
345      $('#searchDetail').slideUp();
346      $(this).removeClass('open');
347    } else {
348      $('#searchDetail').slideDown();
349      $(this).addClass('open');
350    }
351  });
352});