Common Programming Questions about WooCommerce Ajax Layered Navigation With Answers

January 9, 2017,
Common Programming Questions about WooCommerce Ajax Layered Navigation With Answers
Customers often face some problems after installing plugins on their websites. Some of these problems occur on the coding end while at the same way they face some queries at the time of integrating/installing a third party extension on their website. It is quite hard for us to answers all the questions we receive at the backend because it requires a lot of research and time, however, it is our first priority to support customers by any possible way. Here we would like to answer some of the queries raised by end users and which are occurring commonly at the customer's end. Below are the top questions about WooCommerce Ajax Product Filter plugin which have been asked by our customers and their solutions from our experts.
Important Note: These are the answers provided by the community and best rated by the community as well. 

Question #1:

How to Filter Products by Custom Attributes in WooCommerce For example, there are 5 products with attribute "color" containing “red, green, blue, yellow” and another 3 with attribute "color" containing "blue, green, black". Users want to apply filter on all products to retrieve product with color value “red”

Answer

From lot of data on one of my sites here is how we implemented this for one of the options. Look at the $args:
$args=array('meta_query'=>$meta_query,'tax_query'=>array($query_tax),'posts_per_page' => 10,'post_type' => 'ad_listing','orderby'=>$orderby,'order'=>$order ,'paged'=>$paged);
And "$meta_query" contains:
$key="your_custom_key"; //custom_color for example
$value="blue";//or red or any color
$query_color = array('key' => $key, 'value' => $value);
$meta_query[] = $query_color;
After this pass $args as parameter to $query_posts
query_posts($args);

Question #2

For example you have two products i.e. product A and product B Product A has Color: Blue, Red and Green with brand: Brand A, Brand B Product B has Color: Pink, Red, black. Users want is to get all products with an attribute of Color [red and green] with [Brand A] in a single query via custom PHP. The question is where should user put the product attributes in the code? The function.php is:
function advanced_search(){

     $html = "";
     $args = array( 'post_type' => 'product','product_cat' => 'yarn');
     $loop = new WP_Query( $args );
     while ( $loop->have_posts() ){
         $loop->the_post();
         ob_start();
         get_template_part( 'templates/part', 'search-result' ); 
         $html = ob_get_contents();
         ob_end_clean();
     }  
     wp_send_json(array(  "product_id" => $product_id , "html"  => $html ));
}
add_action('wp_ajax_get_advanced_search', 'advanced_search');
add_action('wp_ajax_nopriv_get_advanced_search', 'advanced_search'); 

Answer

You should achieve what you are looking to d by combining ‘tax_query’ with ‘WP_query’. For example:
$query = new WP_Query( array(
    'tax_query' => array(
        'relation'=>'AND',
        array(
            'taxonomy' => 'pa_brand',
            'field' => 'slug',
            'terms' => 'evga'
        )
    )
) );

Question #3

User wants to show different attributes for each category in WooCommerce? For example you have five categories with different product attributes. How can you display only relevant attributes of each category with the help of WooCommerce Ajax Layered Navigation Plugin?

Answer

This is quite simple, you just need to navigate to the WooCommerce Ajax product filter plugin from the backend by choosing Appearance >> Widgets >> Add Ajax plugin to the sidebar

Question #4

User wants to add a jQuery gallery to a PHP page that uses Ajax for product filtering. when the 'Reset' button is clicked to reload the orignal product listing,  jQuery gallery reloads and the script does not fully comeback. Users tried these two scripts to reinitialize the gallery Current Script:
 type="text/javascript" charset="utf-8">
    $(document).bind('m-ajax-after')(function() {
        $('#gallery').finalTilesGallery();
    });
Previous Script
jQuery(document).bind('m-ajax-after', function(e, selectors, url, action) {
    $('#gallery').finalTilesGallery();
});

Answer:

You are attaching ‘m-ajax-after’ incorrectly, the correct way is:
$(document).bind('m-ajax-after', function() {
And, if you have the latest version of jQuery then this method is more preferable
$(document).on('m-ajax-after', function() {
    alert('m-ajax-after invoked');
    $('#gallery').finalTilesGallery(); //Final Tiles Grid function apparently
}); 

Question #5

User installed WooCommerce Ajax Layered Navigation extension to my website sidebar. The problem with layered navigation widget is that it works only on category pages and not on product listing pages. I how to make it work on product listing pages only?

Answer

The main problem with this is incorrect nginx configuration
location {
    try_files $uri $uri/ /index.php?q=$uri$args
}
The correct value is
try_files $uri $uri/ /index.php?$args

WooCommerce Ajax Product Filter Plugin by FMEAddons

ajax