Code javascript pour l’OPAC

L'article suivant présente des codes Javascript pouvant être utilisés pour personnaliser l'OPAC.

0. Configurations

0.1 Préférence OPACUserJS

Il faut ajouter les codes dans la préférence système OPACUserJS. Les changements effectués par ces codes seront visibles à tout moment et pour tout les utilisateurs dans l'OPAC.

Les codes qui sont listés ci-dessous doivent être inscrits entre ces deux balises en rouge.

$(document).ready(function(){

CODE

});

0.2 JS pour l'OPAC spécifique dans les paramètres des bibliothèques - Nouveauté 24.05

Une nouveauté de la version 24.05 permet d'injecter du code Javascript et CSS pour chaque bibliothèque spécifique. Ce code est injecté à partir des paramètres de la bibliothèque dans Administration > Bibliothèques.

Lorsque du code Javascript est injecté dans ce paramètre, la modification effectuée par le code est visible UNIQUEMENT lorsqu'on est connecté à un compte rattaché à la bibliothèque en question. Si, par exemple, on injecte du code dans la bibliothèque Collecto qui permet de cacher l'onglet MARC de la vue détaillée d'une notice, l'onglet sera visible pour toutes les personnes qui accèdent à l'OPAC sans se connecter. L'onglet ne sera pas visible pour un usager qui se connecte et dont le compte est rattaché à la bibliothèque Collecto.

Comme pour la préférence système OPACUserJS, il faut insérer le code suivant avant d'inscrire du code Javascript dans les paramètres des bibliothèques.

$(document).ready(function(){

CODE

});

1. Recherche

1.1 Recherche simple

1.1.1 Bloquer le bouton de la recherche simple (le bouton ne peut plus être cliqué pendant que la recherche est en chargement)

Fonctionne avec la version 24.05

//bloquer bouton recherche simple
$('#searchform').submit(function() {
$('#searchsubmit').prop('disabled',true).text('Recherche...');
});

1.1.2 Positionner par défaut l’index de la recherche simple sur Titre

Fonctionne avec la version 24.05

//positionner index titre recherche simple
$("select#masthead_search[name='idx']").val("ti").attr("selected","selected");

1.1.3 Positionner par défaut l'index en recherche simple sur une bibliothèque ou un groupe de bibliothèque

Fonctionne avec la version 24.05

Pour une bibliothèque individuelle :

//positionner sur une de bibliothèque par défaut

$("select#select_library[name='limit']").val("branch:CODE_BIBLIOTHEQUE").attr("selected","selected");

Le code de la bibliothèque se trouve dans le tableau des bibliothèques, sous Administration > Bibliothèques.

Pour un groupe de bibliothèques :

//positionner sur Groupe de bibliothèque par défaut

$("select#select_library[name='limit']").val("multibranchlimit:X").attr("selected","selected");

Le X doit être remplacé par le numéro de groupe. Malheureusement, ce numéro n'apparait pas dans l'interface de Koha. Pour le trouver, il faut fouiller dans le code source de la page à l'OPAC.

Voici comment procéder :

Les captures d'écran de la procédure suivante ont été prises dans Chrome, mais les étapes restent les mêmes dans Firefox ou encore Microsoft Edge.

1. Placez votre curseur sur l'index bibliothèques de la barre de recherche simple et faites un clic droit

2. Sélectionnez dans le menu l'option Inspecter :

3. Des lignes de codes seront surlignées. Cliquez sur la flèche à gauche pour dérouler le code.

4. Vous verrez deux autres sections de code, soit Bibliothèques et Groupes.

5. Cliquez sur la flèche à gauche, vis-à-vis la ligne Groupes. Vous verrez le ou les groupes paramétrés dans votre site. Vous aurez alors le numéro du groupe à mettre dans le code Javascript. Dans le cas ci-dessous, il faudrait remplacer le X dans le code par 10.

1.1.4 Curseur se positionne directement dans la barre de recherche simple

Fonctionne avec la version 24.05

Sans ce code, vous devez cliquez dans la boite de recherche simple pour pouvoir écrire votre recherche. Ce code permet d’écrire votre recherche sans devoir cliquer dans la boite.

//Positionner le curseur dans la barre de recherche simple
$("#translControl1").focus();

1.1.5 Cacher un site dans le menu déroulant de la recherche simple et de la recherche avancée

Fonctionne avec la version 24.05

