CODEWITHSUNDEEP
phpjqueryajaxwordpresswoocommerce
Polar
Polar

Reputation: 3537

How to create a Woocommerce Product Filter with AJAX?

I wanted to create my own Product Filter for Woocommerce with AJAX, I don't want to use any plugin. But there is one problem though, I don't know how to fetch the products by the selected filter or I don't know how my filter will apply to the products.

For example, if I want to have a filter for Ratings.

HTML

<select id="filter_ratings">
<option value="5">5 star</option>
<option value="4">4 star</option>
<option value="3">3 star</option>
<option value="2">2 star</option>
<option value="1">1 star</option>
</select>

jQuery

jQuery('#filter_ratings').change(function() {
        var values = jQuery(this).val();
        jQuery.ajax({
            url: ajax_object.ajax_url, 
            method: 'POST',
            data: {opc: values, action: 'filter_product_by_ratings', dataType: "json"},
            success: function(result){
                //Should I get all the products with the current filter?
                console.log('Filter Successful: ' + result);
            },
            error:function (xhr, ajaxOptions, thrownError) {
                console.log('Filter ERROR STATUS: ' + xhr.status);
                console.log('Filter Error: ' + thrownError);
            } 
        });
    });

function.php

add_action('wp_enqueue_scripts', 'add_js_scripts'); 
function add_js_scripts(){
    wp_enqueue_script( 'ajax-script', get_template_directory_uri().'/js/script.js', array('jquery'), '1.0', true );
    wp_localize_script( 'ajax-script', 'ajax_object', array( 'ajaxurl' =>   admin_url( 'admin-ajax.php' ) ) );
}

//call this function by ajax
function filter_product_by_ratings(){
   //what now?
   //How can I apply the current filter?
   //Should I fetch all the products by the current filter?
   //What about for other attributes like size, color, etc?
}

is there a guide on how to apply filters to the products by code in Woocommerce?

Upvotes: 1

Views: 7051

Answers (1)

Polar
Polar

Reputation: 3537

First of all, you will have an error of ajax_object as undefined or Object not found because you didn't localize it properly.

Look at your ajax url, ajax_object and ajax_url where in your function you localize it as ajax_object and ajaxurl. You simply missed the underscore in your ajax URL, it should be ajax_object.ajaxurl.

Refer to the link below on how to localize properly. https://developer.wordpress.org/reference/functions/wp_localize_script/

With your question as how to filter the products, you can use the WP_Query then just change the arguments depending on your needs. For example, since you want to fetch the products only then the post_type should be product and the other arguments will vary on your needs like orderby, ratings, etc.

Here's a sample of what your missing code in your function.php.

function filter_products(){

    $select_opc = $_POST['opc']; //here is your post data, you can use its value to filter the products

    $args = array('post_type' => 'product','posts_per_page' => 12); //change this arguments depending on your needs
    $loop = new WP_Query( $args );
    $products = '';
    if ( $loop->have_posts() ) {
        while ( $loop->have_posts() ) : $loop->the_post();
            $products .= wc_get_template_part( 'content', 'product' );
        endwhile;
    } else {
            $products = 'No products found';
    }
    echo $products;
    exit;

}

After getting the result of ajax, you can then replace the content of the products on your front-end, for example on your ajax.

//on ajax success
....
$('.products').html(result);

I hope it helps.

Upvotes: 2

Related Questions