Integrar Google traductor en Prestashop 1.7

Vamos a usar el famoso htmlbox de Vekia que hemos usado varias veces en el pasado para otras guías como: Insertar código Qweb, Insertar Información del tiempo, etc..

Lo podéis bajar de la web de Vekiahttps://mypresta.eu/modules/front-office-features/html-box.html (Enlace alternativo (PS 1.6/1.7) solo en caso de que falle el enlace original en algún momento, recordar que en el enlace original es donde tenéis el módulo actualizado para futuras versiones (y variantes) de Prestashop )

¿Dónde vamos a colocar el bloque de Google Traductor?

En la columna izquierda de la tienda.

Google Traductor en la Columna Izquierda de Prestashop 1.7

¿Cómo hacemos la instalación?

Realizamos la subida/instalación del módulo, como es habitual desde la pestaña módulos -> módulo

¿Cómo configuramos el módulo para insertar el código de Google Traductor?

Nos vamos a esta web: https://translate.google.com/manager/website/?hl=es

Obtener código de Google traductor para pegarlo en Prestashop 1.7

Proceso para obtener el código de Google Traductor para luego insertarlo en Prestashop

Último paso antes de obtener el código de Google traductor para poder integrarlo en Prestashop 1.7

En este último paso, tenemos las siguientes opciones:

  • Mostrar todos los idiomas o lo que nosotros queramos (Idiomas de traducción)
  • Cambiar el modo de presentación del Widget
  • Opciones Avanzados, como la integración con Google Analytics, que el widget se muestre automáticamente a los usuarios que entran a tu tienda que hablan un idioma distinto al de la tienda.

Pulsamos en “Obtener código

Obtener código de Google Traductor

Hemos obtenido el siguiente código:

Código preparado para insertar en Prestashop 1.7

¿Dónde pego ese código?

Lo primero que vamos hacer es desactivar la opción “html purifier” en la pestaña Parámetros de la tienda -> Configuración

Desactivar html purifier en Prestashop 1.7

Lo segundo es que nos vamos a la configuración del módulo en la pestaña módulos -> módulos

Y en su configuración: (Pulsamos en “Rich text editor: off“)

Desactivar editor gráfico en Prestashop 1.7 en la configuración del módulo htmlbox


Y ahora pegamos el código que hemos obtenido de Google Traductor

Código de Google Traductor pegado en la configuración del módulo htmlbox en Prestashop 1.7

Guardamos los cambios.

¿Cómo colocamos el bloque de Google Traductor en la columna izquierda?

En la misma configuración del módulo, en la parte superior, señalamos “leftcolumn” en la parte que dice “

Colocar módulo de Google Traductor en la columna izquierda de Prestashop 1.7

¿Cómo subimos el bloque de Google Traductor a la primera posición de la Columna Izquierda en Prestashop 1.7?

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

Buscamos el bloque: “displayLeftColumn”

Cambiar posición del módulo htmlbox en Prestashop 1.7

Y lo arrastramos con el botón derecho del ratón hacia la primera posición

Módulo htmlbox en la primera posición de la Columna Izquierda en Prestashop 1.7

¿Cómo se ve el bloque de Google Traductor en Prestashop?

Bloque de Google Traductor pegado al bloque de categorías en Prestashop 1.7

Ostias, se ve demasiado pegado al bloque de categorías ¿Se puede solucionar?

Se puede aprovechar la clase “.block-categories” y encapsular el código del widget en un div con dicha clase.

Es decir, a la hora de pegar el código en el módulo, lo colocáis así:

<div class="block-categories">Tu código generado en Google Traductor aquí</div>

Código del bloque google traductor encapsulado para mejorar su visualización en Prestashop 1.7

¿Se ve bien el módulo ya en la tienda?

Widget Google Traductor en Prestashop 1.7 correcto.

Tip realizado bajo la versión 1.7.1.0 de Prestashop

Print Friendly
Hosting Prestashop

Un pensamiento en “Integrar Google traductor en Prestashop 1.7

  1. Hola Victor,

    Antes de nada, muchisimas gracias por tus tutoriales de prestashop.

    Tienes un error en el enlace del módulo, le falta la L final.

    Saludos

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *