Friday, 13 October 2023

WooCommerce custom filtration code not showing products

I'm creating Web Shop that sells tech and that kind of products. Client wants filters to search descriptions of the products and to filter it by that. For example: Let's say 10 out of 50 products have 'i7' in their descriptions. I created the code that searches every products description and filters it correctly. Firstly, I created so that i search the term i want to filter, later i was planning on adding usual filters so that user can just click on it. Nevertheless, when i search 'i7' it just prints IDs of the products that contain 'i7' in their description below the search button. I want it to show only that products in Shop section where all products show, so basically to show it like regular filters.

Here's the code of the "filter" i created:

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;
  }
  

Any help is good. Thanks in advance

I tried using ChatGPT but it's not that advanced yet. I tried adding code to the functions.php of my theme but it's not working.

It prints out this: prints below search button

But, I want it to be here:

prints where all other products usually be



from WooCommerce custom filtration code not showing products

No comments:

Post a Comment