[prestashop 1.5 – 1.6] darmowy moduł Google Maps dla PrestaShop na stronie Kontakt [Aktualizacja]

UWAGA! Z racji na zmiany w API Google Maps poniższy moduł może nie działać. Sprawdź nowy sposób na osadzenie mapki w dziale kontakt w sklepie PrestaShop za pomocą kodu ze strony „Nasze Sklepy” (która jest wbudowana w silnik PrestaShop).

Poniżej przedstawiamy jak umieścić w dziale kontakt mapę z Google.com. Ten darmowy moduł jest autorstwa firmy SmartProjects.pl Jego licencja pozwala na dowolną modyfikację, sprzedaż i kontrybucję – z zaznaczeniem pierwotnego autorstwa modułu. Koszty wyświetlania mapy Google Maps są obarczone limitami dziennymi i wynoszą na ten moment 25 000 wywołań na dzień (dla tego rozwiązania).

Na początku przybliżmy pozyskiwanie klucza do map z Google Maps. Jest on przypisany dla danej domeny (instrukcja stan na listopad 2017). Jeśli jest to dla Ciebie jasne – pomiń tą instrukcję. Interface może być też zmienony do tego czasu, więc musisz poeksperymentować.

1. wchodzimy na stronę przyznawania kluczy Google Maps:  https://console.developers.google.com
2. jeśli jeszcze tam nie byliśmy klikamy “Create Project” i wypełniamy wymagane dane. Następnie czekamy na zapisanie projektu.
3. w wyszukiwarce filtrujemy wg frazy “maps” i wybieramy Google Maps JavaScript API
4. włączamy to API i przypisujemy do projektu (akceptujemy przy tym warunki usługi)
5. wchodzimy w opcję Dane logowania (Credentials)
   
6. w sekcji “Public API access” Tworzymy nowy klucz poprzez opcję „Utwórz dane logowania” -> Klucz API
7. edytujemy nasz klucz i zaznaczamy: Ograniczenia aplikacji -> Odsyłające adresy HTTP (witryny)dodajemy 2 wpisy:www.adresmojegosklepu.pl
   www.adresmojegosklepu.pl/*(dodanie następnego wpisu następuje przez wciśnięcie TAB)

   Uwaga! strona z “www.”i bez są przez Google.com traktowane jako 2 odrębne strony. Najlepiej upewnijmy się że wprowadziliśmy tam prawidłowy adres www naszego sklepu.

8. Gotowe! Utworzyliśmy nasz klucz. Musimy skopiować jego wartość postaci:   AIzaSyDKmXXXXXXXXXXXXXX4Ism-Y1CX1rb4w

Danego klucza możemy używać też do innych domen, nie tylko dla tej jednej. Dodajemy je przez dopisanie jak w pkt. 7) powyżej.

OK mamy już klucz Google Maps przypisany do naszej domeny. Teraz musimy zczyścić cache i historię przeglądania naszej przeglądarki www. I odczekać ok. 10-15 min do czasu propagacji (rozprzestrzenienia w sieci Google.com) naszych refererów.

 Instalujemy moduł w PrestaShop:

 Pobieramy go stąd: http://sourceforge.net/projects/googlemapsprestashopmodule/

1. Wchodzimy w dział “Moduły”
2. Klikamy “Dodaj nowy moduł”
3. Wskazujemy archiwum ZIP z dysku
4. Klikamy “Instaluj” przy module który dodaliśmy (jeśli pojawi się komunikat o nieprawidłowym zainstalowaniu moduł u – zignorujmy go)
5. Klikamy link “Konfiguruj” obok modułu.
6. Pojawiają się 3 pola – wypełniamy je:
   1. Pierwsze to adres. Musi to być adres jednoznacznie znajdowany na http://maps.google.com Na początek sugerujemy wkleić tam samą nazwę miejscowości. Jak już mapa będzie działać – zawężymy poszukiwania.
   2. Drugie to nasz API Key wygenerowany powyżej. Wklejamy go usuwając białe znaki (spacje) na końcu i początku kodu – jeśli się też skopiowały
   3. Trzecie pole to powiększenie:
      
7. W pliku

   controllers/front/ContactController.php

   w metodzie (funkcji) initContent()  – linia około 256 zamieniamy kod:

   $this->setTemplate(_PS_THEME_DIR_.'contact-form.tpl');

   na:

   $this->context->smarty->assign(array('HOOK_CONTACT_FORM' => Module::hookExec('Contactform')));
   $this->setTemplate(_PS_THEME_DIR_.'contact-form.tpl');

8. Przypisujemy moduł do odpowiedniego hooka:
   1. Moduły => Pozycje => Link „przemieszczanie modułu” (u góry panelu)
   2. Łączymy moduł Google Maps z Hookiem ContactForm:

      

9. Pozostaje nam w pliku

   /themes/[NAZWA-SZALBONU]/contact-form.tpl

   w wybranym miejscu wstawić kod:

   {$HOOK_CONTACT_FORM}

   w którym będzie prezentowana mapa. Wpisujemy zmienną Smarty (w naszym przypadku pod formularzem kontaktowym):

   </button>
   </div>
   </fieldset>
   </form>
   {$HOOK_CONTACT_FORM}
   {/if}

10. GOTOWE! Po tych zabiegach na stronie kontaktowej pojawi się mapa Google w wybranej lokalizacji.

Możliwe błędy

1. Mapa się nie wyświetla:
   -> Odśwież pamięć podręczną lub wyłącz tymczasowo kompilację szablonu (Zaawansowane -> wydajność) i cache sklepu. Opisywaliśmy to wielokrotnie na blogu np w tych artykułach
2. Mimo pkt. 1 mapa nadal się nie wyświetla:
   -> Jeśli Twój sklep działa pod adresem z włączonym certyfikatem SSL zamień w pliku

   /modules/googlemaps/googlemaps_head.tpl

   wystąpienie

   src="https://maps.googleapis.com

   na

   src="https://maps.googleapis.com

3. Lokalizacja na mapie nieznacznie się różni od lokalizacji:
   -> Niestety ten moduł działa jedynie w oparciu o koordynaty pozyskane z zadanego adresu. Należało by go odp. przeprogramować aby działał na podstawie sztywno zdeklarowanej długości i szerokości geograficznej
4. Moduł nie chce się zainstalować gdy wskazuję plik ZIP z komputera:
   -> Manualnie wgraj folder googlemaps z pliku ZIP do lokalizacji /modules na Twoim sklepie poprzez FTP