WordPress : Isotope ajouter dynamiquement getSortData

Publié par Jean-Michel le

J’essaie d’utiliser isotope.js sur mon thème wordpress.
Je trierais l’objet de cette manière, où « Séries, Musique, Culture, Sport » sont des « filtres » générés par la taxonomie personnalisée.

var $container = $j('.containerport');
                    $container.isotope({
                        stamp: '.stamp',
                        itemSelector: '.thumbportfolio',
                        getSortData : {
                            Series : function( $elem ) {
                                var isSeries = $j($elem).hasClass('Series');
                                return (!isSeries?' ':'');
                            },
                            Musica : function( $elem ) {
                                var isMusica = $j($elem).hasClass('Musica');
                                return (!isMusica?' ':'');
                            },
                            Cultura : function( $elem ) {
                                var isCultura = $j($elem).hasClass('Cultura');
                                return (!isCultura?' ':'');
                            },
                            Sport : function( $elem ) {
                                var isSport = $j($elem).hasClass('Sport');
                                return (!isSport?' ':'');
                            }
                        }
                    });

Je créerais un getSortData dynamique car si j’ajoute un nouveau filtre, il devrait apparaître automatiquement sans mettre les mains dans le code.
Est-ce possible ?
Peut-être avec un tableau ou un cycle for, mais je ne sais pas comment accéder à la liste du filtre via jquery. Merci!

Lire également:  Mon premier thème enfant wordpress - problème de couleur

Solution n°1 trouvée

J’ai résolu en utilisant cette fonction 🙂

function (sorting) {
                            isotopeArguments.getSortData[sorting] = function (sorting) {
                                return function ($elem) {
                                    return $j($elem).hasClass(sorting) ? '' : ' ';
                                };
                            }(sorting);
                        }

Solution n°2 trouvée

Vous pouvez accéder à l’instance d’isotope avec$('selector').data('isotope')

par exemple

var isotope = $('selector').data('isotope');

dans votre cas particulier : var isotope = $j('.containerport').data('isotope');ou var isotope = $container.data('isotope');comme vous l’avez défini $container.

Les options sont stockées dans une propriété appelée… attendez… options :

var options = isotope.options;

L’objet getSortData est purement une propriété des options :

var sortData = options.getSortData;

Vous pouvez simplement ajouter des éléments nommés à l’aide de propriétés nommées telles que :

sortData.newSort = function($elem){ /* do something here*/ };

ou indirectement comme un dictionnaire utilisant :

sortData["newSort"] = function($elem){ /* do something here*/ };

où « newSort » peut également être une variable contenant le nom de la propriété :

var newSortVar = "nameOfPropertyToset";
sortData[newSortVar] = function($elem){ /* do something here*/ };

Voici une capture d’écran des résultats du débogueur F12 Chrome pour une variable de surveillance qui s’est tenue .data('isotope')(tiré d’un isotope aléatoire JSFiddle):

Lire également:  Wordpress : Affichage de la page d'accueil (vos derniers articles) Vierge, les autres pages sont correctes

entrez la description de l'image ici

Si vous avez besoin d’une aide spécifique après cela, vous devrez fournir un JSFiddle avec votre propre code.

Catégories : Wordpress

Jean-Michel

Jean-Michel est en charge de la partie blog du site. Il met en place la stratégie de contenu et répond aux questions fréquentes sur Wordpress.

0 commentaire

Laisser un commentaire

Avatar placeholder

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *