Come creare un modulo Social animato in Joomla con Helix e jQuery

Come creare un modulo Social animato in Joomla con Helix e jQuery

Come molti sanno, il teorema less is more è da tenere bene a mente anche quando si scrive un sito, sia esso in codice o elaborato con un CMS come Joomla.
Less is more, perchè meno codice dovrà caricare il nostro sito, può veloce esso sarà.

Perciò, qualora esista un metodo alternativo per ottenere comunque un buon risultato senza installare plugin a volte molto pesanti smanettando un pochino con HTML, JS e CSS, l'idea è quella di adottarlo così da ottenere le massime prestazioni dal nostro sito.

Oggi creeremo perciò un semplice modulo personalizzato, che inseriremo nel header menu, con un'icona, o una scritta "Social", che farà apparire al click le icone di Facebook, Instagram ecc.. con un'animazione.

Nel mio caso quindi lo inserirò di fianco alla nav bar, ovvio che essendo un modulo personalizzato potete metterlo un po' dove volete, al massimo c'è da fare qualche modifica all'HTML.

Per fare ciò utilizzerò Helix Ultimate, ma il Trick lo potete applicare ad un qualunque Template, al netto di qualche modifica al CSS per adattarlo. Per l'animazione utilizzerò la libreria JQuery, che, pur ormai abbastanza datata, ha un codice molto semplice e comprensibile anche per chi è a digiuno di Javascript.

helix jquery tutorial risultato

 

Creazione Custom Header

Prima di creare il nostro modulo personalizzato, dobbiamo cambiare qualche impostazione in Helix. Per prima cosa dobbiamo creare un Custom Header.
Per fare ciò, andiamo nella Dashboard. Clicchiamo poi su Layout Builder, disattiviamo Predefined Headers, creiamo una nuova row cliccando sul tasto '+', con column setting "2+6+4".

helix jquery tutorial column setting
Ora pigiamo su Row Options e nella riga Section Title scriviamo header, cosicchè Helix assegnerà in automatico lo stile CSS predefinito per l'Header.

helix jquery tutorial section title
Infine clicchiamo sull'ingranaggio delle due colonne create, e assegniamo rispettivamente le posizioni logo, menu e user 1, quest'ultima potete sostituirla ovviamente con qualunque posizione vogliate.

helix jquery tutorial column option

Installazione di Sourcerer

L'editor di Joomla, anche nella versione JCE non permette di inserire codice dinamico, come PHP o Javascript.
Dobbiamo perciò installare un plugin che ci permetta di farlo.
Scarichiamo e installiamo Sourcerer da questo link.

Creazione Modulo personalizzato

Una volta installato Sourcerer, bisogna creare il nostro modulo personalizzato.
Rechiamoci perciò in Estensioni > Moduli e clicchiamo su Nuovo.
Dategli il nome che volete, disattivate la visualizzazione del titolo, se vi occorre, e decidete se visualizzarlo in tutte le pagine o solo in alcune selezionate. Fate insomma le vostre valutazioni di routine.
Impostate poi come posizione user 1, o la posizione che avete scelto nella creazione del Custom Header.

Scrittura del Codice

Arriviamo al sodo! Scriviamo il nostro codice! Partiamo dall'HTML.
Se volete riscrivervi il codice, vi consiglio di utilizzarte un Editor, tipo VS Code, che vi fornisce varie scorciatoie e soprattutto potete indentare per avere più pulizia.

<div class="social-share">
<ul>
<li>
<a href="javascript:void(0)" id="social-click" >
<i class="fa fa-share-square-o" aria-hidden="true"></i>
</a>
</li>
<li>
<div class="social-icon">
<a href="/mia_pagina_social" target="_blank"><i class="fa fa-facebook"></i></a>
<a href="/mia_pagina_social" target="_blank"><i class="fa fa-instagram"></i></a>
<a href="/mia_pagina_social" target="_blank"><i class="fa fa-twitter"></i></a>
</div>
</li>
</ul>
</div>

L'HTML è una semplice lista ul inserita in un div di classe social-share.
Per le icone ho utilizzato fontawesome, libreria già presente in Helix, quindi vi rimando al sito ufficiale per scegliere eventualmente le icone che preferite.
Nel div di classe social-icon inserite poi tra gli apici dell' href il link alle vostre pagine social.

Passiamo ora al codice Jquery per ottenere l'animazione al click.

<script>
jQuery.noConflict();
jQuery(document).ready(function($) {
$('.social-icon').css('display','none');
$('#social-click').click(function(){
$('.social-icon').toggle('slow');
})
})
</script>

Per prima cosa importiamo la libreria JQuery, potete farlo anche dal before </head> di Helix.
Nello script inseriamo il comando .noconflict() per evitare conflitti con altre librerie, allo stesso modo sostituiamo il selettore $ di Jquery con jQuery.
Gli diamo poi un primo comando che ci nasconde il div delle icone, potete anche toglierlo se volete che esse siano visibili appena caricata la pagina.
Poi gli diciamo:"Al click dell'tag id social-click, fammi apparire in modo lento ('slow') il div di classe social-icon".

Ritorniamo nel nostro modulo personalizzato che abbiamo in precedenza creato.
In basso dopo la text area vedrete un pulsante con su scritto <>Codice.

helix jquery tutorial editor codice
Cliccateci sopra così da aprire il pannello di Sourcerer.
Eliminate tutto ciò che è compreso nel placeholder {source}....{/source}, ed incollateci, prima lo script Jquery e poi l'HTML.

helix jquery tutorial sourcerer panel

Scriviamo il CSS

Non vi conviene dare uno sguardo prima di scrivere il CSS, vedrete un obbrobrio! XD.
Quindi prima di visualizzare la pagina o pubblicare il modulo andiamo nel Custom CSS di Helix.
Incolliamoci questo style sheet:

/*SOCIAL SHARE*/

.social-share{

float:right; word-spacing:5px;

}

.social-share li{

display:inline-flex; list-style:none;

}

a#social-click{

font-size:20px; color:white;

}

a#social-click:hover{

color:#10ED98;

}

.social-icon a{

font-size:20px; color:white;

}

.social-icon a:hover{

color:#10ED98;

}

Inutile dirvi che i colori dovete impostarti in base allo stile del vostro sito.
Io ho preferito allinearlo a destra della colonna con l'istruzione float:right, potete eventualmente sostituirla con float:left se volete che il modulo sia allineato a sinistra.
Potete anche inoltre variare il font-size liberamente come preferite.

ENJOY!!