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