Get it on Google Play
04-04-2019
 

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

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

2 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

Leave a Reply