Oct 20, 2017 1:34:22 PM Thomas Dumont avatar   1284    

Guide d'intégration des fonctionnalités de la GRU > Intégration du bandeau Mon Compte

Intégration du bandeau Mon Compte

Pré requis

  • L'application doit être obligatoirement en connexion sécurisée https.
  • Pour fonctionner le bandeau utilise la bibliothèque JQuery à partir de la version 1.3.2.

Application Non Lutèce

1- Insertion du code HTML du bouton Mon Compte

Ajouter le code HTML ci-dessous sous la balise <body> de votre page principale.

<body>
<!-- banner-mon-compte begin -->
  <div class="banner-mon-compte__connexion-wrapper">
    <a class="banner-mon-compte__connexion-avatar" href="">
      <span class="banner-mon-compte__my-account"></span>
    </a>
  </div>
<!-- banner-mon-compte end -->
...

Le bouton "Mon Compte" apparaitra en haut à droite du site Bouton Mon Compte Si on passe la souris sur le bouton le libellé "Mon Compte" apparaît. Bandeau Mon Compte déplié

2 - Insertion des fichiers CSS et JS

Les fichiers sont disponibles sur le site du guichet https://moncompte.paris.fr/moncompte/

Pour effectuer des tests sur le domaine paris.mdp les ressources doivent être récupérées sur https://moncompte.rec.apps.paris.mdp/moncompte à la place de https://moncompte.paris.fr/moncompte

Il faut inclure la css...

<head>
...
  <link href="https://moncompte.paris.fr/moncompte/assets/css/banner-moncompte.css" rel="stylesheet">

...
</head>

...puis le javascript

RAPPEL : Si la bibliothèque javascript JQuery n'est pas présente dans votre site il faudra l'ajouter. <script type="text/javascript" src="https://moncompte.paris.fr/moncompte/assets/js/jquery.min.js"></script>

Ajouter le fichier js à la fin de vos pages.

<script src="https://moncompte.paris.fr/moncompte/assets/js/banner-moncompte.js"></script>

3 - Initialisation et paramètres du bandeau

Pour que le bouton puisse fonctionner, il faut l'initialiser en exécutant la fonction initBanner

