[OK] Actualización de Joomla 3.3.6 interfiere con bootstrap

[randyjz4]

Por alguna razón la actualización de mi joomla 3.3.5 a 3.3.6 interfiere con el bootstrap de mi template. Si renombro el archivo "bootstrap.min.js" a "bootstrap.min.js.bk" el problema se resuelve, pero en la administración el menú no funciona.

Alguna sugerencia?

Gracias de antemano!

[Rajoz]

Cuando dises que "interferie" con el bootstrap de tu template, que tipo de problemas tienes?
Cual es tu template?

[randyjz4]

Tengo un template personalizado que estoy creando, pero llamo a los archivos de bootstrap 3.2.0 localmente, no utilizo la libreria de joomla a continuación:

Code: Select all

// Add JavaScript Frameworks
JHtml::_('bootstrap.framework');
$doc->addScript('templates/' . $this->template . '/js/template.js');

// Load optional RTL Bootstrap CSS
JHtml::_('bootstrap.loadCss', false, $this->direction);

El problema es que los componentes de bootstrap como el collapse, slide y demas no me funcionan correctamente despues de actualizar a joomla 3.3.6.

Por alguna razon se esta cargando, no se de donde, el bootstrap que esta en "\media\jui\js".

[Rajoz]

Con Firebug tienes la posibilidad de ver donde se cargan los .js y tambien de ver cual es el error en javascript.

[randyjz4]

Resolvi el problema modificando el archivo "bootstrap.min.js" de la carpeta "media\jui\js" y elimine el código de los componentes que hacen conflicto con el bootstrap de mi template.

Espero que el la próxima actualización se corrija este bug.

[carcam]

Hola randyjz4,
esto no es un bug.

Joomla! y muchos componentes por tanto utilizan la versión 2.3.0 de Bootstrap. Si quieres usar una versión diferente de Bootstrap en tu plantilla (o cualquier otro framework css), debes asegurarte de que no interfiere con lo que ya existe en Joomla!. Una técnica que se suele utilizar es el namespacing.

Un saludo.

[jcarloos]

Concuerdo con @carcam, esto no es un bug. En todo caso es una característica a añadir. Es decir, que Joomla permita trabajar con otros framework front-end (que se puede), pero sin la inclusión del que usa.

@carcam, con respecto a lo que dices:

debes asegurarte de que no interfiere con lo que ya existe en Joomla!. Una técnica que se suele utilizar es el namespacing.

Personalmente, la parte de que no interfiera, es algo difícil de conseguir. Actualmente J!3 usa Bootstrap 2.3.2. Pero si quieres hacer una plantilla que use la 3.2.0, fácilmente lo puedes lograr, pero aún se sigue cargando el JUI. Por supuesto, esto puede traer dos o tres complicaciones (que no son difíciles de solucionar), pero de que se carga, se carga.

Por ello la idea sería que Joomla contara con plugin el cual se encargara de cargar los archivos del JUI. El mismo puede contar con las opciones de cargar o no, su versión de bootstrap en el front-end, y con esto estaría solucionado este problema. El que quiera usar cualquier otro framework, o el mismo bootstrap en una versión diferente, ya no le daría problema.

[hefesto]

@randyjz4

Ten cuidado con eso, porque muy posiblemente perderás los cambios en alguna de las próximaa actualizaciones de Joomla. Acuérdate que qué has cambiado, para poder aplicar esos cambios.

@Carlos

Eso ya está en marcha, en teoría para la versión 3.7

http://developer.joomla.org/cms/roadmap.html

aunque con el retraso que está teniendo la 3.4 es posible que veamos algo en ese sentido antes .

Un saludo.

[randyjz4]

Después de darme cuenta, mi "Solución" no fue efectiva, me afecta el backend de joomla, no existe alguna solución alterna a este problema??

Como es eso del namespacing? talves me funciona.

Gracias de antemano.

[randyjz4]

Encontré una solución, espero que les sirva a todos. Lo que hice fue un "override" de la carpeta /media/jui/js en mi template creando una carpeta dentro de mi template en /js/jui y coloque dos archivos (bootstrap.js y bootstrap.min.js), ambos archivos están vacíos, sin nada de código, fue maravilloso cuando di el F5 que vi todo funcionando correctamente.

PS: Esta solución no afecta en backend, ya revise y esta todo perfecto!

[carcam]

Encontré una solución, espero que les sirva a todos. Lo que hice fue un "override" de la carpeta /media/jui/js en mi template creando una carpeta dentro de mi template en /js/jui y coloque dos archivos (bootstrap.js y bootstrap.min.js), ambos archivos están vacíos, sin nada de código, fue maravilloso cuando di el F5 que vi todo funcionando correctamente.

PS: Esta solución no afecta en backend, ya revise y esta todo perfecto!

Ciertamente es una solución ingeniosa que no se me había ocurrido. El problema que le veo es que algún componente confíe en que estás usando la versión por defecto de Joomla! y eso haga que se muestre todo mal.

Personalmente, la parte de que no interfiera, es algo difícil de conseguir. Actualmente J!3 usa Bootstrap 2.3.2. Pero si quieres hacer una plantilla que use la 3.2.0, fácilmente lo puedes lograr, pero aún se sigue cargando el JUI. Por supuesto, esto puede traer dos o tres complicaciones (que no son difíciles de solucionar), pero de que se carga, se carga.

