Moduły

Darmowe rzeczy

Usługi

Recent Posts

View All
advertising

Dodawanie Google Maps do strony kontaktowej w PrestaShop: Przewodnik

Posted On: May 15, 2023

Categories: web design

Dostarczanie Twoim potencjalnym klientom lokalizacji Twojego sklepu za pomocą Google Maps jest teraz obowiązkowe. Wzrost wykorzystania inteligentnych technologii sprawia, że Twoi potencjalni klienci mogą odwiedzać Twój sklep za pomocą swoich telefonów komórkowych i gadżetów. Możesz także wyposażyć swój sklep PrestaShop w najnowsze trendy. Ten samouczek pomoże Ci dodać Google Maps za pomocą dwóch metod. Pierwsza z nich polega na skopiowaniu przez nas dostarczonego kodu, a druga na zainstalowaniu modułu Google Maps PrestaShop. Przejrzyj obie metody i wybierz tę, z którą czujesz się komfortowo.

Jak dodać Google Maps PrestaShop za pomocą kodu?

Aby dodać Google Maps do strony kontaktowej, musisz uzyskać dostęp do klienta FTP i umiejętności edycji plików HTML. Wejdź do klienta FTP. Przejdź do sekcji motywów i wybierz swój motyw, aby znaleźć contact.tpl w sekcji szablonów.

Skopiuj i wklej poniższy kod w określonym miejscu na stronie kontaktowej. Możemy dodać go pod głównym blokiem treści.

  

  

      

          

      

     

Kod w trzeciej linii przedstawia ustawienia kontenera, aby wyświetlać się dobrze na różnych rozdzielczościach. Czwarta linia kodu dotyczy szerokości i wysokości, dzięki czemu mapa Google jest umieszczana we właściwym miejscu.

Dodaj kod JavaScript. Pobierze on bibliotekę map i ustawienia z serwerów Google i zachowa je w pliku google-map-contact.js w katalogu theme/assets/js/twoj-motyw/google-map-contact.js Twojego sklepu. Dodaj plik i poniższy kod:

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

Aby kod był skuteczny, musisz zmienić wymagane dane, takie jak zmiana obiektu myLatLng na swoje współrzędne. Pobierz te dane bezpośrednio z Google Maps. Lokalizacja strony internetowej może również wymagać zmiany ContentString na te same dane. Dostosuj ścieżkę obrazka znacznika za pomocą kodu.

Aby zmodyfikować JavaScript, możemy nadpisać ContactController. Wejdź do pliku ContactController.php i edytuj go w ścieżce override/controller/front. W przypadku braku takiego pliku, musisz utworzyć nowy i użyć tego kodu.

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

Tutaj również będziesz musiał zamienić wartości googleMapsApiKey na klucz, który został Ci przekazany. Klucz można uzyskać z https://developers.google.com/maps/documentation/javascript/adding-a-google-map#key. Zmień również wartość NAZWA_TWOJEGO_SZABLONU.

Jeśli plik był modyfikowany wcześniej, musisz dodać kod dla JavaScript i klucza 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/TWOJ_SZABLON/assets/js/google-map-contact.js',
           ['server' => 'remote', 'position' => 'head', 'priority' => 999]
       );  

Wydaje się, że to najłatwiejsza metoda dodania Google Maps do strony kontaktowej w PrestaShop. Wypróbuj ją, jeśli jesteś zaznajomiony z edycją kodu, w przeciwnym razie może wymagać pomocy programisty webowego. Aby ułatwić sobie życie i dodać wiele lokalizacji sklepu, lepiej jest użyć modułu PrestaShop.

Jak dodać Google Maps za pomocą modułu PrestaShop?

Moduł Google Maps Contact Us to jedno z efektywnych narzędzi, które oszczędza dużo czasu przy dodawaniu lokalizacji sklepu za pomocą mapy Google na stronie kontaktowej. Możesz włączyć Google Recaptcha, aby zapobiec wykorzystywaniu formularzy strony kontaktowej przez spamowców do złych celów. Istnieje wiele innych opcji personalizacji strony kontaktowej Twojej witryny eCommerce.

Postępuj zgodnie z poniższym samouczkiem, aby dodać Google Maps za pomocą kilku kliknięć.

Zainstaluj moduł Google Maps w sekcji Kontakt.

Skonfiguruj te ustawienia. Pozwala to dodać:

  • Adres e-mail z ikoną
  • Fizyczny adres sklepu z ikoną
  • Numer WhatsApp z ikoną
  • Klucz API mapy
  • Klucz strony Captcha
  • Wyłącz lewą kolumnę

Zapisz ustawienia i to wszystko.

Przejdź do sekcji sklepy, aby dodać lokalizację mapy Google dla każdego sklepu. Dodatkowy obszar mapy może pojawić się na stronie Kontakt na Twoim sklepie. Wszystkie Twoje sklepy pojawiają się w menu rozwijanym, dzięki czemu użytkownicy mogą wybrać sklep i znaleźć jego lokalizację.

Podsumowanie

Dodawanie PrestaShop Google Maps nie jest już trudnym zadaniem. Udostępniliśmy Ci najprostsze metody. Przejrzyj pierwszą, jeśli jesteś zaznajomiony z otwartym kodem źródłowym PrestaShop i potrafisz go debugować, jeśli coś pójdzie nie tak. Druga metoda dodawania mapy za pomocą modułu jest uważana za bezpieczną i pewną. Wymaga tylko kilku kliknięć i eliminuje ryzyko błędów. Jeśli pojawi się jakiś problem, możesz bezpłatnie skorzystać z pomocy od firmy deweloperskiej.