Mobile or Desktop state? - determining in your template

Determining your visitor’s device in Responsive Classic

Responsiveness - the ability to display properly on not just a desktop computer, but also mobile devices like phones and tablets - is a critical feature of modern templates.

Determining the kind of device being used can be done in different ways. How you do it will depend on the template you are running, and what tools are available with that template.

The responsive_classic template, as well as many other templates, builds in the Mobile_Detect library.

Use this to query the environment and react accordingly.

if (!class_exists('Mobile_Detect')) {
  include_once(DIR_WS_CLASSES . 'Mobile_Detect.php');
  $detect = new Mobile_Detect;
  $isMobile = $detect->isMobile();
  $isTablet = $detect->isTablet();

You likely already have a Mobile_Detect object built, so you can just do

global $detect; // If you're in a function
if ($detect->isMobile() || $detect->isTablet()) { 

You might also want to check $_SESSION['layoutType'] == 'mobile' in case that variable is set.

Another approach is the one used by Twitter Bootstrap. Bootstrap uses Javascript to determine the appropriate presentation for the device in use. Bootstrap proponents argue that bootstrap is faster to load and more well maintained than Mobile Detect. You can observe how this is done in the Zen Cart admin, which makes heavy use of Bootstrap.

Yet another approach is not to use any offsite scripting or mobile detection script at all. This school of responsive web design emphasizes using tables only for true spreadsheet style lists, and nesting DIV tags and CSS.

Still have questions? No problem! Just head over to the Zen Cart support forum and ask there in the appropriate subforum. In your post, please include your Zen Cart and PHP versions, and a link to your site.

Is there an error or omission on this page? Please post to General Questions on the support forum. Or, if you'd like to open a pull request, just review the guidelines and get started. You can even PR right here.
Last modified September 2, 2020 by Chris Brown (f2811b2).