Menu déroulant et accordéon pour l'OPAC

Menu déroulant et accordéon pour l'OPAC

L'article suivant présente les configurations pour créer des menus déroulants ou des accordéons pour la présentation des informations dans votre OPAC. Les menus déroulants et les accordéons peuvent être insérés dans une Nouvelles, dans une entrée de l'outil Personnalisations HTML ou encore dans une page personnalisée.

1. Insérer du code HTML dans une nouvelle

Pour insérer le code HTML présenté dans l'article, il suffit de se rendre dans l'outil Nouvelles, Personnalisations HTML ou Pages, selon l'endroit où le menu ou l'accordéon devra être affiché. Lorsque la section voulue s'affiche, il suffit d'utiliser le bouton code source de l'éditeur :


Ce bouton fera afficher un encadré dans lequel on peut copier du code HTML avec les balises.


Une fois enregistré, le code source est mis en forme dans l'éditeur :


2. Menu déroulant

2.1 Code

Le code HTML suivant permet de créer un menu déroulant sur votre OPAC pour offrir des requêtes préfabriquées aux utilisateurs. Par exemple, il est possible de faire un menu pour les dernières acquisitions par type de document :
<h2>Découvrez les nouveautés</h2>
<p><form name="searchform" method="get" action="/cgi-bin/koha/opac-search.pl">
<input name="idx" value="kw" type="hidden">
<input name="sort_by" value="acqdate_dsc" type="hidden">
<input name="do" value="OK" type="hidden">
<select name="q" onchange="this.form.submit()">
<option>-- Choisissez --</option>
<option value="mc-itype:BAND AND acqdate:2024">Bandes dessinées</option>
<option value="mc-itype:DVD AND acqdate:2024">DVD</option>
<option value="mc-itype:L AND acqdate:2024">Livre</option>
<option value="mc-itype:RP AND acqdate:2024">Roman policier</option>
</select>
</form>
</p>

Ce qui est en rouge dans le code correspond à ce qui peut être modifié pour obtenir la requête voulue. À la fin de chaque ligne, juste avant </option>, il s'agit du nom qui apparaitra dans le menu. Il ne faut pas que ce nom soit trop long, sinon le menu n'affichera pas bien.


2.2 Choix des filtres

Il est possible d'ajouter tous les filtres voulus dans chaque option. La syntaxe à utiliser est toujours la même, c'est-à-dire nom du filtre:valeur SÉPARATEUR.
Pour connaître le nom du filtre, il est possible d'aller dans la configuration ElasticSearch, dans le module Administration > Configuration du moteur de recherche (Elasticsearch). Dans cette page, on retrouve les différents champs de recherche ainsi que leur alias, quand il y en a un. Il est possible d'utiliser le nom complet ou simplement l'alias. Par exemple, le filtre pour le type de document a comme nom "itype" et comme alias "mc-itype".


Simplement inscrire itype fonctionnerait donc aussi.

Un autre exemple serait le champ localisation. Le nom complet du champ est "location" et les alias possibles sont "mc-loc" ou "loc"



En cas d'incertitude sur le champ de recherche à utiliser, il est possible de regarder à quelles zones MARC chaque champ de recherche correspond en allant dans l'onglet Notices bibliographiques de la page des configuration du moteur de recherche.


En recherchant dans la page (CTRL+F), il est possible de rechercher la zone MARC voulue. Par exemple, pour la zone des types de documents, 952$y, on trouvera la ligne suivante :


On aura alors la confirmation que le filtre sur les types de documents en zone 952$y est itype.

Lorsque les champs de recherche sont choisis, il faut déterminer les valeurs à inscrire. Il est possible d'inscrire des mots-clés, des dates ou encore des valeurs autorisées. Dans le cas des valeurs autorisées, comme les types de documents, il faut utiliser le code de la valeur.


Résultat
Dans l'exemple, mc-itype:BAND représente le filtre pour le type de document (mc-itype:) et le code du type de document voulu (BAND). Il est possible d'ajouter des lignes <option […] </option> pour obtenir autant d'options dans le menu que désiré.
Dans l'exemple, acqdate:2024 représente le filtre pour la date d'acquisition (acqdate:) et l'année voulue (2024). Les deux filtres sont séparés par l'opérateur voulu (AND), mais il serait possible d'utiliser n'importe quel opérateur booléen (OR/NOT/AND).

3. Accordéon

L'accordéon sera généralement placé dans une Nouvelle ou dans une entrée OpacMainUserBlock, dans l'outil Personnalisations HTML.

3.1 Code HTML

