2017529 CrearunmduloenJoomla3pasoapaso|Kadum

KADUM

Crear un mdulo en Joomla 3 paso a paso

30 julio, 2015 24 comentarios

Ya ests familiarizado con la creacin de sitios web en Joomla y has trabajado con los mdulos que lo componen. Pero ahora necesitas
dar un paso ms y crear una web personalizada, que incluya un mdulo nuevo para este CMS Cmo desarrollar un mdulo desde cero?
Con este tutorial paso a paso aprenders a comprender el funcionamiento de los mdulos en Joomla creando un mdulo que muestre
los artculos de una categora a modo de carrusel.

En el artculo del mes anterior, al que puedes acceder siguiendo este enlace, se explic cmo personalizar un sitio web en Joomla
modi cando un mdulo existente (el mod_menu). En concreto, el artculo comentaba los pasos a seguir para sobrescribir la vista del
mdulo. Este mes profundizamos en el manejo de los mdulos, pero desde otra perspectiva. No modi caremos uno existente, sino que
crearemos uno nuevo. La razn es sencilla: en muchas ocasiones los clientes no desean una web con prestaciones estndar y no es
posible encontrar los mdulos que se adaptan a sus exigencias, por lo que resulta interesante desarrollarlo nosotros mismos.

Crear un carrusel de noticias

El hilo conductor de este tutorial ser la creacin de un mdulo que muestre las imgenes de los artculos de una categora de forma
rotativa. Es lo que comnmente se conoce como carrusel de imgenes.

El carrusel de imgenes es una solucin elegante para webs con mucha informacin en su pgina de inicio ya que permite optimizar el
espacio mostrando informacin de manera rotativa en una determinada franja del sitio web.

http://kadumweb.com/crearmodulojoomla3/ 1/18
2017529 CrearunmduloenJoomla3pasoapaso|Kadum

Carrusel con imagen de artculos

Consideraciones previas
Vamos a trabajar con la versin de Joomla 3.1 y la plantilla por defecto beez3. El mdulo que vamos a crear, se aadir en la posicin
position-12.
Debido al tamao de esa posicin en la plantilla beez3, haremos que el carrusel muestre dos artculos por pgina.

Para conseguir el carrusel rotativo, se har uso de bxSlider. Puesto que el principal objetivo de esta gua es la construccin de un mdulo
para Joomla, no entraremos en detalle respecto a la explicacin del cdigo jQuery o la con guracin de bxSlider, que podris consultar
en su web.

Tal y como explicamos en nuestro anterior artculo, la estructura de cheros de un mdulo en Joomla es la mostrada en la siguiente
imagen. Para aprender ms sobre ellos, recomendamos leer el artculo comentado anteriormente.

Funcionamiento de un mdulo

Estructura del mdulo

El mdulo que vamos a construir lo llamaremos mod_carousel, por lo que vamos a construir una carpeta, que posteriormente
comprimiremos e instalaremos, con la estructura de archivos y carpetas:

http://kadumweb.com/crearmodulojoomla3/ 2/18
2017529 CrearunmduloenJoomla3pasoapaso|Kadum

Estructura de carpetas y
cheros

Tal y como se aprecia, los cheros que realmente compondrn un mdulo, estn recuadrados en la imagen anterior.
La carpeta css contendr un chero para aplicar estilos espec cos a nuestro mdulo.
La carpeta lib contendr los cheros necesarios para que bxSlider funcione en nuestro mdulo. Estos archivos se podrn descargar
desde la web o cial de bxSlider.

mod_carousel.xml
El chero xml de un mdulo contiene una serie de etiquetas que indican:

Informacin sobre el mdulo: name, author, description

Estructura de cheros y carpetas lo componen: les, folder, languages
Qu parmetros del mdulo se pueden con gurar: elds

Por ejemplo, algunos de los parmetros a con gurar cuando el mdulo est instalado, sern:

De qu categora queremos mostrar los artculos.

Si se quiere mostrar todos los artculos de esa categora o no.
En caso de no querer mostrar todos los artculos, el nmero de artculos a mostrar.
El orden en el que se mostrarn los artculos.

Formulario de con guracin

http://kadumweb.com/crearmodulojoomla3/ 3/18
2017529 CrearunmduloenJoomla3pasoapaso|Kadum

La informacin en el chero ser la siguiente:

