Ajax filter in wordpress

Asked

Viewed 425 times

2

Hello, I wonder if anyone has done any functionality like this site, http://www.todeschinisa.com.br/pt/onde-encontrar filtering the posts using a form and ajax so you don’t need to give the page the Reload.

I’m in the following situation, I created a custom post type resellers, where I activated 'taxonomies' => array( 'category' ), created the category Brazil with children as states, and within each state the cities.

But I’m not able to create a form or filter the post

[Brasil] [Estado] [Cidade] [Filtrar]

it would be something like that.

ajax wordpress twitter-bootstrap filter custom-post-types

  • Create the functions in functions.php and access using ajax. Like this: http://www.kenner.com.br/action-gel-explore/

  • show, well that would take some tutorial with step by step to base?

  • To advance, take a look at this article that has the function to include in functions.php and the javascript code to access the function that later when I get home mount a complete answer that will facilitate the understanding. https://codex.wordpress.org/AJAX_in_Plugins

  • Blz, I’ll read the article. probably tomorrow I’ll resume the development of the project

  • Andre, you gave me a lot of light, tell me one thing, I’m very new in the area, you recommend doing the city state country filter using category, a custom field with ACF create the fields, Parents, state and city

  • Patrick, in this one I implemented with new table in mysql because it comes from a spreadsheet sent to the load.

Show 1 more comment

1 answer

1


For security, so you don’t have requests for multiple php files, I advise you to create the functions in functions.php and access the functions using ajax.

For this implementation I used only one table, but you could mount using wordpress storage format, depends on the time and deadline. :)

In the functions.php, create functions and actions to allow you to pass parameters:

// Ação de callback do Ajax
function get_cidade_from_uf() {
  global $wpdb;
  $query = " SELECT  distinct m.TXT_CIDADE FROM tb_lojas m
             WHERE m.COD_UF = '".$_GET['COD_UF']."' ORDER BY TXT_CIDADE ASC ";
  $cidades = $wpdb->get_results($query, OBJECT);    
  die(json_encode($cidades));
}
add_action( 'wp_ajax_get_cidade_from_uf', 'get_cidade_from_uf' );
add_action( 'wp_ajax_nopriv_get_cidade_from_uf', 'get_cidade_from_uf' );

// Ação de callback do Ajax
function get_bairro_from_cidade_uf() {
  global $wpdb;
  $query = " SELECT  distinct m.TXT_BAIRRO FROM tb_lojas m
             WHERE m.COD_UF = '".$_GET['COD_UF']."' 
               AND m.TXT_CIDADE = '".$_GET['TXT_CIDADE']."'
             ORDER BY TXT_BAIRRO ASC ";
  $bairros = $wpdb->get_results($query, OBJECT);
  die(json_encode($bairros));   
}
add_action( 'wp_ajax_get_bairro_from_cidade_uf', 'get_bairro_from_cidade_uf' );
add_action( 'wp_ajax_nopriv_get_bairro_from_cidade_uf', 'get_bairro_from_cidade_uf' );

// Ação de callback do Ajax
function get_procurar_loja() {
  global $wpdb;
  $uf = $_GET['COD_UF'];
  $cidade = $_GET['TXT_CIDADE'];
  $bairro = $_GET['TXT_BAIRRO'];
  $query = " SELECT l.TXT_LOJA, l.TXT_ENDERECO, l.TXT_BAIRRO, l.TXT_CIDADE, l.COD_UF FROM tb_lojas l WHERE l.COD_UF = '".$uf."' ";
  if ( (isset( $cidade)) ) {
     if ( ($cidade !='') && ($cidade != 'undefined') && ($cidade != 'CIDADE') && ($cidade != 'SELECIONE UMA CIDADE') ){
       $query .= " AND l.TXT_CIDADE = '".$cidade."' ";
     }
  }
  if ( (isset( $bairro)) ) {
     if ( ($bairro !='') && ($bairro != 'undefined') && ($bairro != 'BAIRRO') && ($bairro!= 'SELECIONE UM BAIRRO') ){
         $query .= " AND l.TXT_BAIRRO = '".$bairro."' ";
     }
  }
  $query .= "   ORDER BY l.TXT_LOJA ASC ";    
  $lojas = $wpdb->get_results($query, OBJECT);
  die(json_encode($lojas)); 
}
add_action( 'wp_ajax_get_procurar_loja', 'get_procurar_loja' );
add_action( 'wp_ajax_nopriv_get_procurar_loja', 'get_procurar_loja' );

