Réservation en ligne - Ajouter Widget #382

camillemonchicourt · 2021-05-03T16:37:30Z

Quand une rando a un id_reservation, intégrer le widget de réservation MY TRIP TAILOR dédié à l'itinérance.

Exemple : http://suivi-v3.montourenfrance.fr/partner/previsu-widget.aspx?project=parcdesecrins&partner=parcdesecrins&maplib=&routeid=ITI-65682-GEOT-921156&cle=ITI-65682-GEOT-921156&langue=fr
OK = http://suivi-v3.montourenfrance.fr/partner/previsu-widget.aspx?project=parcdesecrins&partner=parcdesecrins&maplib=&routeid=ITI-65682-GEOT-938574&cle=ITI-65682-GEOT-938574&langue=fr

Disponible en mode SPA : http://suivi-v3.montourenfrance.fr/partner/previsu-widget.aspx?project=parcdesecrins&partner=parcdesecrins&maplib=MapLeafletDevice&routeid=ITI-65682-GEOT-940370&cle=ITI-65682-GEOT-940370&langue=fr&FMode=spa
OK = http://suivi-v3.montourenfrance.fr/partner/previsu-widget.aspx?project=parcdesecrins&partner=parcdesecrins&maplib=&routeid=ITI-65682-GEOT-938574&cle=ITI-65682-GEOT-938574&langue=fr&FMode=spa

Un bouton RÉSERVER qui ouvre ce widget qui prend toute la page.

Widget avec calendrier de réservation intégrer dans la page (doc à venir)
Bouton RESERVER sur la page de résultats sur les itinéraires qui sont réservables

Ajouter un paramètre global pour activer ou non la réservation en ligne sur les randos.

The text was updated successfully, but these errors were encountered:

camillemonchicourt · 2021-12-08T17:25:19Z

En complément, exemple de widget "catalogue" à pouvoir afficher sur la page d'accueil :

<!DOCTYPE html>
<html>
<head>
	<!--Chargement des librairies-->
	<script type="text/javascript" src="https://gadget.open-system.fr/widgets-libs/rel/noyau-2.0.min.js"></script>
	<link href="https://eitinerancecdn.open-system.fr/widgets-eiti/core/core.min.css" type="text/css" rel="stylesheet">
	<link href="https://eitinerancecdn.open-system.fr/widgets-eiti/parcdesecrins/parcdesecrins.min.css" type="text/css" rel="stylesheet">
	<script src="https://eitinerancecdn.open-system.fr/widgets-eiti/core/core.min.js" type="text/javascript"></script>
	<script src="https://eitinerancecdn.open-system.fr/widgets-eiti/parcdesecrins/parcdesecrins.min.js" type="text/javascript"></script>

</head>
<body>

<div style="margin-left: auto;  margin-right: auto;  max-width: 1180px;  width: 100%;">	
	<h2>Catalogue simple</h2>
	<div class="OsItinerance OsItPartner CssCustom">
		<div id="eiti-partner"></div>
	</div>
	
    <script type="text/javascript">
        window.eitiLayer = [
            {
				page: 'CatalogRoutesPage',
				langue:'fr',
				partner:'parcdesecrins',
				catalogId: 'CAT-65682-11'
            }
        ];
    </script>	
</div>
</body>
</html>

Il suffit peut-être de l'intégrer dans les blocs HTML customisables de la page d'accueil, mais à vérifier et tester.

DOC : Intégration des catalogues.pdf

camillemonchicourt · 2022-01-19T13:58:22Z

Sur la page d'accueil : Possibilité d'ajouter le widget catalogue. A faire par chacun dans les bloc HTML customisables ?

Sur la page de recherche : Ajouter un bouton RESERVER si l'itinéraire est réservable (id_reservation défini ou reservation_system renseigné dans l'API) :

Sur la page détail d'une rando, ajouter un bouton RESERVER avec les autres boutons d'action :

Qui ouvre le widget de réservation en pleine page, ou modale, à vérifier en testant le widget de réservation

Ajouter aussi dans la page, le widget de réservation calendaire permettant de voir les dates disponibles :