1 <?xmlversion="1.0"encoding="utf8"?>
2 <?xmlversion="1.0"encoding="utf8"?>
3 <extensiontype="module"version="1.0"client="site"method="upgrade">
4 BLOQUE1
5
6 BLOQUE2
7
8 BLOQUE3
9 </extension>

Bloque 1

Sustituimos BLOQUE 1 por:

1 <name>ArtculosdestacadosCarousel</name>
2 <author>Kadumweb</author>
3 <creationDate>Mayo2015</creationDate>
4 <copyright>Copyright(C)</copyright>
5 <license>GNU/GPL</license>
6 <authorEmail>[email protected]</authorEmail>
7 <authorUrl>www.kadum.es</authorUrl>
8 <version>1.0.0</version>
9 <description>Mostraruncarruselconlasimgenesde
10 losartculosdeunacategora</description>

Donde se proporciona informacin como el nombre del mdulo, autor o descripcin.

Bloque 2

Sustituimos BLOQUE 2 por:

1 <files>
2 <filenamemodule="mod_carousel">mod_carousel.php</filename>
3 <folder>tmpl</folder>
4 <folder>lib</folder>
5 <folder>css</folder>
6 <filename>helper.php</filename>
7 <filename>index.html</filename>
8 <filename>mod_carousel.xml</filename>
9 </files>
10 <languages>
11 <languagetag="enGB">enGB.mod_carousel.ini</language>
12 <languagetag="esES">esES.mod_carousel.ini</language>
13 </languages>

Donde se indican los archivos y carpetas necesarios para el funcionamiento del mdulo.

Los archivos de idioma indicados entre las etiquetas <languages>, durante el proceso de instalacin se copiarn automticamente a la
carpeta languages de Joomla.

Bloque 3

Sustituimos BLOQUE 3 por:

1 <config>
2 <fieldsname="params">
3 <fieldsetname="basic">
4 <field
5 name="categoria"
6 type="category"
7 extension="com_content"
8 label="MOD_CAROUSEL_FIELD_CATEGORIA_LABEL"
http://kadumweb.com/crearmodulojoomla3/ 4/18
2017529 CrearunmduloenJoomla3pasoapaso|Kadum
8 label="MOD_CAROUSEL_FIELD_CATEGORIA_LABEL"
9 description="MOD_CAROUSEL_FIELD_CATEGORIA_DESC"/>
10
11 <field
12 name="todos"
13 type="radio"
14 class="btngroup"
15 default="0"
16 label="MOD_CAROUSEL_FIELD_TODOS_LABEL"
17 description="MOD_CAROUSEL_FIELD_TODOS_DESC">
18 <option
19 value="0">JNO</option>
20 <option
21 value="1">JYES</option>
22 </field>
23
24 <field
25 name="total"
26 type="integer"
27 first="2"
28 last="12"
29 step="1"
30 default="3"
31 label="MOD_CAROUSEL_FIELD_TOTAL_LABEL"
32 description="MOD_CAROUSEL_FIELD_TOTAL_DESC"/>
33
34 <field
35 name="orden"
36 type="list"
37 default="0"
38 label="MOD_CAROUSEL_FIELD_ORDEN_LABEL"
39 description="MOD_CAROUSEL_FIELD_ORDEN_DESC">
40 <option
41 value="a.title">MOD_CAROUSEL_VALUE_TITLE</option>
42 <option
43 value="a.id">MOD_CAROUSEL_VALUE_ID</option>
44 <option
45 value="a.ordering">MOD_CAROUSEL_VALUE_ORDEN</option>
46 </field>
47
48 </fieldset>
49 <fieldset
50 name="advanced">
51 <field
52 name="moduleclass_sfx"
53 type="textarea"rows="3"
54 label="COM_MODULES_FIELD_MODULECLASS_SFX_LABEL"
55 description="COM_MODULES_FIELD_MODULECLASS_SFX_DESC"/>
56 </fieldset>
57 </fields>
58 </config>

Donde:

1 <fieldsname="params">

Nos indica que la informacin del formulario, se almacenar en el campo params de la tabla #__modules.

1 <fieldsetname="basic">

Indica en qu pestaa del formulario de con guracin se mostrarn los campos.

1 <field
2 name="categoria"
3 type="category"
4 extension="com_content"
5 label="MOD_CAROUSEL_FIELD_CATEGORIA_LABEL"
6 description="MOD_CAROUSEL_FIELD_CATEGORIA_DESC"/>

Genera una lista desplegable (con name categoria) de las categoras que tengamos de nidas en Joomla. Tambin crea una etiqueta cuyo
texto se obtiene del chero .ini

