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
waitFor -> Attendere elementi nel DOM
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';
});
onDomChanged -> Cambiamenti nel DOM
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.
});
onDomLoaded -> Il DOM è stato caricato
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.
});
isInView -> Elemento completamente nella viewport
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);
isInEditor -> Controlla se l'editor di Varify è attivo.
È possibile utilizzare questa funzione ausiliaria per verificare se ci si trova nell'editor Varify. Questo assicura che il codice solo sul sito web live viene eseguito - e non nell'editor.
Questo è particolarmente utile se il vostro script, ad esempio. Inoltro tramite JavaScript è attivato: è possibile utilizzare la query per impedire in modo specifico l'inoltro nell'editor, in modo da poter continuare a testare e modificare senza problemi.
if (window.varify.helpers.isInEditor()) {
return
}
// Your JavaScript Code (won't run in editor)
resetListeners -> Azzeramento di tutti gli osservatori
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()