Como adicionar paginação via ajax sem reload dentro de um elemento loop grid do Elementor

Ivon Filho

Procurando desenvolvedor freelancer para seu projeto?

Eis o código:

<style>
.elementor-widget-loop-grid {
    position: relative;
}

/* Overlay dentro do container */
.elementor-widget-loop-grid .spinner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.7);
    z-index: 9999;
    display: none; /* inicialmente oculto */
}

.elementor-widget-loop-grid .spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 4px solid #f3f3f3;
    border-top: 4px solid #555;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spinner 0.8s linear infinite;
}

@keyframes spinner {
    100% {
        transform: rotate(360deg);
    }
}

/* Efeitos fade */
.elementor-loop-container {
    transition: opacity 0.4s ease;
}

.elementor-loop-container.fading-out {
    opacity: 0.3;
}
</style>

<div class="load-container">
    <div class="spinner-overlay">
        <div class="spinner"></div>
    </div>
    <div class="elementor-loop-container">
        <!-- Posts aqui -->
    </div>
    <div class="elementor-pagination">
        <!-- Paginação aqui -->
    </div>
</div>

<script>
jQuery(document).ready(function($) {
    var scrollOffset = 200;

    $(document).on('click', '.elementor-pagination a.page-numbers', function(e) {
        e.preventDefault();

        var $clickedLink = $(this);
        var $loadContainer = $clickedLink.closest('.elementor-widget-loop-grid');
        var $container = $loadContainer.find('.elementor-loop-container');
        var $pagination = $loadContainer.find('.elementor-pagination');
        var $spinnerOverlay = $loadContainer.find('.spinner-overlay');
        var url = $clickedLink.attr('href');

        // Mostra spinner e aplica fade-out no container
        $spinnerOverlay.show();
        $container.addClass('fading-out');

        $.ajax({
            url: url,
            type: 'GET',
            success: function(data) {
                var $data = $(data);
                var $newPosts = $data.find('.elementor-loop-container').html();
                var $newPagination = $data.find('.elementor-pagination').html();

                // Atualiza o conteúdo
                $container.html($newPosts);
                $pagination.html($newPagination);

                // Atualiza a URL sem reload
                history.pushState({}, '', url);

                // Rola suavemente até o topo do container com offset
                $('html, body').animate({ scrollTop: $loadContainer.offset().top - scrollOffset }, 600);
            },
            complete: function() {
                // Remove o fade-out e esconde o spinner após um pequeno delay
                setTimeout(function() {
                    $container.removeClass('fading-out');
                    $spinnerOverlay.hide();
                }, 300);
            }
        });
    });
});
</script>
Rolar para cima