//cacher site menu déroulant recherche simple

$("#select_library option[value='branch:CODE_SITE']").remove();

1.2 Recherche avancée

1.2.1 Positionner les index en recherche avancée

Fonctionne avec la version 24.05

//Choisir les index par défaut en recherche avancée

$("select[name='idx']:eq(0)").val("su,wrdl").attr("selected","selected");

$("select[name='idx']:eq(1)").val("au,wrdl").attr("selected","selected");

$("select[name='idx']:eq(2)").val("ti").attr("selected","selected");

Avec ce code, les trois menus déroulants de la recherche avancée vont se positionner sur sujet, auteur et titre.

1.2.2 Cacher des types de documents en recherche avancée

Fonctionne avec la version 24.05

//Cacher des types de documents en recherche avancée

$("input[value='mc-itype,phr:CODE_TYPE_DOC']").parent().hide();

1.2.3 Cacher des localisations en recherche avancée

Fonctionne avec la version 24.05

//Cacher des localisations en recherche avancée

$("input[value='mc-loc:CODE_LOCALISATION']").parent().hide();

1.2.4 Modifier l'index Langue en recherche avancée

Fonctionne avec la version 24.05
//Supprimer langues 008 du menu
$("select#language-limit option[value='ln,rtrn:eng']").hide();
$("select#language-limit option[value='ln,rtrn:fre']").hide();
$("select#language-limit option[value='ln,rtrn:ger']").hide();
$("select#language-limit option[value='ln,rtrn:ita']").hide();
$("select#language-limit option[value='ln,rtrn:spa']").hide();

//Changer zone 008 pour zone 041 pour la recherche de langue
$("select#language-limit[name='limit']").append("<option value='ln-audio:eng'>English (Anglais)</option>");
$("select#language-limit[name='limit']").append("<option value='ln-audio:fre'>Français (Français)</option>");
$("select#language-limit[name='limit']").append("<option value='ln-audio:ger'>Deutsch (Allemand)</option>");
$("select#language-limit[name='limit']").append("<option value='ln-audio:ita'>Italiano (Italien)</option>");
$("select#language-limit[name='limit']").append("<option value='ln-audio:ita'>Español (Espagnol)</option>");

1.2.5 Cacher l’index Éditeur par défaut et ajouter un index Provider pour les zones 260 et 264

Fonctionne avec la version 24.05

//pour cacher index éditeur
$("#booleansearch option[value='pb,wrdl']").hide();
//pour ajouter index provider 260 et 264
$("#search-field_0 option[value='au,phr']").after("<option value='pv,wrdl'>Éditeur</option>");
$("#search-field_1 option[value='au,phr']").after("<option value='pv,wrdl'>Éditeur</option>");
$("#search-field_2 option[value='au,phr']").after("<option value='pv,wrdl'>Éditeur</option>");

1.2.6 Cacher un site dans le menu déroulant de la recherche simple et de la recherche avancée

Fonctionne avec la version 24.05

//cacher site menu déroulant recherche avancée
$("#branchloop option[value='branch:CODE_SITE']").remove();

1.2.7 Ajouter un index Titre de revues

Voir l'article explicatif pour insérer ce code sur votre instance : Ajouter un index titre de revues

1.2.8 Cacher des index de la recherche avancée

Fonctionne avec la version 24.05

//Cacher des index en recherche avancée

$("#booleansearch option[value='CODE_INDEX']").hide();

Dans le code, il faut remplacer ce qui est en rouge par le code de l'index, qu'on retrouve dans le code source de la page. Pour le trouver, il faut faire un clic droit sur la case des index puis cliquer sur Inspecter. Le code source s'affiche alors et on peut voir l'ensemble des index. Dans l'exemple ci-dessous, si on voulait cacher l'index Sujet et termes restreints, il faudrait donc utiliser le code su-na.

2. Page de résultats de recherche

2.1 Cacher l’option « Limiter aux exemplaires présentement disponibles »

Fonctionne avec la version 24.05

//Cacher l'option Limiter aux exemplaires présentement disponibles des facettes

$("#availability_facet").remove();

2.2 Remplacer le texte « Retour à la recherche précédente »

Fonctionne avec la version 24.05

//Remplacer le texte Retour à la recherche précédente

$("a:contains('Retourner à la dernière recherche avancée')").text("TEXTE_VOULU");

2.3 Cacher des sections dans la colonne des facettes en liste de résultat

Fonctionne avec la version 24.05

//Cacher les facettes de localisations
$("li#location_id").hide();

//Cacher les facettes de lieux
$("li#su-geo_id").hide();

//Cacher les facettes de collections
$("li#title-series_id").hide();

//Cacher les facettes de bibliothèque temporaire/actuelle
$("li#holdingbranch_id").hide();

//Cacher les facettes de bibliothèque propriétaire
$("li#homebranch_id").hide();

2.4 Cacher cote des documents non disponibles

Fonctionne avec la version 24.05
//cacher cote
$("span.unavailable span.LabelCallNumber").hide();

3. Position de blocs de personnalisations HTML

3.1 Mettre le contenu du bloc OPACResultsSidebar au-dessus des facettes

Fonctionne avec la version 24.05

//Déplacer OPACResultsSideBar au-dessus des facettes
$("#search-facets").prepend($("#opacresultssidebar"));

3.2 Déplacer les onglets du compte de l’usager au-dessus du bloc OPACNav

Fonctionne avec la version 24.05

//Déplacer OPACNav sous les onglets du dossier usager
$("#OpacNav").prepend($("#usermenu"));

                            Avant
Après

3.3 Mettre le carrousel et les blocs OPACMainUserBlock au-dessus des nouvelles

Fonctionne avec la version 24.05

//Déplacer OPACMainUserBlock au-dessus des nouvelles
$( ".newscontainer" ).insertAfter( $( "#inlibro-carrousel" ) );
$( "#rssnews-container" ).insertAfter( $( ".newscontainer" ) );
$( "#news-branch-select" ).insertBefore( $( ".newscontainer" ) );

4. Vue détaillée d'une notice

4.1 Notice

4.1.1 Cacher les options de vues des notices

Fonctionne avec la version 24.05

//Cacher vue MARC 
$("#MARCview").parent().hide();

//Cacher vue ISBD
$("#ISBDview").parent().hide();

4.1.2 Cacher la zone 245$c de la vue normale d’une notice

Fonctionne avec la version 24.05

//Cacher 245$c de la vue normale
$("span.title_resp_stmt").hide();

4.1.3 Cacher la zone 490 dans la vue normale d’une notice avec l’utilisation de la feuille de style Collecto

Fonctionne avec la version 24.05

//cacher 490 notice opac
$("div.record span.results_summary.490").remove();

4.1.4 Déplacer les ISBN en dessous des autres informations bibliographiques

Fonctionne avec la version 24.05
 //Déplacer ISBN en bas de la notice
$('#bibliodescriptions').prepend($('span.results_summary.publisher:contains(ISBN)'));

4.1.5 Changer le texte du bouton Réserver en gardant l'icône de signet dans une notice en vue détaillée

Fonctionne avec la version 24.05

//Modifier le texte Réserver

$("#action a:contains(' Réserver')").text(" VOTRE TEXTE ").prepend('');

4.1.6 Cacher la source des imagettes dans la vue détaillée

Fonctionne avec la version 24.05

//cacher image provenant de l'imagette
$("div.hint:contains('Image')").hide();

4.1.7 Modifier le texte Accès en ligne des liens 856

Fonctionne avec la version 24.05

//Modifier le texte et l'apparence du lien en 856

$("a:contains('Accès en ligne')").text("ACCÈS EN LIGNE").css({"color": "red"});

Le code ci-dessus change la couleur du texte en rouge et met le texte en majuscule.

4.2 Exemplaires

4.2.1 Modifier le texte dans le tableau des exemplaires, dans la notice en vue détaillée, quand il n’y a pas d’exemplaires

Fonctionne avec la version 24.05

//Changer le texte quand la notice n'a pas d'exemplaires
$("#noitems:contains('Aucun exemplaire')").text("VOTRE TEXTE");

4.2.2 Changer le texte de l'entête de la colonne Statut

Fonctionne avec la version 24.05

//Changer entête colonne statut des exemplaires
$("th#item_status").text("VOTRE_TEXTE");

4.2.3 Changer le texte Numéro de copie dans l’en-tête du tableau des exemplaires

Fonctionne avec la version 24.05

//changer l'entête de la colonne Numéro de copie
$("th#item_copy").text("Exemplaire n°");

4.2.4 Couleur différente pour le statut inscrit dans la colonne Statut en vue détaillée de la notice

Fonctionne avec la version 24.05

//couleur differente pour statut not for loan
$("span.item-status.notforloan:contains('Consultation sur place')").css({"color": "green"});

4.2.5 Changer le texte Parcourir l’étagère par un autre texte comme Voir des exemplaires similaires

Fonctionne avec la version 24.05

//Changer le texte de Parcours l'étagère

$("#holdingst a:contains('étagère')").text("Voir des exemplaires similaires");

5. Affichage global de l'OPAC

5.1 Cacher le lien Accueil sur la page d’accueil de l’OPAC

Fonctionne avec la version 24.05

//Cacher lien Accueil sur page Accueil

$("#opac-main div.main #breadcrumbs").hide();

5.2 Changer le texte Se connecter

Fonctionne avec la version 24.05
//Changer le texte Se connecter au-dessus des boîte de connexion 
$("#auth legend:contains('Se connecter :')").text("CODEJS");

//Changer le texte Se connecter dans le bandeau du haut 
$("#members a:contains('Se connecter')").text("CODEJS");      

//Changer le texte Se connecter dans la fenêtre de connexion (quand on clique sur Se connecter dans le bandeau) 
$("#modalLoginLabel:contains('Se connecter')").text("CODEJS");

5.3 Ajouter un message au-dessus des boîtes de connexion manuelle

Fonctionne avec la version 24.05

//Ajouter un message au-dessus des boîtes de connexion manuelle

$("div.local-login").prepend(" Merci de vous connecter à votre compte afin de bénéficier de toutes les fonctionnalités offertes ");

5.4 Cacher le lien Bibliothèques

Fonctionne avec la version 24.05

//Cacher bouton Bibliothèque sous la barre de recherche simple

$("a#library_page").parent("li").remove();

6. Listes

6.1 Ajouter des instructions pour la création de listes dans l'onglet Listes publiques

Fonctionne avec la version 24.05

//Ajouter des instructions au-dessus des listes publiques
$("div#publicshelves").prepend("<p>Merci de bien vouloir :</br><li> éviter les listes de moins de 3 titres ;</li><li> supprimer vos listes désuètes ;</li><li> choisir un titre significatif </li><li> nous contacter si vous souhaitez en savoir plus sur les LISTES (privées et publiques) ou les PANIERS ;</li></p>")

7. Recherche d'autorités

7.1 Enlever des index de recherche dans le module recherche d’autorités

Fonctionne avec la version 24.05
//Cacher index dans recherche d'autorités
$("#authtypecode option[value='CODE_TYPE_AUTORITÉ']").remove();

Il faut modifier ce qui est en rouge par le type d'autorité pour le retirer de la liste :

CORPO_NAME pour Collectivité auteur
MEETI_NAME pour Congrès
DESC pour Description
GENRE/FORM pour Genres et formes
PERSO_NAME pour Personne physique
CHRON_TERM pour Subdivisions chronologiques
GEOGR_NAME pour Subdivisions géographiques
TOPIC_TERM pour Sujet
UNIF_TITLE pour Titre uniforme

8. Suggestions d'achat

8.1 Rajouter du texte dans la page de suggestion d’achat

//Modifier le texte au-dessus du formulaire de suggestion d'achats

$("#usersuggestions p:contains('LE_PREMIER_MOT_DU_TEXTE_A_REMPLACER')").html("VOTRE_TEXTE_DE_REMPLACEMENT");

