La pagination native de Webflow recharge la page et ramène les visiteurs tout en haut. Voici l'astuce Webflow que nous utilisons le plus pour corriger ça, pour une ou plusieurs listes de collection.
MIS À JOUR ENCORE (18.02.2022) : si la méthode ci-dessous fonctionne toujours très bien, vous pouvez aussi utiliser la méthode avec les attributs Finsweet. Très simple : une seule ligne de code dans le head de la page ou du projet, puis il suffit d'ajouter quelques attributs aux éléments que vous voulez paginer. On l'aime parce qu'elle est simple et rapide (côté temps de chargement de la pagination). En tant que petit studio Webflow, nous avons reçu un joli cadeau des experts Webflow de Finsweet. Vous trouverez les instructions dans la documentation List Load de Finsweet. Ajoutez le premier jeu d'attributs requis, nous recommandons aussi d'activer l'option Speed Boost (elle se trouve aujourd'hui sur l'élément de pagination sous Show Page Count), puis descendez simplement jusqu'à l'option de pagination et ajoutez ces attributs. Pour une mise en place rapide, la méthode ci-dessous est probablement plus rapide, mais nous vous laissons choisir.
MIS À JOUR POUR LA PAGINATION DE PLUSIEURS LISTES DE COLLECTION : celle-ci sera super rapide et facile, alors offrons à votre collection Webflow une pagination fluide.
Pour info, au cas où vous ne sauriez pas ce qu'est une pagination fluide : en gros, quand vous utilisez aujourd'hui des listes de collection dans Webflow, l'utilisateur clique sur suivant, la page se recharge et il se retrouve tout en haut, ce qui n'est pas génial quand votre collection d'articles de blog (ou autre) se trouve au milieu de la page. Avec cette astuce, quand l'utilisateur passe à la « page » suivante, il ne saute pas en haut mais reste exactement là où il était. Sympa, non ? Et plutôt simple.
Étape 1 : ajoutez un tout petit bout de code à votre page
Ouvrez les Page Settings, descendez jusqu'à Custom Code et collez le code ci-dessous dans la section Before the <!-- fs-richtext-ignore --></body> tag :
<iframe height="300" style="width: 100%;" scrolling="no" title="Webflow Seamless Pagination - Single Collection List" src="https://codepen.io/milkmoonstudio/embed/PoBXKjg?default-tab=html&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/milkmoonstudio/pen/PoBXKjg">
Webflow Seamless Pagination - Single Collection List</a> by Jakes van Eeden (<a href="https://codepen.io/milkmoonstudio">@milkmoonstudio</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>
Si vous préférez garder votre code personnalisé plus propre, collez simplement notre balise script :
<iframe height="300" style="width: 100%;" scrolling="no" title="Seemless Pagination - JSDeliver Script Tag - Async" src="https://codepen.io/milkmoonstudio/embed/NWoKwMa?default-tab=html" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/milkmoonstudio/pen/NWoKwMa">
Seemless Pagination - JSDeliver Script Tag - Async</a> by Jakes van Eeden (<a href="https://codepen.io/milkmoonstudio">@milkmoonstudio</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>
<!-- fs-richtext-ignore --><script async src="https://cdn.jsdelivr.net/gh/J8kesVanEeden/milk-moon-studio_webflow-projects@main/seemless-pagination.js"></script>
Si les intégrations ci-dessus ne se chargent pas chez vous, le code se trouve dans nos pens CodePen : la version pour une seule liste de collection, la version avec balise script et la version pour plusieurs listes de collection.
Maintenant, dans le Designer, si vous avez collé le code en ligne, cliquez sur la Collection List, ouvrez le panneau Collection List Settings à droite et collez "seamless-replace" dans le champ ID. Si vous avez utilisé la balise script, ignorez cette étape et utilisez les ID numérotés du paragraphe suivant.
Si vous avez opté pour la balise script, un point d'attention : elle ne cherche que des ID numérotés. Donc, au lieu de "seamless-replace", donnez à la Collection List l'ID seamless-replace1 et donnez à l'élément de pagination situé dans son Collection List Wrapper l'ID w-pagination-wrapper1. Elle gère jusqu'à trois listes de collection par page (seamless-replace2 et w-pagination-wrapper2 pour la deuxième, seamless-replace3 et w-pagination-wrapper3 pour la troisième), et au-delà de trois il faut étendre le script.
Publiez et votre pagination est désormais fluide.
Une question ? Dites-le-nous dans les commentaires et pensez à jeter un œil à la section How-To de notre blog pour d'autres tutoriels.
MISE À JOUR
On nous a demandé quoi faire quand plus d'une liste de collection doit être paginée. Voici donc du code pour vous montrer comment procéder si, par exemple, vous avez 3 listes de collection à paginer, placées dans des sections différentes de la même page.
Le code :
<iframe height="300" style="width: 100%;" scrolling="no" title="Webflow Seamless Pagination - Multiple Collection Lists" src="https://codepen.io/milkmoonstudio/embed/ZEjVJXB?default-tab=html&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/milkmoonstudio/pen/ZEjVJXB">
Webflow Seamless Pagination - Multiple Collection Lists</a> by Jakes van Eeden (<a href="https://codepen.io/milkmoonstudio">@milkmoonstudio</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>
Les ID
- Placez maintenant les ID dans l'ordre d'apparition pour les conteneurs de la liste de collection : seamless-replace1, seamless-replace2, seamless-replace3
- Placez ensuite les ID dans l'ordre d'apparition pour l'ID de pagination situé dans le Collection List Wrapper avec w-pagination-wrapper1, w-pagination-wrapper2, w-pagination-wrapper3
Et c'est terminé : publiez et vous pouvez paginer plusieurs listes de collection sur la même page.
Questions sur la pagination Webflow
Pourquoi la pagination Webflow ramène-t-elle en haut de la page ?
Parce que la pagination native de Webflow charge la page suivante par un rechargement complet, et le navigateur repart donc du haut. Si votre liste de collection se trouve au milieu de la page, l'expérience est franchement mauvaise. Le script de pagination fluide ci-dessus récupère la page suivante en arrière-plan et ne remplace que la liste de collection, ce qui permet au visiteur de rester exactement là où il était.
Peut-on paginer plus d'une liste de collection sur la même page ?
Oui. Utilisez le code pour plusieurs listes de collection de la section MISE À JOUR, donnez à chaque liste son propre ID (seamless-replace1, seamless-replace2, seamless-replace3) et donnez à chaque wrapper de pagination l'ID correspondant (w-pagination-wrapper1, w-pagination-wrapper2, w-pagination-wrapper3).
Existe-t-il une autre façon de paginer une liste de collection Webflow sans rechargement de page ?
Oui, l'attribut Finsweet List Load. Son mode pagination affiche le contenu sur la même page, et vous pouvez ajouter une ancre de défilement pour que le visiteur arrive en haut de la liste. La mise en place est expliquée en début d'article.
Pourquoi ma pagination fluide ne fonctionne-t-elle pas ?
Vérifiez que les ID sont écrits exactement comme ci-dessus (si vous utilisez la version avec balise script, il s'agit des ID numérotés, seamless-replace1 et w-pagination-wrapper1, et elle s'arrête à trois listes), que le script se trouve dans la section Before </body> tag de la page, et que vous avez publié le site, car le code personnalisé ne s'exécute pas dans le Designer. Si vous utilisez des interactions Webflow sur la liste, il faudra peut-être les réinitialiser après chaque remplacement de page. D'après notre expérience, le script hébergé contient pour cela une ligne commentée vers le bas : si vous avez collé le code en ligne, cherchez-la et décommentez-la. La version avec balise script est un fichier hébergé que vous ne pouvez pas modifier ; pour activer cette ligne, il faudrait donc copier le code en ligne.
Si vous aimez les astuces CMS comme celle-ci, nous avons aussi écrit sur l'ajout de spans dans un texte CMS dynamique, comment briser la grille CMS avec un pattern flexbox, créer un résumé d'article sans champ de résumé et créer un bandeau défilant alimenté par le CMS.
