Prestashop: detect mobile devices

Discover how to use Prestashop classes to detect the device used so you can display or not texts, images, additional functions correctly and effectively

In addition to using a responsive theme, which adapts depending on the size of the device used by the user, it can be useful to detect if the device is a smartphone, a tablet or a computer.

In a responsive theme, generally, we use the technique of not displaying certain portions of the page on some devices simply hiding them through some rules of stylesheets (css): this solution does not lighten the weight of the pages because the hidden code will be anyway present on the page and so loaded by the browser.

Instead, by detecting the device used, it may be possible to display or not texts, images, additional functions, etc. correctly and effectively.

Prestashop 1.7.x and Prestashop 1.6.1.x

These versions of Prestashop use already a class to detect the device used (/classes/Context.php), thanks to which, we can check directly in the .tpl files of our theme.

Detect a smartphone

{if Context::getContext()->isMobile() && !Context::getContext()->isTablet()}
  your content
{/if}

or

{if Context::getContext()->getDevice() == 4}
  il contenuto da far visualizzare
{/if}

Detect a tablet

{if Context::getContext()->isTablet()}
  your content
{/if}

or

{if Context::getContext()->getDevice() == 2}
  il contenuto da far visualizzare
{/if}

Detect a computer

{if !Context::getContext()->isMobile() && !Context::getContext()->isTablet()}
  your content
{/if}

or

{if Context::getContext()->getDevice() == 1}
  il contenuto da far visualizzare
{/if}

Prestashop 1.6

Detect a mobile devices

{if isset($mobile_device) && $mobile_device}
  your content
{/if}

Pros and cons

  • It is more effective than the solution of not displaying certain portions of the page on some devices simply by hiding them with some style sheet rules (css).
  • Some devices may not be detected correctly, so we suggest to make the largest possible number of checks.

We are curious to read your opinion!

Leave a Reply

Your email address will not be published. Required fields are marked *

Respect for your privacy is our priority

Our website uses technical cookies to run properly and third-party cookies to generate reports on the use of navigation (statistical cookies). Show the list of cookies and the purpose of use
We can use technical cookies by law, but you have the right to choose whether or not to enable statistical cookies.

By enabling these cookies, you help us to provide you with a better experience.