Les textes en rouge sont à modifier pour personnaliser l'accordéon.
<body>
  <div class="accordion-body">
  <div class="accordion">
    <h1>Titre de l'accordéon</h1>
    <hr>
    <div class="container">
      <div class="label">Titre de la section 1</div>
      <div class="content">Contenu de la section 1</div>
    </div>
    <hr>
    <div class="container">
      <div class="label">Titre de la section 2</div>
      <div class="content">Contenu de la section 2</div>
    </div>
    <hr>
    <div class="container">
      <div class="label">Titre de la section 3</div>
      <div class="content">Contenu de la section 3</div>
    </div>
    <hr>
    <div class="container">
      <div class="label">Titre de la section 4</div>
      <div class="content">Contenu de la section 4</div>
    </div>
    <hr>
    <div class="container">
      <div class="label">Titre de la section 5</div>
      <div class="content">Contenu de la section 5</div>
    </div>
  </div>
  </div>
  <script src="index.js" type="text/javascript"></script>
</body>

Dans l'éditeur, l'accordéon apparaitra comme des sections dépliées. Le repli des sections sera visible une fois à l'OPAC avec l'ajout du code Javascript.

3.2 Code CSS

Dans la préférence système OpacUserCSS il faudra ajouter le code suivant :
/*ACCORDEON*/
/* Paramètre de la taille de l'accordéon. La marge est de 90px partout */
.accordion {
  width: 600px;
  margin: 90px auto;
  color: black;
  background-color: white;
  padding: 45px 45px;
}
.accordion .container {
  position: relative;
  margin: 10px 10px;
}
.accordion .label {
  position: relative;
  padding: 10px 0;
  font-size: 30px;
  color: black;
  cursor: pointer;
}
/* permet de cacher le menu, height doit rester à 0 */
.accordion .content {
  position: relative;
  background: white;
  height: 0;
  font-size: 20px;
  text-align: justify;
  width: 780px;
  overflow: hidden;
  transition: 0.5s;
}
/*rajoute une ligne horizontale entre les contenus */
.accordion hr {
  width: 100;
  margin-left: 0;
  border: 1px solid grey;
}
/*décacher le contenu, ajutster la hauteur */
.accordion .container.active .content {
  height: 400px;
}
/*pour l'affichage du moins à droite du titre*/
.accordion .label::before {
  content: '+';
  color: black;
  position: absolute;
  top: 50%;
  right: -25px;
  font-size: 30px;
  transform: translateY(-50%);
}
/* pour changer le + en - */
.accordion .container.active .label::before {
  content: '-';
  font-size: 30px;
}
/*FIN ACCORDEON*/

Ce code peut être ajusté pour obtenir les couleurs et les styles voulus. Le code ci-dessus permet d'obtenir un accordéon blanc avec de l'écriture blanche, tout simplement.

3.3 Ajout de code javascript

Le code doit être mis au tout début, au-dessus de la ligne $(document).ready(function() {,  dans la préférence système OpacUserJS.
const accordion = document.getElementsByClassName('container');
for (i=0; i<accordion.length; i++) {
  accordion[i].addEventListener('click', function () {
    this.classList.toggle('active');
  });
}

Article révisé pour la version 23.05

    • Related Articles

    • Code javascript pour l’opac

      Article en restructuration, il est possible que la mise en page ne soit pas optimale. 0. Configuration 0.1 Préférence OPACUserJS La préférence système opacuserjs peut être utilisée pour activer du code java à l’OPAC. Les codes qui sont listés ...

    • Exporter une notice à l’OPAC

      Vous avez déjà vu quelques nouveautés pour l’opac avec la version 3.8 et surtout la possibilité maintenant de conserver les termes recherchés en recherche avancée. Ce dont je vais vous parler aujourd’hui concerne une nouveauté quand on se place dans ...

    • Code CSS pour l’opac

      Le code CSS permet de modifier l’apparence des textes et des alertes dans Koha. Vous pouvez insérer ces différents codes dans la préférence système OpacUserCSS. 1. Enlever le souligné des liens à l’opac dans la colonne de gauche (OpacNav) #opacnav a, ...

    • Ajouter un menu déroulant dans un rapport sql

      Pour rajouter un menu déroulant lors de l'exécution d'une requête SQL, voici les différents codes à ajouter. 1. Menu déroulant sans l'option Tous Voir la vidéo suivante pour une démonstration https://www.screencast.com/t/seeGtiPe 1.1 Ajouter un menu ...

    • Cacher des notices ou des exemplaires à l’Opac

      Il existe deux façons de cacher des notices à l’OPAC selon ce que vous avez besoin : cacher une notice en particulier ou alors cacher plusieurs notices qui répondent à une même règle (même type de document, même localisation, etc.) 1. Cacher des ...