Dec 12, 2017 4:28:57 PM Thomas Dumont avatar   1812

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.
  • Sur les applications Lutèce, le module mylutece-openam en version 1.0.3 ou supérieur doit être présent.

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 -->
...

Pour les applications Lutèce, le code est à ajouter dans le fichier WEB-INF/templates/skin/site/page_frameset.html

Le bouton "Mon Compte" apparaîtra 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 du fichier CSS

Il faut inclure la css :

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

NOM_DOMAINE doit être remplacé par :

  • En recette : moncompte.rec.apps.paris.mdp
  • En production : moncompte.paris.fr

Pour les applications Lutèce, le code est à ajouter dans le fichier WEB-INF/templates/skin/site/page_frameset.html

3 - Insertion du javascript

Ajouter le fichier js à la fin de vos pages.

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

NOM_DOMAINE doit être remplacé par :

  • En recette : moncompte.rec.apps.paris.mdp
  • En production : moncompte.paris.fr
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>

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.

Spécification pour les applications Lutèce

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://NOM_DOMAINE/moncompte/assets/js/banner-moncompte.js"></script>
<script>initBanner();</script>

NOM_DOMAINE doit être remplacé par :

  • En recette : moncompte.rec.apps.paris.mdp
  • En production : moncompte.paris.fr

Utilisation de initBanner()

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

backUrlAuth ne doit pas contenir la chaine de caractère "script" y compris à l'intérieur d'un mot (ex : inscription)

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 items 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

Pour les applications Lutèce, 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.

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 https://moncompte.paris.fr/moncompte/assets/js/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;
  }
...