Documentazione Gantry 5 per Joomla!

Concetti fondamentali per iniziare con un template framework di nuova generazione.

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.
Anteprima modulo popup login in Gantry

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.

Creazione modulo login joomla

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.

Inserimento particella Module Instance nel outline

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.

Configurazione particella popup login

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.

Inserimento particella Custom HTML nel menu

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.

Particella Custom HTML con codice rokbox per popup login


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:
Particella Custom HTML con codice rokbox migliorato per popup login

{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}

Nota:
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
Testo LOGOUT per utente collegato

Risorse utilizzate:

* Rokbox : https://extensions.joomla.org/extensions/extension/multimedia/multimedia-display/rokbox
* Sourcerer : https://extensions.joomla.org/extension/sourcerer/
Buon Gantry!