Cambiar ubicación de las pestañas del producto en Prestashop 1.7

En este manual de Prestashop, vamos a comentar cambiar de ubicación el bloque donde se muestran las pestañas de la descripción del producto, detalles del producto, etc…. de la ficha del producto en Prestashop 1.7

Por defecto, estas pestañas se ven de la siguiente forma:

Pestañas del producto en Prestashop 1.7

La idea final es que se muestren de la siguiente forma:

Cambiando de ubicación el bloque de las pestañas en Prestashop 1.7

Una de las posibles soluciones, es acceder al fichero:

/themes/classic/templates/catalog/product.tpl

Fichero product.tpl

Buscamos este bloque:

{block name='product_tabs'}
<div class="tabs">
<ul class="nav nav-tabs">
{if $product.description}
<li class="nav-item">
<a class="nav-link{if $product.description} active{/if}" data-toggle="tab" href="#description">
{l s='Description' d='Shop.Theme.Catalog'}
</a>
</li>
{/if}
<li class="nav-item">
<a class="nav-link{if !$product.description} active{/if}" data-toggle="tab" href="#product-details">
{l s='Product Details' d='Shop.Theme.Catalog'}
</a>
</li>
{if $product.attachments}
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#attachments">
{l s='Attachments' d='Shop.Theme.Catalog'}
</a>
</li>
{/if}
{foreach from=$product.extraContent item=extra key=extraKey}
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#extra-{$extraKey}">{$extra.title}</a>
</li>
{/foreach}
</ul>
<div class="tab-content" id="tab-content">
<div class="tab-pane fade in{if $product.description} active{/if}" id="description">
{block name='product_description'}
<div class="product-description">{$product.description nofilter}</div>
{/block}
</div>
{block name='product_details'}
{include file='catalog/_partials/product-details.tpl'}
{/block}
{block name='product_attachments'}
{if $product.attachments}
<div class="tab-pane fade in" id="attachments">
<section class="product-attachments">
<h3 class="h5 text-uppercase">{l s='Download' d='Shop.Theme.Actions'}</h3>
{foreach from=$product.attachments item=attachment}
<div class="attachment">
<h4><a href="{url entity='attachment' params=['id_attachment' => $attachment.id_attachment]}">{$attachment.name}</a></h4>
<p>{$attachment.description}</p
<a href="{url entity='attachment' params=['id_attachment' => $attachment.id_attachment]}">
{l s='Download' d='Shop.Theme.Actions'} ({$attachment.file_size_formatted})
</a>
</div>
{/foreach}
</section>
</div>
{/if}
{/block}
{foreach from=$product.extraContent item=extra key=extraKey}
<div class="tab-pane fade in {$extra.attr.class}" id="extra-{$extraKey}" {foreach $extra.attr as $key => $val} {$key}="{$val}"{/foreach}>
{$extra.content nofilter}
</div>
{/foreach}
</div>
{/block}
</div>

Y lo vamos a dejar encima del bloque (lo buscamos lógicamente):

{block name='page_footer_container'}
<footer class="page-footer">{block name='page_footer'}
<!-- Footer content -->
{/block}</footer>{/block}

Es decir:

{block name='product_tabs'}
<div class="tabs">
<ul class="nav nav-tabs">
{if $product.description}
<li class="nav-item">
<a class="nav-link{if $product.description} active{/if}" data-toggle="tab" href="#description">
{l s='Description' d='Shop.Theme.Catalog'}
</a>
</li>
{/if}
<li class="nav-item">
<a class="nav-link{if !$product.description} active{/if}" data-toggle="tab" href="#product-details">
{l s='Product Details' d='Shop.Theme.Catalog'}
</a>
</li>
{if $product.attachments}
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#attachments">
{l s='Attachments' d='Shop.Theme.Catalog'}
</a>
</li>
{/if}
{foreach from=$product.extraContent item=extra key=extraKey}
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#extra-{$extraKey}">{$extra.title}</a>
</li>
{/foreach}
</ul>
<div class="tab-content" id="tab-content">
<div class="tab-pane fade in{if $product.description} active{/if}" id="description">
{block name='product_description'}
<div class="product-description">{$product.description nofilter}</div>
{/block}
</div>
{block name='product_details'}
{include file='catalog/_partials/product-details.tpl'}
{/block}
{block name='product_attachments'}
{if $product.attachments}
<div class="tab-pane fade in" id="attachments">
<section class="product-attachments">
<h3 class="h5 text-uppercase">{l s='Download' d='Shop.Theme.Actions'}</h3>
{foreach from=$product.attachments item=attachment}
<div class="attachment">
<h4><a href="{url entity='attachment' params=['id_attachment' => $attachment.id_attachment]}">{$attachment.name}</a></h4>
<p>{$attachment.description}</p
<a href="{url entity='attachment' params=['id_attachment' => $attachment.id_attachment]}">
{l s='Download' d='Shop.Theme.Actions'} ({$attachment.file_size_formatted})
</a>
</div>
{/foreach}
</section>
</div>
{/if}
{/block}
{foreach from=$product.extraContent item=extra key=extraKey}
<div class="tab-pane fade in {$extra.attr.class}" id="extra-{$extraKey}" {foreach $extra.attr as $key => $val} {$key}="{$val}"{/foreach}>
{$extra.content nofilter}
</div>
{/foreach}
</div>
{/block}
</div>
{block name='page_footer_container'}
<footer class="page-footer">
{block name='page_footer'}
<!-- Footer content -->
{/block}
</footer>
{/block}

 

