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

Creación y borrado de tablas en un módulo de Prestashop 1.7

En esta ocasión, vamos hablar del menú horizontal de Prestashop 1.7, pero no vamos hablar de su configuración.

Cuando añadimos los enlaces manuales dentro de la configuración del menú horizontal dentro del bloque: “Añadir un nuevo enlace

Enlaces manuales del menú horizontal en Prestashop 1.7

Enlaces manuales del menú horizontal en Prestashop 1.7

Se guardan en la tablas: “ps_linksmenutop y ps_linksmenutop_lang

Tabla ps_linksmenutop

En esta tabla se guarda el valor de los siguientes campos:

  • ID del enlace (id_linksmenutop)
  • ID de la tienda que tiene asociado ese enlace (id_shop)
  • (new_window)-> 0 El enlace no se abre en una nueva ventana / 1 El enlace se abre en una nueva ventana

Tabla ps_linksmenutop_lang

  • id_linksmenutop -> Este ID tiene vinculación, con el que esta definido en la tabla ps_linksmenutop)
  • id_lang -> ID del idioma  (Tener en cuanta que cuando añadimos enlaces en el menu horizontal, podemos hacerlo por idiomas, por eso esta disponible este campo para distinguir los datos del enlace entre un idioma y otro)
  • id_shop -> ID de la tienda
  • label -> Etiqueta de lenlace
  • link -> Url del enlace

Estas tablas, las crea el módulo del menú horizontal al instalarse.

Si entramos en el fichero:

“modules/ps_mainmenu/ps_mainmenu.php”

Vemos que dentro de la función “install” (public function install) tenemos una llamada a la función “installDb()

