¿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.

Google Maps Prestashop 1.7Google Maps PrestaShop 1.7

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

Bien, ahora el siguiente paso es “Configurarlo”

Haz clic en Configurar:

Google Maps PrestaShop 1.7

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.

Google Maps PrestaShop 1.7

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.

Google Maps PrestaShop 1.7

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.

Facebook
WhatsApp
LinkedIn
Print

8 comentarios

  1. Hola Juan Pablo, como bien comente en el post, no se muestra los iconos de las tiendas, quizás como bien preguntas deba de haber módulos de pago que si lo hagan.

  2. Hola, estoy teniendo problemas porque no me muestra el icono de las tiendas y tampoco funciona el buscador.

    Mi versión de prestashop es la 1.7.8.7.

    Agradezco toda ayuda posible, un imposible también sirve, pero se solucionará con un módulo pago?

    Saludos

  3. Exacto, los pasos son como describes.

    Una vez instalado lo importante es que tengas la API de Google maps que es importante para que aparezca en la tienda siguiendo los pasos del tutorial.

  4. Hola a todos, si les pasa el error que no reconoce el .zip, lo descargan, descomprimen, cambian nombre de carpeta a «storeggmap» y vuelven a comprimir en .zip. «storeggmap.zip», lo suben con el admin de prestashop y listo.

  5. Si te da error, prueba a descomprimirlo y volver a comprimir en formato zip.

  6. Hola Javier
    He descargado el fichero pero al querer subirlo a módulos en PrestaShop da el error de que el fichero no es .zip
    ¿Sabes a que puede ser debido?
    Gracias por tu trabajo y tu ayuda
    Ramon

Deja una respuesta

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

Información básica sobre protección de datos Ver más

  • Responsable: Javier Valero.
  • Finalidad:  Moderar los comentarios.
  • Legitimación:  Por consentimiento del interesado.
  • Destinatarios y encargados de tratamiento:  No se ceden o comunican datos a terceros para prestar este servicio.
  • Derechos: Acceder, rectificar y suprimir los datos.
  • Información Adicional: Puede consultar la información detallada en la Política de Privacidad.

¿Quieres conocer trucos y consejos de PrestaShop que te ayuden a convertir más?
Suscríbete y te enviaré a tu correo consejos, tutoriales, para que puedas convertir más en tu negocio.

Date prisa, los fondos se agotan, infórmate y empieza a digitalizar tu negocio con la subvención del Kit Digital hasta 12.000 €

Ir al contenido