http://kadumweb.com/crearmodulojoomla3/ 5/18
2017529 CrearunmduloenJoomla3pasoapaso|Kadum

Lista de categoras

1 <field
2 name="todos"
3 type="radio"
4 class="btngroup"
5 default="0"
6 label="MOD_CAROUSEL_FIELD_TODOS_LABEL"
7 description="MOD_CAROUSEL_FIELD_TODOS_DESC">
8 <option
9 value="0">JNO</option>
10 <option
11 value="1">JYES</option>
12 </field>

Genera dos input type radio (con name todos). Y su etiqueta correspondiente.

Tipo radio

1 <field
2 name="total"
3 type="integer"
4 first="2"
5 last="12"
6 step="1"
7 default="3"
8 label="MOD_CAROUSEL_FIELD_TOTAL_LABEL"
9 description="MOD_CAROUSEL_FIELD_TOTAL_DESC"/>

Genera una lista desplegable (con name total) de nmeros enteros comprendidos entre el 2 y 12. El valor por defecto es el 3. Tambin,
genera su etiqueta.

Lista desplegable de enteros

1 <field
2 name="orden"
3 type="list"
4 default="0"
5 label="MOD_CAROUSEL_FIELD_ORDEN_LABEL"
6 description="MOD_CAROUSEL_FIELD_ORDEN_DESC">
7 <option
8 value="a.title">MOD_CAROUSEL_VALUE_TITLE</option>
9 <option
10 value="a.id">MOD_CAROUSEL_VALUE_ID</option>
11 <option
12 value="a.ordering">MOD_CAROUSEL_VALUE_ORDEN</option>
13 </field>

Genera una lista desplegable (con name orden) donde especi camos 3 option. El texto para la etiqueta y las opciones de la lista, se
obtienen del chero .ini

Lista desplegable personalizada

http://kadumweb.com/crearmodulojoomla3/ 6/18
2017529 CrearunmduloenJoomla3pasoapaso|Kadum

Podemos ver la relacin de todos los tipos de campos en esta direccin.

Cuando guardemos el mdulo, los campos con gurados pasarn a la base de datos:

Flujo formulario a tabla

mod_carousel.php
Este chero se llama igual que la carpeta contenedora del mdulo. Se podra considerar el controlador del mdulo.
Cuando el mdulo se ejecuta en la parte pblica de Joomla, ste chero es el primero en entrar en funcionamiento.
En nuestro caso, se encarga de obtener la lista de noticias a mostrar mediante la invocacin del mtodo getList de la clase
modCarouseHelper. El mtodo recibe como parmetro de entrada el objeto params.
Posteriormente, carga la vista por defecto del mdulo, la cual, podr mostrar la lista de noticias obtenidas.

Su cdigo es el siguiente:

1 <?php
2 defined('_JEXEC')ordie;
3
4 //Cargaelficherohelper.php
5 require_once__DIR__.'/helper.php';
6
7 //Obtienelalistadenoticiasamostrar
8 $list=modCarouseHelper::getList($params);
9
10 //Cargalavistapordefectodelmdulo
11 requireJModuleHelper::getLayoutPath('mod_carousel');

helper.php
Este chero contiene la clase modCarouseHelper con el mtodo getList($params) que se invoca desde el chero mod_carousel.php. Se
podra considerar el modelo del mdulo.
El mtodo devuelve un array de objetos. Cada objeto representa un artculo que se mostrar en la vista.

La informacin sobre de qu categora hay que obtener los artculos, nmero de artculos a mostrar u ordenacin, estn almacenados en
la tabla #__modules, en el campo params. El parmetro de entrada $params contiene esos datos de la tabla. Para obtener cada uno de
ellos, se emplea la estructura:

1 $params>get('campo');

http://kadumweb.com/crearmodulojoomla3/ 7/18
2017529 CrearunmduloenJoomla3pasoapaso|Kadum

Flujo tabla a objeto

La implementacin de getList podra llevarse a cabo mediante una consulta sobre las tablas #__content y #__categories para obtener los
artculos deseados. Sin embargo, nos parece ms elegante emplear el modelo de Articles para tal n. En prximos artculos, trataremos
cmo lanzar consultas sobre la base de datos.

El cdigo del modelo ser:

