Joomla
Joomla es mi CMS preferido, que permite desarrollar todo sitios web dinámicos e interactivos, una simple web , un blog, una tienda online, lo que se te ocurra se puede hacer con Joomla.
Su nombre es una pronunciación fonética para anglófonos de la palabra swahili jumla, que significa "todos juntos" o "como un todo". Se escogió como una reflexión del compromiso del grupo de desarrolladores Joomla y la comunidad del proyecto.
Es desarrollado principalmente en PHP ,puede ver en este link Requisitos software para cada versión Joomla de la pagina Oficial
Mas información y descarga de la Pagina Oficial.
- Andres Cordeiro
- Joomla
Hace poco comenzamos a actualizar una plantilla antigua de Joomla 3 a Joomla 5. Desde Joomla 4.0 se recomienda que, en producción, las plantillas finales guarden sus recursos como CSS, JavaScript e imágenes dentro del directorio media. Esto ayuda a que Joomla sea más rápido y a que la instalación esté más organizada.
El resto de archivos —index.php (la estructura base), overrides de componentes, plugins y módulos— se mantienen en templates/nombrePlantilla.
El problema que nos surgió fue el siguiente:
¿Cómo trabajar en desarrollo con todos los recursos juntos y luego generar una plantilla lista para publicar siguiendo las buenas prácticas de Joomla?
En este artículo te voy a contar cómo Joomla gestiona la instalación de plantillas, cómo usar templateDetails.xml y joomla.asset.json para tener un flujo de trabajo limpio y versionable y cómo pasar fácilmente de desarrollo a producción sin romper rutas.
Un flujo de trabajo cómodo: todo junto en desarrollo, separado en producción
Durante el desarrollo de una plantilla Joomla es más cómodo tener todos los archivos en una sola carpeta. La clave está en que, al empaquetar la plantilla para producción:
- Los archivos PHP, overrides y estructura base deben ir a
templates/nombrePlantilla - Los recursos estáticos (CSS, JS, imágenes) deben ir a
media/templates/site/nombrePlantilla
Para esto Joomla nos da dos herramientas clave: templateDetails.xml y joomla.asset.json.
templateDetails.xml: organizando la instalación de la plantilla
El archivo templateDetails.xml es fundamental. Aquí le indicamos a Joomla qué archivos instalar, dónde colocarlos y cómo manejar la plantilla desde el administrador.
<files> – Archivos de la carpeta de la plantilla
En esta sección definimos los ficheros que van directamente a la carpeta principal de la plantilla. Ejemplo (de Cassiopeia):
<files>
<filename>component.php</filename>
<filename>error.php</filename>
<filename>index.php</filename>
<filename>joomla.asset.json</filename>
<filename>offline.php</filename>
<filename>templateDetails.xml</filename>
<folder>html</folder>
</files>
<media> – Recursos que irán al directorio media
Aquí definimos qué carpetas del paquete se instalarán en el directorio media de Joomla. Esto es lo que nos permite separar los assets de la lógica de la plantilla.
Ejemplo:
<media destination="templates/site/cassiopeia" folder="media">
<folder>js</folder>
<folder>css</folder>
<folder>scss</folder>
<folder>images</folder>
</media>
Con esto, al instalar la plantilla, Joomla colocará esos archivos en: media/templates/site/cassiopeia/
¿Cómo decide Joomla de dónde cargar los assets?
Aquí entra en juego joomla.asset.json, un archivo que Joomla usa desde la versión 4.0 para gestionar la carga de recursos. Este archivo nos permite declarar cada asset, asignarle un nombre único y establecer su ruta, evitando tener que tocar el index.php.
Ejemplo:
{
"name": "tpl_svbasic.bootstrap",
"type": "style",
"uri": "templates/solucionesvigobasicresponsiveJ5/css/bootstrap.min.css"
}
- name → nombre único del recurso.
- type → tipo de recurso (
stylepara CSS,scriptpara JS, etc.). - uri → ruta desde la raíz de Joomla.
Cargando un asset en Joomla
Si tenemos el recurso definido en joomla.asset.json, lo podemos cargar así:
use Joomla\CMS\Factory;
$app = Factory::getApplication();
$doc = $app->getDocument();
$wa = $doc->getWebAssetManager();
$wa->useStyle('tpl_svbasic.bootstrap');
O incluso registrarlo y usarlo directamente:
$wa->registerAndUseStyle(
'tpl_svbasic.bootstrap',
'templates/solucionesvigobasicresponsiveJ5/css/bootstrap.min.css'
);
Estrategia para desarrollo y producción
En desarrollo, trabajamos con las rutas dentro de la carpeta templates:
{
"name": "tpl_svbasic.bootstrap",
"type": "style",
"uri": "templates/solucionesvigobasicresponsiveJ5/css/bootstrap.min.css"
}
En producción, cambiamos la ruta para que apunte al directorio media:
{
"name": "tpl_svbasic.bootstrap",
"type": "style",
"uri": "media/templates/site/solucionesvigobasicresponsiveJ5/css/bootstrap.min.css"
}
Así conseguimos:
- Tener todos los recursos juntos y fácilmente versionables durante el desarrollo.
- Cambiar solo la ruta al empaquetar la plantilla.
- Hacer que Joomla coloque automáticamente cada archivo en su sitio durante la instalación.
Ventajas de este método
- Entorno de trabajo limpio y controlado.
- Cumple con las recomendaciones oficiales para plantillas Joomla 4 y Joomla 5.
- Evita rutas rotas y búsquedas interminables en el código.
Si desarrollas plantillas Joomla, este flujo de trabajo es una de las formas más cómodas y seguras de gestionar las rutas y cargar assets desde media, sin perder el control durante el desarrollo y sin complicaciones al publicar.
Weblinks es una extensión de Joomla que nos permite hacer un directorio de enlaces externos de una forma sencilla e intuitiva. Nosotros los utilizamos en esta web, aquí puede ver nuestro directorio de links que tenemos apuntados.
Este componente (extensión) de Joomla, hasta la versión 2.5 venía incluido, era una extensión Nativa de Joomla, pero en la versión 3.0 dejaron de incluirlo en el paquete de instalación. En la versión 4 de Joomla se rumoreaban que no se iba a continuar, aunque existe una versión para 4.0, sigue existiendo en JED de Joomla para poder descargarlo, aunque lleva un año sin actualizarse.
Nosotros aparte de utilizarla como un directorio, la utilizamos para insertar los enlaces a fuera de la web, el motivo de utilizarlo así es:
- Controlar los links rotos: Muchas veces cuando añadimos un link en un post, al cabo del tiempo lo cambia o lo quitan, esto es un problema y para detectarlo es muy sencillo si los tenemos registrados en una base de datos, que con una consulta podríamos comprobarlos todos.
- Estadísticas de pulsaciones: Saber qué links realmente hacen clic o no.
¿Cómo usamos Weblinks en nuestra web?
Una vez lo tengas instalado, pues vas a componentes y vas Enlaces Web, luego es muy sencillo añades enlaces y las categorías que quieres, es muy parecido al componente de contenido de artículos, con la diferencia que tienes un campo donde poner la URL.
Luego, si lo quieres mostrar en la web, simplemente añade el item de menu en donde quieres añadir. Al igual que un artículo o una categoría artículos.
Nosotros aparte utilizarlos como directorio de links, lo utilizamos para añadir los links en nuestros artículos por los motivos que ya indicamos antes.
Para añadir un link que tenemos en el componente Weblinks en un artículo, va a depender del editor que tengas, nosotros utilizamos JCE para la mayoría de los proyectos, por lo que simplemente pulsamos en icono de link, buscamos el componente enlace y ahí buscamos el link que deseamos añadir.
Donde lo puedo descargar Weblinks
En JED si buscas weblinks aparece, en la página oficial de Joomla puede descargar, te pongo aquí el link.
Existe un repositorio oficial, extensión weblink, donde puede ver si continúan o no el proyecto.
Si recibes un email de tu web que en el asunto "Error con su forma de pago paypal en su tienda online" y en el body del email pone:
"Hola,
Error con su forma de pago paypal en su tienda Online. Los detalles están logueados en el archivo paypal.2.log.php
El equipo de VirtueMart"
No te asustes, es un error que se produjo en Pay Pal, en el archivo que indica, podras ver que tipo error fue.
Ahora voy tratar el siguiente error os indico que le apareció a varios clientes que les llevamos el mantenimiento web.
"ERROR checkPaypalIps: Error with REMOTE IP ADDRESS "
The remote address of the script posting to this notify script does not match a valid PayPal IP address
Si a ti, te aparece otro error no dudes en ponerte en contacto con nosotros y te lo estudiamos.
Hoy me solicitarón añadir el plugin Google Tag Manager a un Joomla 4, como podemos ver es un plugin que solo es compatible para Joomla 3 y su ultima version es de 24 Junio 2020.
Pues nos ponemos manos a la obra , instalamos y va perfectamente la instalación.
Ahora activamos el plugin , tachan ERROR en JREQUEST!!!
La intención con este post es ir anotando las errores que vamos encontrando para ello vamos diferencias cuando lo tenemos instalado en joomla 3.10.11 o en joomla 4.2.3, ya que hay errores diferentes en ambos.
Virtuemart 4.0.6.10690
- No encuentra en productos con la Ñ, en las versiones anteriores si lo hacía.
Busque cual era el error y encontré que en la clase de producto /administrator/components/com_virtuemart/models/product.php en la linea 454 tenía un filtro de string con el siguiente código:
$keyword = vRequest::filter(html_entity_decode($keyword, ENT_QUOTES, "UTF-8"),FILTER_SANITIZE_FULL_SPECIAL_CHARS,FILTER_FLAG_ENCODE_LOW);
Si lo sustituimos por uno menos estricto, por este:
$keyword = vRequest::filter(html_entity_decode($keyword, ENT_QUOTES, "UTF-8"),FILTER_SANITIZE_SPECIAL_CHARS,FILTER_FLAG_ENCODE_LOW);
Pues funciona , perfectamente.
El caso es que cuando fui ver si le podía mandar un issue a los creadores, me doy cuenta que en las nuevas versiones ya lo resolvieron, y lo cambiaron muchos mas ficheros, no me diera cuenta que fallaban también.
Llegué tarde :-)
Cambiar el favicon de la plantilla cassiopeia debería ser un parametro, esto lo comento para el proyecto de Pablo Arias que quiere montar una plantilla básica con cassiopeia pero con mas opciones. :-)
Al tajo, busco informacion y como siempre voy a las webs conocidad:
"Como cambiar el favicon en la plantilla de cassiopeia de Joomla 4" de Sergio Iglesias
En esta entrada lo explica super bien , donde poner el favicon , para las versiones anteriores 4.1.1 y para las superiores.
Lo unico que yo añadiría a esa entrada es explicar como carga el favicon , me explico:
$this->addHeadLink(HTMLHelper::_('image', 'joomla-favicon.svg', '', [], true, 1), 'icon', 'rel', ['type' => 'image/svg+xml']);
$this->addHeadLink(HTMLHelper::_('image', 'favicon.ico', '', [], true, 1), 'alternate icon', 'rel', ['type' => 'image/vnd.microsoft.icon']);
$this->addHeadLink(HTMLHelper::_('image', 'joomla-favicon-pinned.svg', '', [], true, 1), 'mask-icon', 'rel', ['color' => '#000']);
Como bien dice en la entrada Sergio, esas son la lineas que cargan el favicon y se pone las tres por los distintos navegadores.
La cuestion es que si tu en la ruta que indica que pongas tu favicon.
media/templates/site/cassiopeia/images/tufavicon.ico
Si haces como yo que solo pongo un favicon ( ico), como mi navegador admite los favicon svg, la primera linea carga el svg, pues entonces muestra ese favicon y no el que acabo de poner.
Mi solucion rápida es comentar la primera linea, aunque lo mejor sería conseguir el favico en ese formato. :-)
Me imagino que lo navegadores que solo admitan los mask-icon, cargaran la segunda linea no la primera.
En la version 4.1.0 sacan la opcion de duplicar plantilla y la sustituyen por crear subplantilla de Joomla (plantillas hijas).
Duplicar plantilla, lo hacia es copiar los ficheros tal cual en el directorio de template, de esa plantilla.
La nueva opcion ( subplantilla) lo que hace copiar la estructura directorios en template y añaden el archivo templateDetails.xml.
En esa versión hay otro cambio bastante relevante, que es cambio la ubicacion de los ficheros css,sass y js de las plantillas pasandolos para el directorio media/templates/nombrePlantilla/, esto en principio para mi es un cambio bastante importante.
Creando una subplantilla de cassiopeia
Entró la plantilla cassiopeia y pulso crear subplantilla, no abre un popup que nos puede un nombre, yo pongo cassiopeia_minombre. A continuación reviso en el codigo que me creo y veo:
Cambios en directorio templates
Podemos ver crea un directorio en plantillas con el nombre que le pusimos, dentro del directorio añade el fichero templateDetails.xml
Joomla por defecto trae dos plugins de recaptcha que funciona perfectamente.
Hoy me surgio el problema que un cliente los desinstalo, que si permite deinstalar, pese que no pero si se puede.
Lo que hicimos para recuperarlo , fue subir de nuevo los fichero de esos plugins directamente a la instalacion del cliente, pero no los reconoce automaticamente, para ello tenemos que instalarlos como nos indica Sergio Iglesias en 5 forma de instalar una extension, lo explica muy bien este post.
Extensiones/Gestionar/Descubrir.
Una vez pulsamos descubrir nos aparece los dos plugin recaptcha que había eliminado el cliente, ahi ya nos deja instalarlo y ya nos lo reconoce el plugin.
Virtuemart genera json para metadatos en fichero sublayout/snippets.php
Nosotros nos encontramos con el dilema que nosotros redondeamos el precio a dos decimales, aunque en el metadatos ponemos todos los digitos, esto hace que google mechants nos rechace la ficha, ya que la web pone un precio y el metadato otro.
Para solicionarlo modificamos ese fichero en nuestra plantilla, redondeando el campo de precio : product->prices['salesPrice']
El codigo lo dejamos asi:
$description = str_replace('"','\"',htmlspecialchars(strip_tags($description)));
$PrecioFinal = number_format($product->prices['salesPrice'], 2, '.', ' '); // Precio ya con descuento..
?>.....
- Modulo personalizado de aviso
- Error en virtuemart con php 8.0
- Crear un directorio con Joomla 4
- Plantilla Cassiopeia de Joomla 4 : Micassiopeia
- Plugin para añadir content un producto virtuemart
- Joomla 4: Error campo invalido en configuracion global
- Virtuemart: Buscar con cámara móvil
- Versión VirtueMart 3.8.6 - Release