0

i'm try to filter posts by an cascade dropdown categories. But when i select an option of the cascade, he showing all the posts. How can i filter ONLY posts through the selected option?

This is my structure:

Functions.php

    function ajax_filter_posts_scripts() {
  // Enqueue script
  wp_register_script('afp_script', get_template_directory_uri() . '/assets/js/ajax-filter-posts.js', false, null, false);
  wp_enqueue_script('afp_script');

  wp_localize_script( 'afp_script', 'afp_vars', array(
        'afp_nonce' => wp_create_nonce( 'afp_nonce' ), // Create nonce which we later will use to verify AJAX request
        'afp_ajax_url' => admin_url( 'admin-ajax.php' ),
      )
  );
}
add_action('wp_enqueue_scripts', 'ajax_filter_posts_scripts', 100);

// Script for getting posts
function ajax_filter_get_posts( $taxonomy ) {

  // Verify nonce
  if( !isset( $_POST['afp_nonce'] ) || !wp_verify_nonce( $_POST['afp_nonce'], 'afp_nonce' ) )
    die('Permission denied');

  $taxonomy = $_POST['taxonomy'];

  // WP Query
    $args = array(
    'exclude' => '1,2,4,5,7,8,9,10,11,12',
    'post_type' => 'post',
    'nopaging' => true, // show all posts in one go
    );
  echo $taxonomy;
  // If taxonomy is not set, remove key from array and get all posts
  if( !$taxonomy ) {
    unset( $args['tag'] );
  }

  $query = new WP_Query( $args );

  if ( $query->have_posts() ) : while ( $query->have_posts() ) : $query->the_post(); ?>
      <div class="col-md-4">
        <div class="img-thumb">
            <a href="<?php the_field('link_do_case'); ?>">
                <?php the_post_thumbnail(); ?>      
            </a>                                                                    
        </div>
        <small><?php the_title(); ?></small>
    </div>

  <?php endwhile; ?>
  <?php else: ?>
    <h2>Case não encontrado</h2>
  <?php endif;

  die();
}

add_action('wp_ajax_filter_posts', 'ajax_filter_get_posts');
add_action('wp_ajax_nopriv_filter_posts', 'ajax_filter_get_posts');

This is my script

jQuery(document).ready(function(jQuery) {
    jQuery('.post-tags select').on('change', function(event) {
        console.log('mudou');
        // Prevent default action - opening tag page
        if (event.preventDefault) {
            event.preventDefault();
        } else {
            event.returnValue = false;
        }

        // Get tag slug from title attirbute
        var selecetd_taxonomy = jQuery(this).attr('title');

        // After user click on tag, fade out list of posts
        jQuery('.tagged-posts').fadeOut();

        data = {
            action: 'filter_posts', // function to execute
            afp_nonce: afp_vars.afp_nonce, // wp_nonce
            taxonomy: selecetd_taxonomy, // selected tag
            };

        jQuery.post( afp_vars.afp_ajax_url, data, function(response) {

            if( response ) {
                // Display posts on page
                jQuery('.tagged-posts').html( response );
                // Restore div visibility
                jQuery('.tagged-posts').fadeIn();
            };
        });
    });
});

And this is my structure page

<div id="ajax-cases">
<?php
    // WP Query
    $args = array(
    'post_type' => 'post',
    'exclude' => '1,2,4,5,7,8,9,10,11',
    'post_status' => 'publish',
    'nopaging' => true, // show all posts in one go
    );
   $query = new WP_Query( $args );
   $tax = 'category';
   $terms = get_terms( $tax, $args);
   $count = count( $terms );

    if ( $count > 0 ): ?>
        <div class="post-tags">
            <h2>Busque pelo tipo de Trabalho</h2>
            <?php
            echo '<select>';
                foreach ( $terms as $term ) {
                    $term_link = get_term_link( $term, $tax ); 
                    echo '<option value="' . $term_link . '" class="tax-filter">' . $term->name . '</option> ';

                }
            echo '</select>';
             ?>
        </div>
    <?php endif ;?>
    <div class="tagged-posts">
      // here must be show the posts selected trough the category option
    </div>              

  • I have an idea... data = { action: 'filter_posts', // function to execute afp_nonce: afp_vars.afp_nonce, // wp_nonce taxonomy: selecetd_taxonomy, // selected tag }; this code must be link with my function? – Julio Rodrigues Mar 15 '17 at 14:01
0

In your code, I have found 2 issues:

1) In your ajax function ajax_filter_get_posts(), you have missed tax_query in your arg.

Your ajax function ajax_filter_get_posts() should be as below:

function ajax_filter_get_posts( $taxonomy ) {

 // Verify nonce
 if( !isset( $_POST['afp_nonce'] ) || !wp_verify_nonce( $_POST['afp_nonce'], 'afp_nonce' ) )
   die('Permission denied');

 $taxonomy = $_POST['taxonomy'];

 // WP Query
   $args = array(
   'exclude' => '1,2,4,5,7,8,9,10,11,12',
   'post_type' => 'post',
   'nopaging' => true, // show all posts in one go
   );
 echo $taxonomy;
 // If taxonomy is not set, remove key from array and get all posts
 if( !$taxonomy ) {
   unset( $args['tag'] );
 }else{
   // This is the code which you are missing. You need to add taxonomy query if taxonomy is set.
   $arg['tax_query']= array(
     array(
       'taxonomy' => 'category',
       'field' => 'slug',
       'terms' => array( $taxonomy ),
       'include_children' => true, // set true if you want post of its child category also
       'operator' => 'IN'
           ),
   );
 }

 $query = new WP_Query( $args );

 if ( $query->have_posts() ) : while ( $query->have_posts() ) : $query->the_post(); ?>
     <div class="col-md-4">
       <div class="img-thumb">
           <a href="<?php the_field('link_do_case'); ?>">
               <?php the_post_thumbnail(); ?>      
           </a>                                                                    
       </div>
       <small><?php the_title(); ?></small>
   </div>

 <?php endwhile; ?>
 <?php else: ?>
   <h2>Case não encontrado</h2>
 <?php endif;

 die();
}

2) In your structure page, replace the tag line link with below line:

echo '<option value="' . $term_link . '" class="tax-filter" title="'.$term->slug.'">' . $term->name . '</option> ';

3) In your jQuery, change the way you are getting selected taxonomy value:

var selecetd_taxonomy = jQuery(this).find('option:selected').attr("title");

By doing above 3 changes you will get post of only selected category.

Hope this will help you.

  • Look man rufiz.com.br/cases - this is the page. I make the 3 changes, but when i select a option, that showing all the posts, and doesn't filtering by categories.. – Julio Rodrigues Mar 15 '17 at 14:30
0

In your jQuery you have jQuery('.post-tags select').on('change', function(event) { but when I look at the source code of your page the dropdown is <select id="dropdown_select" class="dropdown_options">, I don't think your script is watching the correct item. Try correcting that in conjunction with the other answer and see if that has an effect.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.