<script>initBanner();</script>
RAPPEL : L'application doit être obligatoirement en connexion sécurisée https.
Il existe 3 paramètres non obligatoire pour initialiser les urls de retour vers l'application. Il faut les renseigner si vous souhaitez que les utilisateurs soient redirigés vers ces urls plutôt que vers l'url de la page courante (page à partir de laquelle l'action a été appellée). Il faut déclarer et initialiser les variables ci-dessous avant l'appel de la fonction initBanner

  • backUrlAuth : Url de retour vers l'application après authentification -voir l'exemple ci-dessous-
  • backUrlProfil : Url de retour après modification du profil
  • backUrlLogout : Url de retour après logout

Exemple 1

<script>
var backUrlAuth='https://mon-url-de-retour.paris.fr/home';
initBanner(backUrlAuth);
</script>

Exemple 2

<script>
var backUrlAuth='https://mon-url-de-retour.paris.fr/home';
var backUrlProfil='https://mon-url-de-retour.paris.fr/home';

initBanner(backUrlAuth,backUrlProfil);
</script>

Exemple 3

<script>
var backUrlAuth='https://mon-url-de-retour.paris.fr/home';
var backUrlProfil='https://mon-url-de-retour.paris.fr/home';
var backUrlLogout='https://mon-url-de-retour.paris.fr/thanks';
initBanner(backUrlAuth,backUrlProfil,backUrlLogout);
</script>

4 - Intégration des items du menu "Mon Compte" dans un menu existant en mode "mobile"

Afin de ne pas surcharger l'écran en mode mobile (<768px), il a été décidé d'insérer les items de menus du bandeau "Mon Compte" directement dans le menu principal du site, si le site en possède un ! Menu Mon Compte en mode responsive La code HTML inséré par défaut correspond au menu standard du framework Bootstrap. Par défaut les item de menu sont des balises <li> qui sont insérées dans un <ul> auquel a été attribué la classe "navbar-banner-mcp". Code du menu Si l'application n'a pas de menu alors le bouton sera affiché. Bandeau mode responsive sans menu Pour les cas particulier, se reporter à la documentation de la librairie banner-moncompte.js

Modification du positionnement du bouton "Mon Compte"

Si le positionnement du bouton vient interférer avec votre application, il est possible d'en modifier le positionnement. Pour cela il faudra faire une surcharge des déclaration css suivantes contenues dans le fichier https://moncompte.paris.fr/moncompte/assets/css/banner-moncompte.css dans votre css, ou dans une balise <style> dans le head de votre page. La classe qui gère le positionnement se nomme ".banner-mon-compteconnexion-wrapper"

.banner-mon-compte__connexion-wrapper {
  color: #fff	
  /* Positionnement du bouton Mon Compte */
  /* z-index:2000 - Positionne le bouton au dessus des contenus de la page. Valeur à augmenter si le bouton n'apparait pas au dessus des contenus */
  z-index:2000;
  /* Positionnement absolu par rapport du "body" */
  position: absolute;
  /* Valeur à modifier pour positionné plus haut ou plus bas par rapport au top du "body" */
  top: 2rem;
  /* Valeur à modifier pour positionné plus à droite du "body" ou à remplacer par l'attribut "left" avec la valeur de son choix pour le positionner depuis la gauche du "body" */
  right: 6rem;
}

Pour le positionnement pour les écrans < 640px seul l'attribut top est modifié.

@media (max-width: 640px) {
  .banner-mon-compte__connexion-wrapper {
    top: 1rem;
  }
...

Spécification pour les applications Lutèce

Afin de gérer la déconnection il faut effectuer une montée de version du module openam: module-mylutece-openam en version 1.0.3

Ajouter la css disponible sur le site du guichet https://moncompte.paris.fr/moncompte/ dans le fichier WEB-INF/templates/skin/site/page_frameset.html

Pour effectuer des tests sur le domaine paris.mdp les ressources doivent être récupérées sur https://moncompte.rec.apps.paris.mdp/moncompte à la place de https://moncompte.paris.fr/moncompte

<head>
...
  <link href="https://moncompte.paris.fr/moncompte/assets/css/banner-moncompte.css" rel="stylesheet">
...
</head>

Ajouter le code HTML ci-dessous sous la balise <body> dans le fichier WEB-INF/templates/skin/site/page_frameset.html

<body>
<!-- banner-mon-compte begin -->
  <div class="banner-mon-compte__connexion-wrapper">
    <a class="banner-mon-compte__connexion-avatar" href="">
      <span class="banner-mon-compte__my-account"></span>
    </a>
  </div>
<!-- banner-mon-compte end -->
...

Pour insérer la librairie banner-moncompte.js et initialiser le bandeau il vous faut remplacer l'ensemble du code contenu dans le fichier WEB-INF/templates/skin/plugins/mylutece/includes/user_login_multi_include.html (ou WEB-INF/templates/skin/plugins/mylutece/includes/user_login_title.html en fonction de votre implémentation) par le code ci-dessous :

<noscript>
    <#if user?has_content>
        <li><a href="${url_dologout}"><span class="glyphicon glyphicon-off"></span> Déconnexion</a></li>
    <#else>
        <li><a href="${url_dologin}"> S'authentifier</a></li>
    </#if>
</noscript> 


<script src="https://moncompte.paris.fr/moncompte/assets/js/banner-moncompte.js"></script>
<script>initBanner();</script>

Pour ajouter l'identifiant nécessaire à l'ajout des items de menus en mode responsive, vous devez modifier votre ou vos fichiers contenant le menu en ajoutant la classe "navbar-banner-mcp" sur la balise "ul.nav" englobant le menu.