1

No loop coloquei para mostrar 12 produtos do Woocommerce.

<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>

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

Gostaria de colocar um botão (+ VEJA MAIS PRODUTOS) e cada vez que alguém clicar nele aparecer mais 4 produtos.

Alguém tem alguma sugestão de como fazer isso?

1 Resposta 1

2

Seu botão (+ VEJA MAIS PRODUTOS) deve chamar uma função AJAX para carregar mais 4 produtos do banco de dados.

Para usar a paginação com AJAX você precisa:

  1. Enfileirar um script no Wordpress que vai chamar a função AJAX e o próprio AJAX
  2. Carregar o offset de posts no script (para pular os produtos que já apareceram)
  3. Adicionar a função que será chamada pelo AJAX

Então para começar no functions.php do seu tema:

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' )
    )
);
}

No scripts.js do seu tema você adiciona o código que vai chamar o AJAX, e adiciona uma variável offset, contando os produtos que já foram carregados, que vai ser chamada depois pelo 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 );
        }
    );
});

});

Agora tudo que você precisa fazer é adicionar a função que vai processar a chamada AJAX de acordo com o javascript. Para isso você precisa usar a ação 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;
}

O seu código vai ficar assim:

<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>

Esse código é apenas um exemplo. O ideal é que as funções tenham nomes únicos e que as suas divs tenham ids. Apesar de a maioria das funções de plugins e temas Wordpress estarem em inglês, a melhor prática é adicionar o nome do seu tema/plugin antes do nome da função.

Espero que ajude!

8
  • Consegui implementar conforme sua sugestão, porém estou com dificuldade em incrementar o offset. Da forma que está quando clico no botão (+ VEJA MAIS PRODUTOS) sempre os mesmo produtos aparecem. Teria alguma sugestão? Commented 30/03/2015 às 7:28
  • Da forma como está o js ele está contando o número de divs e retornando o offset var offset = $('.col-md-offset-1 col-md-10').length; //o ideal é dar uma id para essa div. Você criou uma id para a div? Depois dessa linha coloca um alert(offset) pra ver se ele está lendo a quantidade de divs corretamente... Commented 30/03/2015 às 13:00
  • coloquei uma id para a div, porém estou atribuindo o valor assim = Se (primeira vez) { var offset = 12} Se não {var offset = 4}. O problema agora é definir como identificar que é a primeira vez. Tem alguma sugestão? Commented 31/03/2015 às 13:48
  • Desculpe, mas não vi sua pergunta antes... pelo tempo acho que deve ter resolvido, mas se mais alguém aparecer com a mesma dúvida, o offset deve pegar a quantidade de produtos que aparecem e acrescentar no offset. Por exemplo se tem 12 produtos aparecendo, ele vai colocar offset 12 e pegar 4 produtos. Quando chamar de novo serão 16 produtos e é esse o valor de offset. O offset determina quantos posts serão "pulados" .Se você quiser mudar a quantidade de produtos buscados, tem que mudar o posts_per_page e não o offset... Commented 13/10/2015 às 0:16
  • 1
    @JohnQuimera Sim, é possível... é só acrescentar uma variável com a categoria à requisição ajax e tratar o resultado no JS. Mas hoje, se tivesse que responder essa pergunta novamente, indicaria o uso da REST API... Commented 29/05/2018 às 4:38

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .