Mostrar bloque de productos destacados y mejores ventas en pestañas en Prestashop 1.7

Es una traducción del artículo de Vekia de la Comunidad de Prestashop donde nos comenta la posibilidad de mostrar los bloques de página principal referentes a Productos Destacados, Nuevos Productos, Promociones, etc.. de la misma forma que se visualiza en Prestashop 1.6.

Formato Pestañas Productos Página Principal - Prestashop 1.6
Formato Pestañas Productos Página Principal – Prestashop 1.6

En Prestashop 1.7 (al menos en la versión 1.7.0.3) los bloques de Nuevos, Populares, etc..  no se visualizan en formato de pestañas.

Bloques de productos sin pestañas
Bloques de productos sin pestañas

Vekia, nos propone las siguientes modificaciones, para conseguir que se vean en el mismo formato que lo veíamos en Prestashop 1.6

Paso 1 – Crear Hooks

Nos proporciona su módulo, creador de “Hooks”, que podemos descargarlo gratuitamente desde aquí: Descargar Módulo

Con este módulo vamos a crear dos “hooks”:

displayHomeTabdisplayHomeTabContent

Crear Hook displayHomeTab en Prestashop 1.7
Crear Hook displayHomeTab en Prestashop 1.7
Crear Hook displayHomeTabContent en Prestashop 1.7
Crear Hook displayHomeTabContent en Prestashop 1.7

Paso 2 – Editar Fichero TPL

Editamos el fichero:

/themes/classic/templates/index.tpl

En el que Vekia nos propone cambiar el siguiente contenido:


{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}
{/block}</section>{/block}

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}

En realidad, si nos estamos “fijando” hemos sustituido todo el contenido del fichero…

Antes:

Ahora:

Paso 3 – Editar JS Y CSS

Modificamos el fichero:

themes/classic/assets/js/custom.js

Y añadimos al final del fichero esto:

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

Por defecto, no aparece “ninguna” pestaña activa, con este código lo que hacemos es que aparezca “activa“.

El último paso es ir al fichero:

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

y al final añadir el siguiente código:


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

Cómo parece que por defecto los módulos en cuestión en Prestashop 1.7 (1.7.0.3), no vienen preparados para adaptarse al formato de “pestaña”, Vekia nos proporciona desde su web, poder descargarlos:

Módulos Productos Destacados / Populares (Formato Pestañas) -> Descargar
Módulo Mejores Ventas (Formato Pestañas) -> Descargar

Guía basada en Prestashop 1.7.0.3

La guía original actualizada (que posiblemente se actualice en referente a errores), la tenéis aquí: Guía Original