Aiutanti di codice
Indice dei contenuti
Breve e dolce
I Code Helpers aiutano gli sviluppatori web a impostare i test A/B, soprattutto quando sviluppano applicazioni a pagina singola.
Funzioni helper di JavaScript
varifyHelpers.waitFor
Con la funzione attenderePer un osservatore di mutazioni viene utilizzato per attendere un elemento definito. Non appena nuovi elementi corrispondenti al selettore definito vengono aggiunti al DOM (ad esempio tramite AJAX o JavaScript), la funzione di callback viene eseguita.
La funzione di callback viene richiamata per ogni nuovo elemento identificato.
Esempio di codice
<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';
});
Aggiunta di più selettori
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
Questa funzione richiama il CallBack ogni volta che vengono aggiunti o eliminati elementi nel DOM. Si basa anche su un osservatore di mutazioni.
window.varify.helpers.onDomChanged(() => {
// Write code here, which will run everytime the dom changes.
});
varifyHelpers.onDomLoaded
Questa funzione richiama il callback non appena il DOM è stato caricato. Se il DOM è già stato caricato, il callback viene richiamato immediatamente.
window.varify.helpers.onDomLoaded(() => {
// Write code here, which will run, when the DOM has loaded.
});
varifyHelpers.isInView
Con la funzione isInView il sistema attende che uno specifico elemento DOM sia completamente visibile nella finestra di visualizzazione. Il callback viene eseguito una sola volta per impostazione predefinita, ma può essere eseguito facoltativamente ogni volta che l'elemento è nella finestra di visualizzazione.
// 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
Questa funzione azzera tutti gli osservatori (osservatori di intersezione e di mutazione) delle funzioni sopra citate. Ciò significa che le funzioni di callback definite non vengono più eseguite.
// 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()