Hogyan lehetséges beazonosítani az oldalt éppen lekérő eszközt? Honnan tudható meg, hogy asztali számítógépen vagy esetleg mobilon történik a böngészés?
Az ok
Az alábbi problémába futottam bele: egy Prestashop Google Insights optimalizációja során a Mobil-nézet csak 44 pontot kapott a 100-ból, melynek fő okozója egy Slider volt (vagy Carousel; nagy képeket -“bannereket”- megjelenítő és magától váltogató modul).
Ez a Slider tökéletesen működött minden nézetben; azonban a Google Insights – az egyébként asztali számítógépre méretben tökéletesen optimalizált – Slider-t már mobil nézetben hibásnak vélte; hiszen ugyanazok a “nagy” képek jelentek meg itt is, ami már nem tetszett neki.
Piros keret jelzi a szóban (cikkben) forgó Slider modult
A modul készítői a reszponzivitást ebben az esetben egyszerű “width:100%“-os CSS-el oldották meg, ami így valóban tökéletesen lekövette a különböző eszközök képernyőméreteit. Viszont ennek hátránya (melyért az Insight kiabált), hogy minden eszközön ugyanazokat a képeket töltötte be.
Tehát ha az asztali nézetben egy adott kép-példát nézünk: az 1300 x 406 pixel és 500 kbyte-ot kitevő kép tökéletesen és szépen jelent meg. Azonban mobil nézetben ugyanezt töltötte be és ez már erősen szúrta a szemét a Google-nek, hiszen visszafogta a kezdeti főoldalbetöltést (főleg mobilnet esetén).
Semmi gond – gondoltam – ez a rész nem kell egyébként sem a mobilokra, hiszen felesleges. Egyszerűen kikapcsolom mobil nézet esetében és máris rendben lesz a Google-optimalizáció. A szóban forgó modul egy nagyon jó és végletekig beállítható “Leo Slider Layer for your Homepage” modul, melynek beállításában mégsem találtam erre vonatkozó ki- és bekapcsolási lehetőséget.
Ekkor ötlött fel először, hogy keresek egy olyan Smarty variable-t (változót) mely megmondja, milyen device-en (eszközön) történik az oldallekérés éppen. Rá kellett döbbenjek, hogy ilyen nem létezik (egyelőre) és a Prestashop sem ad semmiféle kézzel fogható eszközazonosító változót. Tervem az lett volna, hogy ezzel a változóval a birtokomban feltételhez kötöm a Slider betöltődését elérve ezzel azt, hogy az csak asztali számítógépeken jelenjen meg.
A megoldás
Hosszas keresgélés után találtam egy GitHub-ra feltöltött “Mobile-Detect” névre hallgató programcsomagot, melyet betömörítve letölthettek INNEN is. Ebben a csomagban olyan fájlok vannak melyeket beépítve a Prestashop-ba elérhetjük a kívánt célt.
Beépítés
Szükségünk lesz tehát a fenti betömörített fájlra, egy FrontController-re és arra a .tpl-re ahol a változót használni szeretnéd (minden módosított fájlról legyen mentés!).
FrontController lelőhelye 1.6 esetén: /classes/controller/FrontController.php
Nyissuk és keressük meg az alábbi sort: “public function init()“, a 108. körül lesz.
Utána illesszük be az alábbi kódrészletet:
require_once(_PS_TOOL_DIR_.'mobile_Detect/Mobile_Detect.php');
$this->mobile_detect = new Mobile_Detect();
$mobile_class = 'desktop';
if ($this->mobile_detect->isMobile()){
$mobile_class = 'mobile';
}
Így nézzen ki:
Majd ezek után keressük meg azt a helyet ahol a globális változókat deklarálja a motor:
“$this->context->smarty->assign(array(” => 332. sor körül lesz, majd illesszük be szépen a saját változónkat: ” ‘isMobile' => $mobile_class, ” valahogy így:
Ezek után mentsük el a fájlt, töltsük vissza majd csomagoljuk ki a letöltött és betömörített “Mobile-Detect-master.zip“-et. A kicsomagolt fájlokat a Prestashop gyökérkönyvtárába töltsük fel egy mappába, melyet “mobile_Detect“-nek nevezzünk el:
Ezek után már csak meg kell nyitnunk azt a .tpl fájlt, melyben a változót használni szeretnénk. Ez az Én esetemben a “/modules/leosliderlayer/leosliderlayer.tpl” lesz, mivel ez felel a Slider betöltődéséért.
A fent már említett “if” feltételes utasítással beépítem a már használható “$isMobile” változómat, mely “desktop” illetve “mobile” értékkel tér vissza attól függően, hogy asztali számítógép vagy mobil kérte-e le az oldalt:
Ha az oldalt mobil kérte le, akkor a Slider nem jelenik meg. És ezt már a Google Insights is szereti és azonnal felugrik 71 pontra a Mobilnézet. 🙂
Sikeres beépítést kívánok!
