Adicionando carregador personalizado à Listing Grid ao filtrar em AJAX

Coloque o ícone na página e torne-o animado

Inicialmente, crie uma seção acima do widget Listing Grid . Encontre e coloque os widgets padrão Elementor Icon e Heading lá.

Personalize o conteúdo ao seu gosto. Você pode ver o exemplo na imagem abaixo.

resultado final do carregador personalizado no construtor de páginas elementor

Na guia Configurações avançadas , cole o código CSS ID exclusivo no campo correspondente do widget Listing Grid .

listando o campo de id css da grade

Encontre o filtro que você usou na página e cole o mesmo ID no campo Query ID .

campo de ID de consulta de filtro

Em seguida, preencha o campo CSS ID da coluna onde o ícone e o título são colocados com um novo ID exclusivo.

campo de id css da coluna

Depois de definir o modelo do carregador, siga as etapas a seguir para torná-lo móvel.
Para criar uma animação, abra o Painel do WordPress > CSS e JS personalizados > Adicionar diretório CSS personalizado e cole o seguinte código CSS:

#loading_icon i {
    -webkit-animation: fa-spin 2s infinite linear;
    animation: fa-spin 2s infinite linear;

campo CSS e JS personalizado

Aviso

Em vez de “loading_icon”, digite o ID CSS que você definiu antes para a coluna com Icon e Heading .

Você pode verificar a página; o ícone estará carregando. Vamos ocultar o modelo assim que a página for carregada.
Adicione mais um código da mesma forma que você fez na etapa anterior:

#loading_icon {
    display:none;
}
#loading_icon i {
    -webkit-animation: fa-spin 2s infinite linear;
    animation: fa-spin 2s infinite linear;
}
Aviso

Cole o ID CSS da coluna em vez de “loading_icon”.

Definir condição para aparência do ícone

Para o bom funcionamento da função e animação, adicione o seguinte código JS:

Aviso

Como já usamos a primeira parte do código, copie e cole apenas a segunda parte .php. Além disso, lembre-se de alterar as seguintes partes do código. Na parte seguinte do código, coloque o slug da página onde o widget/bloco Listing Grid está localizado em vez do valor “jetsmartfilter-jetlisting-custom-spinner”. Em segundo lugar, cole o ID CSS da sua coluna em vez do valor “itchy-loader” anterior. E, por fim, coloque o ID CSS da sua Listing Grid em vez do valor “my-product-listing”.

partes do código php do carregador personalizado para alterar

view rawcustom_loader.css hosted with ❤ by GitHub

/*For Elementor Pro User – in Custom CSS tab*/
/*In the custom spinner container widget Custom CSS field */
selector {
display:none;
}
selector i {
-webkit-animation: fa-spin 2s infinite linear;
animation: fa-spin 2s infinite linear;
}
/*Others*/
#itchy-loader {
display:none;
}
#itchy-loader i {
-webkit-animation: fa-spin 2s infinite linear;
animation: fa-spin 2s infinite linear;
}
view rawcustom_loader.css hosted with ❤ by GitHub
view rawcustom_loader.php hosted with ❤ by GitHub

<?php
add_action( ‘wp_footer’, ‘itchycode_enhance_jetsmartfilters_loading_spinner’ );
function itchycode_enhance_jetsmartfilters_loading_spinner() {
//Only target on one of my page, jetsmartfilter-jetlisting-custom-spinner is my page slug
if( ! is_page(‘jetsmartfilter-jetlisting-custom-spinner’) ) return;
?>
<script>
document.addEventListener(‘DOMContentLoaded’, function() {
(($)=>{
//We must wait for the jQuery ready event because JetSmartFilters is not initialized yet
$(document).ready(function(){
//Get the spinner container
const spinnerContainer = document.getElementById(‘itchy-loader’);
//Get the listing container
const listingContainer = document.getElementById(‘my-product-listing’);
if(spinnerContainer && listingContainer) {
//Subscribe start loading event bus by JetSmartFilters
window.JetSmartFilters.events.subscribe(‘ajaxFilters/start-loading’, ()=>{
spinnerContainer.style.display = ‘flex’;
listingContainer.style.display = ‘none’;
})
//Subscribe end loading event bus by JetSmartFilters
window.JetSmartFilters.events.subscribe(‘ajaxFilters/end-loading’, ()=>{
spinnerContainer.style.display = ‘none’;
listingContainer.style.display = ‘flex’;
})
}
})
})(jQuery)
});
</script>
<?php
}
?>
view rawcustom_loader.php hosted with ❤ by GitHub

Você pode conferir o resultado na página ao vivo. É isso; agora você sabe como criar a animação do carregador personalizado do widget/bloco Listing Grid após filtrá-lo.

Índice