Crear Homepage tabs en Prestashop 1.7

Crear Homepage tabs en Prestashop 1.7

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)

Crear Homepage tabs en Prestashop 1.7

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,

Crear Homepage tabs en Prestashop 1.7

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

Hosting

About the author: Franky Martin (ADMIN)

4 comments to “Crear Homepage tabs en Prestashop 1.7”

You can leave a reply or Trackback this post.

  1. William - 3 diciembre, 2017 at 20:11 Reply

    Hola, me gustaria que en vez de productos destacados pudiera poner imagenes para redireccionar a otro lado, alguna idea de como puedo hacerlo?

  2. admin - 28 diciembre, 2017 at 10:26 Reply

    Hola William, pues no conocemos ninguna forma de conseguir lo que nos comentas, pero lo investigaremos.

  3. Victor - 27 febrero, 2018 at 20:08 Reply

    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

  4. admin - 1 marzo, 2018 at 9:43 Reply

    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.

Leave a Reply

Your email address will not be published.

doce − 7 =