Mobil vagy asztali számítógép?

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.

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!

Eladásra fel!