https://store.kai-group.com/js/sys/goods_filter.js

1var ecblib = ecblib || {};
2ecblib.goods_filter = ecblib.goods_filter || {};
3
4(function () {
5    var _goods_filter = ecblib.goods_filter;
6
7    jQuery(document).ready(function(){
8        displayFilterBox();
9        getFilterBoxConditionStatus();
10        submitFilterCheckBox();
11        displayFilterImage();
12        submitFilterSelectBox();
13        displayFilterTree();
14
15    });
16
17    // 絞り込み項目の上下開閉
18    function displayFilterBox(){
19        var sPanel = jQuery('#block_of_filter');
20        var Box = sPanel.children("form").children(".js-filter-box");
21        var trigger = jQuery('.js-filter-box-inner-label', Box);
22        trigger.click(function(){
23            var parentBox = jQuery(this).parents(".js-filter-box:first");
24            if( parentBox.hasClass("block-filter--close") ){
25                // 開動作
26                parentBox.removeClass("block-filter--close");
27                saveFilterBoxConditionStatus(jQuery(this).parents(".js-filter-box").attr("id"),"open");
28            } else {
29                // 閉動作
30                parentBox.addClass("block-filter--close");
31                saveFilterBoxConditionStatus(jQuery(this).parents(".js-filter-box").attr("id"),"");
32            }
33        });
34    }
35
36    // チェックボックスにサブミットを紐付ける
37    function submitFilterCheckBox(){
38        jQuery('[name^=filtercode]').each( function() {
39            jQuery(this).bind('click', function() {
40                submitFilter();
41            });
42        });
43    }
44
45    // 画像用サブミット処理
46    _goods_filter.submitFilterImage = function submitFilterImage(filter_element, check, name, value) {
47        
48        var element = "";
49        
50        // 連続クリック防止
51        jQuery(filter_element).removeAttr("onclick");
52        
53        if (check == "true") {
54            // 要素を追加
55            element = document.createElement('input');
56            element.setAttribute('type', 'hidden');
57            element.setAttribute('name', name);
58            element.setAttribute('value', value);
59            document.frmFilterList.appendChild(element);
60        }
61        else {
62            // 要素を削除
63            jQuery(filter_element).children("input[name=" + name + "]").remove();
64        }
65        
66        submitFilter();
67    };
68
69    // セレクトボックス用サブミット処理
70    function submitFilterSelectBox(){
71        jQuery('[name^=brand]').each( function() {
72            jQuery(this).bind('change', function() {
73                submitFilter();
74            });
75        });
76    }
77
78    // ツリー用サブミット処理
79    _goods_filter.submitFilterTree = function submitFilterTree(filter_element, name, value) {
80        
81        // 連続クリック防止
82        jQuery(filter_element).removeAttr("onclick");
83        
84        jQuery('.js-filter-treelist-filterstyle').children('input[name=' + name + ']').remove();
85        
86        if (value != ''){
87            var element = "";
88            // 要素を追加
89            element = document.createElement('input');
90            element.setAttribute('type', 'hidden');
91            element.setAttribute('name', name);
92            element.setAttribute('value', value);
93            document.frmFilterList.appendChild(element);
94        }
95        submitFilter();
96    };
97
98    // ツリーの展開
99    function displayFilterTree(){
100        jQuery(function() {
101            jQuery('.js-filter-treeitem-dir').click(function() {
102                var _thisMenu = jQuery(this);
103                _thisMenu.parents(".js-filter-tree-item:first").find(".js-filter-tree:first").slideToggle('fast');
104            jQuery(this).toggleClass("block-filter--treeitem-dir__close");
105            return false;
106            });
107        });
108    }
109
110    // サブミット処理
111    function submitFilter()
112    {
113        if (jQuery('[name=brand]').val() == ''){
114            jQuery('[name=brand]').children('option').remove();
115        }
116        // 500ミリ秒以内にチェックされた絞り込み項目を検索対象とする
117        setTimeout( function() {
118            jQuery('#frmFilterList').submit();
119        }, 500);
120    }
121
122    // 絞り込み項目の上下開閉状態をクッキーに保存
123    function saveFilterBoxConditionStatus(key, value) {
124        Cookies.set(key, value, { expires: 365, path: '/', secure: true });
125    }
126
127    // 絞り込み項目の上下開閉状態をクッキーから取得
128    function getFilterBoxConditionStatus() {
129        for (var i=1 ; i<=17 ; i++){
130            if (Cookies.get("div_filter" + String(i)) == "open"){
131                jQuery('#div_filter' + String(i)).removeClass("block-filter--close");
132            } else {
133                jQuery('#div_filter' + String(i)).addClass("block-filter--close");
134            }
135        }
136    }
137
138    // 絞り込み要素(画像)のクリック、ホバー処理
139    function displayFilterImage(){
140        jQuery(document).ready(function() {
141            jQuery('[class^=js-filter-image]').each(function() {
142                
143                var filterElementCheck = jQuery(this).find(".js-filter-element-check");
144                
145                jQuery(this).click(function() {
146                
147                    jQuery(this).removeClass("js-filter-hover-flg");
148                
149                    if (jQuery(this).hasClass("js-filter-check-flg")) {
150                        filterElementCheck.removeClass("block-filter--image-checkoff");
151                    }
152                    else {
153                        filterElementCheck.addClass("block-filter--image-checkoff");
154                    }
155                });
156                
157                if (jQuery(this).hasClass("js-filter-check-flg")) {
158                    jQuery(this).hover(function() {
159                        filterElementCheck.removeClass("block-filter--image-checkoff");
160                    },function() {
161                        if (jQuery(this).hasClass("js-filter-hover-flg")) {
162                            filterElementCheck.addClass("block-filter--image-checkoff");
163                        }
164                    });
165                }
166            });
167        });
168    }
169}());