Aller au contenu principal

Assistants de code

Dernière mise à jour le 24 mars 20262 min de lecture
Table des matières

En bref​

Code Helpers t'aide, en tant que développeur web, à mettre en place des tests A/B, en particulier lors du développement de tests A/B pour des single page applications.

Fonctions JavaScript utilitaires​

waitFor -> Attendre des éléments dans le DOM​

Avec la fonction waitFor, un mutation observer est utilisé pour attendre un élément défini. Dès que de nouveaux éléments correspondant au sélecteur défini sont ajoutés au DOM (par exemple via AJAX ou JavaScript), la fonction de callback est exécutée.

La fonction de callback 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 -> Changements dans le 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 la fenêtre d'affichage​

Avec la fonction isInView, on attend qu'un élément DOM donné soit entièrement visible dans le viewport. Le callback n'est exécuté qu'une seule fois par défaut, mais peut éventuellement être exécuté à 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 l'éditeur Varify​

Tu peux utiliser cette fonction d'aide pour vérifier si tu te trouves actuellement dans l'éditeur Varify. Cela garantit que ton code est exécuté uniquement sur le site web en direct - et pas dans l'éditeur.

Ceci est particulièrement utile si ton script, par exemple Forwarding via JavaScript, est déclenché : tu peux utiliser la requête pour empêcher spécifiquement le forwarding dans l'éditeur afin que tu puisses continuer à tester et éditer là-bas 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 réinitialise tous les observateurs (intersection et mutation observer) des fonctions ci-dessus. Ainsi, les fonctions de rappel 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()
Sur cette page