Dans le cadre d'un projet pour un client, je devais créer une vue blog alimentée avec des articles provenant de multiples catégories. Bonne nouvelle, c'est très simple à faire en utilisant le module mod_articles_category dont les fonctionnalités répondent à la demande de mon client. Le seule problème est la longueur de la page créée car la grande quantité d'articles génère un scroll énorme.
Pour remédier à cela, je n'ai pas eu d'autre choix que d'ajouter un système de pagination au module pour pouvoir contrôler l'affichage. Et vous allez le voir, cela fonctionne plutôt bien et en plus, c'est une override légère et assez simple à réaliser.
Si vous avez besoin de ce genre de fonctionnalités pour votre site ou pour le projet d'un client, voici ma solution (n'oubliez pas de bookmarker cette page grâce à CTRL + D). N'hésitez pas à copier et à modifier cette override en fonction de vos besoins.
Comment ajouter une pagination à un module Joomla ?
Si vous n'êtes pas à l'aise avec le principe des overrides dans Joomla, je vous recommande fortement de lire d'abord le tutoriel Comment créer des overrides dans Joomla - Part 1 avant d'aller plus loin. C'est vraiment indispensable et vous apprendrez beaucoup (enfin, je l'espère).
Si vous pratiquez déjà l'override, vous pouvez continuer la lecture.
Dans ce tutoriel, j'utilise mod_articles_category mais cela fonctionne avec n'importe quel module Joomal affichant du contenu. Donc, si vous choisissez un autre type de module, le résultat sera le même.
En géneral, le système de pagination d'un site est propulsé par ce JavaScript. Donc, comme nous ne pouvons pas utiliser le système de pagination natif de Joomla ici, nous allons en ajouter un autre.
J'ai choisi jPages créé par Luis Almeida. Il s'agit d'un système de pagination frontend qui utilise la bibliothèque jQuery et CSS3, mais ce plugin vous offre beaucoup plus de fonctionnalités par rapport à la plupart des autres plugins, telles que la rotation automatique des pages, la navigation par touches et par défilement, l'affichage des éléments avec un délai, un panneau de navigation entièrement personnalisable et également l'intégration avec Animate.css et Lazy Load.
Outre toutes ses fonctionnalités, la principale différence avec les autres plugins de pagination est qu'avec jPages, vous pouvez créer autant de pagination que vous le souhaitez et vous pouvez choisir exactement où les placer. C'est parfait pour notre override !
Téléchargez le .zip sur votre ordinateur et décompressez l'archive.
Ici, nous avons seulement besoin de copier le contenu du fichier jPages.min.js et de l'ajouter dans notre template Joomla.
Créer l'override dans Joomla
La première chose à faire est de créer un nouveau fichier JS intitulé simplePagination.min.js dans le dossier js de votre template.
Copiez / collez le contenu du fichier jPages.min.js dans votre nouveau fichier pluis cliquez sur le bouton Enregistrer & Fermer.
Maintenant, créez l'override de votre module dans votre template en suivant le tutoriel que j'ai partagé plus tôt.
Dans le haut de votre fichier, juste après le symbole ?>, ajoutez le code suivant:
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script type="text/javascript" src="<?php echo $tpatch; ?>js/simplePagination.min.js"></script>Explications: pour que notre override puisse fonctionner, nous appellons la librairie jQuery ainsi que le fichier contenant le code générant le système de pagination.
Enfin, après la dernière balise </div> à la fin de votre override, ajoutez le code suivant :
<script type="text/javascript">
$(document).ready(function () {
$("div.my-pagination").jPages({
containerID: "article-list",
perPage: 25, // number of articles to display per page
keyBrowse: true,
scrollBrowse: false,
previous : "Previous",
next : "next",
});
$(".my-pagination a[href='#']").click(function() {
$("html, body").animate({ scrollTop: 80 }, "slow");
});
});
</script>Explications: nous ajoutons le script JavaScript qui permet d'afficher et de faire fonctionner notre pagination dans notre module.
Le dernier point consiste à ajouter la pagination dans l'override.
Pour ce faire, ajoutez simplement le code HTML suivant à l'endroit exact où vous souhaitez afficher votre système de pagination. En général, c'est au bas de la page.
Dans ce cas, avant la dernière balise </div>, ajoutez ce code dans votre override :
<div class="my-pagination invisible text-center"></div>Si vous avez suivi toutes les étapes, cela devrait vous donner le code suivant :
<?php
/**
* @package Joomla.Site
* @subpackage mod_articles_category
* @Author web-eau.net
* @copyright Copyright (C) 2005 - 2020 Open Source Matters, Inc. All rights reserved.
* @license GNU General Public License version 2 or later; see LICENSE.txt
*/
defined('_JEXEC') or die;
$app = JFactory::getApplication();
$tpatch = JURI::base(true).'/templates/'.$app->getTemplate().'/';
?>
<!-- Let's add the jQuery -->
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script type="text/javascript" src="<?php echo $tpatch; ?>js/simplePagination.min.js"></script>
<!-- Override markup -->
<div class="article-list" id="article-list">
<?php foreach ($list as $item) : ?>
<div class="">
</div>
<?php endforeach; ?>
<!-- Let's add the pagination at the bottom-->
<div class="my-pagination invisible text-center"></div>
</div>
<script type="text/javascript">
$(document).ready(function () {
$("div.my-pagination").jPages({
containerID: "article-list",
perPage: 25, // number of articles to display per page
keyBrowse: true,
scrollBrowse: false,
previous : "Previous",
next : "next",
});
$(".my-pagination a[href='#']").click(function() {
$("html, body").animate({ scrollTop: 80 }, "slow");
});
});
</script>Ajoutons un peu de CSS à notre système de pagination
Parce que le style dépend de votre template et de la charte graphique de votre site, vous êtes libre de copier ou de changer complètement les classes CSS suivantes.
Parce que je n'en avais pas besoin ailleurs sur le site du client, j'ai ajouté la balise <style> à la fin de mon override.
<style>
.my-pagination {
display: block;
position: relative;
min-height: 60px;
line-height: 60px;
}
.my-pagination a {
margin: 0 15px;
color: #353535;
cursor: pointer;
text-decoration: none !important;
}
.my-pagination a:hover {
text-decoration: none;
}
.my-pagination a.jp-current {
border-bottom: 2px solid;
width: 19px;
display: inline-block;
height: 45px;
color: #1A62B7;
}
.my-pagination .jp-previous.jp-disabled,
.my-pagination .jp-next.jp-disabled {
background: rgb(242, 242, 242);
padding: 16px 30px;
border-radius: 5px;
color: #BABABA !important;
cursor: auto;
}
.my-pagination .jp-previous.jp-disabled {
margin: 0 50px 0 0 !important;
}
.my-pagination .jp-next.jp-disabled {
margin:0 0 0 50px !important;
}
.my-pagination .jp-previous {
background: rgb(26, 98, 183);
padding: 16px 30px;
border-radius: 5px;
color: #FFF !important;
margin: 0 50px 0 0 !important;
cursor: pointer;
}
.my-pagination .jp-next {
background: rgb(26, 98, 183);
padding: 16px 30px;
border-radius: 5px;
color: #FFF !important;
margin:0 0 0 50px !important;
cursor: pointer;
}
</style>Et voilà!
Vous avez ajouté une pagination dans votre module Joomla comme un.e pro ! N'hésitez pas à partager ce tutoriel autour de vous s'il vous a aidé. Si vous avez des commentaires ou des questions, vous pouvez me contacter.
Merci d'avoir lu et partagé de tutoriel.
