KEVIN
CHAUVET

Developpeur de solutions internet
Spécialiste en marketing d'acquisition

Elementor : mes fenêtres modales ne fonctionnent plus !

Pour aller à l'essentiel :

Depuis quelque temps, je me bats avec mes fenêtres modales. Il y a en effet un conflit avec les plugins de cache qui empêchent les fenêtres modales de s’afficher lors de clic sur les boutons, par exemple.

Comment fonctionnent les fenêtres modales sous Elementor ?

maxresdefault
Les fenêtres modales sous Elementor

Avec Elementor, vous pouvez créer des mega-menus, des menus mobiles plus attractifs, ou tout simplement des fonctions marketing plus poussées.

Vous ne savez pas ce qu’est Elementor ? Pas de soucis, vous trouverez une présentation ici ou une présentation de mes prestations sous Elementor ici.

Les fenêtres modales (ou popup en anglais), sont un outil puissant et très utile, mais quand elles fonctionnent. Vous les trouverez dans Modèles > Fenêtres modales.

Vous avez WP-Rocket ? Moi aussi.

WP-Rocket permet d’optimiser le temps de chargement de son site en optimisant plusieurs leviers : cache, optimisation des fichiers, affichage des médias, etc.

Cependant, couplé avec Elementor il génère aussi beaucoup de bugs et de problèmes de conflits. Je vous propose un exemple de configuration qui permet l’affichage des modales, testé sur plusieurs sites.

Exemple de configuration WP-Rocket

Dans cet article, nous ne parlerons que la partie « Optimisation des fichiers » (sujet abordé aussi par WP-Rocket). Sachez aussi que cas par cas, il peut y avoir d’autres conflits, donc vous trouverez une liste sur le site de WP-Rocket.

Rendez-vous donc dans Réglages > WP-Rocket > Optimisation des fichiers.

Gestion du CSS

Ici vous trouverez plusieurs options pour optimiser les fichiers CSS de votre site. Le CSS, c’est le code qui permet de rendre votre site beau. Le CSS va définir les couleurs, les typographies, l’espacement, la mise en page, etc. Cependant, vous pouvez vous retrouver avec des fichiers plus que volumineux…

Screenshot 2022 01 31 at 15 59 51 WP Rocket ‹ Astianax freelance webdesign et integration — WordPress
Exemple de la configuration que j’utilise sur les sites de mes clients.

La suppression des ressources inutilisées, au moment où j’écris (janvier 2022) bloque complétement l’affichage des popups. Vous pouvez essayer de déboguer modale par modale jusqu’à ce que cela fonctionne, mais je préfère ne pas l’utiliser.

Gestion du JavaScript

Le JavaScript, c’est du code qui permet d’interagir avec le site. Avec le JavaScript, un développeur peut créer des actions et des interactions selon votre comportement sur le site (comme, afficher une modale lors d’un clic spécifique).

Cependant, WP-Rocket, lors de ses optimisations, casse complétement certains fichiers essentiels au bon fonctionnement du site, et surtout des fenêtres modales.

Screenshot 2022 01 31 at 16 05 46 WP Rocket ‹ Astianax freelance webdesign et integration — WordPress
Exemple de la configuration que j’utilise sur les sites de mes clients.

Pour la minification, j’ajoute certains fichiers JavaScript qui, lorsqu’ils sont minifiés, sont complétement cassés et ne fonctionnent plus :

/wp-content/plugins/elementor/assets/lib/dialog/(.*).js
/wp-content/plugins/elementor-pro/assets/js/(.*).js
/wp-content/plugins/elementor/assets/js/(.*).js
Screenshot 2022 01 31 at 16 07 47 WP Rocket ‹ Astianax freelance webdesign et integration — WordPress
Exemple de la configuration que j’utilise sur les sites de mes clients.

Pour le chargement en différé, j’utilise un mélange des recommandations de WP-Rocket et de fichiers que j’ai pu noter comme problématiques lorsqu’ils sont différés :

/wp-includes/js/jquery/jquery.min.js
/wp-includes/js/jquery/jquery-migrate.min.js
/elementor-pro/assets/js/webpack-pro.runtime.min.js
/elementor-pro/assets/lib/smartmenus/jquery.smartmenus.min.js
/elementor/assets/js/webpack.runtime.min.js
/elementor/assets/js/frontend-modules.min.js
/wp-includes/js/imagesloaded.min.js
/elementor-pro/assets/js/frontend.min.js
/elementor/assets/lib/waypoints/waypoints.min.js
/elementor/assets/js/frontend.min.js
/elementor-pro/assets/js/elements-handlers.min.js
/elementor/assets/lib/dialog/dialog.min.js
elementorFrontendConfig
ElementorProFrontendConfig
/jquery-?0-9.(.min|.slim|.slim.min)?.js
/jquery-migrate(.min)?.js
/elementor-pro/assets/js/preloaded-elements-handlers.min.js
/elementor/
/elementor-pro/

Vous pouvez utiliser la même liste pour « reporter l’exécution du JavaScript » :

Screenshot 2022 01 31 at 16 07 58 WP Rocket ‹ Astianax freelance webdesign et integration — WordPress
Elementor : mes fenêtres modales ne fonctionnent plus ! 6

Pour notre cas, à savoir les fenêtres modales, cette solution vous permettra d’avoir des modales fonctionnelles. Si vous avez d’autres soucis avec WP-Rocket, il faudra enquêter et trouver les fichiers qui vous posent soucis.

on partage ?

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée.

Besoin d'un spécialiste Elementor ?

Je propose des prestations sous Elementor, que ce soit la conception complète d’un site, une refonte (globale ou partielle), ou simplement une assistance.