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
waitFor -> Attente d'éléments dans le DOM
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';
});
onDomChanged -> Modifications du DOM
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.
});
onDomLoaded -> Le DOM a été chargé
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.
});
isInView -> élément entièrement dans le viewport
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);
isInEditor -> Vérifier la présence de l'éditeur Varify
Avec cette fonction d'aide, tu peux vérifier si tu te trouves actuellement dans l'éditeur Varify. Tu peux ainsi t'assurer que ton code uniquement sur le site web Live est exécuté - et pas dans l'éditeur.
Cela est particulièrement utile si ton script est par exemple. Redirections par JavaScript La requête te permet d'empêcher la redirection dans l'éditeur, afin que tu puisses continuer à tester et à modifier sans problème.
if (window.varify.helpers.isInEditor()) {
return
}
// Your JavaScript Code (won't run in editor)
resetListeners -> Réinitialiser tous les observateurs
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()