Module

Kostenloses

Dienstleistungen

Recent Posts

View All
advertising

Agregar Google Maps a la página de contacto en PrestaShop: Guía práctica

Posted On: May 15, 2023

Categories: Web-Design

Proporcionar a tus posibles clientes la ubicación de tu tienda con Google Maps es ahora obligatorio. Con el aumento en el uso de la tecnología inteligente, es probable que tus posibles clientes visiten tu tienda a través de sus teléfonos móviles y dispositivos. También puedes equipar tu tienda PrestaShop con las tendencias modernas del día. Este tutorial te ayudará a agregar Google Maps con dos métodos. El primero implica copiar el código que proporcionamos, el segundo implica instalar el módulo de Google Maps de PrestaShop. Revisa ambos métodos y elige el que te resulte más cómodo.

Cómo agregar Google Maps de PrestaShop usando un código?

Para agregar Google Maps a una página de contacto, necesitas acceder al Cliente FTP y tener la capacidad de editar archivos HTML. Accede al Cliente FTP. Navega hasta la sección de temas y selecciona tu tema para encontrar contact.tpl bajo plantillas.

Copia y pega el siguiente código en un lugar específico en la página de contacto. Podemos agregarlo debajo del bloque de contenido principal.

  

  

      

          

      

     

El código en la tercera línea representa la configuración del contenedor para que se muestre correctamente en diferentes resoluciones. La cuarta línea de código se refiere al ancho y alto para que el mapa de Google se coloque en el lugar correcto.

Agrega el código JavaScript. Descargará la biblioteca de mapas y la configuración de los servidores de Google y la conservará en un archivo google-map-contact.js. Este archivo se encuentra en la carpeta theme/assets/js/google-map-contacts.js de tu tienda. Agrega el archivo y el siguiente código:

function myMap() {
   var myLatLng = {lat: 50.0928392, lng: 19.9244297};
   var mapOptions = {
       zoom: 15,
       center: myLatLng
   }
   var map = new google.maps.Map(document.getElementById('googleMap'), mapOptions);

var contentString =

          

PrestaPros

          

           30-067 Kraków ul. Piastowska 44/4

           tel. (+48)574 887 340

           ;

var infowindow = new google.maps.InfoWindow({
       content: contentString
   });
   var marker = new google.maps.Marker({
       position: myLatLng,
//       icon: '/img/marker.png',
//       title: 'Hello World!'
   });
   marker.addListener('click', function () {
       infowindow.open(map, marker);
   });
   marker.setMap(map);
}

Para que el código sea efectivo, debes cambiar los datos necesarios, como modificar el objeto myLatLng con tus coordenadas. Obtén estos datos directamente desde Google Maps. La localización de un sitio web también puede requerir cambiar ContentString con los mismos datos. Personaliza la ruta de la imagen del marcador utilizando el código.

Para modificar JavaScript, podemos anular ContactContoller. Accede al archivo ContactController.php y edítalo con la ruta override/controller/front. En caso de que no exista dicho archivo, debes crear uno nuevo y utilizar este código:

class ContactController extends ContactControllerCore {
   private $googleMapsApiKey = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';
   public function initContent()
   {
       parent::initContent();
       $this->registerJavascript(
           'google-maps-api',
           'https://maps.googleapis.com/maps/api/js?key='.$this->googleMapsApiKey.'&callback=myMap',
           ['server' => 'remote', 'position' => 'bottom', 'priority' => 999, 'attribute' => 'defer']
       );
       $this->registerJavascript(
           'google-map',
           'themes/NOMBRE_DE_TU_TEMA/assets/js/google-map-contact.js',
           ['server' => 'remote', 'position' => 'head', 'priority' => 999]
       );        
   }    
}

Aquí, nuevamente, deberás reemplazar los valores de googleMapsApiKey por la clave que te proporcionen. Obtén la clave en https://developers.google.com/maps/documentation/javascript/adding-a-google-map#key. Cambia también el valor de NOMBRE_DE_TU_TEMA.

Si el archivo ya ha sido modificado anteriormente, deberás agregar el código para JavaScript y la clave de la API de Google Map.

$this->registerJavascript(
           'google-maps-api',
           'https://maps.googleapis.com/maps/api/js?key='.$this->googleMapsApiKey.'&callback=myMap',
           ['server' => 'remote', 'position' => 'bottom', 'priority' => 999, 'attribute' => 'defer']
       );
       $this->registerJavascript(
           'google-map',
           'themes/NOMBRE_DE_TU_TEMA/assets/js/google-map-contact.js',
           ['server' => 'remote', 'position' => 'head', 'priority' => 999]
       );  

Parece ser el método más sencillo para agregar Google Maps a la página de contacto en PrestaShop. Pruébalo si estás familiarizado con la edición de código, de lo contrario, puede requerir la ayuda de un desarrollador web. Para ahorrarte dificultades y crear múltiples ubicaciones de tiendas, es mejor utilizar el módulo de PrestaShop.

Cómo agregar Google Maps con el módulo de PrestaShop?

El módulo de Contacto de Google Maps es una de las herramientas efectivas que te ahorran mucho tiempo al agregar la ubicación del mapa de Google de tu tienda en la página de contacto. Puedes habilitar Google Recaptcha para evitar que los spammers utilicen los formularios de la página de contacto con fines maliciosos. Hay muchas otras opciones para personalizar la página de contacto de tu sitio web de comercio electrónico.

Sigue el tutorial a continuación para agregar Google Maps con unos pocos clics.

Instala el módulo de Google Maps en la página de Contacto.

Configura estos ajustes. Te permite agregar:

  • Dirección de correo electrónico con icono
  • Dirección física de la tienda con icono
  • Número de WhatsApp con icono
  • Clave de API del mapa
  • Clave del sitio Captcha
  • Deshabilitar columna izquierda

Guarda los ajustes y listo.

Ve a la sección de tiendas para agregar una ubicación de mapa de Google para cada tienda. Puede aparecer una sección de mapa adicional en la página de Contáctanos de tu tienda. Todas tus tiendas aparecen en un menú desplegable para que los usuarios puedan seleccionar una tienda y encontrar su ubicación.

Conclusión

Agregar Google Maps de PrestaShop ya no es una tarea difícil. Hemos compartido contigo los métodos más sencillos. Revisa el primero si estás familiarizado con el código abierto de PrestaShop y puedes solucionarlo si algo sale mal. El segundo método de agregar mapas con la ayuda de un módulo se considera seguro. Involucra unos pocos clics y elimina la probabilidad de errores. Si surge algún problema, puedes solicitar asistencia gratuita al desarrollador de la empresa.