Modules

Gratis Spullen

Diensten

Recent Posts

View All
advertising

Google Maps toevoegen aan de contactpagina in PrestaShop: Handleiding

Posted On: May 15, 2023

Categories:

Het verstrekken van de locatie van uw winkel aan potentiële klanten via Google Maps is nu verplicht. Met het toenemende gebruik van slimme technologie bezoeken potentiële klanten uw winkel mogelijk via hun mobiele telefoons en apparaten. U kunt uw PrestaShop-winkel ook uitrusten met moderne trends. Deze tutorial zal u helpen Google Maps toe te voegen met twee methoden. De eerste methode is het kopiëren van de door ons verstrekte code, de tweede methode is het installeren van de PrestaShop Google Maps-module. Bekijk beide methoden en kies degene waar u zich prettig bij voelt.

Hoe voegt u PrestaShop Google Maps toe met behulp van een code?

Om Google Maps aan een contactpagina toe te voegen, moet u toegang hebben tot een FTP-client en de mogelijkheid om HTML-bestanden te bewerken. Open de FTP-client. Ga naar de sectie Thema's en selecteer uw thema om contact.tpl te vinden onder sjablonen.

Kopieer en plak de volgende code op een specifieke plaats op de contactpagina. We kunnen het onder het hoofdcontentblok toevoegen.

De code in de derde regel vertegenwoordigt de instellingen van het container om goed weer te geven voor verschillende resoluties. De vierde regel code gaat over de breedte en hoogte, zodat een Google-kaart op de juiste plaats wordt geplaatst.

Voeg JavaScript-code toe. Het zal de kaartbibliotheek downloaden en instellingen van de Google-servers ophalen en deze bewaren in een bestand google-map-contact.js. Het bevindt zich in de map theme/assets/js/google-map-contacts.js van uw winkel. Voeg het bestand en de volgende code toe:

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

Om de code effectief te maken, moet u de vereiste gegevens wijzigen, zoals het wijzigen van het myLatLng-object met uw coördinaten. Haal deze gegevens rechtstreeks op bij Google Maps. Het lokaliseren van een website kan ook vereisen dat u ContentString wijzigt met dezelfde gegevens. Pas het pad van de markerafbeelding aan met de code.

Om JavaScript te wijzigen, kunnen we ContactContoller overschrijven. Ga naar het ContactController.php-bestand en bewerk het met het pad override/controller/front. Als zo'n bestand niet bestaat, moet u een nieuw bestand maken en deze code gebruiken.

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/NAAM_VAN_UW_THEME/assets/js/google-map-contact.js',
           ['server' => 'remote', 'position' => 'head', 'priority' => 999]
       );        
   }    
}

Hier moet u opnieuw de googleMapsApiKey-waarden vervangen door de sleutel die u heeft ontvangen. Haal de sleutel op via https://developers.google.com/maps/documentation/javascript/adding-a-google-map#key. Wijzig ook de waarde van NAAM_VAN_UW_THEME.

Als het bestand eerder is gewijzigd, moet u code toevoegen voor JavaScript en de Google Map API-sleutel.

$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/NAAM_VAN_UW_THEME/assets/js/google-map-contact.js',
           ['server' => 'remote', 'position' => 'head', 'priority' => 999]
       );

Dit lijkt de eenvoudigste methode om Google Maps toe te voegen aan de contactpagina in PrestaShop. Probeer het als u vertrouwd bent met het bewerken van code, anders kan het de hulp van een webontwikkelaar vereisen. Om uzelf te behoeden voor problemen en meerdere winkellocaties te maken, is het beter om de PrestaShop-module te gebruiken.

Hoe voegt u Google Maps toe met behulp van de PrestaShop-module?

De module Google Maps Contact Us is een van de effectieve tools die u veel tijd besparen bij het toevoegen van de locatie van uw winkel op de contactpagina van uw winkel. U kunt Google Recaptcha inschakelen om te voorkomen dat spammers de contactformulieren van de contactpagina gebruiken voor hun kwade bedoelingen. Er zijn nog veel meer opties om de contactpagina van uw e-commerce website aan te passen.

Volg de onderstaande tutorial om Google Maps met slechts een paar klikken toe te voegen.

Installeer de Google Maps op Contact Us-module.

Configureer deze instellingen. Hiermee kunt u het volgende toevoegen:

  • E-mailadres met pictogram
  • Fysiek adres van de winkel met pictogram
  • WhatsApp-nummer met pictogram
  • Map API-sleutel
  • Captcha-site-sleutel
  • Linker kolom uitschakelen

Sla de instellingen op en dat is alles.

Ga naar de sectie winkels om een Google-kaartlocatie toe te voegen voor elke winkel. Er kan een extra kaartsectie verschijnen op de pagina Contact met ons van uw winkel. Al uw winkels worden weergegeven in een vervolgkeuzemenu, zodat gebruikers een winkel kunnen selecteren en de locatie kunnen vinden.

Conclusie

Het toevoegen van PrestaShop Google Maps is geen moeilijke taak meer. We hebben de eenvoudigste methoden met u gedeeld. Bekijk de eerste methode als u bekend bent met de open-source code van PrestaShop en in staat bent om problemen op te lossen als er iets misgaat. De tweede methode om kaarten toe te voegen met behulp van een module wordt als veilig en betrouwbaar beschouwd. Het vereist slechts een paar klikken en verwijdert de kans op bugs. Als zich een probleem voordoet, kunt u gratis hulp krijgen van het ontwikkelingsbedrijf.