Es ist jetzt obligatorisch, Ihren potenziellen Kunden den Standort Ihres Geschäfts mit Google Maps bereitzustellen. Mit der zunehmenden Verwendung von Smart-Technologie könnten Ihre potenziellen Kunden Ihr Geschäft über ihre Mobiltelefone und Geräte besuchen. Sie können auch Ihren PrestaShop-Store mit modernen Trends ausstatten. Dieses Tutorial wird Ihnen helfen, Google Maps auf zwei Arten hinzuzufügen. Die erste Methode besteht darin, den von uns bereitgestellten Code zu kopieren, die zweite Methode besteht darin, das PrestaShop Google Maps-Modul zu installieren. Überprüfen Sie beide Methoden und wählen Sie diejenige aus, mit der Sie sich am wohlsten fühlen.

Wie füge ich PrestaShop Google Maps mit einem Code hinzu?

Um Google Maps auf einer Kontaktseite hinzuzufügen, benötigen Sie Zugriff auf einen FTP-Client und die Möglichkeit, HTML-Dateien zu bearbeiten. Greifen Sie auf den FTP-Client zu. Navigieren Sie zum Abschnitt "Themes" und wählen Sie Ihr Thema aus, um "contact.tpl" unter "templates" zu finden.

Kopieren Sie den folgenden Code an einen bestimmten Ort auf der Kontaktseite. Wir können ihn unter dem Hauptinhalt platzieren.

  

      

          

      

     

Der Code in der dritten Zeile repräsentiert Container-Einstellungen, um auf verschiedenen Bildschirmauflösungen gut angezeigt zu werden. Die vierte Zeile des Codes handelt von Breite und Höhe, damit eine Google-Karte an der richtigen Stelle platziert wird.

Fügen Sie JavaScript-Code hinzu. Es wird die Kartenbibliothek und Einstellungen von den Google-Servern herunterladen und in einer Datei "google-map-contact.js" speichern. Diese befindet sich im Verzeichnis "theme/assets/js" Ihres Store. Fügen Sie die Datei und den folgenden Code hinzu:

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

}

Um den Code wirksam zu machen, müssen Sie die erforderlichen Daten ändern, z. B. die myLatLng-Objekte durch Ihre Koordinaten ersetzen. Holen Sie sich diese Daten direkt von Google Maps. Die Lokalisierung einer Website erfordert möglicherweise auch die Änderung von ContentString mit den gleichen Daten. Passen Sie den Pfad zum Markerbild mit dem Code an.

Um JavaScript zu ändern, können Sie ContactController überschreiben. Gehen Sie zur Datei "ContactController.php" und bearbeiten Sie sie mit dem Pfad "override/controller/front". Wenn eine solche Datei nicht vorhanden ist, müssen Sie eine neue erstellen und diesen Code verwenden.

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

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

       );        

   }    

}

Hier müssen Sie erneut die Werte von googleMapsApiKey durch den Ihnen bereitgestellten Schlüssel ersetzen. Holen Sie sich den Schlüssel von https://developers.google.com/maps/documentation/javascript/adding-a-google-map#key. Ändern Sie auch den Wert von THEMEN_NAME.

Wenn die Datei zuvor geändert wurde, müssen Sie den Code für JavaScript und den Google Maps API-Schlüssel hinzufügen.

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

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

       );  

Es scheint die einfachste Methode zu sein, Google Maps auf der Kontaktseite in PrestaShop hinzuzufügen. Versuchen Sie es, wenn Sie mit der Code-Bearbeitung vertraut sind, sonst könnte die Hilfe eines Webentwicklers erforderlich sein. Um sich die Mühe zu sparen und mehrere Standorte des Geschäfts zu erstellen, ist es besser, das PrestaShop-Modul zu verwenden.

Stecken Sie immer noch fest? Klicken Sie hier und treten Sie jetzt mit unserem engagierten Entwickler in Kontakt

Wie füge ich Google Maps mit dem PrestaShop-Modul hinzu?

Das Google Maps Contact Us-Modul ist eines der effektiven Werkzeuge, die Ihnen viel Zeit beim Hinzufügen des Google-Standorts Ihres Geschäfts auf der Kontaktseite sparen. Sie können Google Recaptcha aktivieren, um zu verhindern, dass Spammer die Kontaktformulare der Kontaktseite für ihre bösen Absichten verwenden. Es gibt viele andere Optionen, um die Kontaktseite Ihrer eCommerce-Website zu personalisieren.

Folgen Sie dem Tutorial unten, um Google Maps mit wenigen Klicks hinzuzufügen.

Installieren Sie das Google Maps on Contact Us-Modul.

Konfigurieren Sie diese Einstellungen. Es ermöglicht Ihnen, Folgendes hinzuzufügen:

• E-Mail-Adresse mit Symbol
• Physische Adresse des Geschäfts mit Symbol
• WhatsApp-Nummer mit Symbol
• Karten-API-Schlüssel
• Captcha-Seitenschlüssel
• Linke Spalte deaktivieren

Speichern Sie die Einstellungen, und alles ist erledigt.

Gehen Sie zum Abschnitt "Stores", um für jedes Geschäft einen Google-Kartenstandort hinzuzufügen. Auf der Kontaktseite Ihres Geschäfts kann ein zusätzlicher Kartenabschnitt angezeigt werden. Alle Ihre Geschäfte werden in einem Dropdown-Menü angezeigt, damit Benutzer ein Geschäft auswählen und seinen Standort finden können.

Fazit

Das Hinzufügen von PrestaShop Google Maps ist keine schwierige Aufgabe mehr. Wir haben Ihnen die einfachsten Methoden mitgeteilt. Überprüfen Sie die erste Methode, wenn Sie mit dem Open-Source-Code von PrestaShop vertraut sind und ihn debuggen können, wenn etwas schief geht. Die zweite Methode zum Hinzufügen von Karten mit Hilfe eines Moduls gilt als sicher und zuverlässig. Es erfordert nur wenige Klicks und minimiert die Wahrscheinlichkeit von Fehlern. Wenn ein Problem auftritt, können Sie kostenlos Unterstützung von der Entwicklerfirma erhalten.

Holen Sie sich Prestashop Add Google Maps to Contact Page von Prestashop Addons

Holen Sie sich Prestashop Add Google Maps to Contact Page von der offiziellen Website von FME Modules