Loop do Bricks + Datastore (JetEngine) + Reload Ajax

Quando você usa o JetEngine para criar interações como favoritar, adicionar à lista ou remover itens, é comum que o conteúdo da página (loop) continue o mesmo após a ação. Neste tutorial, você vai aprender a recarregar seu loop dinamicamente usando AJAX, sem precisar recarregar a página inteira — e tudo 100% compatível com o Bricks Builder.

✅ Pré-requisitos

• • WordPress com Bricks Builder instalado

• • JetEngine com Data Store ativo

• • Um loop criado com Bricks (ex: listagem de produtos ou postagens)

• • Botões de adicionar/remover itens configurados com JetEngine

🚀 Passo a Passo

1. Envolva seu Loop com um ID

No Bricks Builder, selecione o elemento que contém o loop e vá em “Custom Attributes” ou “HTML” e adicione um ID:

<div id="brx-loop-ajax">
  <!-- Aqui dentro está o loop do Bricks -->
</div>

Isso permite que a gente selecione apenas o conteúdo que queremos recarregar com AJAX.

2. Garanta que o botão do JetEngine esteja com a classe correta

Por padrão, o JetEngine aplica a classe .jet-listing-dynamic-link nos botões de adicionar/remover do Data Store. Certifique-se de que ela está presente (caso tenha customizado o botão).

3. Adicione o código JavaScript de AJAX

Insira o seguinte script no seu tema filho, via Code Snippets ou direto no rodapé do Bricks:

<script>
document.addEventListener('DOMContentLoaded', function () {
  document.body.addEventListener('click', function (e) {
    if (e.target.closest('.dynamic-link-ajax')) {
      setTimeout(function () {
        fetch(window.location.href)
          .then(res => res.text())
          .then(html => {
            const parser = new DOMParser();
            const doc = parser.parseFromString(html, 'text/html');
            const novoLoop = doc.querySelector('#brx-loop-ajax');
            if (novoLoop) {
              const container = document.querySelector('#brx-loop-ajax');
              container.innerHTML = novoLoop.innerHTML;
              // Recarrega imagens com data-src (lazy load)
              container.querySelectorAll('img[data-src]').forEach(img => {
                img.setAttribute('src', img.getAttribute('data-src'));
              });
              // Força reload das imagens padrão
              container.querySelectorAll('img').forEach(img => {
                const src = img.getAttribute('src');
                img.setAttribute('src', '');
                img.setAttribute('src', src);
              });
              // Reativa os scripts do Bricks Builder, se necessário
              if (typeof bricksData !== 'undefined' && typeof Bricks === 'object') {
                Bricks.init();
              }
            }
          });
      }, 800); // tempo para o JetEngine processar a ação
    }
  });
});
</script>

4. Teste na Página

Acesse sua página, clique em adicionar/remover item do loop. O conteúdo será atualizado automaticamente com AJAX, sem recarregar a página inteira — e com todas as imagens carregando corretamente.

---

🧠 Dica Extra

Se você quiser fazer isso em múltiplos loops diferentes, basta mudar o id="meu-loop" para algo mais específico (ex: #favoritos-loop, #wishlist-loop) e duplicar a lógica no JS conforme necessário.

---

📌 Conclusão