Integrar módulo en las pestañas de la página de producto en Prestashop 1.6

20 noviembre, 2014 |

Si te gusta, compártelo ;)

En esta ocasión voy a mostraros cómo podemos insertar un módulo como una pestaña más en la página de producto en Prestashop 1.6.

Me refiero a esto:

Integrar módulo en la página de producto de prestashop

Para este caso he elegido un módulo gratuito (muy bueno) llamado "Ask a question" y que podéis descargar desde aquí.

Pero antes, y debido a que en Prestashop 1.6 no están habilitadas las pestañas en la "Página de Producto", deberéis seguir este tutorial antes de realizar el presente.

Comencemos...

Una vez os hayais descargado el módulo y lo tengáis instalado, vamos a abrir el archivo prestashop/modules/prestaqna/views/templates/hook/prestaqna_tab_content.tpl y copiaremos la siguiente etiqueta. Como esta etiqueta ya no hará falta podemos comentarla así: {* Comentario *}

<h3 id="#qnaTab" class="idTabHrefShort page-product-heading">{l s='Ask a question' mod='prestaqna'}</h3>

Una vez copiada la etiqueta vamos a abrir el siguiente archivo prestashop/themes/default-bootstrap/product.tpl. Debemos buscar el siguiente código...

<ul id="more_info_tabs" class="idTabs idTabsShort clearfix">
{if $product->description}<li><a id="more_info_tab_more_info" href="#idTab1">{l s='More info'}</a></li>{/if}
{if $features}<li><a id="more_info_tab_data_sheet" href="#idTab2">{l s='Data sheet'}</a></li>{/if}
{if $attachments}<li><a id="more_info_tab_attachments" href="#idTab9">{l s='Download'}</a></li>{/if}
{if isset($accessories) AND $accessories}<li><a href="#idTab4">{l s='Accessories'}</a></li>{/if}
{if isset($product) && $product->customizable}<li><a href="#idTab10">{l s='Product customization'}</a></li>{/if}
{$HOOK_PRODUCT_TAB}
</ul>

... y pegar a continuación de la variable {$HOOK_PRODUCT_TAB} la etiqueta <h3> que habíamos copiado previamente, quedando así:

<ul id="more_info_tabs" class="idTabs idTabsShort clearfix">
{if $product->description}<li><a id="more_info_tab_more_info" href="#idTab1">{l s='More info'}</a></li>{/if}
{if $features}<li><a id="more_info_tab_data_sheet" href="#idTab2">{l s='Data sheet'}</a></li>{/if}
{if $attachments}<li><a id="more_info_tab_attachments" href="#idTab9">{l s='Download'}</a></li>{/if}
{if isset($accessories) AND $accessories}<li><a href="#idTab4">{l s='Accessories'}</a></li>{/if}
{if isset($product) && $product->customizable}<li><a href="#idTab10">{l s='Product customization'}</a></li>{/if}
{$HOOK_PRODUCT_TAB}
<li id="#qnaTab" class="idTabHrefShort page-product-heading"><a href="#qnaTab">{l s='Ask a question'}</a></li>
</ul>

Como podemos ver en el código debemos cambiar la etiqueta <h3> por <li>.

Explicando los detalles...

Observemos el valor del atributo href de la etiqueta <a>:

<li id="#qnaTab" class="idTabHrefShort page-product-heading"><a href="#qnaTab">{l s='Ask a question'}</a></li>

Como podemos ver el valor de href es #qnaTab, éste coincide con el valor del atributo id de la etiqueta <div>, en el archivo prestaqna_tab_content.tpl:

<div id="qnaTab">

Estos valores deben coincidir para que el contenido del módulo aparezca solo al hacer clic en la pestaña.

Breve explicación sobre el módulo "Ask a Question"

Si ya hemos instalado el módulo veremos una pantalla como esta desde la configuración del módulo:

Módulo ask a question para prestashop

Como podemos observar en esta captura vemos la pregunta que ha hecho X cliente. Si no la consideramos adecuada podemos eliminarla, de considerarla adecuada solo tenemos que clicar en el botón "Approve the above Q&As" para aprobarla. Una vez aprobada se enviará automáticamente al cliente un email informándole de que tiene una respuesta a su pregunta.

