Supporto volontario e collaborativo per Joomla!® in italiano

Articoli della Community

Novità su Joomla, estensioni e tendenze del web

Override Modulo Statistiche

Di override se ne è parlato moltissime volte e la maggior parte degli utenti di Joomla sa di cosa si tratta per cui mi limiterò ad una sommaria e breve descrizione per poi passare all’illustrazione pratica modificando uno specifico modulo.

Come tutti sappiamo, Joomla separa nettamente i contenuti di un sito che sono archiviati nel database dalla loro presentazione grafica che è gestita con il sistema dei templates.

La scelta di uno specifico template, infatti, ci consente di differenziare il nostro sito rispetto ad altri siti realizzati con Joomla. Il template costituisce, dunque, la struttura portante del sito rendendo possibile la visualizzazione e la disposizione dei moduli e dei componenti nelle pagine che costituiscono il nostro sito.

Legata a questa importante funzione generale il template ci permette, utilizzando la tecnica dell’override, di modificare singoli elementi della grafica del sito. Il termine inglese override può essere tradotto in italiano con le locuzioni passare sopra, non tenere conto di, quindi consente di forzare la presentazione dei dati e disporli diversamente da come li presenterebbe il template impostato come predefinito.

L’articolo che state leggendo è il primo di una serie di articoli nei quali utilizzerò l’override per modificare alcuni moduli di Joomla. Lo scopo di tali articoli è mostrare, con esempi concreti, le potenzialità e la flessibilità di Joomla.

Nello specifico utilizzerò una forma specifica di override realizzando dei layout alternativi di alcuni moduli. L’override dei layout alternativi è simile all’override del template ma consente di avere a disposizione più opzioni contemporaneamente e di conseguenza un maggiore controllo sulla disposizione dei dati del nostro sito.

L'override si esegue aggiungendo i files php necessari nella cartella html del template in uso e aggiungendo, se necessario, le opportune classi css al file css del nostro template.

La struttura generale è la seguente:

 

templates/template_in_uso/html/nome_modulo/nome_file.php

 

templates/template_in_uso/css/nome_file.css

 

Da tenere presente che all'interno della cartella CSS possono esserci uno o più files css a seconda di chi ha realizzato il template che abbiamo deciso di utilizzare. Quindi va individuato con precisione il file nel quale inserire le classi css. Stesso discorso per la cartella nome_modulo che può variare in base alle modifiche che vogliamo apportare.

 

A questo punto direi di passare dalla teoria alla pratica realizzando un layout alternativo per il modulo statistiche.

 

Per poter replicare l'esempio è necessario un editor come Notepad++ e un client FTP come Filezilla. Non mi dilungo qui sul loro uso che ritengo come requisiti già acquisiti per cimentarsi con questa tipologia di modifiche.

 

Come prima cosa bisogna andare a prendere il file originale del modulo da modificare che, in questo caso, è default.php che si trova in modules/mod_stats/tmpl/default.php

Bisogna copiare il file nella cartella html del template in uso e rinominarlo a piacere. Nel mio caso utilizzo un template che si basa sul framework Helix per cui il percorso è: templates/helix_frascanlab/html/mod_stats/statistiche.php

Ovviamente se la cartella del modulo statistiche non esiste già va creata.

A questo punto sostituisco il contenuto del file statistiche.php con il codice seguente:

 

<?php

    /**

       * @package     Joomla.Site

       * @subpackage  mod_stats

       * @copyright   Copyright (C) 2005 - 2019 Open Source Matters, Inc. All rights reserved.

       * @license     GNU General Public License version 2 or later; see LICENSE.txt

    */

    

    defined('_JEXEC') or die;

?>

 

<h3 class="display-4 text-center text-primary pt-5">Override Statistiche</h3>

 

<section id="counter">

    <div class="row stats-module<?php echo $moduleclass_sfx; ?>">

        

       <?php foreach ($list as $item) : ?>

        

       <div class="col text-center">

           <div class="count">

               <p class="number">

                   <?php

                       echo number_format($item->data,0,' ',',');

                   ?>

               </p>

               <h4><?php echo $item->title; ?></h4>

           </div>

       </div>

        

       <?php endforeach; ?>

        

    </div>

</section>

 

 

Per rendere più gradevole l'aspetto del modulo statistiche ho bisogno di aggiungere alcune classi css. Usando un template che si basa sul framework Helix ho la possibilità di aggiungere un file custom.css nel quale inserire tutte le classi css che mi servono per le mie personalizzazioni. Il percorso è il seguente: templates/helix_frascanlb/css/custom.css

 

Aggiungo al file custom.css le seguenti classi CSS:

 

 

/* OVERRIDE MODULO STATISTICHE */

#counter {    

    color: #fff;

    display: block;

    overflow: hidden;

    text-align: center;

    padding: 100px 0;

}

#counter .count {

    padding: 50px;

    background: #74E2FF;

    color: #fff;

    text-align: center;

}

.count h4 {

    color: #fff;

    font-size: 16px;

    margin-top: 0;

}

#counter .number {

    font-size: 30px;

    font-weight: 700;

    margin: 0;

}

 

Vorrei concludere sottolineando che ci sono due importanti differenze tra un override del template e un override che realizza un layout alternativo.

La prima riguarda il nome del file. Nell'override del template il nome del file resta default.php perché deve corrispondere al nome del file predefinito per poter essere sovrascritto. Nel caso, invece, del layout alternativo bisogna usare un nome del file diverso con l'unica limitazione di non usare nel nome del file il carattere underscore.

La seconda differenza consiste nel fatto che l'override del template viene richiamato automaticamente ogni volta che impostiamo una istanza del modulo che abbiamo modificato, mentre il layout alternativo viene richiamato solo se lo impostiamo come parametro nella tab Avanzate del modulo. Come possiamo vedere nell'immagine sottostante nel parametro Layout abbiamo un menu a tendina dove selezionare il layout alternativo che preferiamo tra quelli presenti. Da notare che non c'è limite al numero di layout alternativi che possiamo avere e che una volta impostato un layout alternativo sarà visualizzato solo e soltanto per quella specifica istanza del modulo.

override statistiche

Cliccando sul link che segue è possibile vedere contemporaneamente due istanze del modulo statistiche per valutare le differenze: Override modulo statistiche in azione