¿Cómo insertar Google Maps en PrestaShop 1.7?

Insertar el mapa de Google Maps PrestaShop 1.7 debemos de hacerlo por nuestra cuenta, ya que no viene con dicha versión.

Si vienes de la versión 1.6 echaras de menos esta funcionalidad en tu tienda, así que si quieres mostrarlo en la versión 1.7 deberás de ponerlo tú mismo o con la ayuda de un profesional.

Te voy a explicar en este post como hacer que aparezca Google Maps paso a paso en tu tienda PrestaShop, pero si tienes dudas o no te atreves deja tu comentario al final de este artículo y te ayudaré a resolver tus dudas.

“Es importante que antes de nada hagas copia de seguridad de los archivos empleados en este tutorial”

Para la explicación de este post es importante que te descargues un módulo.

El módulo que necesitas lo puedes descargar gratuitamente en github

(La info que proporciono en este post está explicada en el foro de PrestaShop en este post)

Me pareció útil compartirlo en mi blog, ya que creo que mucha gente le será necesario.

De hecho, en algunas instalaciones que he realizado con la versión 1.7 ya lo implementa de serie.

Instalación del Módulo de Google Maps PrestaShop 1.7

El primer paso tras descargar el módulo de Google Maps que te he comentado es instalarlo.

Sigue estos pasos:

1. Entra en el back de tu tienda
2. Pincha en el menú módulos
3. Haz clic en “Subir un módulo” y sigue los pasos.
4. Ahora hacemos clic en install.
5. Listo.

¿A qué es fácil instalar un módulo?

Bien, ahora el siguiente paso es “Configurarlo”

Haz clic en Configurar:

Aquí nos detenemos y analizamos el módulo.

El primer dato que nos solicita es la API key de nuestro Google Maps.

Si no tienes la API key o no sabes lo que es te sugiero que visites la web de Google

Así que una vez pongas la API key, el siguiente paso es poner la latitud y longitud o dicho de otra manera las coordenadas de tu dirección.

Para obtener las coordenadas te recomiendo esta página: https://www.coordenadas-gps.com/

Y, por último, si lo deseas, pon un icono de tu logo, te recomiendo que sea 16x16px.

Ya está configurado el módulo, pero antes para que funcione y se muestre en nuestra plantilla hay que hacer un pequeño cambio que te detallo a continuación.

¿Dónde se visualiza Google Maps  PrestaShop 1.7?

Ahora que está configurado el módulo, el siguiente paso es que se muestre en nuestra plantilla.

El mapa de Google Maps se visualiza en la página “Tiendas”

Antes que nada, me gustaría decirte que hay una pequeña diferencia entre ambas versiones.

En la versión 1.7 el modo que muestra las tiendas es solo en formato lista.

En la versión 1.6 nos daba la oportunidad de poder buscar la tienda más cercana o mostrar también en formato lista.

Con este módulo solo podremos poner el mapa nada más, no podremos hacer que aparezcan nuestras tiendas con localizador dentro del mapa (Al menos que yo sepa, si tú sabes hacerlo compártelo en los comentarios de este post) con lo cual no está habilitada esa función.

Añadiendo el código en nuestra plantilla de PrestaShop 1.7

Para que podamos ver el mapa de Google y nos funcione así el módulo, tenemos que hacer un ajuste en el archivo stores.tpl de nuestra plantilla.

Quizás te interese saber: Cómo crear un tema hijo en Prestashop 1.7?

Para ello sigue estos pasos:

1. Navega por las carpetas de tu plantilla y busca la carpeta themes, dentro la carpeta de tu plantilla, en el caso de ser la classic haz clic.
2. Pincha en la subcarpeta de Classic la que dice templates
3. Vuelve hacer clic en la subcarpeta de templates la que dice cms
4. Abre el archivo stores.tpl (O lo descargas y lo abres desde tu editor de código o bien lo abres desde el Filezilla)
5. Inserta este código: {widget name=»storeggmap»} después de la línea 31 aprox.

Por último, para que los cambios tengan efecto en la plantilla no te olvides Forzar la compilación desde el panel de PrestaShop.

Para ello:

1. ves a parámetros avanzados y rendimiento
2. En Compilación de plantillas selecciona “Forzar la compilación”
3. Selecciona en sí en Caché.
4. Luego tras cargar la página vuelves al punto 2 pero a la inversa.

Vamos a ver el resultado y si este ejercicio lo hemos hecho bien.

Para ello vamos a nuestra tienda y buscamos el enlace de tiendas, normalmente puede estar en el pie de la tienda.

“Si no lo encuentras puedes utilizar el mapa del sitio de tu web”

Ahora si todo funcionó bien, debes de ver el mapa correctamente.

Recuerda que si hay algún fallo entonces debes revisar bien el problema que es y si quieres dejarlo en los comentarios de este post te invito a que lo hagas y podamos ver el que.

Resumen del tutorial Cómo Añadir Google Maps en PrestaShop 1.7

Te resumo lo que he explicado para añadir Google Maps en PrestaShop 1.7.

Instalar el módulo de Google Maps

Configurarlo

Añadir el código dentro del archivo stores.tpl

Forzar la compilación y la caché para que surjan los cambios.

Contras del Mapa de Google en PrestaShop 1.7

Como he comentado anteriormente, si tenemos varias tiendas no se mostrará los iconos en el mapa como ocurría en la versión 1.6

Solo se mostrará uno, por lo que para contrastar eso se mostrará debajo del mapa la lista de tiendas en el formato lista como estaba al principio

Otro cambio es que ya no está el localizador de tiendas como ocurría en la 1.6, es decir, que podías saber cuál era la tienda que más cerca te quedaba según tu ubicación.

Por lo que irás viendo en la versión 1.7 las cosas no son como antes.