Código de ayuda
Índice
Corto y dulce
Los Ayudantes de Código le ayudan como desarrollador web a configurar pruebas A/B, especialmente cuando desarrolla para aplicaciones de una sola página.
Funciones auxiliares de JavaScript
waitFor -> Esperar elementos en el DOM
Con la función waitFor se utiliza un observador de mutaciones para esperar un elemento definido. En cuanto se añaden al DOM nuevos elementos que corresponden al selector definido (por ejemplo, mediante AJAX o JavaScript), se ejecuta la función de devolución de llamada.
La función callback se llama para cada elemento recién identificado.
Ejemplo 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';
});
Añadir varios selectores
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';
});
onDomChanged -> Cambios en el DOM
Esta función llama al CallBack cada vez que se añaden o eliminan elementos en el DOM. También se basa en un observador de mutaciones.
window.varify.helpers.onDomChanged(() => {
// Write code here, which will run everytime the dom changes.
});
onDomLoaded -> Se ha cargado el DOM
Esta función llama a la llamada de retorno tan pronto como se haya cargado el DOM. Si el DOM ya está cargado, la llamada de retorno se llama inmediatamente.
window.varify.helpers.onDomLoaded(() => {
// Write code here, which will run, when the DOM has loaded.
});
isInView -> Elemento completamente en la ventana gráfica
Con la función isInView el sistema espera a que un elemento DOM específico sea completamente visible en la ventana gráfica. Por defecto, la llamada de retorno sólo se ejecuta una vez, pero opcionalmente puede ejecutarse cada vez que el elemento se encuentre en la ventana gráfica.
// 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);
isInEditor -> Comprobación de Varify Editor
Puede utilizar esta función de ayuda para comprobar si se encuentra actualmente en el Editor Varify. Esto asegura que su código sólo en el sitio web en directo se ejecuta - y no en el editor.
Esto es especialmente útil si su guión, por ejemplo. Reenvío mediante JavaScript se activa: Puede utilizar la consulta para impedir específicamente el reenvío en el editor, de modo que pueda seguir probando y editando allí sin problemas.
if (window.varify.helpers.isInEditor()) {
return
}
// Your JavaScript Code (won't run in editor)
resetListeners -> Restablecer todos los observadores
Esta función reinicia todos los observadores (observador de intersección y de mutación) de las funciones mencionadas. Esto significa que las funciones de devolución de llamada definidas dejan de ejecutarse.
// 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()