Google translate Prestashop

Integrar Google traductor en Prestashop 1.7

La idea es integrar el widget de Google Translate, para que el usuario que visite la tienda tenga la posibilidad de ver la tienda “medio traducida” en su idioma nativo. No confundir con la generación de traducciones de Prestashop.

Vamos a usar el famoso htmlbox de Vekia, que hemos usado varias veces en el pasado para otras guías como, por ejemplo:

Lo podéis bajar de la web de Vekia:

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

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 la siguiente dirección:

  •  https://translate.google.com/manager/website/?hl=es

Pulsamos el botón de “Añadir a tu sitio web ahora

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

Indicamos la dirección web de la tienda y el idioma original (por defecto).

Rellenar dirección web para aplicar Google Traductor
Rellenar dirección web para aplicar Google Traductor

Último paso antes de obtener el código para poder integrar Google Translate (Google Traductor) 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
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 (Google Translate)

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

4 comentarios sobre “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

  2. Hola, una consulta puedo insertar en el módulo htmlbox más de un código ? lo digo porque ya tengo un código para mostrar vídeos en la home, y para poder instalar el traductor no si es posible o hay otra forma ? gracias

  3. Excelente la Opción de combinar google translate con una tienda Prestashop. Mil Gracias por compartir estos conocimientos estaba en la gran duda de traducir las tiendas de forma automática, ya que manual se lleva largo rato.
    Sólo un cambio hice:
    Al querer copiar el código con el Módulo que recomiendas de htmlbox no me cogía el contenido en código, al guardar me borraba el código.
    Por tanto SOLUCIÓN, instale el contentbox otro módulo muy funcional, y funciono!!!, luego lo ajuste a la parte TOP de la web en posiciones de módulos y listo.

    Genial aporte.

Los comentarios están cerrados.