Lettura: 24,1 minuti

Visite: 6

Lettura: 24,1 minuti

Visite: 6

TAG: 

Filtri Categoria, PostCards, Tema AVADA

Tabella Contenuti GuidaTabella Contenuti Guida

Attualmente, con la versione V7.10.1 di Avada, non è possibile riordinare l’elenco filtri degli elementi Post Cards. Questo può diventare un vero e proprio problema per chi ha categorie complesse con categorie figlio.

Aspettando un aggiornamento che risolva questa carenza, possiamo utilizzare un codice jQuery, compilato a mano, per elencare le categorie con il nostro ordine; anche posizionando solo alcune come prime.

Riordinare una lista complessa
Invertire l’ordine di una lista

Riordina per lista personalizzata

Valutazioni

Questo Script che si può aggiungere con l’elemento CodeBox di Avada, appena sotto al elemento PostCards che vogliamo modificare. Si può aggiungere anche al codice del tema o tramite un plugin, ma è consigliabile tenerlo associato alla lista specifica dei PostCards che vogliamo modificare.

elemento postcards riordino filtri injs

Come si presentano i < LI > degli elementi dopo il riordino

PRIMA

<li role="presentation" class="fusion-filter">
  <a href="#" data-filter=".news-logistiche" role="menuitem">Logistica per la fiera</a>
</li>

DOPO

<li role="presentation" class="fusion-filter news-logistiche lvl-2" riordinojs_id=".news-logistiche">
  <a href="#" data-filter=".news-logistiche" role="menuitem">Logistica per la fiera</a>
</li>

Ordinamento Personalizzato categorie è manuale

Il riordino delle categorie (o qualunque taxonomy filtro che si va a selezionare) è strettamente manuale. Questo vuol dire che le varie categorie devono essere elencate a mano per lo slug che le identifica (avada inserisce solo quel dato) e impostare manualmente se è una categoria figlia e di quale parente. Nel caso si modifichi qualche slug di categoria, semplicemente il < li > categoria che non ha più lo stesso slug viene ignorato e sarà visibile come uno degli ultimi elementi in fondo alla lista. Se si aggiungono nuove categorie in WP, non essendo registrate in questo JS, sarà posizionata sotto le altre categorie infondo.

Comporre l’ordine personalizzato delle categorie

var OrderList_Category -> deve essere compilata a mano, come descritto sopra. I dati che servono solo:

  • classID -> .slug della categoria in questione (lo slug si trova nell’elenco degli elementi di categoria in admin) ATTENZIONE, è fondamentale mettere il “.” (punto); questo perchè avada inserisce nel attributo non il semplice slug ma lo slug con il punto e quindi dobbiamo mettere lo stesso valore.
    • OBBLIGATORIO
  • lvl: -> numero partendo da 1. Questo campo è studiato per segnalare il livello di categoria: le categorie genitori hanno il livello 1, le sotto categorie hanno livello 2. Nel caso di una sub categoria di sotto categoria il livello sarà 3; e via dicendo. Associare poi alla classe del livello il css che cambi grafica o spostamento a destra.
    • OPZIONALE cat. senza genitori – OBBLIGATORIO sub-categorie
  • parent: -> none | .slug . per tutte le categorie di primo livello impostare questo campo con none, per segnalare che non ha un genitore come categoria, mentre per tutte le sub-categorie è necessario impostare il .slug della categoria genitore (ricordati di mettere il “.” (punto) ).
    • ASSENTE (o none) cat. senza genitori – OBBLIGATORIO sub-categorie

NOTE: classID: “*” rappresenta il link pulsante “ALL / TUTTO” che si può scegliere di visualizzare o non visualizzare. Questo pulsante ha la sua classe “fusion-filter-all”, ma come valore del slug che usiamo per tutte le categorie ha solo * (l’asterisco). Potete omettere questo elemento nell’elenco categorie se disattivate la visualizzazione del pulsante da le opzioni del PostCards

var OrderList_Category = [

{ classID: "*", lvl: 1, parent: "none"}, 
{ classID: ".new-fiera"},
{ classID: ".altre-fiere"},

];

Ordine delle categorie di secondo livello – al contrario

Se sono presenti categorie di secondo livello e si vogliono evidenziare (magari con una classe), possiamo inserirle nella nostra variabile con i 2 valori che le caratterizzano : lvl e parent.

var OrderList_Category = [

{ classID: "*", lvl: 1, parent: "none"}, 
{ classID: ".new-fiera"},
{ classID: ".tematiche-fiera"},
		    
	    { classID: ".animazione", lvl: 2,  parent: ".tematiche-fiera"},
	    { classID: ".film-animazione", lvl: 2,  parent: ".tematiche-fiera"},
            { classID: ".action-gadget", lvl: 2,  parent: ".tematiche-fiera"},

];

Note sul codice

