WordPress自定義分類過濾器

Question

我正在嘗試創建一個類似這樣的產品過濾器：

http://www.permco.com/

我已經達到了我呼吁分類法並將其放入下拉菜單的地步。

$prodtype = array(
   'show_option_all'    => '',
   'show_option_none'   => '',
   'orderby'            => 'ID', 
   'order'              => 'ASC',
   'show_count'         => 0,
   'hide_empty'         => 1, 
   'child_of'           => 0,
   'exclude'            => '',
   'echo'               => 1,
   'selected'           => 0,
   'hierarchical'       => 0, 
   'name'               => 'cat',
   'id'                 => '',
   'class'              => 'postform',
   'depth'              => 0,
   'tab_index'          => 0,
   'taxonomy'           => 'product-types',
   'hide_if_empty'      => false,
); 
$displacement = array(
   'show_option_all'    => '',
   'show_option_none'   => '',
   'orderby'            => 'ID', 
   'order'              => 'ASC',
   'show_count'         => 0,
   'hide_empty'         => 1, 
   'child_of'           => 0,
   'exclude'            => '',
   'echo'               => 1,
   'selected'           => 0,
   'hierarchical'       => 0, 
   'name'               => 'cat',
   'id'                 => '',
   'class'              => 'postform',
   'depth'              => 0,
   'tab_index'          => 0,
   'taxonomy'           => 'displacement',
   'hide_if_empty'      => false,
 ); 

<form>
<b><?php _e('Product Type'); ?></b><br/>
<?php wp_dropdown_categories($prodtype); ?>
<br/>
<script type="text/javascript"><!--
var dropdown = document.getElementById("cat");
function onCatChange() {
    if ( dropdown.options[dropdown.selectedIndex].value > 0 ) {
        location.href = "<?php echo get_option('home');
?>/?cat="+dropdown.options[dropdown.selectedIndex].value;
    }
}
dropdown.onchange = onCatChange;
--></script>
<b><?php _e('Displacement'); ?></b><br/>
<?php wp_dropdown_categories($displacement); ?>
<br/>
<script type="text/javascript"><!--
var dropdown = document.getElementById("cat");
function onCatChange() {
    if ( dropdown.options[dropdown.selectedIndex].value > 0 ) {
        location.href = "<?php echo get_option('home');
 ?>/?cat="+dropdown.options[dropdown.selectedIndex].value;
    }
 }
dropdown.onchange = onCatChange;
--></script>

我的問題是，然后我無法獲得下拉菜單來刷新頁面並像在示例網站上那樣自動重新加載產品。

所以我想做的是，一旦用戶從下拉菜單中選擇了一個項目，產品就會刷新並加載符合該條件的產品，然后當他們從第二個下拉菜單中選擇一個選項時，我希望產品能夠自動過濾並顯示僅匹配這兩個選擇的產品。

任何幫助，將不勝感激。

Answer 1

可以通過使用jQuery完成。 在您上面提到的網站中，他們已經實現了相同的技巧，可以在功能文件中找到該技巧。

參見下文：您可以沿此路徑實施某些操作以獲得預期的結果。

參考的代碼。 現場：

e.filterChange = {init: function () { if (!jQuery.browser.mobile) { $("#filter_submit").hide(); $(".filterNote").show(); $("#form_filter .dk_options a").live($.browser.msie || $.browser.safari ? "mousedown" : "click", function (e) { $parent = $(this).closest(".dk_container"); $curValue = $parent.find(".dk_label"); setTimeout(function () { $("#form_filter").submit() }, 500) }) } }};

Answer 2

使用AJAX創建Wordpress分類過濾器的示例。 。 這是woocommerce產品的分類過濾器的示例。