Press "Enter" to skip to content

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

Admin 2

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

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

    na:
  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:

      Google Maps w Presta Shop
      Google Maps w Presta Shop
  9. Pozostaje nam w pliku

    w wybranym miejscu wstawić kod:

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

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

Google Maps w Presta Shop

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

    wystąpienie

    na
  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

Share This:

  1. Hello, is it possible to do it in presta 1,7,2,2 ?
    I am trying but cannot find
    W pliku
    controllers/front/ContactController.php
    1

    controllers/front/ContactController.php

    w metodzie (funkcji) initContent() – linia około 256 zamieniamy kod:
    $this->setTemplate(_PS_THEME_DIR_.’contact-form.tpl’);
    1

    $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’);
    1
    2

    $this->context->smarty->assign(array(‚HOOK_CONTACT_FORM’ => Module::hookExec(‚Contactform’)));
    $this->setTemplate(_PS_THEME_DIR_.’contact-form.tpl’);
    Przypisujemy moduł do odpowiedniego hooka:

    Moduły => Pozycje => Link “przemieszczanie modułu” (u góry panelu)
    Łączymy moduł Google Maps z Hookiem ContactForm:

    Google Maps w Presta Shop
    Google Maps w Presta Shop

    Pozostaje nam w pliku

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

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

    w wybranym miejscu wstawić kod:
    {$HOOK_CONTACT_FORM}
    1

    {$HOOK_CONTACT_FORM}

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

    {$HOOK_CONTACT_FORM}
    {/if}
    1
    2
    3
    4
    5
    6

    {$HOOK_CONTACT_FORM}
    {/if}

    • Admin Admin

      We’re sorry, the module hasn’t been tested on this version yet. Please be patient, we will soon check it on that platform and try to release the dedicated version for it.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *