多商家店铺产品搜索栏失效及fetch参数报错求助

核心问题分析 #

Chrome调试工具的报错Uncaught (in promise) TypeError: Failed to execute 'fetch' on 'Window': 1 argument required, but only 0 present指向了函数名冲突：你自定义的fetch()函数与浏览器原生的window.fetch() API重名了，原生fetch必须传入URL参数，而你的调用没有传参，导致报错。

同时，PHP AJAX回调中存在变量引用错误，会导致搜索结果无法正确渲染。

分步修复 #

1. 重命名冲突的JavaScript函数 #

将自定义的fetch()函数改为唯一名称，避免和原生API冲突：

修改HTML中的输入框事件

<input type="text" name="s" placeholder="Search Products..." id="keyword" class="input_search" onkeyup="searchProducts()">

修改functions.php中的JS函数

function searchProducts(){
    jQuery.ajax({
        url: '<?php echo admin_url('admin-ajax.php'); ?>',
        type: 'post',
        data: { action: 'data_fetch', keyword: jQuery('#keyword').val() },
        success: function(data) {
            // 可选：如果希望替换原产品列表而非显示在单独的datafetch容器，改为jQuery('#fes-product-list').html(data);
            jQuery('#datafetch').html( data );
        }
    });
}

2. 修复PHP AJAX回调中的变量引用错误 #

在data_fetch()函数的循环中，你错误地使用了未定义的$product变量，应改为使用全局$post变量（来自the_post()）：

function data_fetch(){
    $authorID = get_current_user_id();
    $the_query = new WP_Query( array( 
        'posts_per_page' => -1, 
        's' => esc_attr( $_POST['keyword'] ), 
        'post_type' => 'download',  
        'author' => $authorID 
    ) );
    
    if( $the_query->have_posts() ) :
        while( $the_query->have_posts() ): $the_query->the_post(); 
            global $edd_logs;
            global $post;
            ?>
            <div class="product--flex--fes">
                <div class = "fes-product-list-td fes--mob--image"><?php echo get_the_post_thumbnail( $post->ID, array( 100, 100,true ) ); ?></div>
                <div class = "fes-product-list-td fes--mob--title"><?php echo EDD_FES()->dashboard->product_list_title( $post->ID ); ?></div>
                <div class = "fes-product-list-td"><?php echo EDD_FES()->dashboard->product_list_status( $post->ID ); ?></div>
                <div class = "fes-product-list-td"><?php  $download = $edd_logs->get_log_count($post->ID, 'file_download'); echo ( is_null( $download ) ? '0' : $download ); ?> <?php esc_html_e('Downloads','mayosis'); ?></div>
                <div class = "fes-product-list-td"><?php EDD_FES()->dashboard->product_list_actions( $post->ID ); ?></div>
                <div class = "fes-product-list-td"><?php echo EDD_FES()->dashboard->product_list_date( $post->ID ); ?></div>
            </div>
            <?php 
        endwhile;
        wp_reset_postdata();  
    else :
        echo "No Product Found";
    endif;
                
    die();
}

额外优化建议 #

• 添加防抖机制：避免每次按键都触发AJAX请求，减少服务器压力：

  let searchTimeout;
  function searchProducts(){
      clearTimeout(searchTimeout);
      searchTimeout = setTimeout(() => {
          jQuery.ajax({
              // 原有AJAX代码
          });
      }, 300); // 300ms延迟，用户停止输入后再请求
  }
  

• 隐藏原产品列表：如果使用#fes-product-list作为搜索结果容器，可在请求发起时隐藏原列表，提升用户体验。

内容的提问来源于stack exchange，提问作者Osman Assem