In the javascript you place the events and treatments:

 $("#btnProcurar").click(function() {
    var inputUF = $("#txtUF").val();    
    var inputCidade = $("#txtCIDADE").val();
    var inputBairro = $("#txtBAIRRO").val();    
    $.ajax({
        url: '/wp-admin/admin-ajax.php',
        type: 'get',
        data: {
            'action': 'get_procurar_loja',
            'COD_UF': inputUF,
            'TXT_CIDADE': inputCidade,
            'TXT_BAIRRO': inputBairro
        },
        success: function( data ){           
            var data = JSON.parse(data);            
            var out = '<ul>';
            jQuery.each(data, function(index, item) {
                var loja = item.TXT_LOJA.trim();
                 out += "<li oncopy='javascript:textocopiado(\"" + loja + "\");'><b><span style='color:orangered;font-family:Trade Gothic LT Std Bold Sinistra;'>"+item.TXT_LOJA+"</span></b><br><span style='color:#f8f8ff;font-family:Trade Gothic LT Std Bold Condensed;'>"+item.TXT_ENDERECO+"<br>"+item.TXT_BAIRRO+" - "+item.TXT_CIDADE+" - " + item.COD_UF + "<br></li>";            
              });
            out += '</ul>';
            $('#hotsite-lojas').html(out);                      
            $('#hotsite-lojas').show();
        }
    });
  });
  $("#txtUF").change(function() {
    var inputUf = $("#txtUF").val();
    $.ajax({
        url: '/wp-admin/admin-ajax.php',
        type: 'get',
        data: {
            'action': 'get_cidade_from_uf',
            'COD_UF': inputUf
        },
        success: function( data ){          
            var data = JSON.parse(data);
            var selectCidade = document.getElementById("txtCIDADE");            
            selectCidade.innerText = null;
            var selecione = document.createElement("option");
            selecione.text = '  SELECIONE UMA CIDADE';
            selectCidade.add(selecione);
            jQuery.each(data, function(index, item) {               
              var option = document.createElement("option");              
              option.text = '  ' + item.TXT_CIDADE;
              if (option.text != 'undefined') {
                selectCidade.add(option);
              }
            });                     
        }
    });
  });
  $("#txtCIDADE").change(function() {
    var inputUF = $("#txtUF").val();
    var inputCidade = $("#txtCIDADE").val();
    $.ajax({
        url: '/wp-admin/admin-ajax.php',
        type: 'get',
        data: {
            'action': 'get_bairro_from_cidade_uf',
            'COD_UF': inputUF,
            'TXT_CIDADE': inputCidade
        },
        success: function( data ){          
            var data = JSON.parse(data);
            var selectBairro = document.getElementById("txtBAIRRO");            
            selectBairro.innerText = null;
            var selecione = document.createElement("option");
            selecione.text = '  SELECIONE UM BAIRRO';
            selectBairro.add(selecione);
            jQuery.each(data, function(index, item) {               
              var option = document.createElement("option");
              option.text = '  ' + item.TXT_BAIRRO;
              if (option.text != 'undefined') {
                selectBairro.add(option);
              }
            });         
        }
    });
  });

I hope it helps.

With Custom Type would be much better, but then it’s like a challenge... and don’t forget to share.

Big hug

  • show, I will try to do here once I have the result working share for the guys

  • Andre, who develops the longest I can answer this, would know how to create a dynamic way to insert the information in the table, for example create a custom post type and from it some table to later pull this information. I do not want to lose the dynamism of wordpress, every time you need to add a resale need to edit the table

  • so stop a minute (or more, rs) I will write with custom post types..

  • 1

    I did otherwise, I will post as soon as I have a time, but I did with search, the person type the location he says whether he has or not. But if you can help the class with custom post I could not find any material explaining how to do

Browser other questions tagged ajax wordpress twitter-bootstrap filter custom-post-types

You are not signed in. Login or sign up in order to post.