Comment verifier le chargement d'un widjet
Résoluflexi2202 Messages postés 3822 Date d'inscription Statut Membre Dernière intervention -
Bonjour a tous
Comme vous le savez, j'utilise sur mon bon de commande le module de mondial relay avec son plugin
Mais il arrive des fois que ce dernier plante.
Voici comment fonctionne ce widget
l'utilisateur entre un code postal et une liste de suggestion de point relais s'affichent dans le module du widget
Mais des fois cela arrive que le widget ne se charge pas, et donc cela est assez embêtant pour l'utilisateur, puisqu'il ne sait pas choisir un point relais.
Pour l'instant voici la solution que j'ai trouvé , mais je suis presque sur que javascript peux proposer autre chose
J'ai donc 2 divs
Une première avec le fameux widget de mondial Relais dans lequel je rentre un code postal et que les points relais suggère s'affichent
Une deuxième avec cette fois la possibilité a l'utilisateur de rentrer ses coordonnes de son point relais de façon manuelle dans le cas où le widget ne se charge pas
Mais comme je ne veux pas que les deux divs s'affichent en même temps pour eviter une mausvaise experience cote utilisateur
Voici ce que je fais
J'affiche un bref instant la div avec le widget de mondial Relais, le temps de récupérer la hauteur de se div
Et donc si la hauteur est plus grande que 200, je sais que le widget a été bien chargé et si la hauteur est plus petite que 200, je sais que le widget n'a pas été chargé
donc je charge la div avec les coordonnées du point relais a rentrer de façon manuelle
Voici donc ma question, j'aurais souhaité savoir si cela était possible de faire cela autrement
voici l'extrait de mon code
document.getElementById("Zone_Widget2").style.display = "";
if (Zone_Widget2.offsetHeight < 200) {
console.log(Zone_Widget2.offsetHeight);
console.log(" zero je suis plus petit que 200");
document.getElementById("manuel").style.display = "";
document.getElementById("Zone_Widget2").style.display = "none";
} //sinon je cache la div
else {
console.log(Zone_Widget2.offsetHeight);
document.getElementById("manuel").style.display = "none";
document.getElementById("Zone_Widget2").style.display = "";
console.log("je suis plus grand que 200");
}
- Comment verifier le chargement d'un widjet
- Verifier compatibilite windows 11 - Guide
- Verifier un lien - Guide
- Vérifier si mot de passe piraté - Guide
- Vérifier si une phrase est correcte - Accueil - Google
- Vérifier température pc - Guide
4 réponses
Bonjour
Lorsque le plugin est chargé, il doit y avoir des éléments identifiables via des id ou des class.
Il suffit donc de vérifier si ces éléments ou au moins l'un d'eux existe. S'il n'existe pas tu affiches ta div.
bonjour Jordane
Merci pour la reponse
Dans mon cas tout le code du plugin s'affiche en effet a l'aide d'un ID
qui est zone_widjet
je pourrais faire ceci par exemple faire ceci tout simplement
if (document.getElementById("zone_Widget") !== null) {
alert("The element exists");
}
else {
alert("The element does not exist");
}
Je pense que cette div (et cet ID) c'est toi qui l'a mis sur ton site.
Ce n'est pas le "contenu" du widget qui est chargé par le plugin lorsqu'il marche ....
Pour comprendre, regarde le code HTML généré sur ta page lorsque le plugin s'est bien chargé et regarde le contenu de la div en question pour voir ce qu'elle contient.
Merci pour la reponse
en fait d'apres la documentation c''est L'ID Zone_Widget qui va contenir tout le code pour afficher les differents
comme on peux le voir dans cet extrait de documentation
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr" dir="ltr">
<head>
<title>Mondial Relay Parcelshop Picker with Map</title>
<!-- JQuery required (>1.6.4) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<!-- Leaflet dependency is not required since it is loaded by the plugin -->
<script src="//unpkg.com/leaflet/dist/leaflet.js"></script>
<link rel="stylesheet" type="text/css" href="//unpkg.com/leaflet/dist/leaflet.css" />
<!-- JS plugin for the Parcelshop Picker Widget MR using JQuery -->
<script src="//widget.mondialrelay.com/parcelshop-picker/jquery.plugin.mondialrelay.parcelshoppicker.min.js"></script>
</head>
<body>
<!-- HTML Element in which the Parcelshop Picker Widget is loaded -->
<div id="Zone_Widget"></div>
<!-- HTML element to display the parcelshop selected, for demo only. Should use hidden instead. -->
<input type="text" id="Target_Widget" />
</body>
</html>
Lorsque je supprime ce qui est dans le Head rien ne se charge
Par contre lorsque je laisse le code tel quel l'interieur de l'ID contient ceci
ou je vois bien les differences class et id
Donc si je comprends bien ton raisonnement il faudrait juste que je verifie par exemple si la class MRW-Content existe?
<div id="Zone_Widget">
<div class="MR-Widget MR-Widget-Responsive fr-FR">
<div class="MRW-Title">
Sélectionnez votre Point Relais<sup>®</sup> ou Locker
</div>
<div class="MRW-Errors" style="display: none"></div>
<div class="MRW-Content">
<div class="MRW-Search">
<div class="MRW-Line">
<input type="hidden" class="Arg0" value="BDTEST ">
<div class="MRW-Container MRW-CityContainer">
<label for="MRW-inputCity-bd876945-617a-421a-b3bd-6948d6c0599c">
Ville
</label>
<input id="MRW-inputCity-bd876945-617a-421a-b3bd-6948d6c0599c" type="text" class="iArg0" value="">
</div>
<div class="MRW-Container MRW-CPContainer">
<label for="MRW-inputCP-bd876945-617a-421a-b3bd-6948d6c0599c">
CP
</label>
<input id="MRW-inputCP-bd876945-617a-421a-b3bd-6948d6c0599c" type="text" class="Arg2" value="">
</div>
<div class="MRW-Container MRW-CountryContainer">
<input type="hidden" class="Arg1" value="BE">
<input type="hidden" class="Arg3" value="24R">
<input type="hidden" class="Arg4" value="">
<input type="hidden" class="Arg5" value="7">
<input type="hidden" class="Arg6" value="">
<input type="hidden" class="Arg7" value="75">
<input type="hidden" class="Arg8" value="">
<input type="hidden" class="Arg10" value="">
<img id="Img_Pays" class="MRW-flag" src="https://widget.mondialrelay.com/parcelshop-picker/v4_0/css/imgs/FR.png" alt="FR">
<div class="MRW-fl-Select">
<div class="MRW-fl-Item MRW-fl-Item-"><img src="https://widget.mondialrelay.com/parcelshop-picker/v4_0/css/imgs/fr.png" alt="FR"><span>FR</span></div>
<div class="MRW-fl-Item MRW-fl-Item-"><img src="https://widget.mondialrelay.com/parcelshop-picker/v4_0/css/imgs/be.png" alt="BE"><span>BE</span></div>
<div class="MRW-fl-Item MRW-fl-Item-"><img src="https://widget.mondialrelay.com/parcelshop-picker/v4_0/css/imgs/nl.png" alt="NL"><span>NL</span></div>
<div class="MRW-fl-Item MRW-fl-Item-"><img src="https://widget.mondialrelay.com/parcelshop-picker/v4_0/css/imgs/lu.png" alt="LU"><span>LU</span></div>
</div>
</div>
<div class="MRW-Container MRW-ButtonContainer">
<button class="MRW-BtGo">
Chercher
</button>
<button class="MRW-BtGeoGo" title="Autour de ma position">
<span></span>
</button>
<img src="https://widget.mondialrelay.com/parcelshop-picker/v4_0/css/imgs/ajax-loader.gif" class="progressBar" alt="" style="display: none;">
</div>
</div>
<div class="PR-AutoCplCity" style="width: 120px;"></div></div>
<div class="MRW-Results" style="">
<div class="MRW-RList" style=""><div class="PR-List-Item" onclick="MR_jQuery("#Zone_Widget").trigger("FocusOnMap",0)"><input type="hidden" class="PR-Id" value="BE-006153"><div class="PR-Name">1 - N&A-BET-EXPRESS</div><div>BOULEVARD DE L'YSER 44</div><div></div><div>6000 - CHARLEROI</div></div><div class="InfoWindow InfoWindowFull" style="display:none"><div class="InfoWindowFull-Image"></div></div></div>
</div>
<div class="MRW-LockerModal new grid row modal overlay-confirm" id="LockerModal" style="display: none;">
<div class="modal-header line-b">
<span id="close-pop" class="close-pop" onclick="MR_jQuery("#close-pop").trigger("ClearSelection");"><span class="sr-only">Fermer la boîte de dialogue</span></span>
</div>
<div class="modal-body">
<div class="row ">
<div class="col-md-12 alert-info-consigne consigne">
<p><strong class="surligne">Vous avez choisi une livraison en consigne automatique</strong></p>
<div class="row ">
<div class="three">
<span class="picto">
<img src="https://widget.mondialrelay.com//parcelshop-picker/v4_0/css/imgs/picto3-jours.png"></span>
<p class="titre"><strong>Vous avez 3 jours pour retirer votre colis</strong></p>
<p>Les consignes sont ouvertes 24h/24 et 7j/7 mais les colis restent disponibles 3 jours. Au-delà, vous serez invité à choisir un Point Relais® pour récupérer votre colis.</p>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer center">
<div class="row ">
<div class="col-md-12">
<button class="btn green center-block" onclick="MR_jQuery("#close-pop").trigger("CloseModalLocker");">Je choisis cette consigne</button>
<button class="btn pink-border center-block" style="margin-top:10px" onclick="MR_jQuery("#close-pop").trigger("ClearSelection");">Je choisis un autre Point Relais®</button>
</div>
</div>
<span class="clearfix"></span>
</div>
</div>
<div style="color: red; display: none;">
Warning : You are currently running the solution under the Demonstration Account, please use your own Mondial Relay parameters on your production environement.
</div>
</div>
</div>
</div>