Pagination Ajax de répéteurs ACF

En accord avec la maquette que vous avez eu, vous construisez vos groupes de champs ACF de façon à ce que votre client puisse ajouter autant de photos dans cette page qu’il le souhaite (répéteur, contenu flexible).

Problème : Sur la maquette, l’exemple se faisait sur 4 images … votre client en a mis 30. À tous les coups votre page va peser 10Mo, perdre du crédit auprès de Google et des visiteurs qui veulent la consulter.

Solution : Faire en sorte que lorsque l’utilisateur arrive en bas de page, on charge les images suivantes.

Nous allons donc voir aujourd’hui comment réaliser une « pagination ajaxifiée » des répéteurs ACF dans WordPress.

Étape 1 : Créer une pagination grâce à WordPress

Dans cette étape, WordPress fait tout le travail. En ajoutant quelques éléments à notre code il créera de lui même un système de pagination très simple.
Placez ce contenu dans l’entête du fichier dans lequel vous voulez travailler.
Vous pouvez modifier le nombre d’éléments affichés à l’écran dans la variable « images_per_page ».

<?php
get_header();
if( get_query_var('page') ) {
	$page = get_query_var( 'page' );
} else {
	$page = 1;
}

$fields = get_fields();

// Variables
$row              = 0;
$images_per_page  = 2; 
$publication_num  = $fields["repeaters"]; 
$total            = count( $publication_num );
$pages            = ceil( $total / $images_per_page );
$min              = ( ( $page * $images_per_page ) - $images_per_page ) + 1;
$max              = ( $min + $images_per_page ) - 1;

?>

Placez le code ci-dessous dès la première itération de vos répéteurs.

$row++;

if($row < $min) { continue; }

if($row > $max) { break; }

Il ne nous reste plus qu’à afficher des liens pour nous permettre d’accéder aux différentes pages.

Notez bien qu’il est important d’avoir la div avec l’id pagination pour la suite du tutoriel.

<div id="pagination">
<?php echo paginate_links( array(
		'base' => get_permalink() . '%#%' . '/',
		'format' => '?page=%#%',
		'current' => $page,
		'total' => $pages
	)); 
?>
</div>

 

Voilà ! Vous avez un système de pagination classique. Nous allons maintenant voir comment l’ajaxifier.

 

Étape 2 : Créer un infinite scroll grâce à Ajax

Maintenant que notre pagination est prête nous allons utiliser le plugin Infinite Ajax Scroll (le plugin nécessite jQuery)

Rendez vous ici pour le télécharger.

Ajoutons le maintenant au functions.php de notre thème.

Il faut à la fois chargé le fichier JS du plugin mais aussi créer et appeler un autre JS qui s’occupera d’appeler Infinite Scroll. La seule et unique page dans laquelle nous voulons mettre en place l’IAS se nomme « Book » et se trouve dans un template nommé template-book.php. Nous avons donc procédé de la façon suivante :

if ( is_page_template( 'template-book.php' ) ) { // SI je suis dans une page ayant le template "Book"
	wp_enqueue_script( 'infinite-scroll', get_template_directory_uri() . '/js/ias.min.js'); // L'appel du plugin
	wp_enqueue_script( 'book', get_template_directory_uri() . '/js/book.js');
}

 

Que contient book.js ? Nous avons suivi la documentation officielle afin d’obtenir la chose suivante :

var ias = jQuery.ias({
  container:  '.posts', //« container » est votre container (surprise).
  item:       '.post', // les divs contenants vos répéteurs.
  pagination: '#pagination', // id que nous avons créé autour des liens
  next:       '.next.page-numbers' //correspond aux classes données par WordPress pour les liens précédemment créés.
});

Et c’est prêt ! Il n’y plus rien a rajouter à part peut être une icône de chargement.

Pour cela rajoutez simplement cette ligne à la fin du script ci-dessus :

ias.extension(new IASSpinnerExtension());

 

Qu’en pensez-vous ? Avez-vous une meilleure méthode ? N’hésitez pas à laisser un commentaire pour que l’on échange !