Related Articles
Code CSS pour l’OPAC
L'article suivant présente des codes CSS pouvant être utilisés pour personnaliser l'OPAC. 0. Configurations 0.1 Préférence OPACUserCSS Il faut ajouter les codes dans la préférence système OPACUserCSS. Les changements effectués par ces codes seront ...
Code javascript pour l’intranet
0. Configuration La préférence système intranetuserjs peut être utilisé pour activer du code java à l’intranet. Les codes qui sont listés ci-dessous doivent être inscrit entre ces deux balises en rouge (les balises ne doivent apparaître qu’une fois ...
Ajouter un index Titre de revue
Cet ajout permet de rechercher rapidement un Titre de revue en cherchant dans l'index Titre et en ajoutant un filtre sur le ou les types de documents correspondant à vos revues. Le code fonctionnel avec ElasticSearch est beaucoup plus complexe que ce ...
Code CSS pour l’intranet
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 IntranetUserCSS. 1. Modifier l’apparence des messages sur la page d’accueil de l’intranet ...
Mettre en valeur les ressources numériques à l’OPAC à l'aide d'un bouton
Il existe 2 façons de mettre en valeur les liens vers vos ressources numériques à l'Opac : à l'aide d'un code Javascript à l'aide d'un code CSS Les deux permettront d'afficher un bouton, en gras, à la place du lien, mais auront un comportement ...

Code javascript pour l’OPAC

Code javascript pour l’OPAC

0. Configurations

0.1 Préférence OPACUserJS

0.2 JS pour l'OPAC spécifique dans les paramètres des bibliothèques - Nouveauté 24.05

1. Recherche

1.1 Recherche simple

1.1.1 Bloquer le bouton de la recherche simple (le bouton ne peut plus être cliqué pendant que la recherche est en chargement)

1.1.2 Positionner par défaut l’index de la recherche simple sur Titre

1.1.3 Positionner par défaut l'index en recherche simple sur une bibliothèque ou un groupe de bibliothèque

1.1.4 Curseur se positionne directement dans la barre de recherche simple

1.1.5 Cacher un site dans le menu déroulant de la recherche simple et de la recherche avancée

1.2 Recherche avancée

1.2.1 Positionner les index en recherche avancée

1.2.2 Cacher des types de documents en recherche avancée

1.2.3 Cacher des localisations en recherche avancée

1.2.4 Modifier l'index Langue en recherche avancée

1.2.5 Cacher l’index Éditeur par défaut et ajouter un index Provider pour les zones 260 et 264

1.2.6 Cacher un site dans le menu déroulant de la recherche simple et de la recherche avancée

1.2.7 Ajouter un index Titre de revues

1.2.8 Cacher des index de la recherche avancée

2. Page de résultats de recherche

2.1 Cacher l’option « Limiter aux exemplaires présentement disponibles »

2.2 Remplacer le texte « Retour à la recherche précédente »

2.3 Cacher des sections dans la colonne des facettes en liste de résultat

2.4 Cacher cote des documents non disponibles

3. Position de blocs de personnalisations HTML

3.1 Mettre le contenu du bloc OPACResultsSidebar au-dessus des facettes

3.2 Déplacer les onglets du compte de l’usager au-dessus du bloc OPACNav

3.3 Mettre le carrousel et les blocs OPACMainUserBlock au-dessus des nouvelles

4. Vue détaillée d'une notice

4.1 Notice

4.1.1 Cacher les options de vues des notices

4.1.2 Cacher la zone 245$c de la vue normale d’une notice

4.1.3 Cacher la zone 490 dans la vue normale d’une notice avec l’utilisation de la feuille de style Collecto

4.1.4 Déplacer les ISBN en dessous des autres informations bibliographiques

4.1.5 Changer le texte du bouton Réserver en gardant l'icône de signet dans une notice en vue détaillée

4.1.6 Cacher la source des imagettes dans la vue détaillée

4.1.7 Modifier le texte Accès en ligne des liens 856

4.2 Exemplaires

4.2.1 Modifier le texte dans le tableau des exemplaires, dans la notice en vue détaillée, quand il n’y a pas d’exemplaires

4.2.2 Changer le texte de l'entête de la colonne Statut

4.2.3 Changer le texte Numéro de copie dans l’en-tête du tableau des exemplaires

4.2.4 Couleur différente pour le statut inscrit dans la colonne Statut en vue détaillée de la notice

4.2.5 Changer le texte Parcourir l’étagère par un autre texte comme Voir des exemplaires similaires

5. Affichage global de l'OPAC

5.1 Cacher le lien Accueil sur la page d’accueil de l’OPAC

5.2 Changer le texte Se connecter

5.3 Ajouter un message au-dessus des boîtes de connexion manuelle

5.4 Cacher le lien Bibliothèques

6. Listes

6.1 Ajouter des instructions pour la création de listes dans l'onglet Listes publiques

7. Recherche d'autorités

7.1 Enlever des index de recherche dans le module recherche d’autorités

8. Suggestions d'achat

8.1 Rajouter du texte dans la page de suggestion d’achat

Related Articles

Code CSS pour l’OPAC

Code javascript pour l’intranet

Ajouter un index Titre de revue

Code CSS pour l’intranet

Mettre en valeur les ressources numériques à l’OPAC à l'aide d'un bouton