Comment détecter le type de périphérique en Smarty pour PrestaShop 1.7 dans un TPL ?

Lorsque vous développez le design d'une boutique, vous pouvez être amené à vouloir personnaliser l'affichage en fonction du support qui servira à la consulter, un téléphone mobile, une tablette ou un ordinateur.

PrestaShop intègre cette information facilement accessible pour justement vous éviter de devoir mettre en œuvre une solution tierce qui ne sera pas maintenue dans le temps.

Le moteur de template utilisé par PrestaShop est Smarty, et bien que de nombreux nouveaux arrivants le trouvent dépassé ou obsolète, c'est souvent parce qu'ils ne le connaissent pas et ont du mal à s'y former, comme avec toute nouvelle technologie. Le choix de PrestaShop de rester sur ce moteur de template permet une compatibilité entre les versions très intéressante.

Sans plus attendre, je vous dévoile le code simple à utiliser dans n'importe quel fichier TPL de votre thème ou module pour identifier rapidement le périphérique utilisé par les visiteurs de votre boutique.

{if Context::getContext()->isMobile() == 1}
    {if Context::getContext()->getDevice() != 2}
        // Tablette
    {else}
        // Téléphone mobile
    {/if}
{else}
    // Ordinateur
{/if}

Il existe d'autres alternatives, que je trouve moins pratique, mais plus lisible, comme par exemple.

{if Context::getContext()->isTablet()}
    // Tablette
{else if  Context::getContext()->isMobile()}
    // Téléphone mobile
{else}
    // Ordinateur
{/if}

Par contre, lors du développement d'un module, je vous conseillerais toujours de préférer effectuer ce genre de test en PHP plutôt que dans vos TPL Smarty, la performance sera meilleure.

Ainsi, il vous suffit de transmettre cette information dans une variable à votre template pour l'utiliser à votre guise.

De même, le choix de tester le type de périphérique plutôt que de passer par une personnalisation de type CSS avec les Media Query, peut se justifier dans le cadre d'amélioration des performances en empêchant le chargement de gros fichiers, surtout s'ils ne doivent pas s'afficher.

Et c'est là que l'on peut se demander si le choix de tout faire en responsive plutôt que d'avoir un thème adapté sur mobile est la meilleure solution.