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.

Piros keret jelzi a szóban (cikkben) forgó Slider modult

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:

mobil_asztali_prestashop

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:

sajat_valtozo_prestashop

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:

mobile_Detect_prestashop

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:

isMobile_valtozo

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!

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:

Előfordulhat, hogy a Prestashop-unk által generált számla PDF-ben az ő - ű betűk helyett kérdőjelek jelennek meg. Ennek oka, hogy a PDF generátor által alapból használt betűtípusban nem léteznek az általunk használt ékezetes karakterek: Keressük meg a /classes/pdf/PDFGenerator.php fájlt, azon belül pedig a 42. sor körül a "$font_by_lang" tömböt:  …
Prestashop háza táján úgy gondolták, ember (és állat) központúbb megoldás brand-et cserélni, és a választás Preston-ra esett, a Lundára: Az alábbi blogbejegyzés szerint azért is választották Őt, mert a Lunda nagy populációban él, hasonlatosan a Prestashop közösséghez. A logóváltást és a Prestashop színösszeállítás-váltást az idei PrestaShop Day-en jelentették be, ahol sokan…