Redirection avec redirect_to et le widget Connexion d’Elementor Pro

Assurez la redirection de l’utilisateur vers la bonne page après authentification via le widget Connexion d’Elementor
Table des matières

Le Widget Connexion d’Elementor Pro est très utile pour réaliser une page d’authentification personnalisée et dans le cadre d’un middle-office. Cependant je trouve qu’il ne va pas assez loin dans la personnalisation et qu’il sait pas prendre en compte le paramètre d’URL redirect_to.

Le paramètre d’URL redirect_to et un paramètre natif et qui est passé à la page de connexion lorsque l’utilisateur tente d’accéder à une ressource qui requiert une authentification. Une fois l’authentification effectuée, on devrait logiquement être redirigé vers la page renseignée par redirect_to. Sauf que ça ne fonctionne pas avec le widget Connexion.

J’ai beau parcourir la documentation d’Elementor, mais aussi Internet et Chat GPT, je ne trouve pas de hook qui permettrait de forcer la valeur du champs hidden dans le formulaire généré par le widget Connexion.

Configuration du formulaire

Nous allons utiliser un petit script Javascript pour résoudre cette problématique. Mais en premier lieu, il faut apporter une petite modification au widget.

Modifiez avec Elementor la page contenant le formulaire de connexion. Allez dans l’onglet Avancé, et ajoutez loginform à l’attribut ID de CSS.

Script pour alimenter la valeur de retour

Placez ensuite ce code javascript dans un fichier appelé sur le site. Si vous n’êtes pas développeur ou si vous n’avez pas accès à un fichier javascript, vous pouvez utiliser Elementor et le module Code personnalisé.

document.addEventListener('DOMContentLoaded', () => {
	// Récupère la valeur de "redirect_to" dans l'URL de la page
	 let redirectUrl = new URL(window.location.href).searchParams.get('redirect_to');
    
	 // Vérifie si la valeur de "redirect_to" est présente et n'est pas vide
	 if (redirectUrl !== null && redirectUrl !== '') {
		 // Trouve l'élément input hidden "redirect_to" dans le formulaire de connexion
		 let redirectInput = document.querySelector('div#loginform form input[name="redirect_to"]');
		 
		 // Assigne la valeur de "redirect_to" au champ input hidden "redirect_to"
		 if (redirectInput) redirectInput.value = redirectUrl;
	 }
});
	 

Et voilà, à présent, le widget Connexion prendra en compte la valeur de redirect_to pour vous rediriger après authentification.

Je suis Thanh Nguyen, artisan du Web depuis 1998 et le doublé de Zidane en finale de coupe du monde.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ces articles pourraient aussi vous intéresser

Elementor

Modèles Elementor et Polylang

Contexte Polylang est mon extension préférée pour gérer les sites multilangues avec WordPress. Cependant, si vous utilisez Elementor et en particulier les modèles, cela devient

Lire la suite »

Rechercher sur le site