从描述中过滤 WooCommerce 产品

Question

我正在创建销售技术和此类产品的网上商店。客户希望过滤器能够搜索产品的描述并据此进行过滤。例如：假设 50 种产品中有 10 种在其描述中包含“i7”。我创建了搜索每个产品描述并正确过滤它的代码。首先，我创建了搜索要过滤的术语，后来我计划添加常用的过滤器，以便用户只需单击它即可。然而，当我搜索“i7”时，它只会打印搜索按钮下方描述中包含“i7”的产品的 ID。我希望它只显示商店部分中显示所有产品的产品，所以基本上就像常规过滤器一样显示它。

这是我创建的“过滤器”的代码：

function product_filter_plugin_enqueue_scripts() {
    wp_enqueue_script('product-filter-plugin-script', plugins_url('/assets/js/product-filter-plugin.js', __FILE__), array('jquery'), '1.0.0', true);
    wp_enqueue_style('product-filter-plugin-style', plugins_url('/assets/css/product-filter-plugin.css', __FILE__), array(), '1.0.0');
}
add_action('wp_enqueue_scripts', 'product_filter_plugin_enqueue_scripts');

// Handle the filtering functionality
function product_filter_plugin_handle_filtering() {
    // Check if a search query is submitted
    if (isset($_GET['search_query'])) {
        $search_query = sanitize_text_field($_GET['search_query']);

        // Set up the query arguments
        $args = array(
            'post_type' => 'product',
            'posts_per_page' => -1,
        );

        // Query the products
        $products_query = new WP_Query($args);

        // Array to store filtered product IDs
        $filtered_product_ids = array();

        // Loop through each product and filter based on the search query
        if ($products_query->have_posts()) {
            while ($products_query->have_posts()) {
                $products_query->the_post();
                $product_id = get_the_ID();
                $product_description = get_the_content();

                // Filter based on the search query
                if (strpos($product_description, $search_query) !== false) {
                    // Add the filtered product ID to the array
                    $filtered_product_ids[] = $product_id;
                }
            }
        }

        // Reset the post data
        wp_reset_postdata();

        // Save the filtered product IDs to a file
        $filtered_ids_file_path = plugin_dir_path(__FILE__) . 'filter_id.txt';
        file_put_contents($filtered_ids_file_path, implode(',', $filtered_product_ids));


        return $filtered_product_ids;
    }
}

// Create a shortcode for the filtering functionality
function product_filter_plugin_shortcode($atts) {
    ob_start();
    ?>
    <div class="product-filter-container">
        <form class="product-filter-form" action="<?php echo esc_url(home_url('/')); ?>" method="GET">
            <input type="hidden" name="post_type" value="product">
            <input type="text" name="search_query" style="margin-bottom: 10px;" placeholder="Pretraga artikala">
            <input type="submit" value="Pretraži">
        </form>
    </div>
    <?php

    // Check if the current page is the shop page
    if (is_shop()) {
        $global_filtered_product_ids = product_filter_plugin_handle_filtering();
        if (!empty($global_filtered_product_ids)) {
            echo '<div class="product-filter-results">';
            echo "ID: " . implode(', ', $global_filtered_product_ids);
            echo '</div>';
        }
    }

    return ob_get_clean();
}
add_shortcode('product_filter', 'product_filter_plugin_shortcode');

/* product-filter-plugin.js */

(function($) {
    $(document).ready(function() {
      // Submit the filter form on enter key press in the input field
      $('.product-filter-form input[type="text"]').keypress(function(e) {
        if (e.keyCode === 13) {
          e.preventDefault();
          $('.product-filter-form').submit();
        }
      });
    });
  })(jQuery);
  

/* product-filter-plugin.css */

.product-filter-container {
    margin-bottom: 20px;
  }
  
  .product-filter-form input[type="text"] {
    padding: 8px;
    font-size: 16px;
  }
  
  .product-filter-results {
    margin-top: 20px;
  }
  
  .product-filter-results .product-item {
    margin-bottom: 10px;
    margin-top: 10px;
    padding: 10px;
    border: 1px solid #ccc;
  }
  

任何帮助都是好的。预先感谢

我尝试使用 ChatGPT 但它还不是那么先进。我尝试将代码添加到主题的functions.php中，但它不起作用。

它打印出这个：

但是，我希望它在这里：

Answer 1

首先，在您的 jQuery 代码中，

(function($){ })(jQuery);

已经包含

ready()

事件，因此您不需要

$(document).ready(function() {

。

现在有一种更简单、更有效的方法可以直接从描述中过滤产品。尝试以下重新访问的代码版本：

add_action('wp_enqueue_scripts', 'product_filter_plugin_enqueue_scripts');
function product_filter_plugin_enqueue_scripts() {
    wp_enqueue_script('product-filter-plugin-script', plugins_url('/assets/js/product-filter-plugin.js', __FILE__), array('jquery'), '1.0.0', true);
    wp_enqueue_style('product-filter-plugin-style', plugins_url('/assets/css/product-filter-plugin.css', __FILE__), array(), '1.0.0');
}

// Create a shortcode for the filtering functionality
add_shortcode('product_filter', 'product_filter_plugin_shortcode');
function product_filter_plugin_shortcode($atts) {
    ob_start();
    ?>
    <div class="product-filter-container">
        <form class="product-filter-form" action="<?php echo esc_url( wc_get_page_permalink( 'shop' ) ); ?>" method="GET">
            <input type="hidden" name="post_type" value="product">
            <input type="text" name="search_query" style="margin-bottom: 10px;" placeholder="Search articles">
            <input type="submit" value="Search">
        </form>
    </div>
    <?php
    return ob_get_clean();
}

// Filter products from their description
add_filter('posts_clauses', 'filter_from_product_description', 10, 2 );
function filter_from_product_description( $clauses, $query ) {

    if( is_shop() && isset($_GET['search_query']) && ! empty($_GET['search_query']) && $query->is_post_type_archive('product') ) {
        global $wpdb;

        $string = esc_attr($_GET['search_query']);

        $clauses['where'] .= " AND {$wpdb->prefix}posts.post_content LIKE '%{$string}%' ";
    }
    return $clauses;
}

product-filter-plugin.js

文件中的jQuery代码：

(function($) {
    $('.product-filter-form input[type="text"]').keypress(function(e) {
        if (e.keyCode === 13) {
            e.preventDefault();
            $('.product-filter-form').submit();
        }
    });
})(jQuery);

CSS 保持不变。

已测试且有效。