Press "Enter" to skip to content

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

Admin 0

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 październik 2014). Jeśli jest to dla Ciebie jasne – pomiń tą instrukcję.

  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. następnie wchodzimy w sekcję APIs & auth => APIs
  4. filtrujemy wg frazy “maps”
  5. wybieramy opcję Google Maps JavaScript API v3
  6. włączamy to API i akceptujemy warunki usługi
  7. wchodzimy w opcję APIs & auth => Credentials
  8. w sekcji “Public API access” Tworzymy nowy klucz wybierając opcję “Browser Key”:PrestaShop Kraków
  9. wpisujemy wszystkie możliwe referery (strony z których będzie uruchamiana usługa Google Maps) z których będzie odpowiadał nasz sklep:PrestaShop Kraków

    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.

     

  10. Gotowe! Utworzyliśmy nasz klucz:PrestaShop Kraków

Jeśli już jesteśmy użytkownikiem Google Console i tego API – kolejne referery dodajemy pod spodem po kliknięciu w przycisk “Edit allowed referers”.

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
  5. Klikamy link “Konfiguruj” obok modułu.PrestaShop Kraków
  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.PrestaShop Kraków
  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
    2. Link “przemieszczanie modułu
    3. Łączymy moduł Google Maps z Hookiem ContactForm:PrestaShop Kraków
  9. Pozostaje nam w pliku
    /themes/[NAZWA-SKÓRKI]/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):

    {if $fileupload == 1}
    <p class="text">
    <label for="fileUpload">{l s='Attach File'}</label>
    <input type="hidden" name="MAX_FILE_SIZE" value="2000000" />
    <input type="file" name="fileUpload" id="fileUpload" />
    </p>
    {/if}
    <p class="textarea">
    <label for="message">{l s='Message'}</label>
    <textarea id="message" name="message" rows="15" cols="10">{if isset($message)}{$message|escape:'htmlall':'UTF-8'|stripslashes}{/if}</textarea>
    </p>
    <p class="submit">
    <input type="submit" name="submitMessage" id="submitMessage" value="{l s='Send'}" class="button_large" />
    </p>
    </fieldset>
    </form>
    {$HOOK_CONTACT_FORM}
    {/if}
    
  10. GOTOWE! Po tych zabiegach na stronie kontaktowej pojawi się mapa Google w wybranej lokalizacji.

POBIERZ DEMO

Share This:

Dodaj komentarz

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