WordPress的Ajax过滤器 [英] Ajax filter for wordpress

问题描述

经过大量研究，我发现: https://rudrastyh.com/wordpress/ajax-post-filters.html

after a lot of research i came across this: https://rudrastyh.com/wordpress/ajax-post-filters.html

但是只有在选择了两个选项时，我才能使它工作.

But I can only get it to work when there are two options selected.

我给你一些背景:我有一个名为"Contratistas"的CPT，它有两个自定义分类法"especialidad"和"industria"，它们两个都有两个术语，每个"especialidad"->.技术"和听众"；'industria'->'cultivo'和'depocito'

I'll give you some context: I have a CPT named 'Contratistas' that has two custom taxonomies 'especialidad' and 'industria', they both have two terms each 'especialidad' -> 'tecnologia' and 'auditoria'; 'industria' -> 'cultivo' and 'depocito'

这是我的功能:

function misha_filter_function(){
    $args = array(
        'orderby' => 'date', // we will sort posts by date
        'order' => $_POST['date'], // ASC or DESC
        'post_per_page' => -1,
        'post_type' => 'contratista'
    );
    // for taxonomies / categories
    if( isset( $_POST['filtroEspecialidad'] ) && isset ($_POST['filtroIndustria'])  ) {
        $args['tax_query'][] = array(
         //'relation' => 'AND',
            array(
                'taxonomy' => 'especialidad',
                'field' => 'id',
                'terms' => $_POST['filtroEspecialidad']
            ),
            array(
                'taxonomy' => 'industria',
                'field' => 'id',
                'terms' => $_POST['filtroIndustria']
            ),
        );
    
    } elseif( !isset($_POST['filtroEspecialidad'] ) && isset($_POST['filtroIndustria'])  ) {
        $args['tax_query'][] = array(
            'taxonomy' => 'industria',
            'field' => 'id',
            'terms' => $_POST['filtroIndustria']
        );
    
    } elseif( isset( $_POST['filtroEspecialidad'] ) && !isset($_POST['filtroIndustria'])  ) {
        $args['tax_query'][] = array(
            'taxonomy' => 'especialidad',
            'field' => 'id',
            'terms' => $_POST['filtroEspecialidad']
        );
    }

如果您从两种分类法中都选择了某项，那么它会起作用，但是当其中一个为空时会显示没有帖子"

It works if you select something from both taxonomies, but when one is empty it says 'there are no post'

作为奖励，我想在过滤之前显示所有帖子.

as a bonus I will like to show all the post before filtering.

我希望有人能帮助我！谢谢！我刚接触Wordpress

I hope somebody can help me! Thanks! I'm fairly new to Wordpress

编辑！这是我的js和我的表格，我很茫然，我不知道出了什么问题:(

EDIT! Here is my js and my form, i'm at a loss here I can't figure out what's wrong :(

jQuery(function($){
    $('#filter').submit(function(){
        var filter = $('#filter');
        $.ajax({
            url:filter.attr('action'),
            data:filter.serialize(), // form data
            type:filter.attr('method'), // POST
            beforeSend:function(xhr){
                filter.find('.filtrar').text('Procesando...'); // changing the button label
            },
            success:function(data){
                filter.find('.filtrar').text('Filtrar'); // changing the button label back
                $('#response').html(data); // insert data
            }
        });
        return false;
    });

我的php文件:

<form action="<?php echo site_url() ?>/wp-admin/admin-ajax.php" method="POST" id="filter">
                    <div class="titulo mb-3">
                        <h3>Especialidad</h3>
                    </div>
                    <?php
                        if( $terms = get_terms( array( 'taxonomy' => 'especialidad', 'orderby' => 'name' ) ) ) : 
                 
                            echo '<select name="filtroEspecialidad"><option value="">Seleccione una especialidad...</option>';
                            foreach ( $terms as $term ) :
                                echo '<option value="' . $term->term_id . '">' . $term->name . '</option>'; // ID of the category as the value of an option
                            endforeach;
                            echo '</select>';
                        endif;
                        
                    ?>
                    <div class="titulo my-3">
                        <h3>Industrias</h3>
                    </div>
                    <?php   
                        if( $terms = get_terms( array( 'taxonomy' => 'industria', 'orderby' => 'name' ) ) ) : 
                 
                            echo '<select name="filtroIndustria"><option value="">Seleccione una industria...</option>';
                            foreach ( $terms as $term ) :
                                echo '<option  value="' . $term->term_id . '">' . $term->name . '</option>'; // ID of the category as the value of an option
                            endforeach;
                            echo '</select>';
                        endif;
                    ?>  
                    <button class="my-3 filtrar">Filtrar</button>
                    <a href="" id="clear">Clear</a>
                    <input type="hidden" name="action" value="myfilter">
                </form>

推荐答案

您可能想给 WP_Query() 的分类参数再次一览无余.不幸的是，WordPress在上下文中使用 id 参数名称有点松懈.我不能完全确定您最初的两者"都因为'field'=>'id'实际上是无效的.

You may want to give the Taxonomy Parameters of WP_Query() another glance. Unfortunately, WordPress is a little loose with it's id parameter names contextually. I'm not entirely sure your initial "both" is working like you intend either, because 'field' => 'id' is actually invalid.

从文档中

field(字符串)–选择分类法依据.可能的值是 term_id ， name ， slug 或 term_taxonomy_id .默认值为 term_id .

id 实际上不是有效的选项.如果您只使用 term_id ，则应该可以忽略它.您也可以根据是否设置了过滤器，以编程方式添加 tax_query 数组参数，而不用检查"两个设置，此设置/未设置，此未设置，该设置"，也许是这样的东西?

id isn't actually a valid option. If you're just using the term_id, you should be able to omit that. You can also just programatically add the tax_query array arguments based on if that filter is set, instead of checking for "both set, this set/that unset, this unset, that set", something like this perhaps?

function misha_filter_function(){
    $args = array(
        'orderby'       => 'date', // we will sort posts by date
        'order'         => $_POST['date'], // ASC or DESC
        'post_per_page' => -1,
        'post_type'     => 'contratista'
    );

    if( isset($_POST['filtroEspecialidad']) || isset($_POST['filtroIndustria']) ){
        $args['tax_query'] = array();
        
        if( isset($_POST['filtroEspecialidad']) ){
            $args['tax_query'][] = array(
                'taxonomy' => 'especialidad',
                'terms'    => $_POST['filtroEspecialidad']
            );
        }
        
        if( isset($_POST['filtroIndustria']) ){
            $args['tax_query'][] = array(
                'taxonomy' => 'industria',
                'terms'    => $_POST['filtroIndustria']
            );
        }

        if( count($args['tax_query']) > 1 ){
            $args['tax_query']['relation'] = 'AND';
        }
    }

    // Run WP_Query with new $args, etc.
}

我不确定 $ _ POST 的值是数组还是单个数字，但是您可能要使用 array_map 和/或 absint 如果您使用的是用户提供的输入，但如果它们只是ID，则上面的代码现在应该可以使用.

I'm not sure if the $_POST values are arrays or single numbers, but you may want to validate those with array_map and/or absint if you're using user-supplied input, but if they're just IDs, the above should work for now.

这篇关于WordPress的Ajax过滤器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！