Ajudantes de código
Tabela de conteúdo
Curto e agradável
Os Code Helpers ajudam você, como desenvolvedor da Web, a configurar testes A/B, especialmente no desenvolvimento de aplicativos de página única.
Funções auxiliares de JavaScript
varifyHelpers.waitFor
Com a função waitFor um observador de mutação é usado para aguardar um elemento definido. Assim que novos elementos que correspondem ao seletor definido são adicionados ao DOM (por exemplo, via AJAX ou JavaScript), a função de retorno de chamada é executada.
A função de retorno de chamada é chamada para cada elemento recém-identificado.
Exemplo de código
<div>
<p>This is existing content.</p>
<!-- <p class="lazyloaded-content">This content will be loaded later.</p> -->
</div>
window.varify.helpers.waitFor('.lazyloaded-content', (element) => {
// After the content was loaded, we want to color it red.
element.style.color = 'red';
});
Adição de vários seletores
window.varify.helpers.waitFor('.lazyloaded-content, .another-selector, and-another-selector', (element) => {
// After the content was loaded, we want to color it red.
element.style.color = 'red';
});
varifyHelpers.onDomChanged
Essa função chama o CallBack sempre que elementos são adicionados ou excluídos no DOM. Ele também se baseia em um observador de mutações.
window.varify.helpers.onDomChanged(() => {
// Write code here, which will run everytime the dom changes.
});
varifyHelpers.onDomLoaded
Essa função chama a chamada de retorno assim que o DOM tiver sido carregado. Se o DOM já estiver carregado, a chamada de retorno será chamada imediatamente.
window.varify.helpers.onDomLoaded(() => {
// Write code here, which will run, when the DOM has loaded.
});
varifyHelpers.isInView
Com a função isInView o sistema aguarda que um elemento DOM específico fique totalmente visível na janela de visualização. Por padrão, a chamada de retorno é executada apenas uma vez, mas, opcionalmente, pode ser executada sempre que o elemento estiver na janela de visualização.
// The callback here will be triggered ONE TIME, when the element is in view.
window.varify.helpers.isInView('.product', (element) => {
window.dataLayer.push({
event: 'product viewed',
element,
});
});
// Adding true as third parameter
// will trigger the callback EVERY TIME the element is in view.
window.varify.helpers.isInView('.product', () => {}, true);
varifyHelpers.resetListeners
Essa função redefine todos os observadores (observador de interseção e mutação) das funções mencionadas acima. Isso significa que as funções de retorno de chamada definidas não são mais executadas.
// As an example, we setup a waitFor listener here. This will use a MutationObserver under the hood.
window.varify.helpers.waitFor('.lazyloaded-content', (element) => {
element.style.color = 'red';
});
// The next resetting function call could e.g. be located in a navigation callback function.
window.varify.helpers.resetListeners()