camillemonchicourt · 2022-03-13T14:38:19Z

Première intégration du widget dans la version 3.7.0.
Les paramètres reservationPartner et reservationProject permettent d'activer le widget.
Le widget est affiché sur les fiches rando qui ont une valeur pour le champs reservation_id correspondant à sa référence dans OpenSystem.

A voir :

Améliorer l'intégration du widget

camillemonchicourt · 2022-04-25T20:37:40Z

Dans la version 3.8.0, le chargement du widget a été amélioré.
Mais il est alors aussi apparu que celui-ci ne s'affichait pas toujours lors du premier chargement d'une fiche rando associé à une réservation.
Dans la version 3.8.2, cela a été amélioré (9e0d52d#diff-295b99226342838bb4e330381d94f4c621856e91700dc97c51501b8e8ee5a8c4) et semble OK sur Chrome, mais pas toujours sur Firefox où le widget ne se charge pas toujours au premier chargement de la page.

camillemonchicourt · 2022-04-25T21:08:50Z

Dans la version 3.8.0, le chargement du widget a été amélioré.
Mais il est alors aussi apparu que celui-ci ne s'affichait pas toujours lors du premier chargement d'une fiche rando associé à une réservation.
Dans la version 3.8.2, cela a été amélioré (9e0d52d#diff-295b99226342838bb4e330381d94f4c621856e91700dc97c51501b8e8ee5a8c4) et semble OK sur Chrome, mais pas toujours sur Firefox où le widget ne se charge pas toujours au premier chargement de la page.

Par ailleurs Alliance Réseaux qui gère le widget a indiqué une autre manière dont le widget a été prévu où on affiche d'abord seulement le calendrier :

Le principe consiste à séparer en 2 l'affichage du widget itinérance:
avoir la partie calendrier qui soit affichée directement dans la colonne de descriptif de l'itinéraire, et la partie réservation qui s'affiche en pleine page (en tout cas en version plus large afin de permettre d'accéder correctement aux infos de réservation.)

Voici en ligne une page d'exemple avec ces fichiers: http://param.montourenfrance.fr/exemples/ecrins/demo-widget-ecrins-page-itineraire.htm
Ci-joint les 2 pages html utilisées dans cet exemple, qui montrent ce principe sur une intégration classique des widgets html/js

Page itinéraire :

<!DOCTYPE html>
<html>
<head>
	<title>Démo Widget Itinérance - page itinéraire</title>


<!--Chargement séparé (core) des librairies itinérance-->
<script type="text/javascript" src="https://gadget.open-system.fr/widgets-libs/rel/noyau-2.0.min.js" xml:space="preserve"></script>
<link href="https://eitinerancecdn.open-system.fr/widgets-eiti/core/core.min.css" type="text/css" rel="stylesheet">
<link href="https://eitinerancecdn.open-system.fr/widgets-eiti/parcdesecrins/parcdesecrins.min.css" type="text/css" rel="stylesheet">
<script src="https://eitinerancecdn.open-system.fr/widgets-eiti/core/core.min.js" type="text/javascript" xml:space="preserve"></script>
<script src="https://eitinerancecdn.open-system.fr/widgets-eiti/parcdesecrins/parcdesecrins.min.js" type="text/javascript" xml:space="preserve"></script>



</head>

<style>
	body{
		font-family:"Arial";
	}
	.test-page{
		display:flex;		
	}
	.test-colonne-contenu{
		flex:1 1 auto;
		padding:10px;
	}
	.test-colonne-widget{
		flex:0 0 300px;
		padding:10px;
	}
	.menu{
		text-align:center;
	}
	.menu a{
		color:#009ec0;
		padding:4px 10px;
	}
	
	.menu .menuselect{
		text-decoration:none;
		color:#000;
		background-color:#e0e0e0;
	}
	
</style>

<body>
	
	<h2 style="text-align:center;">Démo widget itinérance</h2>
	<div style="text-align:center;margin-bottom:10px;">exemple intégration, séparation du widget en 2 parties</div>
		
		<div class="menu">
			<a href="demo-widget-ecrins-page-itineraire.htm" class="menuselect">Description itinéraire</a> | 
			<a href="demo-widget-ecrins-page-reservation.htm">Réservation en ligne</a>
		</div>
		
		<div class="test-page">
			<div class="test-colonne-contenu">
				<h2>Descriptif statique itinéraire</h2>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
			</div>
			<div class="test-colonne-widget">
				<div class="OsItinerance OsItineranceStarter CssCustom">
					<div id="eiti-engine"></div>	
					<div id="eiti-advisor"></div>
					<div id="eiti-roadbook"></div>				
				</div>
			</div>
		</div>

	
    <script type="text/javascript">
        window.eitiLayer = [
            {
				routeId: 'ITI-65682-1028',
				partner:'parcdesecrins',

				page: 'RoutePage',
				
				routePage:'demo-widget-ecrins-page-itineraire.htm' ,
				processPage:'demo-widget-ecrins-page-reservation.htm' ,

				langue:'fr'				
            }
        ];
    </script>	

</body>

Page réservation :

<!DOCTYPE html>
<html>
<head>
	<title>Démo Widget Itinérance - page réservation</title>
	

<!--Chargement séparé (core) des librairies itinérance-->
<script type="text/javascript" src="https://gadget.open-system.fr/widgets-libs/rel/noyau-2.0.min.js" xml:space="preserve"></script>
<link href="https://eitinerancecdn.open-system.fr/widgets-eiti/core/core.min.css" type="text/css" rel="stylesheet">
<link href="https://eitinerancecdn.open-system.fr/widgets-eiti/parcdesecrins/parcdesecrins.min.css" type="text/css" rel="stylesheet">
<script src="https://eitinerancecdn.open-system.fr/widgets-eiti/core/core.min.js" type="text/javascript" xml:space="preserve"></script>
<script src="https://eitinerancecdn.open-system.fr/widgets-eiti/parcdesecrins/parcdesecrins.min.js" type="text/javascript" xml:space="preserve"></script>



</head>

<style>
	body{
		font-family:"Arial";
	}
	.test-page{
		display:flex;		
	}
	.test-colonne-contenu{
		flex:1 1 auto;
		padding:10px;
	}
	.test-colonne-widget{
		flex:0 0 300px;
		padding:10px;
	}
	.menu{
		text-align:center;
	}
	.menu a{
		color:#009ec0;
		padding:4px 10px;
	}
	
	.menu .menuselect{
		text-decoration:none;
		color:#000;
		background-color:#e0e0e0;
	}
	
</style>


<body>

	<h2 style="text-align:center;">Démo widget itinérance</h2>
	<div style="text-align:center;margin-bottom:10px;">exemple intégration, séparation du widget en 2 parties</div>
	
	<div class="menu">
		<a href="demo-widget-ecrins-page-itineraire.htm">Description itinéraire</a> | 
		<a href="demo-widget-ecrins-page-reservation.htm" class="menuselect">Réservation en ligne</a>
	</div>
		
	<div class="OsItinerance OsItPartner CssCustom">
		<div id="eiti-partner"></div>				
	</div>
	
    <script type="text/javascript">
        window.eitiLayer = [
            {
				routeId: 'ITI-65682-1028',
				partner:'parcdesecrins',
				
				withRouteCanvas:false,
				routePage:'demo-widget-ecrins-page-itineraire.htm' ,
				processPage:'demo-widget-ecrins-page-reservation.htm' ,
			
				langue:'fr'
				
            }
        ];
    </script>	

</body>

A noter aussi que le prestataire du widget (Alliance Réseaux) a indiqué :

Le mode SPA est une exception que l'on avait mis en place pour la v2 de Geotrek-rando, sur la version 3 du site, le mode SPA est il toujours obligatoire ? Car il serait préférable, si c'est possible, de passer sur la version classique du widget.

Mais après vérification, @harijoe qui a intégré le widget de réservation dans Geotrek-rando-v3 indique :

Pour le mode SPA, en fait ça a du sens car on charge le widget côté front après le chargement de la page.

Alliance Réseaux avait aussi fourni une documentation sur l'intégration du widget en mode SPA :

Nouveau code js à intégrer :
	<!--Chargement séparé (core) des librairies itinérance-->
	<script type="text/javascript" src="https://gadget.open-system.fr/widgets-libs/rel/noyau-2.0.min.js"></script>
	<link href="https://eitinerancecdn.open-system.fr/widgets-eiti/core/core.min.css" type="text/css" rel="stylesheet">
	<link href="https://eitinerancecdn.open-system.fr/widgets-eiti/parcdesecrins/parcdesecrins.min.css" type="text/css" rel="stylesheet">
	<script src="https://eitinerancecdn.open-system.fr/widgets-eiti/core/core.min.js" type="text/javascript"></script>
	<script src="https://eitinerancecdn.open-system.fr/widgets-eiti/parcdesecrins/parcdesecrins.min.js" type="text/javascript"></script>

    <!-- Script à insérer à la suite des librairies -->
    <script type="text/javascript">
        (function (window, ITW, undefined) {

            // Options
            var layer = {
				routeId: 'ITI-65682-1028',
				partner:'parcdesecrins',		
                routePage:'http://widgets.montourenfrance.fr/v2/exemples/ecrins/demo-widget-vieux-chaillol-page-itineraire.htm',
                langue:'fr'
            };

            // Callback de changement de page
            var pageChange = function(pageChangeData) {

                // Code Makina à intégrer pour changement de route 
                // pageChangeData.pageName contient le nom de la page
                // si pageChangeData.pageName === 'RoutePage' alors affichage starter, sinon affichage process

                // Récupération du gestionnaire de page. Il n'est pas nécessaire de retransmettre les options (layer, pageChange)
                // La nouvelle page à afficher est déjà connue par le gestionnaire
                var spaClient = ITW.pages.getSinglePageApplicationClient();

                // ...

                // Les éléments dom régénérés par Angular doivent être prêts avant l'exécution de la page suivante
                spaClient.executePage();
            };

            // Récupération d'un gestionnaire de page, à appeler avec les paramètres
            var spaClient = ITW.pages.getSinglePageApplicationClient({
                layer: layer,
                pageChange: pageChange
            });
 
            // ...
 
            // Une fois le dom prêt, la première page du widget peut être exécutée (starter)
            spaClient.executePage();

        })(window, window.eitinerance.core);
     </script>    

Les éléments dom pour le starter  (à intégrer dans la colonne à droite de la page d'un itinéraire):

<div class="OsItinerance OsItineranceStarter CssCustom">
    <div id="eiti-engine"></div>    
    <div id="eiti-advisor"></div>
    <div id="eiti-roadbook"></div>                
</div>


Les éléments dom pour le process (à intégrer en pleine page):

<div class="OsItinerance OsItPartner CssCustom">
    <div id="eiti-partner"></div>
</div>

camillemonchicourt · 2022-06-02T07:02:55Z

Retour de @thomaspnrhj sur l'actuelle intégration du widget, vu sur https://gtr3demo.ecrins-parcnational.fr/trek/2-Col-de-Font-Froide

Camille, juste une petite remarque, j'ai ouvert ce lien sur mon tél, et en fait avec votre bandeau "Je réserve", on arrive pas à accéder à l'icône pour la carte, peut-être rgarder pour passer l'icône devant:

camillemonchicourt · 2022-06-02T07:05:28Z

Oui le widget de réservation OpenSystem a été intégré mais n'est pas encore vraiment satisfaisant.
Il a des problèmes d'affichage comme celui que tu évoques, mais aussi des problèmes de chargement dans certains cas.

Le widget de réservation OpenSystem est affiché sur une fiche rando quand il est activé dans la conf de Geotrek-rando et que l'itinérance dispose d'un id_reservation.
En version mobile le widget ajoute un bandeau en bas de page qui masque en grande partie le bouton "Voir la carte".

Il y a 3 pistes pour corriger cela :

Revoir la manière dont le widget est intégré
Demander à Alliance Réseaux de revoir un peu son widget pour ne pas avoir ce bandeau en version mobile
Faire un hack pour remonter le bouton "Voir la carte" quand le widget est activé et présent sur une itinérance

La 3° solution serait dommage car on ne doit pas forcément bricoler en fonction d'un widget.
C'est plutôt la solution 1 qui est envisagée, mais si pas possible je pencherai vers la solution 2.

A suivre...

camillemonchicourt · 2022-07-01T13:36:16Z

Le chargement du widget a été corrigé et amélioré dans la 3.10.0.
Il est chargé en asynchrone.

Les 3 scripts du widget sont chargés, et une fois que le dernier est chargé, j'applique le widget est chargé et affiché sur la page.

Quand l'utilisateur consulte une rando avec le widget, le chargement est fait en asynchrone, mais si après il charge une autre rando via router (sans rafraîchir l'application par le navigateur), comme les scripts sont injectés, ils seront appelés directement.

Le chargement initial peut donc être un peu long, c'est pourquoi une évolution est envisagée : #732

C'est le widget complet qui est chargé dans les pages, et non pas la version simplifiée sous forme de calendrier. A voir si cela doit être revu ou modifié.
A voir aussi si le widget "catalogue" peut être intégré sur la Home avec les fichiers HTML de customisation, ou si des développements sont nécessaires pour pouvoir l'afficher sur la HOME.

A affiner et poursuivre dans des tickets dédiés.

camillemonchicourt · 2023-07-03T14:04:48Z

Il reste un soucis de chargement des scripts javascript du widget.
Il est nécessaire que le script noyau.js soit bien chargé complètement avec le chargement du script core.js, ce qui est peut-être le soucis.

Par ailleurs, du fait que Geotrek-rando est une application, celle-ci utilise une version un peu spécifique du widget, avec un mode SPA :

camillemonchicourt added the enhancement New feature or request label May 3, 2021

camillemonchicourt mentioned this issue Jun 2, 2022

fix signage attachment access if published GeotrekCE/Geotrek-admin#3118

Merged

dtrucs mentioned this issue Jun 30, 2022

Change the way to call reservation Widget #728

Merged

1 task

camillemonchicourt closed this as completed Jul 1, 2022

dtrucs mentioned this issue Jul 4, 2023

Synchronously load scripts for the Reservations widget #936

Merged

camillemonchicourt added this to Dev-3.6 Jun 23, 2024

camillemonchicourt moved this to To improve in Dev-3.6 Jun 23, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Réservation en ligne - Ajouter Widget #382

Réservation en ligne - Ajouter Widget #382

camillemonchicourt commented May 3, 2021 •

edited

Loading

camillemonchicourt commented Dec 8, 2021 •

edited

Loading

camillemonchicourt commented Jan 19, 2022

camillemonchicourt commented Mar 13, 2022

camillemonchicourt commented Apr 25, 2022

camillemonchicourt commented Apr 25, 2022 •

edited

Loading

camillemonchicourt commented Jun 2, 2022

camillemonchicourt commented Jun 2, 2022

camillemonchicourt commented Jul 1, 2022

camillemonchicourt commented Jul 3, 2023

Réservation en ligne - Ajouter Widget #382

Réservation en ligne - Ajouter Widget #382

Comments

camillemonchicourt commented May 3, 2021 • edited Loading

camillemonchicourt commented Dec 8, 2021 • edited Loading

camillemonchicourt commented Jan 19, 2022

camillemonchicourt commented Mar 13, 2022

camillemonchicourt commented Apr 25, 2022

camillemonchicourt commented Apr 25, 2022 • edited Loading

camillemonchicourt commented Jun 2, 2022

camillemonchicourt commented Jun 2, 2022

camillemonchicourt commented Jul 1, 2022

camillemonchicourt commented Jul 3, 2023

camillemonchicourt commented May 3, 2021 •

edited

Loading

camillemonchicourt commented Dec 8, 2021 •

edited

Loading

camillemonchicourt commented Apr 25, 2022 •

edited

Loading