Si aparece una advertencia indicando que no ha podido enviarse el email, debemos copiar la carpeta prestashop/modules/prestaqna/mails/en, y pegarla en el mismo directorio,renombrándola como "es".

Debemos hacerlo así porque antes de enviar el mensaje, el módulo "busca" la carpeta correspondiente al idioma por defecto que tengamos en nuestra tienda.

13 comentarios:

  1. Buenas tardes , excelente tutorial! Tengo una duda respecto a este modulo, donde puedo modificar al correo que llega el mensaje ? Agradeceria mucho tu atención

    ResponderEliminar
    Respuestas
    1. En la ruta prestashop\modules\prestaqna\mails\en

      Haz una copia de la carpeta "en" que está dentro de la carpeta mails y pégala en la misma carpeta mails renombrándola a "es", de forma que en la carpeta mails tengas dos carpetas, la carpeta "en" y la carpeta "es". Estas carpetas corresponden al idioma que tengas por defecto en tu tienda.

      Dentro de la nueva carpeta "es" tienes los archivos que debes modificar, son los de tipo .html. Modifica los que correspondan a tus necesidades.

      Un saludo.

      Eliminar
    2. Excelente muchas gracias, apenas voy viendo tu respuesta y eso que normalmente entro a tu blog porque es un gran apoyo :)

      Eliminar
  2. Hola, buenos días. Ante todo agradecerte lo bien explicado que está todo pues una persona como yo que no sabe nada de esto que haya podido instalar este módulo ya tiene su importancia. Aprovechando te quería preguntar si es posible instalar el captcha de Google. Estoy haciendo pruebas en localhost y ya lo he instalado en "Enviar a un amigo" y en el registro solo me falta en aquí si pudiera ser te lo agradecería enormente.
    Un saludo

    ResponderEliminar
    Respuestas
    1. No he entendido muy bien donde lo quieres instalar. ¿En qué página?

      Eliminar
  3. Gracias por tus ayudas, me encanta lo bien que lo explicas todo. Quisiera preguntarte si se puede añadir el recpatcha de Google y si es así que se tendría que modificar. Muchas gracias me funciona estupendamente.

    ResponderEliminar
    Respuestas
    1. Hola, lo estaba mirando ahora. Mira este tutorial, está en inglés pero es fácil. Lo he probado y parece que funciona. Digo parece porque solo lo he probado en localhost.

      https://www.prestashop.com/forums/topic/442633-add-recaptcha-to-prestashop-version-16014-for-free/

      Eliminar
  4. Muchas gracias, me pongo con ello y ya te contaré.
    Sludos.

    ResponderEliminar
  5. Nuevamente aquí, por mas que leo solamente encuentro como integrarlo en el módulo de contacto y de crear una cuenta nueva, pero no se como hacerlo para ponerle el recapta de google a "Ask a question", se que será fácil pero acabo de empezar en este mundillo y estoy superperdida, muchas gracias por todo.

    ResponderEliminar
    Respuestas
    1. Hola, hazlo como en este tutorial:

      http://ivanros.com/2015/01/integrar-un-captcha-en-prestashop-1-6/

      La parte de código PHP no es necesaria, pues en el tutorial se habla insertarlo en la página de "Contacto". Aunque no sé si funcionará correctamente, pues en localhost no se puede comprobar el funcionamiento. El Captcha al menos aparece.

      Eliminar
  6. Muchas gracias, es que soy muy cansino y muy torpe.

    ResponderEliminar
  7. Buenos días, a mí me sale el módulo duplicado en cada pestaña tras hacer todos los pasos: en la de mas, en reseñas y en la propia pestaña de ask a question. Sabes como solucionarlo o a qué se debe? Gracias.

    ResponderEliminar
    Respuestas
    1. Hola,

      Lo siento mucho, pero ya no ofrezco soporte en este blog. Era un proyecto sin ánimo de lucro, y ya no tengo tiempo, lo siento.

      Eliminar