Your button (+ SEE MORE PRODUCTS) should call an AJAX function to load 4 more products from the database.
To use AJAX paging you need:
Queue a script in Wordpress that will call the AJAX function and AJAX itself
Load the offset of posts in the script (to skip products that have already appeared)
Add the function that will be called by AJAX
So to get started in your theme's functions.php:
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% of your theme you add the code that will call AJAX, and add a variable scripts.js , counting which products 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 the javascript. For this you need to use the offset
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 an example. Ideally, the functions have unique names and their divs have ids. Although most functions of plugins and Wordpress themes are in English, it is best practice to add the name of your theme / plugin before the function name.
I hope it helps!