1 <?php
2 defined('_JEXEC')ordie;
3 //Aadirclasesdeapoyo
4 $com_path=JPATH_SITE.'/components/com_content/';
5 require_once$com_path.'router.php';
6 require_once$com_path.'helpers/route.php';
7 JModelLegacy::addIncludePath($com_path.'/models','ContentModel');
8
9 classmodCarouseHelper{
10 publicstaticfunctiongetList(&$params){
11 //ObtenerunainstanciadelmodeloArticles
12 $articles=JModelLegacy::getInstance('Articles','ContentModel',array('ignore_request'=>true));
13
14 //Establecerlosparmetrosdelaaplicacin
15 $app=JFactory::getApplication();
16 $appParams=$app>getParams();
17 $articles>setState('params',$appParams);
18
19 //Filtrarporcategora
20 $articles>setState('filter.category_id',(int)$params>get('categoria'));
21
22 //Sinohayquemostrartodoslosartculos
23 if(!$params>get('todos')){
24 //Limitarelnmeroderesultadosamostrar
25 $articles>setState('list.start',0);
26 $articles>setState('list.limit',(int)$params>get('total'));
27 }
28 //Filtrarporpublicados
29 $articles>setState('filter.published',1);
30
31 //Accessfilter
32 $access=!JComponentHelper::getParams('com_content')>get('show_noauth');
33 $authorised=JAccess::getAuthorisedViewLevels(JFactory::getUser()>get('id'));
34 $articles>setState('filter.access',$access);
35
36 //Ordenar
37 $articles>setState('list.ordering',$params>get('orden','a.ordering'));
38
39 //Obtenerlosartculosmedianteelmodelo
40 $items=$articles>getItems();
41
42 //Paracadaartculo
43 foreach($itemsas&$item){
44 //Obtenerlaruta
45 $item>slug=$item>id.':'.$item>alias;
46 $item>catslug=$item>catid.':'.$item>category_alias;
47 $item>link=JRoute::_(ContentHelperRoute::getArticleRoute($item>slug,$item>catslug));
48 //Obtenerlaimagenprincipal
49 $item>imagen=json_decode($item>images)>image_intro;
50 }
51
http://kadumweb.com/crearmodulojoomla3/ 8/18
2017529 CrearunmduloenJoomla3pasoapaso|Kadum
51
52 return$items;
53 }
54 }

Puesto que Joomla emplea el patrn Singleton, en lugar de construir un objeto del modelo Articles, se hace uso de
JModelLegacy::getInstance para obtener el objeto existente:

1 $articles=JModelLegacy::getInstance('Articles','ContentModel',array('ignore_request'=>true));

Al modelo $articles se le aaden ltros mediante el mtodo setState(propiedad,valor) para obtener los artculos que nos interesan.

1 $articles>setState('params',$appParams);
2 $articles>setState('filter.category_id',$params>get('categoria'));
3 $articles>setState('list.start',0);
4 $articles>setState('list.limit',$params>get('total'));
5 $articles>setState('filter.published',1);
6 $articles>setState('list.ordering',$params>get('orden','a.ordering'));

Una vez establecidos los diversos parmetros, se obtienen los artculos que cumplen tales restricciones:

1 $items=$articles>getItems();

En el bucle while recorremos cada uno de los items. El empleo del ampersan (&$item) nos permite que los atributos (link e imagen) que se
aaden en el bucle, se puedan utilizar desde la vista.

1 foreach($itemsas&$item){...}

Para la construccin del enlace de cada artculo, se necesita la combinacin (slug) id:alias tanto del artculo como de la categora.
Empleamos la combinacin de dos mtodos estticos para la obtencin de la url:

1 JRoute::_(ContentHelperRoute::getArticleRoute($item>slug,$item>catslug));

Ms info en sobre la generacin de url en este enlace.

Para la obtencin de la imagen, se extrae el valor de image_intro del atributo images. Puesto que este atributo tiene la informacin en
JSON, se emplea: json_decode.

1 json_decode($item>images)>image_intro;

Por ltimo, se devuelve $items. El controlador (mod_carousel.php) los pasa a la vista.

default.php
La vista muestra los datos obtenidos en el chero helper.
Lo primero que haremos, ser aadir los cheros css y js que permitan a bxslider realizar su funcionalidad. Adems, se aadir un chero
css propio donde se dan estilos propios para nuestra plantilla.
Posteriormente, lanzamos con guramos los parmetros del mtodo bxslider sobre una capa identi cada como slider1
A continuacin, del array de objetos $list obtendremos el ttulo, enlace e imagen de cada artculo y los aadiremos dentro de la capa
.slider1

