In questa Guida Gantry cercherò di spiegare come creare un classico modulo di login che si apre in una finestra popup (oppure modal window) che dovrebbe comparire sulla home page del nostro sito Joomla. Per la realizzazione di questo bel effetto abbiamo bisogno innanzitutto di un plugin, che si chiama RokBox ed è un plugin free sviluppato dal team di Rockettheme.
Vediamo adesso passo passo come affrontare la questione.
Passo 1. Creare il modulo di login Joomla.
Se non è stato creato in precedenza, questo è il primo passo in cui dobbiamo creare un nuovo modulo di Login.
- Andare in
Estensioni > Moduli
e cliccare su Nuovo. - Scegliere "Login" come tipo di modulo
- Inserire soltanto un titolo casuale tipo "Login" :)
- NON c'è bisogno di selezionare alcuna posizione !
- Deve essere assegnato su tutte le pagine.
- Clicca su Salva e Chiudi.
Passo 2. Inserire il modulo sul outline Hydrogen - Home
- Andare in
Estensioni > Template > Hydrogen - Home
- Clicca sulla scheda Layout
- Nella parte destra, nella sezione Footer, clicca sul segno "+" per aggiungere una nuova riga, e dopo prendere dalla parte sinistra in alto, la particella Module Instance e la trascinarla nella posizione appena creata.
- Cliccare sulla rotelina (lato destro) e successivamente clicca su Pick a Module e selezionare il modulo di login creato al primo passo.
NOTA:
A questo punto si consiglia di rinominare la particella appena inserita, da Module Instance a Login (nascosto). Vediamo ulteriormente il perché.
Passo 3. Configurare la particella
- Sempre qui, cliccare sulla scheda Block e inserire
popuplogin
nel campo CSS ID. - Nel campo Tag Attributes inserire un nuovo tag style con la dichiarazione
display:none;
- Clicca su Apply and Save.
Passo 4. Creare un link per aprire la finestra popup
Questo significa di creare un collegamento in prima pagina, collegamento che al click dovrebbe aprire una finestra modale (pop-up) con all'interno il nostro form di login. In questa guida inseriamo il testo Login nella barra di navigazione, come ultima voce del menu.
- Aprire il Menu Editor di Gantry, quindi cliccare su
Estensioni > Template > Hydrogen - Home > Menu
. - Clicca e trascina l'icona Particle alla fine dell'ultima voce di menu nella barra di navigazione. Ci viene mostrato un elenco con le particelle disponibili di cui dobbiamo scegliere la particella Custom HTML.
Passo 5. Inserire il codice personalizzato
Una volta selezionato il tipo di particella Custom HTML, viene mostrata una finestra popup con le opzioni di personalizzazione della particella stessa.
- Nel campo Custom HTML inseriamo il codice:
<a href="#" data-rokbox data-rokbox-element="#popuplogin">Login</a>
- Clicca su Apply e successivamente Save Menu.
Adesso non ci resta che andare sulla homepage del sito e verificare che nella barra di navigazione abbiamo adesso un nuova voce di menu chiamata Login, e cliccandoci sopra ci si apre una finestra popup con il nostro classico form di login Joomla.
Passo 6. Modificare il codice per mostrare LOGIN/LOGOUT
Come giustamente avete notato, a questo punto, anche dopo aver fatto login, il testo nella barra di navigazione rimane sempre LOGIN. Sarebbe più carino mostrare un testo LOGOUT per i utenti collegati, quindi per questo dobbiamo modificare il codice personalizzato inserito al passo 5, sostituendolo completamente con il seguente:
{code lang:php showtitle:false}{source}
<?php
$user = JFactory::getUser();
if ($user->guest) {
?>
[[a href="#" data-rokbox data-rokbox-element="#popuplogin"]]Login[[/a]]
<?php
}
else {
?>
[[a href="#" data-rokbox data-rokbox-element="#popuplogin"]]Logout[[/a]]
<?php
}
?>
{/source}{/code}
Per far si che il codice viene corretamente interpretato, bisogna scaricare ed installare il componente Sourcerer che è un ottimo componente sviluppato da RegularLabs e viene rilasciato anche in una versione Free.
Adesso, quando l'utente è collegato, la barra di navigazione mostra il testo LOGOUT
Risorse utilizzate:
* Rokbox : https://extensions.joomla.org/extensions/extension/multimedia/multimedia-display/rokbox
* Sourcerer : https://extensions.joomla.org/extension/sourcerer/
Buon Gantry!