Comment détecter l'affichage pour les mobiles dans les templates sur Prestashop

Lorsque l'on parle template et responsive on estime que c'est la solution ultime pour afficher convenablement son site sur tous les appareils possibles.

Sauf que dans certains cas, on peut être amené à totalement ignorer le traitement d'affichage d'un élément si celui-ci surcharge trop le code de la page généré ou si on estime que les moteurs de recherche risquent d'identifier un Duplicate Content.

Concernant les Media Queries et l'usage du responsive, je vous inviterais à vous documenter sur Internet, car le sujet est traité plusieurs fois et qu'il est très complet.

La plupart des templates PrestaShop s'appuient sur le framework Bootstrap pour la gestion du responsive, il faut donc vous familiariser avec l'usage des éléments proposés nativement par cette solution, là aussi je vous invite à vous référer aux différentes versions de la documentation en fonction de la version du framework embarqué dans votre template.

Il existe aussi une fonctionnalité native dans Prestashop qui vous permet d'identifier le type de support d'affichage utilisé et de définir un comportement assez précis pour afficher ou non tel ou tel élément.

Comme nous l'avons précédemment étudié, nous pouvons utiliser des méthodes appelées de manière static dans les Classes de Prestashop.

Nous allons donc nous appuyer la Classe : /classes/Context.php.

N'oubliez pas de vous référer aussi à l'usage des boucles Smarty.

PrestaShop 1.7

Détecter un smartphone

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

ou

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

Détecter une tablette

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

ou

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

Détecter un ordinateur

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

ou

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

PrestaShop 1.6

Détecter un appareil mobile

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

Conclusion

Ce mode de détection ne sera jamais parfait, je vous conseille donc de l'utiliser mais aussi d'intégrer les système responsive proposés par le framework de votre thème PrestaShop.