Intégration Mondial Relay 
Auteur : Emilia G.Bonjour à tous,
Je me retrouve face à un dilemme. Je n'arrive pas à faire fonctionner le widget mondial relay comme je le souhaiterai.
Avec l'aide d'Axel (encore merci) j'ai pu intégrer le widget afin que les clients puissent choisir leur point relais. Il s'avère que normalement losrqu'on clique sur l'adresse, le remplissage du champs se fait automatiquement. Hors, après moultes vérifications et stratagèmes, ça ne fonctionne pas. pourtant l'ID du champ a bien été indiqué dans le fichier HTLM, tout semble correct.
voici le chemin du widget
https://www.pikouik.com/mondialrelay/mondialrelay-ex4.html
et le débug :
https://www.pikouik.com/mondialrelay/debugmondialrelay.html
lorsqu'on clique sur l'adresse, le champ en dessous est sensé se remplir automatiquement :
J'ai ces erreurs qui apparaîssent :
Est-ce que vous avez déjà été confronté à ce problème ? J'ai un serveur Apache, est-ce que ce serait celui-ci qui bloque le schmilblick ?
Merci, bonne soirée !
Ketty
Hello Ketty,
En attendant l'avis d'Axel... ;o)
J'ai voulu faire un test sur le site, mais tous les produits sont inscrits en "non disponible", donc mission impossible (je n'ai pas fait toute la liste des produits, mais une grande partie).
Il faudrait regarder depuis ton panneau d'administration en ligne si tout est au vert (PASS) :
https://www.pikouik.com/admin/login.php
Egalement contrôler le PHP activé sur le serveur, les dernières versions du logiciel nécessitent un PHP en 8.1/8.2.
@Suivre,
J.P.
Suite...
J'ai trouvé deux pages avec des produits disponibles sur les 9 pages de la boutique. Normal ou pas ?
J.P.
Auteur
Bonjour JiPeR 48,
Le souci ne se trouve pas dans le fait qu'il il à que quelques produits dans la boutique de pikouik.com, c'est tout à fait normal, pour l'instant...
Le souci se trouve dans l'intégration du plugin de Mondial Relais qui ne fonctionne pas correctement. Si tu fais une simulation pour ajouter un des patrons au panier tu verras qu'il y a un problème
Merci
Ketty
Hello à tous,
KolAsim, experts, autres utilisateurs merci de votre aide.
C'est effectivement moi qui aide Ketty sur ce sujet en lui fournissant le code que j'ai mis en place pour cette utilisation.
Le but de ce code est de choisir un point mondial relay dans le widget de Mondial Relay et que les coordonnées de ce point relay soient AUTOMATIQUEMENTcopiées dans le champ que WSX5 a crée en ajoutant notre code pour Mondial Relay.
Ici sur ma demo tout fonctionne bien:
https://wsx5demo.afsoftware.fr/boutik.php
Il suffit d'aller juste avant le paiement pour choisir le mode de livraison. Je vous laisse regarder.
Stephane que j'ai aidé aussi avec le même code n'a aucun problème ! Le post est ici:
https://helpcenter.websitex5.com/fr/post/263777
Mon site de demo est en v2023.3.11... et c'est OK
Ketty fonctionne avec la v2024.1.6 mais cela ne marche pas.
J'ai rapidement essayé d'exporter mon site de demo en v2024.1.6.... et c'est OK !!!!!
Face aux problèmes j'ai donc mis en place une solution de debug rapide en exécutant du code natif HTML sans passer par Website en pensant que WSX5 était la cause.
Bien sûr ce code fonctionne bien sur mon site de demo et il fonctionne aussi sur le site de Ketty....
Mais comme je ne recontre moi aucun problème en v2023 ou v2024, il est très probable que cela soit donc un réglage à faire chez l'hébergeur.
Pour comprendre le fonctionnement en mode debug (2 fichiers html pure)
debugmondiarelay.html ---> iframe pour appeler mondialrelay-ex4.html et simple affichage du champ de test --->avec mondialrelay-ex4.html appel du widget en JS et copie du point relay choisi dans la champ de la page parent soit debugmondialrelay.html
Le fichier debugmondial.relay.tml est le suivant accessible ici:
https://www.pikouik.com/mondialrelay/debugmondialrelay.html
Il appelle dans une iframe, la page mondialrelay-ex4.html qui ensuite appel un script JS pour afficher le widget MOdial Relay. Le choix du point relay par clique sera ensuite automatiquement copié dans le champ de la page page parent soir debugmondialrelay.html.
Le contenu de debugmondialrelay.html est le suivant:
<br><br><hr class=line-form ><u><b>Mondial Relay</b> (exemple 4)</u>: <br><br><b>Choisir</b> votre point relais. <br><iframe width="750" height="300" src="mondialrelay-ex4.html"></iframe>
<br>
<input type='text' id='000000006' >
Et cela affiche le widget et l'adresse choisit dans le champ !
La copie du champ choisit se fait par la commande suivante entre la page fille mondialrelay-ex4.htmlvers la page parent debugmondialrelay.html
parent.document.getElementById('000000006').value = pointrelay;
Ici l'ID du champ '000000006' est importante, et nous maitrisons la façon de retrouver cet ID, qui ici n'est pas la cause du probkème.
Donc jusqu' ici tout fonctionne parafaitement en mode pure HTML avec 2 fichiers.
Maintenant passons à l'intégration avec WSX5
Nous copions le code suivant danss la partie 'Details Client' de la section eCommerce pour ajouter un choix de livraison.
<script> $('#000000006').val(''); </script><br><br><hr class=line-form ><u><b>Mondial Relay</b> (exemple 4)</u>: <br><br><b>Choisir</b> votre point relais qui sera automatiquement copié et indiqué ci dessous <br><iframe width="750" height="300" src="https://wsx5demo.afsoftware.fr/afs-demo/mondialrelay/mondialrelay-ex4.html"></iframe>
Ce code se trouve donc ici.
et affiche correctement le widget
En isérant notre code dans WSX5 le champ est ici automatiquement crée par WSX5... C'ets celui ci que nous voulons utiliser pour faire l'auto completion.
Mais chez Ketty et son hébergeur le champ ne se remplit pas.....!!!!!!! Le fichier mondialrelay-ex4.html est exactement le même que celui utilisé ne mode debug
Et effectivement avec un Chrome inspect nous affichons les erreurs suivantes
Cela ressemble donc fortement à un blocage fait par le provider sur la partie iframe & cross-origin car en effet le fichier mondialrelay-ex4.html fait lui appel à 3 liens externes au site web d'origine.... Donc par sécurité cela doit être bloqué chez le provider !!
Les 3 liens appelés sont.
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
<script src="https://widget.mondialrelay.com/parcelshop-picker/jquery.plugin.mondialrelay.parcelshoppicker.min.js"></script>
Ci joint un lien sur ce type d'erreur et des explications.
https://www.apachelounge.com/viewtopic.php?t=7599
Moi je pense qu'il faudrait ajouter les 3 liens appelés dans mondialrelay4.html dans le fichier httpd.conf du serveur Web Apache chez le provider.
La commande serait :
Header set X-Frame-Options "ALLOW-FROM https://www.zyx.xyz"
Voilà le maximum de détails que je peux donner étant moi moi à l'origine de l'intégration de ce code... Mais je sèche pour aider Ketty à faire la bonne demande à son provider.
Ci joint les 2 fichier en html pure et le guide d'intégration si vous voulez essayer de votre côté.
Merci à tous pour votre aide et conseils.
Axel
Hello Stéphane B,
Si tu lis ce post peux tu nous dire le nom de ton provider stp.
Que je sache chez toi l'intégration s'est faite sans problème ?
Axel
Hello Incomedia,
Après export du site sur votre hébergement l'erreur est exactement la même !!!
https://emilia-g.websitex5.me/
Peut être que vous pouvez avoir la main pour comprendre ce qui se passe et trouver les règles à faire sur le serveur Web ....
Si cela fonctionne chez d'autres providers alors il y a forcément une solution.
Merci
(It > Fr) ... Je ne sais pas si je comprends, mais cette page "debugmondialrelay.html" est sans bibliothèque jQuery JS...
... afin d'éventuellement évaluer, publier le vrai LIEN de la page en ligne du projet, entièrement fonctionnel et contenant les champs IFRAME et INPUT sur lesquels rapporter les données externes...
...si je vois ce lien, je reviendrai ici...
.
ciao
.
@KolAsim
il faut faire un achat et avant le paiement choisir la livraison
et c'est la que le probleme apparait !!!
https://emilia-g.websitex5.me/
... Je ne vois aucun produit disponible...
Choisir les "galons"
https://emilia-g.websitex5.me/tous-les-tissages.php
● Ce produit n'est pas disponible. ...!...
Auteur
les patrons sont dispo ;)
Grrrrr.....
hello Ketty il faut mettre a jour les produits Galons pour faire des tests
plus de produits dispo !!!!!!
KolAsim essaie d'aider
...maintenant je vois 3 produits verts, ...mais il n'y a pas d'option pour accéder gratuitement au formulaire de contact #step1...
... Je reviendrai ici un autre jour, si je vois des utilisateurs valides et des laissez-passer pour y accéder...
.
Bonjour; salut
.
Auteur
@KolAsim
c'est tout bon j'ai enlevé l'inscription obligatoire et mis quelques produits suplémentaires en stock
(It > Fr) ... OK ... merci ... maintenant j'ai pu vérifier ...
...mais malheureusement mon code ne peut pas fonctionner, désolé...
... peut-être que la raison pourrait être que l'IFRAME n'est pas physiquement présent dans la source de la page, mais peut-être qu'il est créé dynamiquement par du code tiers...
... si au lieu de l'IFRAME actuel vous pouvez insérer le code IFRAME directement dans la page, j'essaierai de réévaluer...
... par exemple, j'ai remarqué que si sur la page "debugmondialrelay.html" vous mettez la bibliothèque is jQuery, mon code pourrait très probablement fonctionner, mais évidemment tout doit être vérifié...
.
ciao
.
Hello KolAsim,
merci pour ton aide. Mais tout fonctionne bien chez mon provider et un autre
oncherche une solution cote provider et pas cote client !
Axel
... OK ... ciao ...
ciao, ... ...peut-être parce que tout est sur votre serveur...
... comme déjà dit précédemment, dans la page d'exemple "debugmondialrelay.html" précédente, mon code peut fonctionner dans un environnement jQuery, et cela peut arriver car le contenu de l'iframe est sur le même serveur ; en fait:
> page invité > https://www.pikouik.com/mondialrelay/debugmondialrelay.html
> page iframe > https://www.pikouik.com/mondialrelay/mondialrelay-ex4.html
...
... à la place, l'iframe du module panier "emilia-g.websitex5.me" se trouve sur un serveur différent de la racine ; en fait
> page invité > https://emilia-g.websitex5.me/cart/index.html#step1
> page iframe > https://pikouik.com/mondialrelay/mondialrelay-ex4.html ... > ... (!!!)
...
... Je pense que si la même structure était respectée au sein d'un même serveur, les problèmes pourraient être résolus...
... vérifie aussi > www ...!...
.
ciao
.
Hello KolAsim,
Oublions Incomedia comme hébergement. Il n'y a aucun réglage possible...
Grrrrrr.....
Restons sur le site de Pikouik qui est celui du travail initial.
Bon, sur Pikouik mes 2 fichiers fonctionnent très bien sans probleme.
> page invité > https://www.pikouik.com/mondialrelay/debugmondialrelay.html
> page iframe > https://www.pikouik.com/mondialrelay/mondialrelay-ex4.html
tu appelle https://www.pikouik.com/mondialrelay/debugmondialrelay.html
et en choisisant une ville avec le widget cela permet de copier l'adresse d'un relais dans le champ automatiquement.
il n'y a AUCUNE ERREUR avec Inspect...
Les 2 fichiers sont sur le même domaine.
Maintenant le code de debugmondialrelay est utilisé dans le module du panier en utilisant uniquement cette ligne.
<br><br><hr class=line-form ><u><b>Mondial Relay</b> (exemple 4)</u>: <br><br><b>Choisir</b> votre point relais. <br><iframe width="750" height="300" src="mondialrelay-ex4.html"></iframe>
qui est donc toujours sur le même serveur Pikouik
Ensuite on utiliser le même fichier mondialrelay-ex4.html qui lui aussi est toujours sur le serveur Pikouik
Tu dis ...." ... Je pense que si la même structure était respectée au sein d'un même serveur, les problèmes pourraient être résolus..."
Mais je pense que dans l'environnement les 2 fichiers sont OK .... Le code est juste inséré dans WSX5... et là cela ne marche plus !
Après investigation sur Google je pense qu'il s'agit d'un réglage sur le serveur pour éviter les attaques de type CORS. Mais on peut changer le réglage avec le fichier .htaccess (si disponible et modifiable) avec la ligne:
Header always append X-Frame-Options ALLOW-FROM https://example.com/
POURQUOI cela ne fonctionne PAS avec WSX5 ???????!!!!! mais OK en HTML PURE...
Mais peut être as tu du code à ajouter sur un de mes 2 fichiers pour que cela soit pris en compte coté browser soit le côté client .
Merci encore pour ton aide
Axel
@KolAsim,
Pour info avons testé cela dans mondialrelay-ex4.html
<head>
<meta http-equiv="X-Frame-Options" content="DENY">
<!-- ou encore -->
<meta
http-equiv="Content-Security-Policy"
content="frame-src 'none';"
/>
ne marchent pas !
Oups ERROR
En intégrant le code dans le panier de WSX5 j'ai écrit
Maintenant le code de debugmondialrelay est utilisé dans le module du panier en utilisant uniquement cette ligne.
<br><br><hr class=line-form ><u><b>Mondial Relay</b> (exemple 4)</u>: <br><br><b>Choisir</b> votre point relais. <br><iframe width="750" height="300" src="mondialrelay-ex4.html"></iframe>
Il faut indiquer le chemin pour intégrer ce code dans le module du panier de WSX5
<br><br><hr class=line-form ><u><b>Mondial Relay</b> (exemple 4)</u>: <br><br><b>Choisir</b> votre point relais. <br><iframe width="750" height="300" src="mondialrelay/mondialrelay-ex4.html"></iframe>
... OK... peut-être que maintenant nous nous comprenons sans confusion...
...maintenant, le fichier iframe que j'ai demandé se trouve sur le même serveur que ce CART :
www.pikouik.com/cart/
...dans ce cas mon invention peut fonctionner...
... si c'est ce que vous voyez ici qui vous intéresse, ... faites-le-moi savoir...
.
Hello KolAsim
Encore un fois MERCIIIIIIIIIIIIIIIIII pour ton aide sur ce problème.
Dommage que les experts soient moins présents.
Entre temps dans l'après midi j'ai trouvé la solution.
Il faut juste renseigner dans le script qui appelle la page dans l'iframe mettre le chemin complet avec les WWW. par exemple https:///WWW.monsiteweb.fr et pas seulment https://monsiteweb.fr
Et là tout fonctionne sans rien changer chez le provider.... Personnellement je ne sais pas pourquoi cela bloque avec WSX5, alors qu'en mode pure HTML cela fonctionne.
Etrange .....
Je laisse Ketty dire que tout est OK, car elle a beacoup travaillé sur le problème avec moi... Mais désormais son site web avance vite & bien...
Alors si tout es OK Ketty, cloturera aussi ce post....
Merci à tous & toutes
A Bientôt
Axel
... peut-être que je n'ai pas compris quels résultats vous étiez censé obtenir
, car dans ce CART ce que j'ai simulé dans mon STAMP n'arrive pas :
...
https://www.pikouik.com/cart/#step1
....en tout cas bonne continuation...
.
ciao
.
Auteur
Hello,
Je confirme que tout fonctionne parfaitement bien, encore un grand merci à tous !
A bientôt !
Ketty