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!

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):

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 *