Dodanie Google Maps do PrestaShop

W tym artykule przedstawimy jak dodać mapkę Google Maps na stronę kontaktu sklepu PrestaShop w wersjach 1.7+.

Do wdrożenia będzie nam potrzebny klient ftp (np. Filezilla) z możliwością edycji plików na serwerze.



W pierwszym kroku edytujemy plik contact.tpl znajdujący się w katalogu themes/TWÓJ_SZABLON/templates/contact.tpl. Gdzie TWÓJ_SZABLON to katalog szablonu PrestaShop, w którym chcesz żeby mapka się wyświetlała.
Jeśli nie wiesz z jakiego szablonu korzystasz, to wejdź do panelu administracyjnego i sprawdź to w zakładce Wygląd->Szablony->Twoj obecny szablon.
W miejscu gdzie chcemy żeby wyświetlała się mapka wklejmy poniższy kod. W tym przypadku jest to w bloku contentu block name=page_content

<section id="contact-map">
    <div class="row">    
        <div class="col-12">
            <div id="googleMap" style="width:100%;height:400px"></div>
        </div>  
    </div>    
</section>

Trzecia linia ustawia szerokość na maksymalną liczbę kolumn (col-12) przy wszystkich rozdzielczościach. W czwartej lini definiujemy gdzie znajdzie się mapa googla.

Kolejnym krokiem jest dodanie bibliotek javascriptowych. Biblioteka map będzie automatycznie ściągana z serwerów Googla, natomiast konkretne ustawienia znajdą się w pliku google-map-contact.js, który znajdzie się pod ścieżką themes/TWÓJ_SZABLON/assets/js/google-map-contact.js. Tworzymy plik we wskazanej lokalizacji i dodajemy 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 = '<div id="content">' +
            '<h3>PrestaPros</h3>' +
            '<p>' +
            '30-067 Kraków ul. Piastowska 44/4<br>' +
            'tel. (+48)574 887 340<br>' +
            '</p>' +
            '</div>';

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

Podstawowe dane, które należy spersonalizować w powyższym kodzie, to obiekt myLatLng, w którym należy zmienić koordynaty na swoje (można je zczytać z Google Maps),  contentString, w którym podajemy dane naszego sklepu PrestaShop oraz opcjonalnie podanie ścieżki do markera jeśli chcemy go zastąpić inną ikoną (u nas wykomentowane).

W celu dodania plików javascriptowych do widoku strony kontaktu, nadpisujemy ContactController. W tym celu wchodzimy lub – jeśli nie ma – tworzymy ścieżkę katalogów override/contollers/front/. W przypadku istnienia pliku otwieramy go do edycji. Jeżeli w katalogu nie ma pliku ContactController.php to go dodajemy poprzez dopisanie poniższego kodu:

<?php

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

wartość $googleMapsApiKey należy zastąpić własnym kluczem map Googla, który możemy zdobyć przechodząc instrukcję dostępną tutaj: https://developers.google.com/maps/documentation/javascript/adding-a-google-map#key. Należy również zmienić nazwę TWÓJ_SZABLON na nazwę katalogu, w którym znajduje się szablon, w którym ma być wyświetlana mapka.

W przypadku kiedy plik ContactController.php już istnieje należy dodać do niego linie odpowiadające za dodanie kodu javascript i zmienną googleMapsApiKey. W tym przypadku w metodzie 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/TWÓJ_SZABLON/assets/js/google-map-contact.js',
           ['server' => 'remote', 'position' => 'head', 'priority' => 999]
        );   

Dodatkowe informacje dotyczące dodawania plików js i css w sklepie PrestaShop w wersji 1.7+ można znaleźć pod adresem: https://developers.prestashop.com/themes/assets/index.html.

Na koniec należy jeszcze wyczyścić pliki cache. W panelu administracyjnym w zakładce Zaawansowane->wydajność należy kliknąć przycisk Wyczyść pamięć podręczną. Wchodzimy na stronę kontaktu, na której powinien widnieć już formularz kontaktowy, taki jak na poniższym obrazku.