Di seguito un esempio pratico di come viene riordinato dal JS il filtro. Abbiamo di seguito un contenitore < div class="jquery-riordina-categoria" > che poi sarà il contenitore del PostCards a cui aggiungeremo una classe personalizzata.

Al suo interno il classico filtro categorie dell’elemento PostCards (come appare sulla pagina html), viene identificato da Avada con < ul class="fusion-filters" >.
Come modello base Avada inserisce lo slug della categoria nel link < a > e dentro l’attributo data-filter=””, e non in qualche classe dei < li >.

NOTE: reverse() -> OrderList_Category.reverse() : viene utilizzato il comando reverse() (richiama la lista dall’ultima alla prima), in modo che quando il JS si attiva, metta in ordine gli elementi dall’alto al basso e come primi figli del contenitore.
Se non si aggiungesse questo comando jQuery reverse(), saranno mostrati gli elementi dall’ultimo al primo, sempre nella parte in alto del contenitore.

HTML
<style>
.fusion-filter{
     display: block;
}   
.fusion-filter.lvl-2 {
    margin-left: 30px;
}
</style>


<div class="jquery-riordina-categoria">

    <ul class="fusion-filters" role="menu" aria-label="Post Filters" style="display: flex;">
        <li role="presentation" class="fusion-filter fusion-filter-all fusion-active">
            <a href="#" data-filter="*" role="menuitem">All</a>
        </li>
        <li role="presentation" class="fusion-filter">
            <a href="#" data-filter=".new-fiera" role="menuitem">News Fiera</a>
        </li>
        <li role="presentation" class="fusion-filter">
            <a href="#" data-filter=".pubblicazioni-fiera" role="menuitem">Pubblicazioni e Anteprime</a>
        </li>
        <li role="presentation" class="fusion-filter">
            <a href="#" data-filter=".news-logistiche" role="menuitem">Logistica per la fiera</a>
        </li>
        <li role="presentation" class="fusion-filter fusion-hidden">
            <a href="#" data-filter=".action-gadget" role="menuitem">Action Gadget</a>
        </li>
        <li role="presentation" class="fusion-filter">
            <a href="#" data-filter=".altre-fiere" role="menuitem">Altre Fiere</a>
        </li>
        <li role="presentation" class="fusion-filter">
            <a href="#" data-filter=".altri-eventi-ludici" role="menuitem">Altri Eventi Ludici</a>
        </li>
        <li role="presentation" class="fusion-filter">
        <a href="#" data-filter=".animazione" role="menuitem">Animazione Generale</a>
        </li>
        <li role="presentation" class="fusion-filter">
            <a href="#" data-filter=".film-animazione" role="menuitem">Animazione</a>
        </li>
        <li role="presentation" class="fusion-filter">
            <a href="#" data-filter=".tematiche-fiera" role="menuitem">Tematiche Fiera</a>
        </li>
    </ul>
</div>


<script id="jquery-postcard-lista">
jQuery( document ).ready(function() {


	var OrderList_Category = [
		//classID valore attributo 'data-filter' dei <a> dentro i <li>,lvl: livello gerarchia categoria, child: ha dei figli e quindi creare contenutore figli,  parent: se una categoria figlio quale è il genitore
		{ classID: "*", lvl: 1, parent: "none"}, //classe divfusion-filter-all
		{ classID: ".new-fiera", lvl: 1, parent: "none"},
		    
		    	{ classID: ".news-logistiche", lvl: 2, parent: ".new-fiera"},
		
		{ classID: ".altre-fiere"},
		{ classID: ".altri-eventi-ludici"},
		{ classID: ".pubblicazioni-fiera"},
		{ classID: ".tematiche-fiera"},
		    
		    { classID: ".animazione", lvl: 2,  parent: ".tematiche-fiera"},
		    { classID: ".film-animazione", lvl: 2,  parent: ".tematiche-fiera"},
	        { classID: ".action-gadget", lvl: 2,  parent: ".tematiche-fiera"},
    	    
	];




	var Filtro_Postcards = jQuery(".jquery-riordina-categoria .fusion-filters");
	//----------------------------------------------

	//PER OGNI LI della lista aggiungere classe al LI
	Filtro_Postcards.find("li").each( function( index, value ) {
		var El_a_category = jQuery(this).find("a"); 
			El_a_category_class = El_a_category.attr('data-filter');
			El_a_category_class_NOcomma = El_a_category_class.replace(".",""); //elimina il "." (punto) dalla parola
						// console.log('addFilter_'+El_a_category_class);
						// console.log('CLASSE_'+El_a_category_class_NOcomma);
						
		jQuery(this).attr('riordinoJS_id', El_a_category_class);
		jQuery(this).addClass(El_a_category_class_NOcomma);
	});




	//PER OGNI ELEMENTO IN LISTA PRENDI BOX <LI> della categoria e mettilo in ordine sequenziale
	jQuery.each(OrderList_Category.reverse() , function(index, valueonFN) {  
			// !!! reverse() -> perchè così controlla al contrario e postando gli elementi sopra sono in ordine dall'alto al basso, altrimenti il sistema li farebbe dal basso all'alto
		
		
	    //integra in nuove variabili i valori array dell'elenco categorie
		var valore_classe  = valueonFN.classID; 
		if( valueonFN.lvl)  	{ valore_livello = valueonFN.lvl;  } 	else { valore_livello = 1; }
		if( valueonFN.parent)  	{ valore_parente = valueonFN.parent; } 	else { valore_parente = 'none'; }
		 	 	// console.log("LineaDati_ classe: _"+valore_classe + '_ lvl: _'+valore_livello+ '_  figlibox: _'+valore_figli+  '_  parente: _'+ valore_parente+'_ ');  
	
		
		//PER OGNI LI nella lista controlla che abbia la stessa classe, e se ha un suo sub elemento.
		Filtro_Postcards.find("li").each( function( index, value ) {
			
			if( jQuery(this).find("a").attr('data-filter') == valore_classe) {
									//console.log('classe uguale a ID categoria_',jQuery(this));
				
				//SPOSTA IL LI nella sequenza - SOTTO
				Filtro_Postcards.prepend(  jQuery(this)  );
				
				//aggiungi sotto al LI parente - sotto gerarchia
				if(valore_parente != 'none'  ){   
					var EL_Parent = Filtro_Postcards.find('li[riordinojs_id="'+valore_parente+'"]');
					jQuery(this).after(EL_Parent);
				}
				
				//aggiungi classe livello
				jQuery(this).addClass("lvl-"+valore_livello);
			
				
			} //li dell'elemento in lista
		});
		
	
	}); 
		 
	
});
</script>
HTML

