wake-up-neo.com

WordPress Postsortierung mit AJAX

Ich habe eine Suchergebnisseite für einen benutzerdefinierten Beitragstyp. Ich möchte eine Ajax-Sortierfunktion haben. Sortieren Sie den Beitrag beispielsweise nach Taxonomie, ohne die Seite neu zu laden. Ein sehr einfaches Beispiel wird helfen. Vielen Dank  enter image description here 

Das Suchformular:

<form id="cptsearch" action="/" method="get">
    <input type="text" name="s" />
    <input type="hidden" name="post_type" value="lat" />
    <input id="searchsubmit" type="submit" alt="Search" value="Search" />
</form>

Vorlagenauswahl:

function template_chooser($template) {
    global $wp_query;
    $post_type = get_query_var('post_type');
    if( $wp_query->is_search && $post_type == 'lat' ) {
    return locate_template('page_lat.php');
    }
    return $template;
}
add_filter('template_include', 'template_chooser');

Dies ist die Ausgabevorlage page_lat.php :

Suchergebnisse (Derzeit werden nur Titel und Beitragstyp gedruckt:

if($_GET['s'] && !empty($_GET['s'])){

  $text =$_GET['s'];
}
 ?>


 <div class="container">

      <?php
        $args = array(
          'post_per_page'=> -1,
          's'=>$text
        );

        $query= new WP_Query($args);
        while($query->have_posts()): $query->the_post();
      ?>

      <div>
        <h5><?php the_title(); ?></h5>
        <strong>
          <?php echo get_post_type(); ?>
        </strong>
      </div>
    <?php endwhile; wp_reset_query(); ?>
  </div>
custom-post-typesajaxsearchsort
4
Latheesh V M Villa

Das ist also eine lange Frage, die Ihnen ein einfaches Beispiel gibt, das für Schritt 1 funktioniert.) Cat1 cat2 cat3 Für diesen Vorgang müssen Sie zuerst die benutzerdefinierte Taxonomie in einem Formular aufrufen

Schritt 2) Angenommen, Sie haben cat1 cat2 als Kontrollkästchen mit dem Wert der benutzerdefinierten Taxonomie-ID

Schritt 3) Fügen Sie ein Klickereignis hinzu

Schritt 4) Rufen Sie Ihre Ajax-Funktion auf

Gehen Sie zu diesem Beispiel - http://www.tinyjewelbox.com/product-category/jewelry/ - Ich hoffe, Sie wollten dieses Ziel erreichen. Aktivieren Sie die Kontrollkästchen für die benutzerdefinierte Taxonomie und für die Filter-Sortierung nach Taxonomie.

Methode - fangen wir an: -

Dies ist die Ausgabevorlage page_lat.php:

