Reszponzív Google-térkép

Ha esetleg ágyaztál már Prestashop-odon belül egy Google-térképet egy CMS oldalba (Kapcsolat-ba, Elérhetőség-be), akkor a tesztelések során kibukhatott, hogy az egyébként teljesen reszponzív oldaladon minden szépen idomul, csak épp a lényeg, a térkép nem:

Asztali verzió:

google_responsive_terkep

 

Majd a mobil verzió:
google_terkep_mobil

Tökéletesen látszik, hogy a beágyazott térkép nem képes követni a változást. Teljesen kilóg a képernyőből.

Megoldásként meg kell nyitni a használt témán belüli global.css-t, ami a weboldalunk főbb kinézetéért felelős (színek, elhelyezkedések) és görgessünk teljesen a fájl aljára. A global.css-t ezen az útvonalon találod meg, ha az alap sablont használod:

/themes/default-bootstrap/css/global.css

Ha nem alapot használsz, akkor természetesen a “default-bootstrap” helyére a témád neve kerüljön.

Az Én global.css-em alja (tehát a fájl vége) így néz ki:

prestashop_globalcss

A fájl utolsó kódja a 14.572. sorban található. Ez persze webáruházanként eltérő. Nyomjunk egy entert (hogy új sorba kerüljünk), és illesszük be az alábbi kódrészletet:

.google-maps {
position: relative;
padding-bottom: 75%;
height: 0;
overflow: hidden;
}
.google-maps iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}

Tehát így nézzen ki (nem baj, ha a formázása nem lett ilyen):

google_terkep_reszponziv_css

 

Ha kész, mentsük el és töltsük vissza a szerverre a global.css fájlunkat. 

Még kell egy lépés ahhoz, hogy ezt a kódot képes legyen hasznosítani a Google-térképünk. Menjünk be a Prestashop Admin felületébe, majd a Beállítások => CMS fület lekérve nyissuk meg azt az oldalt, ahová beágyaztuk a térképet. Az Én esetemben ez az “Elérhetőségeink” CMS lesz.

Miután megnyitottuk szerkesztésre, menjünk “HTML Forrás” nézetbe (az első kis ikonka lesz a szerkesztői felületen: htmlforras ), majd a forráskódban keressük meg a Google-térkép beágyazott részét. Az Enyém így néz ki (minden más Google beágyazott térkép is így néz ki, csak a változók értéke változik értelemszerűen):

htmlforraskod

Tehát egy “<iframe>”-s beágyazást kell keresnünk. Ha megtaláltuk, akkor a kezdő <iframe> elé, és a záró </iframe> után kell beillesztenünk az alábbi kódot:

<div class="google-maps">

… ide jön az iframe Google térkép …

</div>

Így nézzen ki:

htmlforras_google_terkep

 

Ha sikerült, mentsük el, és nézzük meg az eredményt:

Ismét a mobil verzió:

prestashop_google_responsive_terkep

Eladásra fel! 🙂

Ha segített a cikk, meghívhatsz egy kávéra! 🙂


Puizl Attila Programozó

Az íróról: Puizl Attila

Puizl Attila vagyok, több éve készítek sikeres Webáruházakat Prestashop rendszerrel. Célom hogy a tudásom minőséggé, munkám pedig eredményessé váljon.

Weboldal: → Prestashop Készítés és Fejlesztés

Még megtalálsz:

Sokak számára jelenthet problémát a Prestashop-beli "Rendelések" fül vásárlói névkijelzése, ugyanis alapból azok rövidített változatban jelennek meg:   Ezt a problémát csak fokozni szokta a Magyar nyelvben fordítottan használatos "firstname" - "lastname" sorrend használata. Gyakran emiatt azonosításra alkalmatlan keresztneveket látunk csak, mint "L. Károly", vagy "T. Eszter". Egy telefonos érdeklődés…
A Prestashop 1.5-ös és 1.6-os verziójában a "Vevőszolgálat" vagy "Ügyfélszolgálat" menüpont alatt lehetséges (tömegesen) kezelni a vásárlói üzeneteket: Prestashop Ügyfélszolgálat 1.6 esetén   Prestashop Vevőszolgálat 1.5 esetén Szemben az előző verziókkal, ahol is a vásárló és adminisztrátor közt lezajló kommunikációt magán a Rendelési…