将变量传递给wordpress函数并使用ajax刷新它

Question

I'm building a shopping page that list all the stores. I've created a sidebar with all the categories and a list with pagination. This list is generated by a wordpress function in my theme-functions.php , but when I click in any category, I'm redirected to another page (to http://<domain>/store from http://<domain>/category ). So I created a JavaScript function to prevent the link action using preventDefault and get his href value and set it as variable to pass it to the function via Ajax.

My question is: there is a way to pass this variable and refresh the wordpress function on the same page to show this list?

Code below:

Wordpress theme-function.php

function storeSingle() {

    $catUrl = $_POST['catUrl'];

    $paged = ( get_query_var('paged') ) ? get_query_var('paged') : 1;

    $args = array(
        'post_type'             =>  'lojas' ,
        'posts_per_page'        =>  5,
        'orderby'               =>  'title',
        'order'                 =>  'ASC',
        'paged'                 =>  $paged,
        'category_name' => $catUrl
);

    /* Added $paged variable */

    $exec = new WP_Query($args);

    if($exec->have_posts()):
        echo '<ul class="single-store">';
        while($exec->have_posts()):
            $exec->the_post();
            $categories = get_the_category($post->ID);
                echo "<li class='store-box'>";
                    echo '<a href=" '. get_the_permalink() .' ">';
                        echo '<h1>';
                            echo the_title();
                        echo '</h1>';
                    echo "</a>";

                    echo '<div class="store-info-box">';
                        echo '<span>';
                            echo '<i class="fa fa-map-marker" aria-hidden="true"></i>';
                            echo the_field('localizacao');
                        echo '</span>';
                        echo '<span>';
                            echo $categories[0]->name;
                        echo '</span>';
                    echo '</div>';

                echo "</li>";
        endwhile;
        echo '</ul>';
        if (function_exists(custom_pagination)) {
            custom_pagination($exec->max_num_pages,"",$paged);
        }
    endif;

}
add_action('wp_ajax_catUrl', 'catUrl');
add_action('wp_ajax_nopriv_catUrl', 'catUrl');

JavaScript function

$('.cat-item').on('click', 'a', function(e){
     e.preventDefault();
     var catUrl = this.href;
     catUrl = catUrl.split('/');

     $.ajax({
         type: "POST",
         url: 'http://localhost/asv/shopping/wp-admin/admin-ajax.php',
         dataType: 'json',
         data: {
              action: catUrl,
              catUrl: catUrl[5]
         },
         success: function(data){
              response(data),
              console.log('test' + data);
         }
     });
});

I've searched this a lot but I didn't find out how to use ajax in wordpress properly.

Answer 1

if you are getting results in you console.log('test' + data); seems like you just need to display this results back in your HTML container by replacing the current content with your ajax response.