[Módulo] – Preguntas frecuentes en Prestashop

En el pasado estuvimos hablando en este blog de los siguientes aportes:

Añadir preguntas frecuentes en Prestashop 1.6 y 1.7
Reseña – Módulo FAQ para Prestashop

El primero sigue funcionando ya que se trata de una modificación de JS y CSS, el segundo fue un módulo del año 2012 que dejo de funcionar correctamente tras las posteriores actualizaciones de Prestashop.

En esta ocasión toca reseñar un módulo del usuario bortonecesario de la Comunidad de Prestashop

Como cualquier otro módulo realizamos la instalación del módulo desde la pestaña módulos -> módulos

Módulo instalado

Accedemos a la configuración del módulo.

Pantalla inicial de configuración

Vamos añadir una nueva pregunta pulsando el botón “+”

Añadir nueva pregunta

Posteriormente al pulsar el botón “+” veremos el siguiente formulario:

Formulario creación de pregunta

Question -> Para añadir la pregunta
Answer -> Para añadir la respuesta

Hemos repetido varias veces el proceso para ver como se visualiza luego en la tienda el bloque de preguntas frecuentes en la tienda.

Preguntas frecuentes en Prestashop

Cuando pinchamos sobre la pregunta, se despliega la respuesta.

Preguntas frecuentes deplegadas

Por lo que veo en el código del módulo, al instalarse te añade automaticamente un enlace al menú horizontal, otra cosa es que luego cambien este aspecto en futuras versiones del módulo.

Enlace añadido al menú horizontal

De todos modos, recordar que podéis personalizar/quitar el enlace del menú horizontal desde la configuración del menú horizontal en la pestaña módulos -> módulos de tu tienda.

Además, añade un enlace en el pie de página (en el módulo Bloque CMS) que puedes editar desde la pestaña módulos -> módulos dentro de la configuración del módulo: Bloque CMS (blockcms):

Enlace pie de página

La url para acceder a la sección de páginas frecuentes es:

tuweb.com/prefijo_idioma/module/faq/faqpage

En la pestaña Preferencias -> SEO y URLS (en PS 1.7 pestaña Parámetros de la tienda -> Trafico & SEO y URL)

Podéis personalizar la URL del módulo.

Configurar url amigable del módulo
  • Nosotros hemos indicado que la URL amigable para la página FAQ sea “preguntas-frecuentes”, de esta forma podemos acceder a la sección directamente desde:tuweb.com/prefijo_idioma/preguntas-frecuentes

¿Dónde puedo descargar la última versión del módulo y preguntar dudas?

https://www.prestashop.com/forums/topic/664951-free-module-faq-frequently-asked-questions/

Descarga alternativa de una versión antigua del módulo en caso de que falle la url del foro.

Reseña construida bajo Prestashop 1.6.1.18 con la versión “1.0.0” del módulo

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

Continúa leyendo Añadir preguntas frecuentes en Prestashop 1.6 y 1.7