https://shiso.or.jp/wpapp/wp-content/themes/shiso2022ver2/js/brand_search.js

1jQuery(document).ready(function($) {
2    // カテゴリー1のラジオボタンと親要素のクリックイベント
3    $('.p-cat1_block').on('click', function() {
4        $(this).find('input[type="radio"]').prop('checked', true).trigger('change');
5    });
6
7    $('input[type="radio"]:checked').closest('.p-cat1_block').addClass('checked');
8    $('input[type="radio"]').on('change', function() {
9        $('.p-cat1_block').removeClass('checked');
10        $(this).closest('.p-cat1_block').addClass('checked');
11    });
12
13    // カテゴリー2のチェックボックスと親要素のクリックイベント
14    $('.p-cat2_block').on('click', function() {
15        var checkbox = $(this).find('input[type="checkbox"]');
16        checkbox.prop('checked', !checkbox.prop('checked')).trigger('change');
17    });
18
19    // 初期状態でチェックされた要素にクラスを付与
20    $('input[type="checkbox"]:checked').closest('.p-cat2_block').addClass('checked');
21
22    // "すべて" チェックボックスがクリックされたとき
23    $('#cat2_all').on('change', function() {
24        if ($(this).is(':checked')) {
25            $('input[type="checkbox"]').not(this).prop('checked', false).closest('.p-cat2_block').removeClass('checked');
26            $(this).closest('.p-cat2_block').addClass('checked');
27        }
28    });
29
30    // 他のチェックボックスがクリックされたとき
31    $('input[type="checkbox"]').not('#cat2_all').on('change', function() {
32        if ($('input[type="checkbox"]').not('#cat2_all').is(':checked')) {
33            $('#cat2_all').prop('checked', false).closest('.p-cat2_block').removeClass('checked');
34        }
35        $(this).closest('.p-cat2_block').toggleClass('checked', $(this).is(':checked'));
36    });
37
38    // ページ読み込み時に "すべて" がチェックされている場合、他のチェックボックスを外す
39    if ($('#cat2_all').is(':checked')) {
40        $('input[type="checkbox"]').not('#cat2_all').prop('checked', false).closest('.p-cat2_block').removeClass('checked');
41    }
42	
43	//検索結果をロードする関数（スクロールなし）
44    function initialLoadProducts(paged = 1) {
45        var cat1 = $('input[name="cat1"]:checked').val();
46        var cat2 = [];
47        $('input[name="cat2[]"]:checked').each(function() {
48            cat2.push($(this).val());
49        });
50
51        $.ajax({
52            url: ajax_object.ajaxurl,
53            type: 'POST',
54            data: {
55                action: 'ajax_product_filter',
56                cat1: cat1,
57                cat2: cat2,
58                paged: paged
59            },
60            success: function(response) {
61                var data = JSON.parse(response);
62                $('.product-list').html(data.output);
63                $('.pagination-container').html(data.pagination);
64
65                // ページネーションのクリックイベントを再度設定
66                $('.pagination a').on('click', function(e) {
67                    e.preventDefault();
68                    var paged = $(this).attr('href').split('paged=')[1];
69                    loadProducts(paged);
70                });
71            },
72            error: function(xhr, status, error) {
73                console.log('AJAX Error: ' + error);
74            }
75        });
76    }
77
78    // 検索結果をロードする関数（スクロールあり）
79    function loadProducts(paged = 1) {
80        var cat1 = $('input[name="cat1"]:checked').val();
81        var cat2 = [];
82        $('input[name="cat2[]"]:checked').each(function() {
83            cat2.push($(this).val());
84        });
85
86        $.ajax({
87            url: ajax_object.ajaxurl,
88            type: 'POST',
89            data: {
90                action: 'ajax_product_filter',
91                cat1: cat1,
92                cat2: cat2,
93                paged: paged
94            },
95            success: function(response) {
96                var data = JSON.parse(response);
97                $('.product-list').html(data.output);
98                $('.pagination-container').html(data.pagination);
99
100                // ページネーションのクリックイベントを再度設定
101                $('.pagination a').on('click', function(e) {
102                    e.preventDefault();
103                    var paged = $(this).attr('href').split('paged=')[1];
104                    loadProducts(paged);
105                });
106
107                // スクロール機能を追加
108                $('html, body').animate({
109                    scrollTop: $('.l-product_form').offset().top
110                }, 500);
111            },
112            error: function(xhr, status, error) {
113                console.log('AJAX Error: ' + error);
114            }
115        });
116    }
117
118    // 初期ロード
119    initialLoadProducts();
120
121    $('#filter-form').on('submit', function(e) {
122        e.preventDefault();
123        loadProducts();
124    });
125
126    // ページネーションのクリックイベントの設定
127    $(document).on('click', '.pagination a', function(e) {
128        e.preventDefault();
129        var paged = $(this).attr('href').split('paged=')[1];
130        loadProducts(paged);
131    });
132});