Cambia de ubicación de las pestañas en Prestashop 1.7

Recordar, limpiar la cache en la pestaña Parámetros Avanzados -> Rendimiento

Borrar cache Prestashop 1.7

Documento realizado bajo Prestashop 1.7.1.2

Por otro lado, recordar que en Prestashop 1.7, podemos editar los ficheros de la plantilla, sin necesidad de editar los ficheros originales.

Print Friendly

Editar plantilla sin que se pierdan los cambios en Prestashop 1.7

En este manual para Prestashop, vamos hacer cambios en un fichero *.tpl de la plantilla, sin tener que editar el fichero *.original.

En el directorio:

/themes/

Creamos un directorio llamado /modificaciones/

Directorio modificaciones

Dentro, vamos a crear:

  • config (un directorio con este nombre)
    Dentro del directorio config que hemos creado un fichero llamado:
    theme.yml

    theme.yml

    En este fichero, añadimos lo siguiente:

    parent: classic
    name: modificaciones
    display_name: Tema Hijo
    version: 6.6.6
    assets:
    use_parent_assets: true
    

    En parent -> indicamos que la plantilla padre es la classic, que es la plantilla por defecto de Prestashop 1.7
    En name -> Indicamos el nombre de la plantilla, que recordamos que en nuestro caso el directorio de la plantilla se llama “modificaciones”
    En display_name -> Nombre público de la plantilla
    En version -> Versión de la plantilla  (Nosotros hemos colocado 6.6.6, pero ustedes pueden colocar la numeración que quieran)
    use_parent_assets ->

  • preview.png -> imagen que se usa para mostrar la plantilla en el panel.

    Imagen previsualización plantilla en Prestashop

Por ejemplo, vamos a sobreescribir el fichero “/templates/catalog/product.tpl” de la plantilla classic” y ocultar la descripción corta de los productos en Prestashop 1.7

Creamos el siguiente fichero:

/themes/modificaciones/templates/catalog/product.tpl

Fichero que vamos a crear

Y al inicio del fichero, añadimos:

{extends file=’parent:catalog/product.tpl’}

Y después añadimos la siguiente línea:

{block name='product_description_short'}
{* <div id="product-description-short-{$product.id}" itemprop="description">{$product.description_short nofilter}</div> *}
{/block}

El código del fichero, quedara así:

{extends file='parent:catalog/product.tpl'}
{block name='product_description_short'}
{* <div id="product-description-short-{$product.id}" itemprop="description">{$product.description_short nofilter}</div> *}
{/block}
Sobreescribiendo

Sobreescribiendo

Depende editar el fichero: “/themes/classic/templates/catalog/product.tpl” hemos creado uno nuevo en la plantilla hijo y hemos llamado al fichero padre y hemos sobreescrito el bloque que muestra la descripción corta del producto y  hemos comentado la descripción corta.

Sigue leyendo

Print Friendly

Bloque de pestañas del producto encima del de políticas en Prestashop 1.7

Cuando hablo del bloque de Políticas, nos estamos refiriendo al módulo “Confianza de Cliente” que vemos en la ficha del producto en Prestashop 1.7

Confianza del Cliente en Prestashop 1.7

Confianza del Cliente en Prestashop 1.7

Este bloque lo vemos habitualmente encima del de pestañas, donde vemos información como la de la descripción completa, destalles del producto, ficha técnica etc…

Cambiar posición del bloque de confianza debajo del bloque de pestañas en Prestashop 1.7

¿Y si queremos mostrarlo a la inversa?

Módulo de confianza debajo del bloque de pestañas en Prestashop 1.7

