How to detect the display for mobiles in templates on Prestashop

When we talk about template and responsive we believe that it is the ultimate solution to display your site properly on all possible devices.

Except that in some cases, we can be led to completely ignore the display treatment of an element if it overloads too much the code of the generated page or if we believe that search engines risk to identify a Duplicate Content.

Concerning Media Queries and the use of responsive, I would invite you to read on the Internet, because the subject is covered several times and it is very complete.

Most PrestaShop templates are based on the Bootstrap framework for the management of the responsive, so you need to familiarize yourself with the use of the elements offered natively by this solution, here again I invite you to refer to the different versions of the documentation depending on the version of the framework embedded in your template.

There is also a native feature in Prestashop that allows you to identify the type of display media used and define a fairly precise behavior to display or not such or such element.

As we have previously studied, we can use statically called methods in Prestashop classes.

We will therefore rely on the Class: /classes/Context.php.

Don't forget to also refer to the use of Smarty loops.

PrestaShop 1.7

Detect a smartphone

{if Context::getContext()->isMobile() && !Context::getContext()->isTablet()}
  votre contenu
{/if}

or

{if Context::getContext()->getDevice() == 4}
  votre contenu
{/if}

Detect a tablet

{if Context::getContext()->isTablet()}
  votre contenu
{/if}

or

{if Context::getContext()->getDevice() == 2}
  votre contenu
{/if}

Detect a computer

{if !Context::getContext()->isMobile() && !Context::getContext()->isTablet()}
  votre contenu
{/if}

or

{if Context::getContext()->getDevice() == 1}
  votre contenu
{/if}

PrestaShop 1.6

Detect a mobile device

{if isset($mobile_device) && $mobile_device}
  votre contenu
{/if}

Conclusion

This detection mode will never be perfect, so I advise you to use it but also to integrate the responsive system proposed by the framework of your PrestaShop theme.