[RESOLU]Filtrer les articles avec Isotope

Dudy · juin 2015

Bonjour

j'utulise Isotope pour filtrer le catégories d 'un portfolio, avec ce script :

[== JavaScript ==]
$('.portfolioFilter a').click(function(){
        $('.portfolioFilter .current').removeClass('current');
        $(this).addClass('current'); 
        var selector = $(this).attr('data-filter');
        $container.isotope({
            filter: selector,
            animationOptions: {
                duration: 750,
                easing: 'linear',
                queue: false
            }
         });
         return false;
    });

et la c'est bon

j'aimerais pouvoir faire le même effet pour les articles, filtrer par Catégorises,
dans les liens qui devrait filtre la categorie et l'afficher, j'ai ajouter le nom de la catégorie dans data-filter

[== HTML ==]
         <a href="#" data-filter=".rubrique-1">Rubrique 1 |</a>
	<a href="#" data-filter=".rubrique-2">Rubrique 2 |</a>

mais surement ce n'est pas du tout ce genre de script que je dois utiliser,
c'est pour cela qui je viens vers vous après des longs recherche sur le web et forum, j'ai trouvé ce magnifique Tuto
Ici
(EN ITALIEN) mais il est pour wordpress, et la ça dépasse mes compétences

Je suis en train de préparer un Theme PLUCSS assez Créative et spécial, que je partagerais je crois avec la sortie de la version 5.4 de Pluxml

merci bonne journée
Dudy

Stéphane · juin 2015

Salut

Est-ce qu'on part du principe que tous les articles sont affichés sur la page d'accueil et que c'est là que tu veux mettre en place ton filtre ?

Dudy · juin 2015

Ciao Stephane

exactement,le lien c'est le meme que je t'avais envoyer la dernier fois sur MP si tu a le temps de jeter un coup d'oeil, merci

Stéphane · juin 2015

C'est parti.

nb: je fais référence au thème par défaut de PluXml 5.3.1

1) copier les .js de jquery et isotope dans le dossier du theme

2) dans le fichier header.php avant </head>, ajouter

<script src="<?php $plxShow->template(); ?>/jquery-1.9.1.min.js"></script>
<script src="<?php $plxShow->template(); ?>/isotope.pkgd.min.js"></script>

3) On ajoute la liste des catégories sous forme cliquable qui permettra de filtrer l'écran:

Dans le fichier home.php, après

<div class="width-sidebar">

ajouter

<div class="button-group filter-button-group">
	<button data-filter="*">show all</button>
	<?php
	if($plxMotor->aCats) {
		foreach($plxMotor->aCats as $id=>$cat) {
			echo '<button data-filter=".'.$cat['url'].'">'.plxUtils::strCheck($cat['name']).'</button>';
		}
	}
	?>
</div>

4) on ajoute un container qui va contenir tous les articles

avant

<?php while($plxShow->plxMotor->plxRecord_arts->loop()): ?>

ajouter

<div class="grid">

et après

<?php endwhile; ?>

ajouter

</div>

5) il faut maintenant englober les articles dans un div qui servira à filtrer en fonction du nom de la catégorie

avant

<article role="article" id="post-<?php echo $plxShow->artId(); ?>">

ajouter

<?php
$list = array();
if($cats = $plxShow->artActiveCatIds()) {
	foreach($cats as $id) {
		$list[] = $plxMotor->aCats[$id]['url'];
	}
}
?>
<div class="element-item <?php echo implode(' ', $list) ?>">

et après

</article>

ajouter

</div>

6) on ajoute le code pour faire fonctionner le filtre et isotope

avant

<?php include(dirname(__FILE__).'/footer.php'); ?>

ajouter

<script>
$(function() {
	// init Isotope
	var $grid = $('.grid').isotope({
		itemSelector: '.element-item',
		layoutMode: 'vertical'
	});
	// filter items on button click
	$('.filter-button-group').on( 'click', 'button', function() {
		var filterValue = $(this).attr('data-filter');
		$grid.isotope({ filter: filterValue });
	});
});
</script>

ici j'utilise un layout "vertical". Il en existe d'autres: http://isotope.metafizzy.co/layout-modes.html

/!\ Je n'ai pas validé le fonctionnement quand un article est classé dans plusieurs catégories et avec la pagination.

Enjoy !

Dudy · juin 2015

ouffff

Qu'elle vitesse

Merci Stephane je vais faire ce test et je te dirais
bon appetit

Stéphane · juin 2015

petite amélioration pour prendre en compte que les catégories actives avec le code suivant à la place de celui donné précédemment

<div class="button-group filter-button-group">
	<button data-filter="*">show all</button>
	<?php
	if($activeCats = explode('|',$plxMotor->activeCats)) {
		foreach($activeCats as $catId) {
			if($catId=='home')
				echo '<button data-filter=".home">'.L_HOMEPAGE.'</button>';
			elseif($catId=='000')
				echo '<button data-filter=".unclassified">'.L_UNCLASSIFIED.'</button>';
			else {
				$name = plxUtils::strCheck($plxMotor->aCats[$catId]['name']);
				$url = $plxMotor->aCats[$catId]['url'];
				echo '<button data-filter=".'.$url.'">'.$name.'</button>';
			}
		}
	}
	?>
</div>

et

			<?php
			$list = array();
			if($cats = $plxShow->artActiveCatIds()) {
				foreach($cats as $id) {
					if($id=='000')
						$list[] = 'unclassified';
					elseif($id=='home')
						$list[] = 'home';
					else
						$list[] = $plxMotor->aCats[$id]['url'];
				}
			}
			?>

Dudy · juin 2015

juste un mot

Magnifique Stéphane tu est trop fort, tout marche a merveille Bravo!!

Stéphane · juin 2015

danielsan · décembre 2015

merci Stéphane.
Notons qu'il est aussi possible de faire un double filtre : catégorie ET mots-clefs

[RESOLU]Filtrer les articles avec Isotope

Réponses