Lo primero, que tenemos que entender es que el módulo “Confianza de Cliente”, esta anclado en el hook: displayReassurance

Hook en displayReassurance en Prestashop 1.7

Si vamos al fichero/themes/classic/templates/catalog/product.tpl, y buscamos la siguiente línea: (En Prestashop 1.7.1.0 sobre la línea 143/145)

{block name='hook_display_reassurance'}
{hook h='displayReassurance'}
{/block}

Vemos que estamos imprimiendo el hook: “displayReassurance” aquí: “{hook h=’displayReassurance’}

Por lo tanto, lo que vamos a mover no es el módulo de confianza del cliente, vamos a mover el hook donde imprime dicho módulo.

En definitiva, movemos el “Bloque Entero”, cortando esta parte del código:

{block name='hook_display_reassurance'}
{hook h='displayReassurance'}
{/block}

Y la vamos a pegar donde se cierra el “{block name=’product_tabs’} y el <div class=”tabs”>” (En Prestashop 1.7.1.0 sobre la línea 211/212)

{block name='product_tabs'}
<div class="tabs">
...............
..............
{/block}
</div>

Bloque de confianza ha sido cambiado posición en la ficha del producto en Prestashop 1.7

Print Friendly

Cambiar ficha técnica de ubicación en el producto en Prestashop 1.6

Imaginemos que queremos que la ficha técnica que hemos definido en el producto, se muestre encima del botón “imprimir” de la ficha del producto.

Ubicación de la ficha técnica en Prestashop

 Por defecto, la ficha se muestra en la parte inferior de la ficha del producto.

Ubicación real de la ficha del producto en Prestashop

Para cambiar la ficha de ubicación, vamos al fichero:

“/themes/default-bootstrap/product.tpl”

Buscamos el siguiente bloque de instrucciones:

{if isset($features) && $features}
<!-- Data sheet -->
<section class="page-product-box">
<h3 class="page-product-heading">{l s='Data sheet'}</h3>
<table class="table-data-sheet">
{foreach from=$features item=feature}
<tr class="{cycle values="odd,even"}">
{if isset($feature.value)}
<td>{$feature.name|escape:'html':'UTF-8'}</td>
<td>{$feature.value|escape:'html':'UTF-8'}</td>
{/if}
</tr>
{/foreach}
</table>
</section>
<!--end Data sheet -->
{/if}


Código de la ficha técnica del producto en Prestashop

Y vamos a colocar el código, justo debajo de la siguiente instrucción:

{if isset($HOOK_EXTRA_RIGHT) && $HOOK_EXTRA_RIGHT}{$HOOK_EXTRA_RIGHT}{/if}

Código de la ficha técnica cambiado de ubicación en Prestashop

Sigue leyendo

Print Friendly

Eliminar descripción corta en la ficha en Prestashop 1.7

Hace aproximadamente 4 años, hicimos una guía parecida en el blog, pero para Prestashop 1.5

En esta guía, vamos a explicar cómo eliminar o mejor dicho no mostrar la descripción corta en la ficha del producto en Prestashop 1.7 (1.7.1.0)

Vamos a intentar explicarlo de la forma más sencilla, para que no nos perdamos en ningún momento.

Recordar que es posible que en futuras variantes de Prestashop 1.7, no coincidan el número de línea o parte del código que vamos a ver.

Eliminar descripción corta en la ficha del producto en Prestashop 1.7

El primer es paso es editar el fichero de la plantilla de visualización de la ficha del producto en Prestashop, es decir: “/themes/classic/templates/catalog/product.tpl

Plantilla de visualización de la ficha del producto en Prestashop 1.7

¿Qué buscamos en el fichero?

Vamos a buscar el siguiente código: (En Prestashop 1.7.1.0, sobre la línea 89/91)

{block name='product_description_short'}
<div id="product-description-short-{$product.id}" itemprop="description">{$product.description_short nofilter}</div>
{/block}

Inspeccionando el código del fichero product.tpl en Prestashop 1.7

Pasamos a comentar el código (Comentar código en Smarty)

{* {block name='product_description_short'}
<div id="product-description-short-{$product.id}" itemprop="description">{$product.description_short nofilter}</div>
{/block} *}

Código comentado en el fichero product.tpl de Prestashop 1.7

Sigue leyendo

Print Friendly

¿Dónde están los enlaces del pie de página del panel en Prestashop 1.7?

Es un tema recurrente que he comentado varias veces en el pasado en los foros de Prestashop para versiones anteriores desde hace muchos años, si buscáis en Google lo podéis ver, pero bueno…como tampoco hace daño pues lo dejo puesto en el blog. (Por lo tanto, recordar que es válido para Prestashop 1.6, y si no me falla la memoria también para Prestashop 1.5)

