En ocasiones puede ser interesante tener el control sobre cómo se dibuja y como queremos que se comporten los enlaces a categorías de forma distinta a cómo lo hace Liferay por defecto

El control de las categorías sólo se puede hacer en contenidos con estructura ya que son los únicos en los que tenemos el control de cómo se presentan mediante plantillas Velocity, Freemarker o XSL. En los contenidos no estructurados la única posibilidad que tenemos es utilizar el mecanismo por defecto de Liferay para mostrar las categorías.

Lo primero que debemos hacer es cargar en nuestra plantilla de contenido las categorías del contenido. En el caso de que la plantilla de visualización del contenido

#set($journalLocalService = $serviceLocator.findService("com.liferay.portlet.journal.service.JournalArticleLocalService"))
#set($catLocalService = $serviceLocator.findService("com.liferay.portlet.asset.service.AssetCategoryLocalService"))
#set($vocabularyLocalService = $serviceLocator.findService("com.liferay.portlet.asset.service.AssetVocabularyLocalService"))
#set($scopeId = $request.theme-display.scope-group-id)
#set($articlePrimKey = $journalLocalService.getArticle($getterUtil.getLong($scopeId), $reserved-article-id.data).resourcePrimKey) 
#set($articleCategories = $catLocalService.getCategories("com.liferay.portlet.journal.model.JournalArticle", $getterUtil.getLong($articlePrimKey)))    

En negrita aparece resaltado la variable Velocity $articleCategories que nos interesa para luego recorrerla y hacer lo que consideremos oportuno. El siguiente trozo de código Velocity recorre la lista para obtener el vocabulario al que pertenecen y formar grupos en base al volabulario. Posteriormente se recorren esos grupos y se genera el HTML que deseamos

<div class="row-fluid">
        <h3 class="cabecera-subseccion">Categorización</h3>
    </div>
    <div class="row-fluid">
        <div class="taglib-categorization-filter">    
            #set ($vocabularymap = {})
            #foreach ($category in $articleCategories)        
                #set($currentVocabularyList = $vocabularymap.get($category.vocabularyId))                    
                #if(!$currentVocabularyList)                        
                    #set($categoryList = [])
                   #end            
                #set($success = $categoryList.add($category))
                #set($success = $vocabularymap.put($category.vocabularyId,$categoryList))                                                        
            #end
            #foreach($vocabulary in $vocabularymap.keySet())
                   <div class="row-fluid">  
                    <div class="col-xs-1">                  
                        <strong>$vocabularyLocalService.getVocabulary($vocabulary).name:&nbsp;</strong>
                    </div>
                    <div class="col-xs-11">
                        #set($categoriesList = $vocabularymap.get($vocabulary))                    
                        #foreach($category in $categoriesList)
                            #if($category.vocabularyId == $vocabulary)
                                <span class="asset-entry category-item"><a data-category="$category.getCategoryId()" href="#">$category.getName()</a></span> 
                            #end    
                        #end
                    </div>
                </div>
            #end
        </div>
    </div>

Notese, en negrita,  como se almacena en un elemento del DOM el valor del identificador de la categoría mediante el uso de atributos data de HTML 5

Este trozo de HTML dibuja las categorías de forma similar a como lo hace Liferay, mediante enlaces con estilo, pero no se realiza ninguna acción al hacer clic sobre el mismo. El siguiente trozo de Javascript generará URLs mediante el API Javascript de Liferay para enviar al navegador a una página donde tengamos un publicador de contenidos. Esta URL hará que el publicador de contenidos reciba el identificador de la categoría seleccionada y haga un filtro automático por esa categoría.

<script type="text/javascript">
        function createAssetPublisherURL(categoryId) {
            AUI().ready('liferay-portlet-url', function(A) {
                var renderURL = Liferay.PortletURL.createRenderURL();  
                renderURL.setPlid($layoutCategories.plid);
                renderURL.setPortletId("122");
                renderURL.setPortletMode("view");        
                renderURL.setParameter("normal");
                renderURL.setParameter("col_id","column-1");                                  
                window.location = renderURL.toString()+'&p_r_p_564233524_resetCur=true&p_r_p_564233524_categoryId='+categoryId;
            });
        }
        
        jQuery(".asset-entry a").click(function(event){
            event.preventDefault();
            var categoryId = jQuery(this).data("category");
            createAssetPublisherURL(categoryId);
        });

        var tituloPagina = jQuery("div.taglib-header h1.titulo-seccion span").html();
        
        
        jQuery("div.taglib-header").remove();
    </script>

En negrita aparece resaltado lo relevante en el proceso de construcción de la URL

• setPlid: Se asigna el identificador de la página destino del enlace, en este caso está almacenada en una variable velocity
• setPortletId:Se indica que el receptor de parámetros es el publicador de contenidos (id = 122)
• p_r_p_564233524_categoryId: Se le pasa en el parámetro público del publicador de contenidos el id de la categoría

Categorización