Best way to detect Mobile device : Magento2
MagentoMagento2

Best way to detect Mobile device : Magento2

What is the Best Way to Detect Mobile Device in magento 2?

Here We will know, how to detect mobile device in Magento2 by simple code

Suppose You have to open a listview by default in Mobile screen, Then this will work for you, let’s get started.

We have default code in app\design\frontend\theme_name\Magento_Catalog\templates\product\list.phtml as we defined just below.


if ($block->getMode() == 'grid') {
        $viewMode = 'grid';
        $showDescription = false;
        $templateType = \Magento\Catalog\Block\Product\ReviewRendererInterface::SHORT_VIEW;
} else {
        $viewMode = 'list';
        $showDescription = true;
        $templateType = \Magento\Catalog\Block\Product\ReviewRendererInterface::FULL_VIEW;
    }

You just have to make a simple function in Block file to detect Mobile and have to call in list.phtml
I have added this function in app/code/Magiccart/Shopbrand/Block/Product/Listproduct.php

public function isMobile()
{
$regex_match = "/(nokia|iphone|android|motorola|^mot\-|softbank|foma|docomo|kddi|up\.browser|up\.link|" 
. "htc|dopod|blazer|netfront|helio|hosin|huawei|novarra|CoolPad|webos|techfaith|palmsource|" 
. "blackberry|alcatel|amoi|ktouch|nexian|samsung|^sam\-|s[cg]h|^lge|ericsson|philips|sagem|wellcom|bunjalloo|maui|" 
. "symbian|smartphone|mmp|midp|wap|phone|windows ce|iemobile|^spice|^bird|^zte\-|longcos|pantech|gionee|^sie\-|portalmmm|" 
. "jig\s browser|hiptop|^ucweb|^benq|haier|^lct|opera\s*mobi|opera\*mini|320x320|240x320|176x220" 
. ")/i";
if (preg_match($regex_match, strtolower($_SERVER['HTTP_USER_AGENT']))) { 
return TRUE; 
}
if ((strpos(strtolower($_SERVER['HTTP_ACCEPT']),'application/vnd.wap.xhtml+xml') > 0) or ((isset($_SERVER['HTTP_X_WAP_PROFILE']) or isset($_SERVER['HTTP_PROFILE'])))) { 
return TRUE; 
}
$mobile_ua = strtolower(substr($_SERVER['HTTP_USER_AGENT'], 0, 4)); 
$mobile_agents = array( 
'w3c ','acs-','alav','alca','amoi','audi','avan','benq','bird','blac', 
'blaz','brew','cell','cldc','cmd-','dang','doco','eric','hipt','inno', 
'ipaq','java','jigs','kddi','keji','leno','lg-c','lg-d','lg-g','lge-', 
'maui','maxo','midp','mits','mmef','mobi','mot-','moto','mwbp','nec-', 
'newt','noki','oper','palm','pana','pant','phil','play','port','prox', 
'qwap','sage','sams','sany','sch-','sec-','send','seri','sgh-','shar', 
'sie-','siem','smal','smar','sony','sph-','symb','t-mo','teli','tim-', 
'tosh','tsm-','upg1','upsi','vk-v','voda','wap-','wapa','wapi','wapp', 
'wapr','webc','winw','winw','xda ','xda-');
if (in_array($mobile_ua,$mobile_agents)) { 
return TRUE; 
}
if (isset($_SERVER['ALL_HTTP']) && strpos(strtolower($_SERVER['ALL_HTTP']),'OperaMini') > 0) { 
return TRUE; 
}
return FALSE;
}

Now later stage, You have to call this function and apply a simple condition to make it work in default list.phtml and this will look like below code.

$mobile = $block->getLayout()->createBlock('Magiccart\Shopbrand\Block\Product\ListProduct');
$detectMobile = $mobile->isMobile();
if($block->getMode() == 'grid') {
if($detectMobile == 1){
$viewMode = 'list';
$showDescription = true;
$templateType = \Magento\Catalog\Block\Product\ReviewRendererInterface::FULL_VIEW;
} else {
$viewMode = 'grid';
$showDescription = false;
$templateType = \Magento\Catalog\Block\Product\ReviewRendererInterface::SHORT_VIEW;
}
} else {
$viewMode = 'list';
$showDescription = true;
$templateType = \Magento\Catalog\Block\Product\ReviewRendererInterface::FULL_VIEW;
}

That’s how you can detect Mobile device in Magento 2.
I hope it helps you.

Leave a Reply