PluXml.org

Blog ou CMS à l'Xml

Vous n'êtes pas identifié(e).

#1 22/06/2015 09:15:36

Dudy
Membre
Lieu : Neuchâtel - Suisse
Inscription : 20/01/2007
Messages : 313

[RESOLU]Filtrer les articles avec Isotope

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

Dernière modification par Dudy (22/07/2015 14:23:33)

Hors ligne

#2 22/06/2015 10:42:13

Stéphane
Responsable du projet
Lieu : pas loin de Metz
Inscription : 07/08/2007
Messages : 6 190
Site Web

Re : [RESOLU]Filtrer les articles avec Isotope

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 ?


Mes articles et tutoriels pour PluXml
Pluxopolis mon site sur PluXml, mais pas seulement...
Twitter: @pluxopolis

Hors ligne

#3 22/06/2015 11:23:15

Dudy
Membre
Lieu : Neuchâtel - Suisse
Inscription : 20/01/2007
Messages : 313

Re : [RESOLU]Filtrer les articles avec Isotope

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
Isotope

Hors ligne

#4 22/06/2015 11:34:47

Stéphane
Responsable du projet
Lieu : pas loin de Metz
Inscription : 07/08/2007
Messages : 6 190
Site Web

Re : [RESOLU]Filtrer les articles avec Isotope

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 !


Mes articles et tutoriels pour PluXml
Pluxopolis mon site sur PluXml, mais pas seulement...
Twitter: @pluxopolis

Hors ligne

#5 22/06/2015 11:42:36

Dudy
Membre
Lieu : Neuchâtel - Suisse
Inscription : 20/01/2007
Messages : 313

Re : [RESOLU]Filtrer les articles avec Isotope

ouffff yikes wink
Qu'elle vitesse

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

Hors ligne

#6 22/06/2015 11:49:19

Stéphane
Responsable du projet
Lieu : pas loin de Metz
Inscription : 07/08/2007
Messages : 6 190
Site Web

Re : [RESOLU]Filtrer les articles avec Isotope

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'];
				}
			}
			?>

Mes articles et tutoriels pour PluXml
Pluxopolis mon site sur PluXml, mais pas seulement...
Twitter: @pluxopolis

Hors ligne

#7 22/06/2015 13:04:38

Dudy
Membre
Lieu : Neuchâtel - Suisse
Inscription : 20/01/2007
Messages : 313

Re : [RESOLU]Filtrer les articles avec Isotope

juste un mot

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

Hors ligne

#8 22/06/2015 13:55:53

Stéphane
Responsable du projet
Lieu : pas loin de Metz
Inscription : 07/08/2007
Messages : 6 190
Site Web

Re : [RESOLU]Filtrer les articles avec Isotope

wink


Mes articles et tutoriels pour PluXml
Pluxopolis mon site sur PluXml, mais pas seulement...
Twitter: @pluxopolis

Hors ligne

#9 23/12/2015 00:17:05

danielsan
Membre
Lieu : Montpellier
Inscription : 18/07/2011
Messages : 1 274

Re : [RESOLU]Filtrer les articles avec Isotope

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


Que l'inspiration soit avec vous, à jamais !

Hors ligne

Pied de page des forums

A propos Nous soutenir Contact Twitter Google+
Copyright © 2006-2017 PluXml.org, tous droits réservés