Mettre en place une vérification de l’âge sur un site de vente en ligne est une obligation légale pour les produits réglementés comme le vin. Souvent, la méthode choisie consiste à créer une page dédiée qui filtre l’accès au site. Toutefois, un problème technique survient fréquemment lors de l’intégration du script : le site se charge directement sans vérifier l’âge, ou pire, le visiteur se retrouve bloqué dans une boucle de chargement infinie. Résoudre cette anomalie nécessite de comprendre le comportement de WordPress avec les adresses web et la bonne méthode pour injecter du code.

Comprendre les causes du dysfonctionnement

Lors de la création d’une passerelle d’âge, le mécanisme repose sur un cookie. Si le visiteur n’a pas ce cookie, le système doit le rediriger vers la page de vérification. Si le visiteur clique sur le bouton de validation, le cookie est créé et l’accès au site principal est autorisé.

Deux symptômes d’échec ont été constatés lors des tests. Dans le premier cas, le site s’affichait directement, ignorant totalement la barrière de sécurité. Dans le second cas, la page de vérification chargeait en boucle sans jamais s’afficher correctement.

Ces comportements résultent de deux erreurs distinctes. D’abord, une erreur de syntaxe dans le code chargé d’analyser l’adresse web. La présence de la suite de caractères de commentaire a interrompu l’exécution du script, laissant passer tous les visiteurs.

Ensuite, un conflit logique lié au fonctionnement natif de WordPress. Le gestionnaire de contenu force souvent l’ajout d’une barre oblique à la fin des adresses. Si le script compare la page actuelle (avec la barre oblique) à la page cible définie dans le code (sans la barre oblique), il les considère comme différentes. Le système ordonne alors une nouvelle redirection vers la page de vérification, créant la boucle infinie.

La procédure de diagnostic pas à pas

Avant de modifier le code final, il est indispensable d’isoler la source du problème. Le script est-il bloqué par une erreur silencieuse, ou ne se charge-t-il tout simplement pas ?

Pour le savoir, il faut utiliser un script de contrôle simplifié qui envoie des messages dans la console du navigateur. Cela permet de suivre le raisonnement du système étape par étape.

Mise en place du test technique

Il faut d’abord effacer l’historique de navigation récent pour éviter que d’anciens cookies ne faussent le résultat. Le test doit impérativement se faire dans une fenêtre de navigation privée.

La première étape consiste à ouvrir la page d’accueil du site. Ensuite, il faut activer l’outil d’inspection du navigateur (souvent accessible via la touche F12 ou par un clic droit puis « Inspecter »). Dans le panneau qui s’ouvre, l’onglet « Console » affiche les messages d’état.

Si aucun message spécifique n’apparaît au rechargement de la page, le diagnostic est clair : le code n’est pas injecté dans la page web. L’erreur ne vient pas de la logique du script, mais de la manière dont il est inséré dans le système.

Si vous rencontrez des difficultés techniques de ce type et que votre activité en ligne est bloquée, faire dépanner votre site WordPress en panne permet de relancer vos ventes rapidement et sans perte de données.

La solution pour injecter le code dans WordPress

Le problème majeur identifié est la méthode d’insertion du code. Un script qui gère une redirection conditionnelle doit s’exécuter le plus tôt possible lors du chargement de la page. Si l’exécution est trop tardive, le visiteur verra le site apparaître brièvement avant d’être redirigé.

De plus, un code écrit pour le navigateur ne peut pas être collé directement dans un fichier d’extension WordPress, qui est écrit dans un langage serveur. Cela provoque immédiatement un arrêt critique du site.

Utiliser le point d’ancrage approprié

La solution consiste à utiliser une fonction native de WordPress pour placer le script dans l’en-tête de toutes les pages. Ce mécanisme permet de suspendre temporairement le langage serveur pour écrire le code du navigateur, puis de reprendre le traitement normal.

Voici la procédure complète pour mettre en œuvre cette solution dans le fichier principal de l’extension créée pour l’occasion.

Il faut ouvrir le fichier de l’extension et insérer la fonction d’action ciblant l’en-tête du site.

PHP

add_action('wp_head', function() {
    ?>
    <script>
    (function () {
      var AGE_COOKIE = "age_verified";
      var AGE_PAGE = "/verification-age/"; 

      function cleanPath(path) {
          return (path || "").split("?")[0].split("#")[0].replace(/\/+$/, "");
      }

      function hasCookie(name) {
        return document.cookie.split(';').some(function(c) {
            return c.trim().startsWith(name + '=');
        });
      }

      var currentPath = cleanPath(window.location.pathname);
      var targetPath = cleanPath(AGE_PAGE);

      if (!hasCookie(AGE_COOKIE) && currentPath !== targetPath) {
        window.location.href = AGE_PAGE; 
      }

      document.addEventListener("click", function (e) {
        var target = e.target.closest("#age-yes"); 
        if (target) {
          e.preventDefault();
          var date = new Date();
          date.setTime(date.getTime() + (365 * 24 * 60 * 60 * 1000)); 
          document.cookie = AGE_COOKIE + "=1; expires=" + date.toUTCString() + "; path=/; SameSite=Lax";
          window.location.href = "/";
        }
      });
    })();
    </script>
    <?php
});

Explication de la logique corrigée

Cette version résout tous les problèmes constatés précédemment.

La variable de la page cible inclut désormais la barre oblique finale pour respecter le standard WordPress.

Une fonction spécifique nettoie l’adresse consultée par le visiteur. Elle retire les éventuels paramètres de suivi et unifie le format des barres obliques. La comparaison devient alors fiable, ce qui élimine définitivement le risque de boucle infinie.

La gestion du cookie a également été sécurisée. L’attribut de sécurité moderne est ajouté pour garantir que le cookie soit bien enregistré par les navigateurs récents. La durée de validité est fixée à un an, évitant ainsi de redemander l’âge du client à chaque visite.

Enfin, la détection du clic sur le bouton de validation utilise une méthode qui fonctionne même si le visiteur clique sur un élément visuel à l’intérieur du bouton, plutôt que sur le bouton lui-même. L’identifiant du bouton dans la page doit être strictement nommé « age-yes » pour que le script déclenche l’autorisation.

Derniers points de contrôle pour valider le fonctionnement

Même avec le code correct, le test peut sembler échouer à cause du contexte de navigation.

Les administrateurs connectés au tableau de bord WordPress possèdent des droits spéciaux. Selon la configuration de l’extension, il est possible que la vérification d’âge soit désactivée pour les gestionnaires du site. Il est donc crucial de toujours tester le résultat final en tant que visiteur anonyme, sans aucune session active.

Si la page de vérification se charge correctement, mais que le clic sur le bouton ne fait rien, l’erreur provient généralement de l’identifiant du bouton dans la structure de la page. Une faute de frappe ou l’utilisation d’une classe au lieu d’un identifiant unique bloquera la création du cookie.

Si vous rencontrez le même symptôme et voulez un diagnostic rapide avec plan d’action, l’intervention d’un expert permet de sécuriser le processus d’achat tout en respectant les réglementations en vigueur.