Usare Bootstrap 3 in Joomla 3.x

Come già molti di voi sapranno, nella versione 3.x di Joomla è stato integrato Bootstrap, questo fantastico framework inizialmente realizzato dal team di sviluppo di Twitter.

Purtroppo (o per fortuna, dipende dai casi) la versione di Bootstrap implementata in Joomla è la versione 2.3.2, versione ormai datata di questo framework, non più supportata dal suo team di sviluppo.

Tuttavia non siamo obbligati ad usare questa versione di Bootstrap per il nostro template, molti template presenti sul web (free o a pagamento) usano la versione 3 di Bootstrap senza problemi, ma se vuoi usare la versione 3 di Bootstrap bisogna fare molta attenzione:

Perchè usare Bootstrap 3?

Se lavorate nel campo dello sviluppo dei template per cms, la versione 3 di Bootstrap porta molti vantaggi: è più performante, è di tipo "mobile first" ed è molto più documentata e utlizzata della versione 2.

Perchè NON usare Bootstrap 3?

Come già dicevo in un altro articolo, visto che Joomla viene usato in tutto il mondo, la scelta di usare la versione 2 e non la versione 3 è motivata: la versione 3 non supporta i browser più datati come internet explorer 7, joomla viene usato in tutto il mondo e il mancato supporto a questo browser (anche se ormai datato) può essere un problema.

Se volete realizzare un template che supporti anche i browser più datati, la versione 2 rimane la migliore, ma maggior parte degli utenti italiani ed europei usano browser più aggiornati e molte agenzie di sviluppo web al giorno d'oggi ottimizzano i siti web per versioni molto più aggiornate di IE7, quindi noi possiamo tranquillamente utilizzare la versione 3

Quali problemi possono succedere se uso Bootstrap 3 in Joomla 3? Perchè dici che bisogna stare attenti?

Perchè i conflitti tra librerie Javascript sono sempre dietro l'angolo!, e magari un template che non ti dà nessun problema in una pagina te ne può dare tanti in un altra, perché il componente di quella nuova pagina carica un script Javascript diverso dalla pagina precedente.

Nelle prossime versioni di Joomla, verrà implementato la versione 3 di Bootstrap, ma per ora non si sà ne quando verrà implementata, e neanche come verrà implementata (sostituiranno definitivamente o si potrà scegliere quale usare? solo il tempo ce lo dirà).

Quindi per usare Bootstrap 3 dobbiamo caricare il framework come se fossero dei file js e css standard all'interno del template.

I

Conflitto di doppio caricamento del file bootstrap.min.js

problema classico che si verifica quando si realizza un template con Bootstrap 3, faccio un esempio veloce: realizzo un template con Bootstrap 3 e nella homepage il sito funziona perfettamente, apro una pagina interna e il sito lo vedo ma alcune animazioni non funzionano.

Dando un occhiata al codice html capirai subito dove stà il problema: alcuni moduli e componenti di Joomla forzano il caricamento del file bootstrap.min.js presente nel core di Joomla (che si basa su Bootstrap 2), anche se noi nel template non gli abbiamo dato indicazioni di caricare le librerie della user interface, ovviamente se in una pagina viene caricato sia il file javascript di Bootstrap 2 che i file Bootstrap 3 questi file vanno in conflitto.

Dobbiamo assolutamente evitare il caricamento del file bootstrap.min.js del core di Joomla, ci sono vari modi per impedire il caricamento di questo file. Alcuni funzionano in alcuni casi e altri ne funzionano in altri (dipende da come è strutturato il sito). Eccovi alcuni esempi di codice da inserire per evitare il caricamento:

Metodo 1: Tramite override modulo

Alcuni moduli richiedono il file di Bootstrap direttamente nella view del modulo, come ad esempio il modulo posizione (breadcrumbs), se fai un override di questo modulo, puoi eliminare o disabilitare la seguente riga di codice php:

 
JHtml::_('bootstrap.tooltip');
 

Eliminando questa riga di codice diciamo al modulo di non caricare i file di bootstrap del core

Metodo 2: Tramite istruzione unset

Possiamo usare la funzione "unset" per dire a Joomla di non caricare il file: _scripts[JURI::root(true).'/media/jui/js/bootstrap.min.js']); ?> oppure usando getDocument:

 
<?php
$doc= JFactory::getDocument();
 unset($doc->_scripts[JURI::root(true).'/media/jui/js/bootstrap.min.js']); 
?>
 

Metodo 3: Jhtml

Infine l'ultimo modo che vi segnalo è la disabilitazione dell' intero framework tramite Jhtml

 
JHtml::_('bootstrap.framework', false);
 

