Osadzenie w dziale kontakt mapy Google z działu „Nasze Sklepy”

Prezentowaliśmy już jak osadzać ten element w dziale kontakt. Za pomocą modułu naszego autorstwa:

https://pskrk.com/prestashop-1-5-darmowy-modul-google-maps-dla-prestashop-na-stronie-kontakt/

Jednak po niedawnych zmianach w usłudze Google Map ten sposób może niedziałać poprzez błąd:

REQUEST_DENIED - API keys with referer restrictions cannot be used with this API.

Najlepszym sposobem aby to obejść będzie wstawienie mapy Google, która jest w PrestaShop wbudowana.

1. Prawidłowe skonfigurowanie zakładki nasze sklepy.

Warunkiem koniecznym jest prawidłowe skonfigurowanie pokazywania się mapy w tej zakładce. Zostało to wnikliwie przez nas opisane w tym artykule:

https://pskrk.com/jak-prawidlowo-skonfigurowac-zakladke-nasze-sklepy-w-presta-shop/

Efektem działań powinna być mapka wyświetlana pod adresem:

http://www.adres-sklepu.pl/index.php?controller=stores

2. Przeniesienie kodu.

Dalsza konfiguracja polega na prawidłowym użyciu kodu z zakładki „Nasze sklepy” w zakładce „Kontakt”

Otwórz plik:

controllers/front/ContactController.php

W funkcji:

public function initContent()

Zamień kod:

$this->context->smarty->assign(array(
    'contacts' => Contact::getContacts($this->context->language->id),
    'message' => html_entity_decode(Tools::getValue('message')),
    'contactKey' => $contactKey
));

Na:

$this->context->smarty->assign(array(
    'contacts' => Contact::getContacts($this->context->language->id),
    'message' => html_entity_decode(Tools::getValue('message')),
    'contactKey' => $contactKey,
    'mediumSize' => Image::getSize(ImageType::getFormatedName('medium')),
    'defaultLat' => (float)Configuration::get('PS_STORES_CENTER_LAT'),
    'defaultLong' => (float)Configuration::get('PS_STORES_CENTER_LONG'),
));

(czyli dopisz 3 ostatnie klucze w tej tablicy: mediumSize, defaultLat, defaultLong)

UWAGA! Nie zapomnij postawić przecinka po ostatniej wartości klucza czyli w w/w przypadku po kodzie ’contactKey’ => $contactKey

W PHP przecinki oddzielają kolejne elementy tablicy i tak samo jest w tym przypadku.

Do funkcji:

public function setMedia()

(w tym samym pliku) dopisz poniższy kod:

$api_key = (Configuration::get('PS_API_KEY')) ? 'key=' . Configuration::get('PS_API_KEY') . '&' : '';
$default_country = new Country((int)Tools::getCountry());
$this->addJS('http'.((Configuration::get('PS_SSL_ENABLED') && Configuration::get('PS_SSL_ENABLED_EVERYWHERE')) ? 's' : '').'://maps.google.com/maps/api/js?'.$api_key.'region='.substr($default_country->iso_code, 0, 2));

Otwórz plik:

themes/{TWÓJ-SZABLON}/contact-form.tpl

Zamień kod:

</fieldset>
  </form>

Na:

</fieldset>
    <div id="map" style="height: 400px; width: 100%"></div>
  </form>

Lub po prostu umieść w dowolnym miejscu, gdzie chcesz DIV:

<div id="map" style="height: 400px; width: 100%"></div>

Jest to kontener trzymający mapę Google.

Następnie na końcu tego samego pliku umieść kod:

{addJsDef defaultLat=$defaultLat}
{addJsDef defaultLong=$defaultLong}

{literal}
<script type="text/javascript">
map = new google.maps.Map(document.getElementById('map'), {
    center: new google.maps.LatLng(defaultLat, defaultLong),
    zoom: 16,
    mapTypeId: 'roadmap',
    mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}
  });
  
var marker = new google.maps.Marker({
      position: new google.maps.LatLng(defaultLat, defaultLong),
      map: map
    });

</script>
{/literal}

Gotowe!

Uwaga, aby zmiany były widoczne konieczne jest przebudowanie cache. Można to zrobić poprzez usunięcie folderu /cache lub wymuszenie kompilacji. Więcej informacji na ten temat w artykule https://pskrk.com/prestashop-1-6-sposoby-na-przyspieszenie-sklepu/