尝试使用动态过滤器,该过滤器将通过单击按钮按自定义分类法过滤自定义帖子类型。是得到了一个错误的ajax\\u url是未定义的,但我想我已经解决了这一部分。。。然而,我现在剩下的东西仍然不起作用,但没有错误!我希望所有产品在默认情况下显示,然后按应用程序和分析器对其进行过滤functions.php 文件:
function ajax_filter_tests_scripts() {
wp_enqueue_script( \'ajax_filter_tests\', get_stylesheet_directory_uri(). \'/src/js/components/_filter.js\', array(), \'1.0\', true );
wp_localize_script(\'ajax_filter_tests\', \'ajax_url\', admin_url(\'admin-ajax.php\') );
}
function ajax_filter_tests_shortcode() {
ajax_filter_tests_scripts();
ob_start(); ?>
<a href="#"><i class="fas fa-th"></i> All Products</a>
<?php
global $post;
$applications = wp_get_post_terms( $post->ID, \'applications\' );
$thisAnalyser = get_field(\'select_analyser_for_test_filter\');
foreach ( $applications as $application):
$tests = new WP_Query(
array(
\'post_type\' => \'tests\',
\'tax_query\' => array(
array(
\'taxonomy\' => \'applications\',
\'terms\' => array($application->slug),
\'field\' => \'slug\'
),
),
)
);
?>
<a href="#"><?php echo $application->name; ?></a>
<?php
$tests = null;
wp_reset_postdata();
endforeach;
?>
<?php
return ob_get_clean();
}
add_shortcode(\'ajax_filter_tests\', \'ajax_filter_tests_shortcode\');
//Ajax Callback
add_action(\'wp_ajax_ajax_filter_tests\', \'ajax_filter_tests_callback\');
add_action(\'wp_ajax_nopriv_ajax_filter_tests\', \'ajax_filter_tests_callback\');
function ajax_filter_tests_callback() {
header("Content-Type: application/json");
$thisAnalyser = get_field(\'select_analyser_for_test_filter\');
$tax_query = array(\'relation\' => \'AND\');
if(isset($_GET[\'application\'])) {
$application = sanitize_text_field( $_GET[\'application\'] );
$tax_query[] = array(
\'taxonomy\' => \'applications\',
\'field\' => \'slug\',
\'terms\' => $application
);
}
if(isset($thisAnalyser)) {
$analyser = $thisAnalyser;
$tax_query[] = array(
\'taxonomy\' => \'analyser\',
\'field\' => \'slug\',
\'terms\' => $analyser
);
}
$args = array(
\'post_type\' => \'tests\',
\'posts_per_page\' => -1,
\'tax_query\' => $tax_query
);
$test_query = new WP_Query( $args );
if( $test_query->have_posts() ) {
$result = array();
while ( $test_query->have_posts() ) {
$test_query->the_post();
$result[] = array(
"id" => get_the_ID(),
"title" => get_field(\'test_title\'),
"subtitle" => get_field(\'test_subtitle\'),
"image" => get_field(\'test_image\'),
"permalink" => the_permalink()
);
}
wp_reset_query();
echo json_encode($result);
}
wp_die();
}
在我的_filter.js 文件: $ = jQuery;
var aft = $("#ajax-filter-tests");
var aftLinks = aft.find(\'a\');
aftLinks.click(function(e) {
e.preventDefault();
var application = $(e.target).text();
var application_slug = application.replace(/\\s+/g, \'_\').toLowerCase();
console.log(application_slug);
var data = {
action : "ajax_filter_tests",
application : application_slug
}
$.ajax({
url : ajax_url,
data : data,
success : function(response) {
aft.find(\'#filterResults\').empty();
if(response) {
for(var i = 0; i < response.length; i++) {
var html = "<div class=\'test-filters__results__holder\'>";
html += " <div class=\'test__holder__image\'>";
html += " <img src=\'" + response[i].image + "\' alt=\'" + response[i].title + "\' />";
html += " </div>";
html += " <div class=\'test__holder__text\'>";
html += " <h4>" + response[i].title + "</h4>";
html += " <h5>" + response[i].subtitle + "</h5>";
html += " <a href=\'" + response[i].permalink + "\'>Learn More</a>";
html += " </div>";
html += "</div>";
aft.find(\'.test-filters__results .row\').append(html);
}
} else {
var html = "<div>Sorry, there are no suitable tests here.</div>";
aft.find(\'#filterResults\').append(html);
}
}
});
});
如果我没有解释我实际上想做得很好,这里有一张成品的图片