Y si vemos el contenido de la función “installDb()“, vemos el siguiente código:

 public function installDb()
    {
        return (Db::getInstance()->execute('
		CREATE TABLE IF NOT EXISTS `'._DB_PREFIX_.'linksmenutop` (
			`id_linksmenutop` INT UNSIGNED NOT NULL AUTO_INCREMENT PRIMARY KEY,
			`id_shop` INT(11) UNSIGNED NOT NULL,
			`new_window` TINYINT( 1 ) NOT NULL,
			INDEX (`id_shop`)
		) ENGINE = '._MYSQL_ENGINE_.' CHARACTER SET utf8 COLLATE utf8_general_ci;') &&
            Db::getInstance()->execute('
			 CREATE TABLE IF NOT EXISTS `'._DB_PREFIX_.'linksmenutop_lang` (
			`id_linksmenutop` INT(11) UNSIGNED NOT NULL,
			`id_lang` INT(11) UNSIGNED NOT NULL,
			`id_shop` INT(11) UNSIGNED NOT NULL,
			`label` VARCHAR( 128 ) NOT NULL ,
			`link` VARCHAR( 128 ) NOT NULL ,
			INDEX ( `id_linksmenutop` , `id_lang`, `id_shop`)
		) ENGINE = '._MYSQL_ENGINE_.' CHARACTER SET utf8 COLLATE utf8_general_ci;'));
    }

Vemos que la función esta retornando la ejecución de la creación de dos tablas.

Dentro de return tenemos:

Db::getInstance()->execute('
CREATE TABLE IF NOT EXISTS `'._DB_PREFIX_.'linksmenutop` (
`id_linksmenutop` INT UNSIGNED NOT NULL AUTO_INCREMENT PRIMARY KEY,
`id_shop` INT(11) UNSIGNED NOT NULL,
`new_window` TINYINT( 1 ) NOT NULL,
INDEX (`id_shop`)
) ENGINE = '._MYSQL_ENGINE_.' CHARACTER SET utf8 COLLATE utf8_general_ci;')

Para crear la tabla “xx_linksmenutop

Y

Db::getInstance()->execute('
CREATE TABLE IF NOT EXISTS `'._DB_PREFIX_.'linksmenutop_lang` (
`id_linksmenutop` INT(11) UNSIGNED NOT NULL,
`id_lang` INT(11) UNSIGNED NOT NULL,
`id_shop` INT(11) UNSIGNED NOT NULL,
`label` VARCHAR( 128 ) NOT NULL ,
`link` VARCHAR( 128 ) NOT NULL ,
INDEX ( `id_linksmenutop` , `id_lang`, `id_shop`)
) ENGINE = '._MYSQL_ENGINE_.' CHARACTER SET utf8 COLLATE utf8_general_ci;')

Para crear la tabla: xx_linksmenutop_lang

Estamos usando “Db::getInstance()->execute” (evidentemente acompañado del CREATE TABLE) para crear las tablas.

Por otro lado, estas tablas son eliminadas al desinstalar el módulo, si nos fijamos en la función “uninstall” del módulo ( public function uninstall)

Vemos que entre otras instrucciones, tiene una llamada a la función uninstallDB()

Al entrar en el contenido de dicha función, nos encontramos con:

protected function uninstallDb()
{
Db::getInstance()->execute('DROP TABLE `'._DB_PREFIX_.'linksmenutop`');
Db::getInstance()->execute('DROP TABLE `'._DB_PREFIX_.'linksmenutop_lang`');
return true;
}

Donde vemos que usamos: “Db::getInstance()->execute” (evidentemente acompañado de DROP TABLE) para borrar las tablas: “xx_linksmenutop” y “xx_linksmenutop_lang“.

Recordar que “_DB_PREFIX_” es el prefijo de la base de datos, para indicar que sera añadido automáticamente al crear las tablas.

Es decir si el prefijo de la base de datos es ps_, cuando vaya a crear o a borrar por ejemplo la tabla  “linksmenutop“, la creara con el nombre ps_linksmenutop

Documento construido bajo la versión 1.7.1.2 de Prestashop y la versión “2.0.2” del módulo del menú horizontal.

Print Friendly

Formulario de contacto en los contenidos en Prestashop 1.7

Gracias al nuevo sistema de widget que nos ofrece Prestashop 1.7, podemos mostrar el formulario de contacto que trae por defecto Prestashop 1.7 en las páginas de contenidos que tengamos en la pestaña Diseño -> Páginas 

La instrucción clave es la siguiente:

{widget name="contactform"}

Si queremos mostrar el formulario de contacto en las páginas de contenidos, editamos el fichero:

/themes/classic/templates/cms/page.tpl

Y añadimos la instrucción del widget, por ejemplo debajo de:

{$cms.content nofilter}

De esta manera se mostrara debajo de los contenidos.  ($cms.content imprime el contenido (campo contenido/descripción) de las páginas que hemos metido en la pestaña Diseño -> Páginas en los CMS)

En definitiva, lo dejaríamos así:

{$cms.content nofilter}
{widget name="contactform"}

¿Cómo podemos limitarlo para que solo se muestre en una de las páginas de contenidos y no en todas?

Tenemos varias opciones, una de ellas es hacer una comparación el ID del CMS donde estamos situados.

Dejándolo el código del widget así:

{if $cms.id == "X" }
{widget name="contactform"}
{/if}

En X, colocamos el ID del CMS (Contenido) que hemos creado en la pestaña Diseño -> Páginas.

ID CMS

En nuestro ejemplo, vamos a colocar el ID 3, dejándolo así:

{if $cms.id == "3" }
{widget name="contactform"}
{/if}

Widget formulario de contacto en Prestashop 1.7

Documento construido bajo Prestashop 1.7.1.2

Por último y no menos importante, recordar limpiar la cache en la pestaña Parámetros Avanzados -> Rendimiento

Borrar cache Prestashop 1.7

Y ahora dejo una pregunta abierta, ¿Podremos hacer esto en futuras variantes de Prestashop 1.7, sin necesidad de tocar código?

Print Friendly

Extensión de archivo incorrecta en Prestashop 1.7

A finales del año pasado, estuvimos comentando brevemente la sección de contacto en Prestashop 1.7.

En esta ocasión, vamos a hablar, por ejemplo, de que ocurre cuando un cliente sube un documento con extensión *.odt. en el formulario de contacto.

Simplemente, nos saldrá un error que dice “Extensión de archivo incorrecta“.

Extensión de archivo incorrecta en el formulario de contacto en Prestashop 1.7

Extensión de archivo incorrecta en el formulario de contacto en Prestashop 1.7

Si vamos al fichero:

/modules/contactform/contactform.php

Veremos que dentro de la función “public function sendMessage()” tenemos la siguiente línea de código:

$extension = array('.txt', '.rtf', '.doc', '.docx', '.pdf', '.zip', '.png', '.jpeg', '.gif', '.jpg');

Para añadir la extensión “.odt“, podríamos añadirla dentro del array

$extension = array('.txt', '.rtf', '.doc', '.docx', '.pdf', '.zip', '.png', '.jpeg', '.gif', '.jpg', '.odt');

Añadida nueva extensión en el formulario de contacto en Prestashop 1.7

¿Al intentar subir el fichero con extensión *.odt en el formulario de contacto me aparecerá el error de “Extensión de archivo incorrecta“?

En principio no, pero te en cuenta dos aspectos:

  • Siempre que puedas, es altamente recomendable hacer un override y evitar en todo lo posible editar los ficheros originales (en este caso lo ideal seria hacer un override de la clase del módulo y sobreescribir la función sendMessage)
  • ¿Cómo se hace un override de una clase de un módulo en Prestashop 1.7? -> Buscar en Google 🙂

Por cierto, espero que, en un futuro, exista la opción de permitir nuevas extensiones a la hora de subir los ficheros desde el panel de administración en el panel de Prestashop 1.7

Documento construido bajo Prestashop 1.7.1.2

Print Friendly

Bloques de texto personalizados en el pie en Prestashop 1.7

No estamos hablando de instalar contentbox/htmlbox en nuestra tienda, estamos hablando simplemente de cambiar de ubicación el módulo de texto que se muestra en la página principal al hook -> displayFooterBefore para que se vea en toda la tienda.

Por defecto el módulo Bloques de texto personalizados (custom_text), se muestra en la página principal, pero no en resto de secciones.

Texto de la página principal en Prestashop 1.7

Para que se vea en todas las secciones, vamos hacer tres cosas:

  • Eliminarlo del displayHome
  • Insertarlo en el displayFooterBefore
  • Colocarlo en la primera posición del displayFooterBefore

Vamos a la pestaña Diseño -> Posiciones de los módulos

Acceder a las posiciones de los módulos en Prestashop 1.7

Buscamos el bloque displayHome y desenganchamos el módulo de esa posición.

Quitar módulo de la página principal en Prestashop 1.7

Ahora en la misma pestaña Diseño-> Posiciones de los módulos, pinchamos el botón superior denominado (Insertar un hook (puede tener un nombre distinto en vuestro caso) )

Insertando modulo en hook en Prestashop 1.7

Y en el formulario seleccionamos:

Módulos -> Bloque de textos personalizados
Mover a -> displayFooterBefore

Insertando módulo en el displayFooterBefore

Por último, vamos a colocarlo en la primera posición del displayFooterBefore, para ello en la misma pestaña de Diseño -> Posiciones de los módulos, buscamos el bloque “displayFooterBefore” y arrastramos el módulo hacia arriba.

Subir módulo a primera posición del displayFooterBefore

Modulo en primera posición del displayFooterBefore

El resultado final es el siguiente:

Documento testeado en Prestashop 1.7.1.2

Seguimos sin tener el Live Edit (que en la 1.7 inicialmente lo desecharon) disponible que teníamos por ejemplo en la 1.6, para mover los módulos de posición “gráficamente” sin hacerlo manualmente, esperemos que en las próximas variantes de Prestashop 1.7.X.X, implementen el Live Edit para Prestashop 1.7

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

Cambiar tamaño del logo en Prestashop 1.7

Si en la pestaña Diseño -> Temas y logotipo, intentamos subir un logo, por ejemplo, del siguiente tamaño:

Elección del logo para Prestashop 1.7

Elección del logo para Prestashop 1.7

Subiendo logo en Prestashop 1.7

Vemos que reduce en exceso el tamaño del logo:

Logo muy pequeño en Prestashop 1.7

Logo muy pequeño en Prestashop 1.7

Una solución, es cambiar el tema de las rejillas (grid), vamos al fichero:

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

Y aquí:

<div class="col-md-2 hidden-sm-down" id="_desktop_logo">

El valor “2” col-md lo vamos a variar.
(Para saber cómo funciona el tema de las rejillas, os invito a visitar esta guía: http://librosweb.es/libro/bootstrap_3/capitulo_2/tipos_de_rejillas.html )

En nuestro caso lo hemos cambiado a “6“.

Dejándolo así:

<div class="col-md-6 hidden-sm-down" id="_desktop_logo">

El problema ahora es que el logo se ve mejor, pero el menú horizontal y el buscador ha bajado de golpe y ya no está a la misma altura que el logo…..

El logo ha bajado el menú horizontal y el buscador en Prestashop 1.7

Para solucionar esto, nos vamos al mismo fichero, buscamos esta línea de código:

<div class="col-md-10 col-sm-12 position-static">
<div class="row">
{hook h='displayTop'}
<div class="clearfix"></div>
</div>
</div>

Y vamos a cambiar el: “col-md-10” en nuestro caso por “col-md-6”, dejándolo así:

<div class="col-md-6 col-sm-12 position-static">
<div class="row">
{hook h='displayTop'}
<div class="clearfix"></div>
</div>
</div>

Finalmente, veremos el bloque del logo, menú y buscador de la siguiente forma:

Logo normal en Prestashop 1.7

Logo normal en Prestashop 1.7

Pues si reducimos el navegador, vemos que se ve bien hasta cierto punto…

Logo pequeño en resolución pequeña en Prestashop 1.7

Logo pequeño en resolución pequeña en Prestashop 1.7

¿Cómo podemos hacer un apaño para que cuando la web en resolución mínima no quede mal el logo (en nuestro caso particular)?

Añadimos en nuestro caso en el fichero /themes/classic/assets/css/custom.css 

La siguiente instrucción:

@media (max-width: 767px) {
#header .header-nav .top-logo a img {
max-height: 200px;
}
#header .header-nav {
max-height: 225px;
}
}

La imagen del logo en el CSS (en el theme.css) tiene una altura máxima establecida de 50px nosotros se la cambiamos a 200px.

El bloque que engloba al logo y a los otros elementos cuando la resolución es menor tiene una altura máxima de 50px nosotros se la cambiamos a 225px.

Por supuesto estos cambios solo se aplican en el @media (max-width: 767px) que hemos indicado, aunque con un poco de ingenio podríamos hacerlo para distintas resoluciones con el @media, pero bueno eso ya lo dejo a vosotros.

Evidentemente ha sido un pasaje muy rápido, por lo que es posible que tengáis que hacer más cambios. (De todos modos, tener en cuenta que esto ha sido para Prestashop 1.7.1.1, por lo que quizás en futuras variantes de la 1.7.X.X sea diferente)

Por cierto, si vosotros usáis inspeccionar elemento u firebug, veréis que hace referencia al theme.css, pero para no tocar el css original, simplemente hacemos una sobreescritura de los valores que necesitamos en el fichero custom.css

Por cierto, ¿recordáis que también hicimos unas guías, por si queremos cambiar el logo de ubicación o si queremos eliminar el logo de la cabecera?

Ah se me olvidaba, recordar:

  1. Limpiar cache en la pestaña Parámetros Avanzados -> Rendimiento

    Limpiar cache en Prestashop 1.7

  2. Si los cambios del CSS no los ves, limpia la cache de tu navegador.

Documento construido bajo Prestashop 1.7.1.1

Print Friendly

Añadir preguntas frecuentes en Prestashop 1.6 y 1.7

En el año 2012, estuvimos hablando de un módulo que nos permitía simular el funcionamiento típico de las preguntas frecuentes al estilo acordeón (El módulo era independiente de los contenidos creados en la pestaña Preferencias -> CMS).

En esta guía, vamos a realizar una pequeña integración en los contenidos que creamos en la pestaña Preferencias -> CMS, para mostrar preguntas y respuestas de forma que inicialmente solo aparezcan las preguntas y cuando hagamos click sobre la pregunta, aparezca la respuesta.

Implementar preguntas frecuentes en Prestashop

Desplegando preguntas frecuentes en Prestashop

Vamos hacer uso de este código: https://gist.github.com/neilgee/9284745#file-faq-html que hemos obtenido en el repositorio de github del usuario neilgee

Esta guía está realizada bajo Prestashop 1.6, pero también funciona en Prestashop 1.7

El código JavaScript:

$(document).ready(function() {
$('.faq_question').click(function() {
if ($(this).parent().is('.open')){
$(this).closest('.faq').find('.faq_answer_container').animate({'height':'0'},500);
$(this).closest('.faq').removeClass('open');
}else{
var newHeight =$(this).closest('.faq').find('.faq_answer').height() +'px';
$(this).closest('.faq').find('.faq_answer_container').animate({'height':newHeight},500);
$(this).closest('.faq').addClass('open');
}
});
});

Lo vamos a introducir en el fichero:

/themes/plantilla/js/cms.js

Código JavaScript CMS

El siguiente paso es introducir la estructura (código html) de las preguntas frecuentes en los contenidos que vayamos a crear en la pestaña Preferencias -> CMS

La estructura tiene la siguiente forma:

<div class="faq_container">
<div class="faq">
<div class="faq_question">Pregunta 1</div>
<div class="faq_answer_container">
<div class="faq_answer">Respuesta a la pregunta 1</div>
</div>
</div>
</div>
<div class="faq_container">
<div class="faq">
<div class="faq_question">Pregunta 2</div>
<div class="faq_answer_container">
<div class="faq_answer">Respuesta a la pregunta 2</div>
</div>
</div>
</div>
<div class="faq_container">
<div class="faq">
<div class="faq_question">Pregunta 3</div>
<div class="faq_answer_container">
<div class="faq_answer">Respuesta a la pregunta 3</div>
</div>
</div>
</div>

Desde el editor gráfico de contenidos que tenemos en la pestaña Preferencias -> CMS, pulsamos en Herramientas  -> Código Fuente (<>) y colocamos el código.

Insertar código HTML en el editor gráfico en Prestashop

Código HTML Prestashop

Por último, vamos agregar el estilo (css) de las preguntas frecuentes en el CSS de Prestashop, en nuestro caso vamos añadir el siguiente código:

/* CSS Preguntas Frecuentes */
.faq_question {
margin: 0px;
padding: 8px;
display: inline-block;
cursor: pointer;
font-weight: bold;
}
.faq_answer_container {
height: 0px;
overflow: hidden;
padding: 0px;
background:#fff
}
.faq.open .faq_question {
color: #fff;
}
.faq {
background: #e1e1e1;
border-bottom: 3px solid #fff;
}
.faq.open {
background: #635858;
border:none;
}

en el fichero:

/themes/plantilla/css/cms.css

El código javaScript entre otras cosas lo que hace es que cuando pinchamos sobre la pregunta, a la respuesta se le asigna una altura, ya que por defecto la altura (height) de la respuesta (.faq_answer_container) es 0px;

¿Funciona en Prestashop 1.7?

Este “tip” funciona en Prestashop 1.7, te nombro algunas diferencias.

Te recomiendo meter el “CSS“, en el fichero:

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

El javascript, en el fichero:

/themes/classic/assets/js/custom.js

Y en referencia el código html que en Prestashop 1.6 lo insertamos en la pestaña Preferencias -> CMS, en Prestashop 1.7 tal como tenemos comentado en nuestra guía de ubicación de las pestañas en Prestashop 1.7, se encuentra en la pestaña Diseño -> Página  

Preferencias -> CMS en Prestashop 1.7

Sigue leyendo

Print Friendly

Ocultar ficha técnica en Prestashop 1.7

Depende cambiar la ubicación de la ficha técnica en la ficha del producto, en esta ocasión vamos simplemente a ocultarla de la ficha del producto, porque no queremos que se vea en la ficha del producto, pero si queremos que siga funcionando como ficha técnica a nivel del filtro de navegación por facetas, y a nivel del comparador de productos.

En este documento, vamos a realizar la mini guía bajo Prestashop 1.6 y Prestashop 1.7

Ocultar ficha técnica en Prestashop 1.6 en la ficha del producto.

Ocultar ficha del producto en la ficha del producto en Prestashop 1.7

Para Prestashop 1.6, usando la plantilla por defecto, editamos el fichero:

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

Buscamos el siguiente código:

{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}

Y comentamos el código en Smarty

{* {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 comentado en Prestashop 1.6

En Prestashop 1.7, editamos el fichero:

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

Y nos encontramos una llamada al fichero:

/themes/classic/templates/catalog/_partials/product-details.tpl

En esta parte del código del fichero  “/themes/classic/templates/catalog/product.tpl

{block name='product_details'}
{include file='catalog/_partials/product-details.tpl'}
{/block}

Este código, no lo vamos a tocar, vamos a ir al fichero:

/themes/classic/templates/catalog/_partials/product-details.tpl

Y buscamos este bloque:

{block name='product_features'}
{if $product.features}
<section class="product-features">
<h3 class="h6">{l s='Data sheet' d='Shop.Theme.Catalog'}</h3>
<dl class="data-sheet">
{foreach from=$product.features item=feature}
<dt class="name">{$feature.name}</dt>
<dd class="value">{$feature.value}</dd>
{/foreach}
</dl>
</section>
{/if}
{/block}

Y aquí podemos comentarlo el código (Smarty)

{* {block name='product_features'}
{if $product.features}
<section class="product-features">
<h3 class="h6">{l s='Data sheet' d='Shop.Theme.Catalog'}</h3>
<dl class="data-sheet">
{foreach from=$product.features item=feature}
<dt class="name">{$feature.name}</dt>
<dd class="value">{$feature.value}</dd>
{/foreach}
</dl>
</section>
{/if}
{/block} *}

Código de la ficha técnica oculto en Prestashop 1.7

Uno de los problemas que nos podemos encontrar, es que en otra parte del código de la plantilla estemos usando el {include file=’catalog/_partials/product-details.tpl’}, para asegurarnos de que realmente este cambio solo se esta aplicando a la ficha del producto y no a otra parte de la plantilla que este usando dicho include, depende comentar el código, podemos usar las variables globales y hacer un condicional que solo muestre el código si no estas en la ficha del producto.

Es decir, dejar el código así:

{if $page.page_name !='product'}
{block name='product_features'}
{if $product.features}
<section class="product-features">
<h3 class="h6">{l s='Data sheet' d='Shop.Theme.Catalog'}</h3>
<dl class="data-sheet">
{foreach from=$product.features item=feature}
<dt class="name">{$feature.name}</dt>
<dd class="value">{$feature.value}</dd>
{/foreach}
</dl>
</section>
{/if}
{/block}
{/if}

Condicional -> Muestro el código solo si no estoy en la ficha del producto

———

Por último, recordar limpiar la cache en la pestaña Parámetros Avanzados -> Rendimiento.

Print Friendly

Descripción de la categoría al final del listado en Prestashop 1.7

En este tutorial, vamos a realizar un miniTip para mostrar la descripción de la categoría donde estamos situados debajo del listado de productos.

Por defecto, vemos la descripción junto con la imagen y el título de la categoría en Prestashop 1.7 de la siguiente forma:

Descripción de la categoría en Prestashop 1.7

Nuestra intención es ver la descripción (solo vamos a mover la descripción) justo debajo del listado de productos, tal como podemos ver en la siguiente imagen:

Descripción debajo del listado de productos en Prestashop 1.7

El primer paso es irnos al fichero:

/themes/classic/templates/catalog/listing/product-list.tpl

Y vamos añadir un nuevo bloque que luego vamos a usar en otro fichero.

En fichero actual (a final del todo), justo antes de cerrar las siguientes etiquetas:

{/block}

Añadimos un bloque:

<section>{block name='descripcionfinalc'}{/block}</section>

Hemos llamado al “bloque” -> descripcionfinalc

Nuevo Bloque Smarty Prestashop

Ahora, vamos a usar ese bloque dentro del fichero:

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

Si nos fijamos, (obviando los comentarios del fichero), la primera línea funcional de código es el extend, que tenemos:

{extends file='catalog/listing/product-list.tpl'}

De un modo u otro estamos heredando la estructura de la plantilla a la que hacemos referencia, por eso antes hemos añadido un nuevo bloque que ahora vamos a usar realmente en el fichero:

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

En nuestro caso, hemos añadido la siguiente instrucción:

(Llamamos al bloque y dentro del bloque mostramos la descripción de la categoría)

{block name='descripcionfinalc'}
{if $category.description}
<div id="category-description" class="text-muted">{$category.description nofilter}</div>
{/if}
{/block}

Estamos usando el bloque que hemos definido en la plantilla base y dentro del bloque estamos mostrando la descripción de la categoría actual.

Este bloque lo vamos a ver en última posición, porque antes en la plantilla base (/themes/classic/templates/catalog/listing/product-list.tpl) hemos definido que estaba al final 🙂

Lo primero que quiero decir, que estamos haciendo un ejemplo muy rápido y por tanto puede contener y contiene erratas, la ideal es que entendáis el funcionamiento de los bloques.

Documento basado en Prestashop 1.7.1.1

Print Friendly