Code Helpers
Table des matières
En bref
Les Code Helpers t'aident, en tant que développeur web, à mettre en place des tests A/B, notamment dans le cadre du développement pour les applications à page unique.
Fonctions d'aide JavaScript
varifyHelpers.waitFor
Avec la fonction waitFor est utilisée pour attendre un élément défini à l'aide d'un observateur de mutation. Dès que de nouveaux éléments correspondant au sélecteur défini sont ajoutés au DOM (par ex. par AJAX ou JavaScript), la fonction de rappel est exécutée.
La fonction de rappel est appelée pour chaque nouvel élément identifié.
Exemple de code
<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';
});
Ajout de plusieurs sélecteurs
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
Cette fonction appelle le CallBack à chaque fois que des éléments sont ajoutés ou supprimés dans le DOM. Elle est également basée sur un Mutation Observer.
window.varify.helpers.onDomChanged(() => {
// Write code here, which will run everytime the dom changes.
});
varifyHelpers.onDomLoaded
Cette fonction appelle le callback dès que le DOM est chargé. Si le DOM est déjà chargé, le callback est appelé immédiatement.
window.varify.helpers.onDomLoaded(() => {
// Write code here, which will run, when the DOM has loaded.
});
varifyHelpers.isInView
Avec la fonction isInView attend qu'un élément DOM donné soit entièrement visible dans le viewport. Par défaut, le callback n'est exécuté qu'une seule fois, mais il peut être exécuté en option chaque fois que l'élément est dans le viewport.
// 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
Cette fonction permet de réinitialiser tous les observateurs (observateurs d'intersection et de mutation) des fonctions mentionnées ci-dessus. Ainsi, les fonctions callback définies ne sont plus exécutées.
// 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()