Una volta tolto il file bootstrap.min.js, possiamo caricare nel nostro template in file bootstrap.min.js di Boostrap 3 senza problemi.

Conflitti con mootools.more

Purtroppo Bootstrap e mootools.more vanno in conflitto per quanto riguarda il menu dropdown, si potrebbe disabilitare mootools.more usando gli stessi comandi usati in precedenza, ma mootools.more è un file del sistema e questo potrebbe creare problemi con alcuni script di Joomla.

Un metodo molto semplice per evitare l'errore è quello di usare una regola css che blocchi la propagazione degli effetti con questo semplicissimo codice css:

 
.dropdown{ display:block !important; }
 

Col tempo gli script di mootools verranno eliminati quindi si potrà togliere mootools senza problemi.

Differenze tra Bootstrap 2 e 3

La sintassi di Bootstrap 2 e 3 in alcuni punti è leggermente diversa, ce ne accorgiamo quando proviamo ad esempio ad usare il componente "categoria-blog". All'interno di questo componente vengono usati due classi di Bootstrap con la sintassi della versione 2, vale a dire la griglia e la paginazione. Nella versione 2 abbiamo ad esempio un codice di questo tipo:

 
<div class="span4">
  <div class="navigation">
  <ul>
    <li><a href="#">prev</li>
    ...
   </ul>
  </div>
</div>
 

In Bootstrap 3 diventa:

 
<div class="col-md-4">
  <ul class="navigation">
    <li><a href="#">prev</li>
    ...
  </ul>
</div>
 

La sintassi è simile ma non identica e questo comporta una errata visualizzazione dei tag html, per sistemare basta cambiare override del template, nel file che si trova in "com_content/category/blog.php" e nel file "pagination.php", Nel file "com_content/category/blog.php" , nella riga:

 
      <div class="span<?php echo round((12 / $this->columns)); ?>">
 
 

Diventa:

 
      <div class="col-md-<?php echo round((12 / $this->columns)); ?>">
 
 

E più in basso il codice:

 
<?php if (($this->params->def('show_pagination', 1) == 1 || ($this->params->get('show_pagination') == 2)) && ($this->pagination->get('pages.total') > 1)) : ?>
    <div class="pagination">
      <?php if ($this->params->def('show_pagination_results', 1)) : ?>
        <p class="counter pull-right"> <?php echo $this->pagination->getPagesCounter(); ?> </p>
      <?php endif; ?>
      <?php echo $this->pagination->getPagesLinks(); ?> </div>
  <?php endif; ?>
 

Possiamo o eliminare il div con classe "pagination" o rimonimarlo o farlo diventare un tag nav, importante è che non ci sia un div con classe "pagination":

 
<?php if (($this->params->def('show_pagination', 1) == 1 || ($this->params->get('show_pagination') == 2)) && ($this->pagination->get('pages.total') > 1)) : ?>
    <div class="paginazione">
      <?php if ($this->params->def('show_pagination_results', 1)) : ?>
        <p class="counter pull-right"> <?php echo $this->pagination->getPagesCounter(); ?> </p>
      <?php endif; ?>
      <?php echo $this->pagination->getPagesLinks(); ?> </div>
  <?php endif; ?>
 

E infine nel file pagination.php:

 
function pagination_list_footer($list)
{
  $html = "<div class=\"pagination\">\n";
  $html .= $list['pageslinks'];
  $html .= "\n<input type=\"hidden\" name=\"" . $list['prefix'] . "limitstart\" value=\"" . $list['limitstart'] . "\" />";
  $html .= "\n</div>";
 
  return $html;
}
 

Diventa:

 
function pagination_list_footer($list)
{
  $html = $list['pageslinks'];
  $html .= "\n<input type=\"hidden\" name=\"" . $list['prefix'] . "limitstart\" value=\"" . $list['limitstart'] . "\" />";
  return $html;
}
 

E la riga:

 
  $html = '<ul class="pagination-list">';
 

Diventa:

 
  $html = '<ul class="pagination">';
 

Questi sono tutti i "bug"(anche se in realtà bug non sono) che ho trovato finora usando Bootstrap 3 in Joomla 3, probabilmente la lista non è completa manca ancora qualcosa, ma con qualche ricerca e con qualche tentativo ogni problema si risolve senza grosse difficolta e senza dover andare a modificare il core del cms.

Se avete trovato altri errori che non ho trovato in questo articolo, segnalatemeli e vedremo insieme come risolverli.

Buon anno a tutti

Commenta questo articolo sul forum