Si quieres afinar mucho la solución de randy es muy buena porque fuerza que en el front se cargue sólo la última versión de boostrap. Pero si te basta con eliminar interferencias, es bastante sencillo añadir un selector personalizado al CSS de la versión de Bootstrap que elijas y modificar su CSS para que sólo actúe bajo tu selector. La parte un poco más delicada es modificar el javascript, pero también es posible.

Un saludo.

[jcarloos]

Gracias @Isidro, no me acordaba que estaba planificado el desarrollo de esto.

Caballeros, para sorpresa mía, y algo con lo que no contaba, es que actualmente Joomla mágicamente no necesariamente te carga el jui. Esto prácticamente se logra, haciendo un override a la carpeta JUI. Incluyes dentro de tu plantilla, /tu-plantilla/css/bootstrap.min.css y /tu-plantilla/js/bootstrap.min.js y enseguida Joomla detecta estos archivos, y no carga los archivos del JUI. En otras palabras, se le hace un override a esta carpeta.

Jmagia.png

Y si no me equivoco, se puede hacer esto prácticamente con cualquier archivo dentro de la carpeta "media"

Nunca me imagine que esto fuera así, de verdad. ¿ustedes lo sabían?

[randyjz4]

Ciertamente es una solución ingeniosa que no se me había ocurrido. El problema que le veo es que algún componente confíe en que estás usando la versión por defecto de Joomla! y eso haga que se muestre todo mal.

No tengo problemas con componentes ni plugins de terceros porque utilizo zoo_component de yootheme, es una maravilla.

Caballeros, para sorpresa mía, y algo con lo que no contaba, es que actualmente Joomla mágicamente no necesariamente te carga el jui. Esto prácticamente se logra, haciendo un override a la carpeta JUI. Incluyes dentro de tu plantilla, /tu-plantilla/css/bootstrap.min.css y /tu-plantilla/js/bootstrap.min.js y enseguida Joomla detecta estos archivos, y no carga los archivos del JUI. En otras palabras, se le hace un override a esta carpeta.

Estuve probando esta solución y funciona perfectamente! es mas limpia que mi solución.

Saludos a todos!!

[carcam]

Me sorprende que la solución de Carlos funcione. Lo que hace el sistema de overrides es cargar candidatos al fichero, pero el crear la carpeta vacía no hace que dejen de estar disponibles los otros ficheros. Algo se me habrá escapado en mis pruebas.

[jcarloos]

@carcam, ¿a que te refieres con crear la carpeta vacía? te refieres a la carpeta jui dentro de "js" o "css"???

[randyjz4]

Me sorprende que la solución de Carlos funcione. Lo que hace el sistema de overrides es cargar candidatos al fichero, pero el crear la carpeta vacía no hace que dejen de estar disponibles los otros ficheros. Algo se me habrá escapado en mis pruebas.

Recuerda que la carpeta no estaría vacía, tendria los archivos sustitutos. en mi caso JUI tiene Bootstrap 2.3, en sustitución coloco bootstrap 3.2.

[carcam]

Me sorprende que la solución de Carlos funcione. Lo que hace el sistema de overrides es cargar candidatos al fichero, pero el crear la carpeta vacía no hace que dejen de estar disponibles los otros ficheros. Algo se me habrá escapado en mis pruebas.

Recuerda que la carpeta no estaría vacía, tendria los archivos sustitutos. en mi caso JUI tiene Bootstrap 2.3, en sustitución coloco bootstrap 3.2.

Eso era... Tenía que haberme tomado el café antes de contestar...

¡Gracias!

[SupraBrake]

Hey, ahora que he trabajado con Joomla y su JUI me doy cuenta que está des-actualizado y bueno qué podemos esperar si seguramente actualizaran los archivos del CORE muchas de sus aplicaciones (componentes y/o extensiones se vendrían abajo)

YO TENGO UNA SOLUCIÓN ALTERNA, se supone que boostrap es JS y CSS procesado por developers, entonces creo que alternativas hay...

mi solución es sobre el MENÚ RESPONSIVE, A LA HORA DE DISPOSITIVOS MÓVILES, FALLA, EL PROBLEMA es que el js y el css se juntan en el evento onClick, en la clase collapse y data-collapse, pues se interpola con el bootstrap del JUI,(Es el único problema que he tenido), propongo una solución con JAVASCRIPT

index.php (el archivo donde uso el menú con su modulo respectivo)

Code: Select all

<script>
    jQuery(document).ready(function() {

        jQuery('#lola').click(function(event) {
            jQuery(this).toggleClass('active');
            if (jQuery('#lola').hasClass('active')) {
                jQuery('#main-navbar-collapse').show();
            } else {
                jQuery('#main-navbar-collapse').hide();
            };
        });

    });
</script>
                   
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="navbar-header">
        <button id="lola" type="button" class="navbar-toggle"><i class="fa fa-bars"></i></button>
       <!--ya no agregas el data-toggle-->
    </div>
    <div id="main-navbar-collapse" class="collapse navbar-collapse ">

        <jdoc:include type="modules" name="Mainmenu" style="xhtml" />
    </div>
</nav>

El código arriba muestra la función en JS de cómo manejar el botón Hamburguer y y el div que contiene el menú y las clases ...navbar-collapse...

Quiero dar a mostrar que se puede manejar la función de click de otro modo


Utilizo joomla 3.7 , boostrap 3.2, php 7 seguramente hay poca variación con versiones cercanas