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完成。在上面提到的网站中，他们实现了相同的技巧，可以在fucntions文件中找到..

见下文：您可以沿着此路径实施某些内容以获得所需的结果。

来自参考的代码。网站：

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

创建Wordpress taxonomy filter with AJAX.的示例。这是使用woocommerce产品进行分类过滤的一个例子。

Wordpress自定义分类过滤器

2 个答案: