Ya habréis notado que en la nueva versión de Prestashop no tenemos en nuestra home la zona conocida como «Homepage tabs» en la que la mayoría de las tiendas online solían tener varias pestañas con los productos más destacados, productos nuevos, los más vendidos o aquellos con descuentos. Hoy vamos a enseñaros como crear homepage tabs en Prestashop 1.7.

Crear Homepage tabs en Prestashop 1.7

1.- Crear displayHomeTab and displayHomeTabContent hooks

El primer paso es crear los nuevos hooks para poder alojar los módulos que mostrarán los productos. Para realizar esta operación tenemos que instalar el módulo gratuito Prestashop Hooks Manager y crear los hooks;

– displayHomeTab (responsable del título de las pestañas)

– displayHomeTabContent (responsable del contenido de las pestañas)

Nota; si os da error al crear estos hooks puede ser que ya estuvieran creados en la versión de Prestashop 1.7 que useis.

2.- Modificar archivos

El segundo paso es modificar el archivo index.tpl, que se encuentra en la ruta;

/themes/classic/templates/index.tpl.

Debemos reemplazar el contenido del archivo por el siguiente;

{extends file='page.tpl'}

{block name='page_content_container'}

<section id="content" class="page-home">

{block name='page_content_top'}{/block}

{block name='page_content'}

{$HOOK_HOME nofilter}

{assign var='HOOK_HOME_TAB_CONTENT' value=Hook::exec('displayHomeTabContent')}

{assign var='HOOK_HOME_TAB' value=Hook::exec('displayHomeTab')}

{if isset($HOOK_HOME_TAB_CONTENT) && $HOOK_HOME_TAB_CONTENT|trim}

<div class="tabs">

{if isset($HOOK_HOME_TAB) && $HOOK_HOME_TAB|trim}

<ul id="home-page-tabs" class="nav nav-tabs clearfix">

{$HOOK_HOME_TAB nofilter}

</ul>

{/if}

<div class="tab-content" id="tab-content">{$HOOK_HOME_TAB_CONTENT nofilter}</div>

</div>

{/if}

{/block}

</section>

{/block}

Ahora tenemos que asociar los módulos que queremos mostrar en las diferentes pestañas a los hooks creados. Para hacerlo debemos modificar el archivo custom.js, que está en;

themes/classic/assets/js/custom.js

añadiendo al final del archivo el código;

$(document).ready(function(){
$(‘#home-page-tabs li:first > a, #index .tab-content .tab-pane:first’).addClass(‘active in’);
});

y después modificar otro archivo más, theme.css, que está en;

/themes/classic/assets/css/theme.css

y pegar el siguietne código al final,

#index .tabs {padding:0px}
#index #home-page-tabs {margin:0px 10px; padding:10px 0px 0px 0px;}

3.- Instalar módulos de contenido

Y para terminar es necesario descargarse los siguientes módulos gratuitos e instalarlos;

Si hemos realizado correctamente todo los pasos nuestra homepage tendrá ahora este aspecto,

Si no aparecen los cambios recordar que debéis limpiar cache para poder hacerlo.

NOTA: Si tenéis el problema de que las etiquetas de descuento no se ven porque se sitúan detrás de la etiqueta de novedad como podéis ver en la imagen.

debéis insertar el siguiente código en vuestro custom.css que se encuentra en;

…/themes/classic/assets/css/custom.css

Fuente; Mypresta

4 Comentarios

William el 3 diciembre, 2017 a las 20:11
Hola, me gustaria que en vez de productos destacados pudiera poner imagenes para redireccionar a otro lado, alguna idea de como puedo hacerlo?
Responder
admin el 28 diciembre, 2017 a las 10:26
Hola William, pues no conocemos ninguna forma de conseguir lo que nos comentas, pero lo investigaremos.
Responder
Victor el 27 febrero, 2018 a las 20:08
Hay alguna forma de añadir en los tabs las categorias de productos? en vez los mas vendidos etc?
y que aparezcan algunos producos de cada categoría?
muchas gracias por adelantado
Responder
admin el 1 marzo, 2018 a las 9:43
Hola Victor, pues podrías hacerlo en lugar de los productos destacados ya que al configurar el módulo puedes elegir la categoría a mostrar. Y podrías traducir la palabra DESTACADOS por la categoría que te interesa en la zona de traducciones.
Esperamos que te sea de ayuda.
Responder