Suchergebnisse (Derzeit werden nur Titel und Beitragstyp gedruckt:

            <?php 
            if($_GET['s'] && !empty($_GET['s'])){
              $text =$_GET['s'];
              $posttype = $_GET['post_type'];

            }
            else{
                $posttype = 'custom_post_type';
            }
            ?>
            //This will fetch your custom taxonomy cat1, cat2 , cat3

            <form action="" method="" class="" id="filter-menu" >
            <?php 
            $terms = get_terms('post_tag',, array('hide_empty' => false) );
            foreach($terms as $filteroption)
            {
                <input type="checkbox"  name="filter[]" value="<?php echo $filteroption->term_id; ?>" onclick="filtermenu()" >  
                <?php echo $filteroption->name; ?>
            }
            <input type="hidden" name="posttype" id="posttype" value="<?php echo $posttype; ?>" />
            ?>
            <form>
             <div class="container">
                 <div class="load_html">

                      <?php
                        $args = array(
                          'post_per_page'=> -1,
                          's'=>$text
                        );

                        $query= new WP_Query($args);
                        while($query->have_posts()): $query->the_post();
                      ?>

                      <div>
                        <h5><?php the_title(); ?></h5>
                        <strong>
                          <?php echo get_post_type(); ?>
                        </strong>
                      </div>
                    <?php endwhile; wp_reset_query(); ?>
                  </div>
              </div>

Klickereignis auf Klick hinzufügen

                <script> //this a click event of checkbox which call ajax action
            function filtermenu(paged)
            {   
            var filtercheckedbox = // get your checkbox value via jquery; 
            var posttype = // get your posttype value; jQuery('#posttype').val(0);
            jQuery.ajax({
                url: AJAXURL,
                data: {
                    'action' : 'filter_menu' ,
                    'checkbox': filtercheckedbox, 
                    'posttype' :posttype,
                    'paged' : 1, 
                },
                type: 'POST',
                success: function(data) {
                        jQuery(".load_html").html(data);    
                }
            });     

            }   
            </script>

Fügen Sie Ihre Aktion in functions.php hinzu

            <?php 
            // add this function to functions.php this is your ajax action 
            add_action( 'wp_ajax_filter_menu', 'wp_ajax_filter_menu' );
            add_action( 'wp_ajax_nopriv_filter_menu', 'wp_ajax_filter_menu' );

            function wp_ajax_filter_menu()
            {
            global $post, $wp_query;

            $args = array(
                'post_type' => '$_POST['post_type']',
                'tax_query' => array(
                                'relation' => 'AND',
                                 array(
                                    'taxonomy' => 'custom_taxonomy name',
                                    'field'    => 'term_id',
                                    'terms'    => array($_POST['checkbox']),
                                 ),
                ),
                'orderby'   => 'ASC',                   
            );

                $filteroption = new WP_Query( $args );
                if ( $filteroption->have_posts() ) :
                while ($filteroption->have_posts()) : $filteroption->the_post();
                  ?>

                  <div>
                    <h5><?php the_title(); ?></h5>

                  </div>
                <?php 
                endwhile; 
                else: 
                    return false; 
                endif;
            }   
            die;
            }
            ?>
1
sakshi ranga

Versuchen Sie dies etwas genauer zu untersuchen:

Begriffe bekommen: 

$type   = get_terms( array('type') );

Holen Sie sich alle Taxonomien: 

foreach ($type as $t) {
        if(!in_array($t->term_id, $type)){
                    echo '<label class="filter '.$t->slug.'">';
                    echo '<input type="checkbox" data-filter=".'. $t->term_id .'" class="filter-check '. $t->term_id .'" value="'. $t->term_id .'" name="type[]" ><div class="filter-title">'. $t->name .'</div>';
                    echo '</label>';
        }
}

Sehen Sie sich Ihren benutzerdefinierten Beitragstyp an 

if( !empty( $_POST['options_type'] ) ){
    array_Push($args['tax_query'],   array(
              'taxonomy' => 'type',
              'field'    => 'term_id',
              'terms'    => $_POST['options_type'],
            )
          );
   }

in js Datei führen Sie Ihren Ajax-Aufruf 

$("input:checkbox").on( "change", function() {

            var options_type = Array();
$( 'input[name="type[]"]:checked' ).each(function( index, value ) {
          options_type.Push( $(this).val() );
            });

  jQuery.ajax({
            url : filters.ajax_filter,
            type : 'post',
            data : {
                action : 'filter_reports',
                options_type : options_type,

}});

1
Dionoh

mach es mit xmlhttp request

<button type="button" onclick="loadDoc()">Sort Type X</button>
<div id="result"></div>
<script>
function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("result").innerHTML = this.responseText;
    }
  };
  xhttp.open("POST", "//example.com/s.php", true);
  xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  xhttp.send("search=XXX&sort=YYY");
}
</script>

in s.php

    <?php
        $xxx = $_POST['search'];
        $yyyy = $_POST['sort'];
        $args = array( //your query
        );
        while ( have_posts() ): the_post();
        // display post
        if ( have_posts() ): // If this is the last post, the loop will start over
                // Do something if this isn't the last post
        endif;
endwhile;
        ?>
1
David Corp