Get it on Google Play
Mas de 21 años en el mundo del IT corporativo

Tutorial Liferay Avanzado: Un catalogo de productos en menos de 20 minutos

04-04-2019

Como en todos estos vídeos donde hay un componente grande de código aquí os dejo el código que se ha estado viendo en el vídeo:

Plantilla 1: Ficha de artículo grande

Liferay ADT: Plantilla 1

Liferay ADT: Plantilla 1

En el vídeo hemos creado dos plantillas para el artículos, una que se va a mostrar en el listado de artículos en el catálogo y esta que es la ficha del artículo grande:

<div class='ficha-articulo'>
    <h2>${titulo.getData()}</h2>
    <div>
        <#if imagen.getData()?? && imagen.getData() != ""> 
            <img alt="${imagen.getAttribute("alt")}" data-fileentryid="${imagen.getAttribute("fileEntryId")}" src="${imagen.getData()}" /> 
	</#if> 

	${descripcion.getData()} 
    </div> 
</div>

Cómo veis el código es bien sencillo, un título, una descripción y la imagen. Aquí no tenemos nada de hoja de estilos que podría estar en el ‘theme’ o, como en este caso, hemos optado por incrustarlo en la plantilla del catálogo.

Plantilla 2: Elemento del listado

Liferay ADT: Plantilla 2

Liferay ADT: Plantilla 2

Está es la plantilla que hemos usado para renderizar cada uno de los artículo en el catálogo:

<div class='articulo-item' style='background-image: url(${imagen.getData()});'>
    <div class='title'>
        ${titulo.getData()}
    </div>
</div>

Plantilla ADT

Liferay ADT: Catalogo

Liferay ADT: Catalogo

Aquí esta el gordo de la lógica de negocio de lo que estamos haciendo, esta es la plantilla que hemos creado como plantilla ADT(Application Display Template). Ojo! porque no se configura desde el mismo sitio que las otras dos, repasad el vídeo.

He comentado la plantilla para que fuera mas sencilla de entender pero básicamente, si recibimos el parámetros ‘ida'(Id de artículo) mostrará la ficha del artículo pasado como parámetro utilizando la plantilla 1. En caso de no recibir el parámetro mostrará el listado de artículos usando(por cada artículo) la plantilla 2.

<#if request.getParameter("ida")??>

	<!-- Mostrar artículo con el id del parámetro usando la plantilla 1 -->
	<div class='buttons'>
		<a href='.'><< Volver</a>
	</div>

        <@liferay_journal["journal-article"]
            articleId=request.getParameter("ida")
            ddmTemplateKey="40397"
            groupId=themeDisplay.getScopeGroupId()
            />  

<#else>

	<!-- Mostrar el listado de artículos usando la plantilla 2 -->
	<h2>Catalogo de productos<h2>

	<#if entries?has_content> 
	    <#list entries as curEntry> 

	    <#assign
		assetRenderer = curEntry.getAssetRenderer()
		journalArticle = assetRenderer.getAssetObject()     
		/>
	    
	    <a href='${currentURL}&ida=${journalArticle.getArticleId()}'>
		<div class='lista-item'>
			<@liferay_journal["journal-article"]
			    articleId=journalArticle.getArticleId()
			    ddmTemplateKey="40401"
			    groupId=journalArticle.getGroupId()
			    />  
		</div>
	    </a>
	    
	    </#list> 

	    <div class='clear'></div>
	</#if>

</#if>

<!-- Estilos del catálogo -->
<style>
.articulo-item {
	float: left;
	width: 180px;
	height: 180px;
	margin: 15px;
	border: 1px solid #000;
	box-shadow: 0px 0px 0px #888888;
	background-position: center center;
	background-size: cover;
	}

.articulo-item .title {
	opacity: 0;
	height: 30px;
	background-color: #666;
	color: #fff;
	overflow: hidden;
	margin-top: 146px;
	padding: 4px;
	}

.articulo-item:hover {
	box-shadow: 0px 0px 8px #888888;
	transition: box-shadow 0.20s;
	}

.articulo-item:hover .title {
	opacity: 0.80;
	transition: opacity 0.20s;
	}

.buttons {
	padding: 15px;
	float: right;
	}

.ficha-articulo img { 
	float: right; 
	max-width: 380px; 
	height: auto; 
	margin: 15px; 
	border: 1px solid #666; 
	box-shadow: 0px 0px 8px #888888;
	}

.lista-item {
	float: left;
	}

.clear {
	clear: both;
	}

.subscribe-action, .portlet-title-text {
	display: none;
	}

</style>

Finalmente, espero que os sea de utilidad y hayáis disfrutado del vídeo tanto como yo haciéndolo.

Si te ha servido, por favor comparte

Interesado en formación Liferay?

 

Comments

4 Responses to “Tutorial Liferay Avanzado: Un catalogo de productos en menos de 20 minutos”
  1. Óscar says:

    Hola!, gracias por el tutorial, de verdad me ha ayudado mucho.
    Me preguntaría si me pudieras ayudar con una pequeña duda, si yo quisiera abrir un producto del catálogo de productos en ventana maximizada, es decir con el parámetro p_p_mode en maximized, ¿cómo podría hacerlo?.
    He intentado crear la url con la función assetRenderer.getURLViewInContext() que he utilizado anteriormente pero sigue viendose el portlet en la vista normal y también he intentado agregar manualmente a la url el parámetro p_p_mode=maximized, pero no funciona al haber dos parámetros iguales.

    Un saludo

  2. Puedes crear la URL normalmente y, como string, usando el método replace modificas el parametro p_status

  3. Carlos says:

    Buenas noches Albert te agradezco mucho por los tutoriales , mi cuestión es la siguiente me gustaría descargar archivos mediante consola o por ejemplo que solo yo pueda ver un archivo y compartir ese archivo mediante una url y se salte ese usuario la autenticacion al portal en pocas palabras que la url sea privada la puedan ver con algun token y que ese archivo sea privado , ya con los privilegios de guest se puede ver pero no es asi mi requerimiento, ya intente buscar en todos lados y no logro llegar a un resultado por favor me podrias ayudar en esa cuestion muchas gracias Saludos !!!!!

  4. Rolando says:

    Hola muy buen tutorial, estuve haciendo algo parecido pero tengo una estructura en la que tengo una referencia a otro contenido web del mismo tipo, y quesiera poder tener un link a esta estructura en la que estoy mostrando como una referencia esto como podria hacerlo en la plantilla que visualiza el articulo??

Leave a Reply