Enlaces pie de página del panel de administración en Prestashop 1.7

Enlaces pie de página del panel de administración en Prestashop 1.7

En Prestashop 1.7, para eliminar/cambiar estos enlaces, lo hacemos editando el fichero:

Editar fichero de los enlaces del pie de página del panel de administración en Prestashop 1.7

Editar fichero de los enlaces del pie de página del panel de administración en Prestashop 1.7

/administracion/themes/default/template/footer.tpl

Por ejemplo, el enlace llamado “Addons”, que nos lleva a la tienda de módulos oficial de Prestashop

Enlace "addons" pie de página en Prestashop 1.7

Enlace “addons” pie de página en Prestashop 1.7

Es el siguiente código:

		<a href="http://addons.prestashop.com/?utm_source=back-office&utm_medium=footer&utm_campaign=back-office-{$lang_iso|upper}&utm_content={if $host_mode}cloud{else}download{/if}" class="footer_link _blank">
				<i class="icon-puzzle-piece"></i>
				{l s='Addons' d='Admin.Navigation.Footer'}
			</a>
			/&nbsp;

Si comentamos la línea (añadir comentarios en Smarty)

		{*	<a href="http://addons.prestashop.com/?utm_source=back-office&utm_medium=footer&utm_campaign=back-office-{$lang_iso|upper}&utm_content={if $host_mode}cloud{else}download{/if}" class="footer_link _blank">
				<i class="icon-puzzle-piece"></i>
				{l s='Addons' d='Admin.Navigation.Footer'}
			</a>
			/&nbsp; *}

El resultado final, es que ya no vemos el enlace de “addons” en el pie de página del panel.

Pie de página del panel de administración sin el enlace de addons en Prestashop 1.7

Pie de página del panel de administración sin el enlace de addons en Prestashop 1.7

Guía válida para Prestashop 1.7.1.0

Print Friendly

Mostrar el ID de los clientes en las Facturas en Prestashop 1.7

El usuario Ventura de la Comunidad de Prestashop, nos proporciona una solución que nos permitirá mostrar el ID del cliente en la impresión de las facturas en nuestra tienda.

La solución proporcionada por Ventura, es la siguiente:

Editar el fichero: pdf/invoice.addresses-tab.tpl

Añadir el siguiente código:

{l s='Customer ID: %s' sprintf=[$customer->id] d='Shop.PDF' pdf='true'}

Debajo de:

{$invoice_address}

De esta manera, al ver la Factura del Cliente en Prestashop, veremos también el ID del Cliente, tal como podemos visualizar en la siguiente imagen:

Ver ID de cliente en Factura en Prestashop 1.7

Print Friendly

¿No funciona la variable global $page_name en Prestashop 1.7?

Si en Prestashop 1.7 (variante 1.7.0.3) intentamos escribir en un fichero “tpl” la variable:

{$page_name}

No obtenemos ningún valor….

Un ejemplo, vamos a editar el fichero:

/themes/classic/templates/_partials/header.tpl

Y añadimos la siguiente línea:

Esto es una prueba: {$page_name}

Sigue leyendo

Print Friendly

¿No se ven las subcategorías en los listado de las categorías en Prestashop 1.7?

Más que una pregunta, era una afirmación pero siendo un poco original, prefiero colocar un titular amarillista…

Lo dicho, en Prestashop 1.7, no se ven las subcategorías cuando pinchas en una categoría.

¿Por qué?

Sencillo, no está implementada esa función a día de hoy en Prestashop 1.7.0.3

Muestro imágenes, para que veáis a lo que me refiero:

Al principio creía que era como pasaba en Prestashop 1.6, que no estaba chequeada en el “Configurador de temas” la opción: “Mostrar subcategorías”

Mostrar subcategorías en Prestashop 1.6

Mostrar subcategorías en Prestashop 1.6

Pero no…..

El problema viene debido a que en Prestashop 1.7.0.3, no tiene implementada esta función…

Tenemos varias soluciones por la Comunidad de Prestashop, en esta ocasión, vamos a obtener la solución que nos proporciona el usuario “nemo“.

Nos propone lo siguientes cambios:

1 – Modificar fichero TPL

Editamos el fichero:

/themes/classic/templates/catalog/listing/category.tpl

Donde tenemos el siguiente código:

Código Category.tpl en Prestashop 1.7

Código Category.tpl en Prestashop 1.7

Sigue leyendo

Print Friendly

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.

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:

Sigue leyendo

Print Friendly