Comment verifier le chargement d'un widjet

Résolu

flexi2202 Messages postés 3822 Date d'inscription Statut Membre Dernière intervention -
flexi2202 Messages postés 3822 Date d'inscription Statut Membre Dernière intervention - 17 févr. 2023 à 14:12

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");
}

A voir également:

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

Réponse 1 / 4

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

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.

Réponse 2 / 4

flexi2202 Messages postés 3822 Date d'inscription Statut Membre Dernière intervention 190

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");
}

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

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.

Réponse 3 / 4

flexi2202 Messages postés 3822 Date d'inscription Statut Membre Dernière intervention 190

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="">&nbsp;
                </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="">&nbsp;
                </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">
                    &nbsp;
                    <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>
                    &nbsp;<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(&quot;#Zone_Widget&quot;).trigger(&quot;FocusOnMap&quot;,0)"><input type="hidden" class="PR-Id" value="BE-006153"><div class="PR-Name">1 - N&amp;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(&quot;#close-pop&quot;).trigger(&quot;ClearSelection&quot;);"><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(&quot;#close-pop&quot;).trigger(&quot;CloseModalLocker&quot;);">Je choisis cette consigne</button>
                        <button class="btn pink-border center-block" style="margin-top:10px" onclick="MR_jQuery(&quot;#close-pop&quot;).trigger(&quot;ClearSelection&quot;);">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>

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

Bonjour,

Oui, la class MR-Widget par exemple

if (document.getElementsByClassName('MR-Widget').length) {
    alert('Class exists');
} else {
    alert('Class does not exist');
}

Réponse 4 / 4

flexi2202 Messages postés 3822 Date d'inscription Statut Membre Dernière intervention 190

Merci jordane

Cela fonctionne parfaitement

C'est vrai que cela est beaucoup mieux que mon idee que de controler la hauteur de la div

Discussions similaires

Vérifier que le server freebox est bien connecté à internet

Bloquée à l'étape 2 "vérifiez branchements xDSL/FTTH"

Ma box reste bloquée sur étape 2

Twitch : échec du chargement des données de la chaîne. veuillez actualiser

Votre réponse

Discussions similaires