How to show more posts when you click button?

Question

In the loop I put to show 12 Woocommerce products.

<div id="vitrine" class="container-fluid">
        <?php
            $args = array(
                'post_type' => 'product',
                'posts_per_page' => 12
                );
            $loop = new WP_Query( $args ); ?>           

            <div class="row">
                <div class="col-md-offset-1 col-md-10">
                <?php if ( $loop->have_posts() ) {
                while ( $loop->have_posts() ) : $loop->the_post(); ?>
                    <div class="col-md-3 prod">
                        <div class="interna">
                            <div class="faixa"></div>
                            <?php woocommerce_get_template_part( 'content', 'product' );?>
                        </div>
                    </div>
                <?php endwhile;
            } else {
                echo __( 'No products found' );
            }
            wp_reset_postdata();
        ?>
    </div>

Behold: http://kisadesign.com.br/paulalima/

I would like to put a button (+ SEE MORE PRODUCTS) and each time someone clicks on it 4 more products appear.

Does anyone have any suggestions on how to do this?

Answer 1

Your button (+ SEE MORE PRODUCTS) must call an AJAX function to load 4 more products from the database.

To use paging with AJAX you need:

1. Queue a script in Wordpress that will call the AJAX function and AJAX itself
2. Load post offset in script (to skip products that have already appeared)
3. Add the function that will be called by AJAX

So to get started on the functions.php of your theme:

add_action( 'wp_enqueue_scripts', 'meus_scripts', 100 );

function meus_scripts() {
wp_enqueue_script(
    'meus_scripts',
    get_template_directory_uri() . '/js/scripts.js?ver=1.0', //esse é o arquivo .js do seu tema que vai conter todos os scripts (pode ser diferente no seu tema)
    array( 'jquery' ),
    null,
    false
);
wp_localize_script(
    'meus_scripts',
    'WPaAjax',
    array(
        'ajaxurl' => admin_url( 'admin-ajax.php' )
    )
);
}

In the scripts.js of your theme you add the code that will call AJAX, and add a variable offset, counting the products that have already been loaded, which will be called later by Wp_query.

 jQuery(document).ready(function($){

$('#maisprodutos').click(function(e){  
    e.preventDefault(); 
    var offset = $('.col-md-offset-1 col-md-10').length; //o ideal é dar uma id para essa div
    $.post(
        WPaAjax.ajaxurl,
        {
            action : 'mais_produtos',
            offset : offset
        },
        function( response ) {
            $('.faixa').append( response );
        }
    );
});

});

Now all you need to do is add the function that will process the AJAX call according to javascript. For this you need to use the action wp_ajax

add_action('wp_ajax_mais_produtos', 'mais_produtos');
add_action('wp_ajax_nopriv_mais_produtos', 'mais_produtos');

function mais_produtos(){
global $wp_query;

$offset = $_POST['offset'];
$args = array(
    'offset' => $offset,
    'posts_per_page' => 4
);
$wp_query = new WP_Query( $args );

woocommerce_get_template_part( 'content', 'product' );

exit;
}

Your code will look like this:

<div id="vitrine" class="container-fluid">
    <?php
        $args = array(
            'post_type' => 'product',
            'posts_per_page' => 12, //Quantos produtos aparecerão na página inicial?
            );
        $loop = new WP_Query( $args ); ?>           

        <div class="row">
            <div class="col-md-offset-1 col-md-10">
            <?php if ( $loop->have_posts() ) {
            while ( $loop->have_posts() ) : $loop->the_post(); ?>
                <div class="col-md-3 prod">
                    <div class="interna">
                        <div class="faixa"></div>
                        <?php woocommerce_get_template_part( 'content', 'product' );?>
                    </div>
                </div>
            <?php endwhile;
        } else {
            echo __( 'No products found' );
        }
        wp_reset_postdata();
    ?>
</div>
<div id="mais-prod">
    <p><a href="#" id="mais_produtos">+ VEJA MAIS PRODUTOS</a></p>
    <div class="divisoria"></div>

</div>

This code is just one example. Ideally, functions have unique names and your Ids have ids. Although most of the functions of plugins and Wordpress themes are in English, the best practice is to add the name of your theme/plugin before the function name.

I hope it helps!