Fournir à vos clients potentiels l'emplacement de votre magasin avec Google Maps est désormais obligatoire. Avec l'augmentation de l'utilisation des technologies intelligentes, vos clients potentiels peuvent visiter votre magasin via leurs téléphones mobiles et leurs gadgets. Vous pouvez également équiper votre boutique PrestaShop avec les tendances modernes du jour. Ce tutoriel va vous aider à ajouter Google Maps avec deux méthodes. La première consiste à copier le code que nous fournissons, la seconde à installer le module Google Maps PrestaShop. Examinez les deux méthodes pour choisir celle avec laquelle vous vous sentez à l'aise.

Comment ajouter Google Maps à l'aide d'un code PrestaShop ?

Pour ajouter Google Maps à une page de contact, vous devez accéder au client FTP et avoir la capacité de modifier des fichiers HTML. Accédez au client FTP. Naviguez jusqu'à la section des thèmes, et sélectionnez votre thème pour trouver contact.tpl sous templates.

Copiez et collez le code suivant à un endroit spécifique sur la page de contact. Nous pouvons l'ajouter en dessous du bloc de contenu principal.

  

      

          

      

     

Le code de la troisième ligne représente les paramètres du conteneur pour s'afficher correctement sur différentes résolutions. La quatrième ligne de code concerne la largeur et la hauteur pour que la carte Google soit bien positionnée.

Ajoutez du code JavaScript. Il téléchargera la bibliothèque de cartes et les paramètres depuis les serveurs de Google et les conservera dans un fichier google-map-contact.js. Il se trouve dans le répertoire theme/assets/js/google-map-contacts.js de votre boutique. Ajoutez le fichier et le code suivant :

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);

}

Pour rendre le code efficace, vous devez changer les données requises, telles que la modification de l'objet myLatLng avec vos coordonnées. Obtenez ces données directement depuis Google Maps. La localisation d'un site web peut également nécessiter la modification de ContentString avec les mêmes données. Personnalisez le chemin de l'image du marqueur en utilisant le code.

Pour modifier JavaScript, nous pouvons substituer ContactContoller. Accédez au fichier ContactController.php et modifiez-le avec le chemin override/controller/front. En l'absence d'un tel fichier, vous devez en créer un nouveau et utiliser ce code :

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/NOM_DE_VOTRE_THEME/assets/js/google-map-contact.js',

           ['server' => 'remote', 'position' => 'head', 'priority' => 999]

       );        

   }    

}

Ici, vous devrez à nouveau remplacer les valeurs de googleMapsApiKey par la clé qui vous est fournie. Obtenez la clé depuis https://developers.google.com/maps/documentation/javascript/adding-a-google-map#key. Changez également la valeur de NOM_DE_VOTRE_THEME.

Si le fichier a déjà été modifié auparavant, vous devrez ajouter le code JavaScript et la clé de l'API 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/NOM_DE_VOTRE_THEME/assets/js/google-map-contact.js',

           ['server' => 'remote', 'position' => 'head', 'priority' => 999]

       );  

Il semble que ce soit la méthode la plus simple pour ajouter Google Maps à la page de contact dans PrestaShop. Essayez-la si vous êtes familier avec la modification de code, sinon cela peut nécessiter l'aide d'un développeur web. Pour vous épargner des difficultés et créer plusieurs emplacements de magasin, il est préférable d'utiliser le module PrestaShop.

Vous êtes toujours bloqué ? Cliquez ici et entrez en contact avec notre développeur dédié dès maintenant

Comment ajouter Google Maps avec le module PrestaShop ?

Le module Google Maps Contact Us est l'un des outils efficaces qui vous font gagner beaucoup de temps pour ajouter la carte Google de l'emplacement de votre magasin sur la page de contact. Vous pouvez activer Google Recaptcha pour empêcher les spammeurs d'utiliser les formulaires de la page de contact à des fins malveillantes. Il existe de nombreuses autres options pour personnaliser la page de contact de votre site de commerce électronique.

Suivez le tutoriel ci-dessous pour ajouter Google Maps en quelques clics.

Installez le module Google Maps sur la page Contactez-nous.

Configurez ces paramètres. Cela vous permet d'ajouter :

• Adresse e-mail avec icône
• Adresse physique du magasin avec icône
• Numéro WhatsApp avec icône
• Clé d'API de la carte
• Clé de site Captcha
• Désactiver la colonne de gauche

Enregistrez les paramètres et c'est tout.

Accédez à la section des magasins pour ajouter un emplacement de carte Google pour chaque magasin. Une section de carte supplémentaire peut apparaître sur la page Contactez-nous de votre magasin. Tous vos magasins apparaissent dans un menu déroulant pour que les utilisateurs puissent sélectionner un magasin et trouver son emplacement.

Conclusion

Ajouter Google Maps PrestaShop n'est plus une tâche difficile. Nous avons partagé avec vous les méthodes les plus simples. Examinez la première si vous êtes familier avec le code source ouvert de PrestaShop et capable de le déboguer en cas de problème. La deuxième méthode pour ajouter des cartes avec l'aide d'un module est considérée comme sûre et sécurisée. Elle nécessite quelques clics et élimine la probabilité de bugs. En cas de problème, vous pouvez demander une assistance gratuite à la société de développement du module.

Obtenez le module PrestaShop Ajouter Google Maps à la page de contact depuis PrestaShop Addons

Obtenez le module PrestaShop Ajouter Google Maps à la page de contact depuis le site officiel de FME Modules