Invertire l’ordine degli elementi filtro

Abbiamo visto nella parte prima della guida come crea una lista completa ordinata manualmente. Adesso vediamo invece come fare semplicemente l’inversione dell’ordine delle categorie. Questa azione può essere molto comoda per riordinare gli anni in senso inverso, visto che Avada mette a sinistra gli anni più vecchi e forse vogliamo invece gli anni più recenti.

La lista passerà da : All – 2013 , 2014 ,2015…. a 2016, 2015,2014.. All

HTML
<div id="thIDbox-newsperanno" class="jquery-riordina-categoria">

    <ul class="fusion-filters" role="menu" aria-label="Post Filters" style="display: flex;">
        <li role="presentation" class="fusion-filter fusion-filter-all" style="display: none;">
            <a href="#" data-filter="*" role="menuitem">All</a>
        </li>
        <li role="presentation" class="fusion-filter fusion-hidden">
            <a href="#" data-filter=".2013" role="menuitem">2013</a>
        </li>
        <li role="presentation" class="fusion-filter fusion-hidden">
            <a href="#" data-filter=".2014" role="menuitem">2014</a>
        </li>
        <li role="presentation" class="fusion-filter fusion-hidden">
            <a href="#" data-filter=".2015" role="menuitem">2015</a>
        </li>
        <li role="presentation" class="fusion-filter fusion-hidden">
            <a href="#" data-filter=".2016" role="menuitem">2016</a>
        </li>
    </ul>
    
</div>


<script id="tutte-lenews-jquery-postcard">
jQuery( document ).ready(function() {
	
	var Filtro_Postcards = jQuery("#thIDbox-newsperanno .fusion-filters");
	Filtro_Postcards.append( Filtro_Postcards.find("li").get().reverse() );
	//----------------------------------------------

});
</script>
HTML

Contenuto della Guida

SEZIONI Guide

  • La rubrica dei Plugin

    (0)

  • Guide sulla programmazione

    (0)

  • SEO

    (1)

Scopri articoli correlati
woo subcategorieprdotti risultato finale
Sub-Categorie Prodotto da mostrare nelle Pagine Archivio Categorie di WooCommerce
postcard avada con taxonomia custom e plugin img category
Richiamare Immagine Tassonomie (categorie) con [ shortcode ] – Plugin Categories Images

Crea uno Shortcode che richiami l'immagine Tassonomia Custom e caricala tramite il tema Avada

PostCards Avana con: Tipo di Post dell’elemento
img woocomerce brand tutorial editor avada imgbrand
Avada – Richiamare immagine Brand di WooCommerce Brands come per le categorie woocomerce

Come mostrare l'immagine categoria dei WooCommerce Brands in Avada

wordpress noimage 800x500 1
Sovrascrivere Template di plugin con File php del proprio Tema WP

Sostituire template di Plugin predisposti è facile, basta riportarlo sul proprio tema

Creare un MegaMenu su Mobile nel tema Avada

Scopri come creare Menu in Mobile dentro belle Sidebar

avada global options exstras page option
Piccoli problemi risolvibili sulle opzioni Avada Theme
wordpress noimage 800x500 1
get_template_part() nei propri plugin WP (usare adesso load_template)
Temi Child – Sovrascrivere CSS del Tema genitore