1 <?php
2 defined('_JEXEC')ordie;
3
4 //Cargadeficheros.CSSyJS
5 $doc=JFactory::getDocument();
6 $doc>addStyleSheet(JURI::base(true).'/modules/mod_carousel/lib/jquery.bxslider.css');
7 $doc>addScript(JURI::base(true).'/modules/mod_carousel/lib/jquery.bxslider.min.js','text/javascript'
8 $doc>addStyleSheet(JURI::base(true).'/modules/mod_carousel/css/mod_carousel.css');
9

10 //InicializarbxSlidersobre.slider1
http://kadumweb.com/crearmodulojoomla3/ 9/18
2017529 CrearunmduloenJoomla3pasoapaso|Kadum
10 //InicializarbxSlidersobre.slider1
11 //Paraconfigurarmsopciones,visitarhttp://bxslider.com/options
12 $doc>addScriptDeclaration("
13 jQuery(window).load(function(){
14 jQuery('.slider1').bxSlider({
15 slideWidth:300,
16 minSlides:1,
17 maxSlides:2,
18 slideMargin:20,
19 auto:true,
20 autoHover:true,
21 controls:true,
22 autoControls:false,
23 });
24 });
25 ");
26 ?>
27
28 <divclass="tilesgroup<?phpecho''?>">
29 <divclass="slider1">
30 <?php
31 foreach($listas$item){
32 echo'<divclass="slide">'.
33 '<h2><ahref="'.$item>link.'">'.$item>title.'</a></h2>'.
34 '<ahref="'.$item>link.'"><imgsrc="'.$item>imagen.'"/></a>'.
35 '</div>';
36 }
37 ?>
38 </div>
39 </div>

en-GB.mod_carousel.ini
Este chero tan slo contiene la de nicin de las variables de idioma empleadas en el chero XML. El nombre del chero sigue la
estructura:
cdigo_del_idioma.nombre_del_mdulo.ini
en-GB.mod_carousel.ini

Al instalarse el mdulo, se copia automticamente en la carpeta language/[codigo_del_idioma]/

Su cdigo es el siguiente:

1 MOD_CAROUSEL="ArticulosDestacadosCarrousel"
2 MOD_CAROUSEL_XML_DESCRIPTION="Descripciondelmodulo"
3 MOD_CAROUSEL_FIELD_CATEGORIA_LABEL="Categoria"
4 MOD_CAROUSEL_FIELD_CATEGORIA_DESC="Mostrarlosartculosdelacategoriaseleccionada"
5 MOD_CAROUSEL_FIELD_TOTAL_LABEL="Total"
6 MOD_CAROUSEL_FIELD_TOTAL_DESC="Indicarelnumerodearticulosamostrar"
7 MOD_CAROUSEL_FIELD_TODOS_LABEL="Mostrartodos"
8 MOD_CAROUSEL_FIELD_TODOS_DESC="Mostrartodoslosartculosdeunacategoria"
9 JNO="No"
10 JYES="Si"
11 MOD_CAROUSEL_FIELD_ORDEN_LABEL="Ordenar"
12 MOD_CAROUSEL_FIELD_ORDEN_DESC="Mostrarlosarticulosordenadossegun"
13 MOD_CAROUSEL_VALUE_TITLE="Titulo"
14 MOD_CAROUSEL_VALUE_ID="Id"
15 MOD_CAROUSEL_VALUE_ORDEN="Ordenensucategoria"

Estilos y jQuery
El chero mod_carousel.css se encuentra dentro de la carpeta css, no entramos a explicar en detalle los estilos debido a su simplicidad y
que seguramente, para adaptarlos a otra plantilla, necesitaris vuestros propios estilos.

1 /*Esconderflechasnextyprev*/
http://kadumweb.com/crearmodulojoomla3/ 10/18
2017529 CrearunmduloenJoomla3pasoapaso|Kadum
1 /*Esconderflechasnextyprev*/
2 .bxnext,.bxprev{display:none;}
3 /*Mostrarflechasnextyprevconhover*/
4 .bxwrapper:hover.bxnext,.bxwrapper:hover.bxprev{display:block;}
5 /*Cambiarcrculoscentrosdepaginacinporcuadrados*/
6 .bxwrapper.bxpager{textalign:left;}
7 .bxwrapper.bxpager.bxdefaultpagera{borderradius:0!important;}
8 /*Cambiarestilosdelh2*/
9 .slideh2{lineheight:25px;margin:0;padding:005px0;textalign:center;borderbottom:0;}
10 .slideh2a,.slideh2a:hover{textdecoration:none;background:none;color:#095197}

Para profundizar en los cheros contenidos en la carpeta lib os remitimos a la web o cial de bxslider.

Instalacin
Por ltimo, generamos un chero .zip con la estructura de cheros comentada con anterioridad y ya lo tenemos listo para aadirlo
mediante el Extension Manager de joomla.

Una vez instalado, accede al gestor de mdulos para habilitarlo, aadirlo a la posicin position-12 del template beez3 y con gurarlo
para que obtenga los artculos de la categora deseada.

Recuerda, que debers tener creados artculos con imagen asociada dentro de dicha categora.

Conclusiones
Tras poner en prctica este tutorial, la creacin personalizada de sitios web con Joomla ser mucho ms fcil. Hemos de hacer hincapi a
la hora de crear un mdulo en Joomla 3 en el ujo generado entre los cheros (mod_carousel.php, helper.php y default.php) junto con la
de nicin del formulario de con guracin (mod_carousel.xml). De esa forma, podremos llevar a cabo la generacin del mdulo que
mejor se adapte a nuestras necesidades.
Podrs descargar el chero comprimido con la estructura y archivos descritos. Para ello hazte seguidor de nuestro Facebook pulsando
sobre la parte izquierda (el icono de la F) del siguiente botn (Si no ves el botn de Facebook, revisa las extensiones o complementos
tipo AddBlock Plus del navegador)

Me gusta

Tags: joomla

Volver al blog

Ant Sig

Comentarios (24)

Manu dijo:
8 octubre, 2015 a las 7:43 pm

http://kadumweb.com/crearmodulojoomla3/ 11/18
2017529 CrearunmduloenJoomla3pasoapaso|Kadum

Hola, muchas gracias por el tutorial. Esta genial, me ha ayudado mucho a entender el funcionamiento de un modulo.
Una cosa, he creado varios articulos y el carrusel aparece pero las imagenes no. Aparece el simbolo de enlace de imagen roto. Sabes a
que puede ser debido esto o como arreglarlo. Saludos.

Responder

Manu dijo:
8 octubre, 2015 a las 7:57 pm

Solucionado

Responder

Jose dijo:
8 octubre, 2015 a las 8:15 pm

Muchas gracias por tu comentario, Manu. Me alegra saber que te ha servido de ayuda y que has podido solucionar por ti
mismo tu incidencia.

Responder

Carlos dijo:
30 noviembre, 2015 a las 5:47 pm

Gracias por una gran aportacin

Responder

Jose dijo:
1 diciembre, 2015 a las 5:56 pm

A ti, por hacrnoslo saber

Responder

Ricardo dijo:
14 enero, 2016 a las 10:11 am

Muchas gracias, me estoy desburrando en este mbito, creo que dados algunos problemas de seguridad que esta teniendo Word Press,
Joomla volvera un poco mas fuerte. Asi que bienvenida esta informacin. Gracias

Responder

Laura dijo:
14 enero, 2016 a las 10:41 am

Hola, Ricardo:
Gracias por tu comentario. Tanto Joomla como WordPress hacen que crear una website sea algo sencillo y rpido. Y adems,
ambos son open-source.
Desde Kadum desarrollo web, creemos que WordPress es la mejor opcin para webs de pequeo tamao y blogs. Es, quizs,
el ms sencillo para principiantes.
Joomla es un CMS intermedio entre Drupal y WordPress y creemos que es la mejor solucin para sitios web de tamao
intermedio, enfocados a social networking y a e-commerce. La popularidad de Joomla ha crecido en los ltimos aos y
creemos que ha encontrado un gran mercado entre la gente que est preparada para algo ms potente que WordPress pero

http://kadumweb.com/crearmodulojoomla3/ 12/18
2017529 CrearunmduloenJoomla3pasoapaso|Kadum

ms fcil de manejar que Drupal.

Por ello, te animamos desde aqu a que pruebes a crear sitios webs con este CMS si tus necesidades estn enfocadas a lo que
hemos comentado en las lneas anteriores.
Un saludo.

Responder

axel dijo:
27 abril, 2016 a las 7:52 pm

como se puede hacer compatible con j2.5 ?

Responder

Jose dijo:
27 abril, 2016 a las 7:54 pm

Hola alex:
Los mtodos de la API de Joomla que se utilizan en el tutorial para este mdulo son vlidos tanto para Joomla 3 como para Joomla 2.5.
En concreto, este mdulo est testeado con resultados satisfactorios en Joomla 2.5.27 Stable.

Como aspecto a tener en cuenta, puntualizar que el carrusel de imgenes utiliza funciones de jQuery. Por ello debemos asegurarnos de
que la plantilla invoca al chero jQuery.js. De lo contrario, aparecer el error: jQuery is not de ned

Por ejemplo, en la plantilla Beez2 no se utiliza jQuery, por tanto, se debera hacer una modi cacin en la vista del mdulo de Joomla para
indicar que se quiere aadir este chero (https://code.jquery.com/jquery-2.2.3.min.js)

Para ello, en el chero tmpl/default.php, despus de

$doc=JFactory::getDocument();
se debe aadir:
$doc>addScript('https://code.jquery.com/jquery2.2.3.min.js');
De esa forma, se incluye a travs de un CDN el chero javascript necesario para posteriormente utilizar la libreria bxslider

Desde Kadum desarrollo web esperamos haber resuelto tu duda. Un saludo

Responder

Juan dijo:
27 abril, 2016 a las 8:23 pm

El archivo pide una contrasea. Podra decir cual es. Muy buen tutorial.

Responder

Laura dijo:
28 abril, 2016 a las 11:52 am

Buenas:
Efectivamente, para poder descomprimir los cheros que se incluyen en este tutorial de creacin de mdulos en Joomla
necesitas una contrasea, pero viene indicada en el enlace de descarga.
Se la reenvo por correo privado.

Responder

Juan dijo:

http://kadumweb.com/crearmodulojoomla3/ 13/18
2017529 CrearunmduloenJoomla3pasoapaso|Kadum

28 abril, 2016 a las 6:30 pm

Ya recib la contrasea. Muchas gracias Laura.

Responder

Adrin Herrero Lizana dijo:

29 abril, 2016 a las 4:02 pm

Buenas tardes, He seguido todos los pasos, el primer problema que he tenido es que comprimindolo en .zip no me lo instala, pero si lo
hago con la opcin de descubrir s. Por otra parte al crear un nuevo mdulo de este tipo no me coge las traducciones sino que me salen
los nombres de los tags que podra ocurrir?

Gracias, un saludo

Responder

Jose dijo:
30 abril, 2016 a las 7:25 am

Hola Adrin. Seras tan amable de pasarnos el archivo .zip de tu mdulo?

Un saludo.

Responder

Erick Parra dijo:

11 agosto, 2016 a las 12:53 am

Hola, buenas noches, primero que nada muchas gracias por el excelente tutorial. Quisiera saber si me puedes ayudar, quiero hacer un
modulo parecido al tuyo pero ademas que me muestre los artculos por categora quisiera que me mostrara tambin el texto que tenga
ese articulo es decir imagen + la informacin del articulo.
De ante mano te lo agradezco.

Responder

Jose dijo:
25 agosto, 2016 a las 6:38 pm

Hola Erick, muchas gracias por tu felicitacin del tutorial de joomla.

Para poder aadir el texto del artculo slo debers modi car la vista del mdulo, es decir, el chero default.php
Existe un atributo llamado introtext, el cual contiene el texto del artculo. Ese atributo se carga directamente en el chero
helper.php, por lo que podrs hacer uso de l directamente en la vista.
As pues, en el chero default.php (vista del mdulo de joomla), tendrs que modi car el contenido del bucle foreach($list as
$item), de modo que te quede algo similar a lo siguiente:

1 foreach($listas$item){
2 echo'<divclass="slide">'.
3 '<h2><ahref="'.$item>link.'">'.$item>title.'</a></h2>'.
4 '<ahref="'.$item>link.'"><imgsrc="'.$item>imagen.'"/></a>'.
5 '<divclass="texto">'.$item>introtext.'</div>'.
6 '</div>';
7 }

Tan slo tendras que de nir el estilo CSS que quieres que tenga el texto.

Espero que esta ampliacin de cmo crear un mdulo en joomla te sea de utilidad.

Responder

http://kadumweb.com/crearmodulojoomla3/ 14/18
2017529 CrearunmduloenJoomla3pasoapaso|Kadum

Erick Parra dijo:

26 septiembre, 2016 a las 6:26 pm

Muchsimas gracias por la ayuda y por compartir conocimiento con los que comenzamos en el mundo del
desarrollo en joomla.

Responder

Beatriz Garca dijo:

5 octubre, 2016 a las 1:00 pm

Muchas gracias por tu artculo, no terminaba de entender el ujo de informacin en los mdulos y por n he conseguido entenderlo. He
bajado el mdulo y lo he instalado pero no me aparecen los artculos en carrusel, sino uno debajo del otro. Se te ocurre por qu puede
ser?
Gracias por adelantado

Responder

Laura dijo:
5 octubre, 2016 a las 5:06 pm

Beatriz, muchas gracias por tu comentario.

Respecto a que se vean los artculos uno debajo del otro en lugar de en carrusel: En qu plantilla has probado el mdulo? En
qu posicin? En algunas ocasiones, ha ocurrido que la posicin donde se asigna el mdulo es ms pequea que el espacio
que necesita y por ello, en lugar de que oten las imgenes unas al lado de las otras, aparecen en vertical.
Un saludo.

Responder

Beatriz Garca dijo:

5 octubre, 2016 a las 6:15 pm

Debe de ser un problema con la plantilla, estoy utilizando una plantilla creada por mi, y la verdad es que yo
pens lo mismo, el tamao de la posicin, as que incluso cargu el mdulo en un artculo. Y se sigue mostrando
igual, no aparecen las echas ni los iconos del slide.
Instal el mdulo en otro joomla con la plantilla beez3 y funciona. Gracias.

Responder

Andres dijo:
23 noviembre, 2016 a las 3:51 pm

Gracias por tutorial, me sirivio de mucho. Tal vez puede recomendarme alguna documentacion para entender mejor el manejo de
Modelos con Joomla? Gracias

Responder

Laura dijo:
28 noviembre, 2016 a las 10:24 am

Hola:
Para profundizar ms, prueba con Joomla! 3 y el MVC 2 Edicin
Cree sus propias aplicaciones con componentes, mdulos y plugins siguiendo el modelo MVC. El autor es Jos M. Peco
(versin revisada y ampliada, que incluye componente para gestionar un Boletn de Novedades)

Saludos

http://kadumweb.com/crearmodulojoomla3/ 15/18
2017529 CrearunmduloenJoomla3pasoapaso|Kadum

Responder

Andres dijo:
8 diciembre, 2016 a las 4:22 pm

Muchas gracias por la informacin. Tal vez tienes algun tutorial de la creacin de un componente para Joomla?

Responder

Laura dijo:
8 diciembre, 2016 a las 4:34 pm

Hola, Andrs:
De momento no tenemos ningn tutorial relacionado con creacin de componentes en Joomla
pero nos sirve de idea para entrar al detalle en ese tema en una prxima entrada del blog.
Sigue nuestra pgina en Facebook para saber cundo actualizamos contenido.
Un saludo

Responder

Deja un comentario

Nombre

Email

Url

Comentario ENVIAR COMENTARIO

Buscar

Entradas recientes
Cmo eliminar los IDs de las URLs en Joomla 3.7
Descubre las novedades de Joomla 3.7

Tips & tricks Ordenar listas mediante Drag & drop

Consigue gratis espacio extra en Google Drive

Tablas dinmicas: Teora y ejercicios resueltos

Etiquetas
http://kadumweb.com/crearmodulojoomla3/ 16/18
2017529 CrearunmduloenJoomla3pasoapaso|Kadum

auxiliar administrativo blog css drag & drop Excel java joomla jquery lista de comandos mysql oposiciones php

seguridad SEO TPV virtual

Categoras
eCommerce
Excel
Gestores de contenido
Oposiciones
Programacin
Redes Sociales
SEO
Word

Comentarios recientes
Laura en Construccin de mdulos en Prestashop
Laura en Construccin de mdulos en Prestashop II
Laura en Cmo eliminar los IDs de las URLs en Joomla 3.7
gabriel en Construccin de mdulos en Prestashop
Eloy en Cmo eliminar los IDs de las URLs en Joomla 3.7

Archivos
abril 2017
marzo 2017
abril 2016
febrero 2016
enero 2016
noviembre 2015
octubre 2015
septiembre 2015
julio 2015
abril 2015
febrero 2015
enero 2015
diciembre 2014
noviembre 2014
octubre 2014
septiembre 2014
agosto 2014
julio 2014
junio 2014

http://kadumweb.com/crearmodulojoomla3/ 17/18
2017529 CrearunmduloenJoomla3pasoapaso|Kadum

Inicio

Copyright 2014 KADUM - Desarrollo web de calidad para tu negocio

http://kadumweb.com/crearmodulojoomla3/ 18/18