TUTO - Affichage différent selon Mobile, Tablette ou PC

[webconcept76]

Bonjour

 

Sur la version 1.6.1.1 j'ai rencontré des pb avec les ipad pro et ipad du à leurs grosses résolutions 

alors pour pallier au problème je devais réussir à détecter les tablettes via l’entête et non plus que via les media query

dans  /classes/controller/FrontController.php (ligne 428 environ) sous la ligne 

 $this->context->smarty->assign(array(
            // Useful for layout.tpl

'mobile_device'       => $this->context->getMobileDevice(),

ajouter

'tablet_device'       => $this->context->isTablet(),

ce qui donne 

 

     $this->context->smarty->assign(array(
            // Useful for layout.tpl
 'mobile_device'       => $this->context->getMobileDevice(),
 'tablet_device'       => $this->context->isTablet(),

Ensuite dans vos .tpl il vous suffit de conditionner de la manière suivante :

 

 {if isset($tablet_device) && $tablet_device} 
<!--  TABLETTE -->
{elseif isset($mobile_device) && $mobile_device}
<!--  MOBILE -->
{else} 
<!--  ORDINATEUR -->
</if>

Coupler avec ce module  http://addons.prestashop.com/fr/17310-menu-pour-mobile.html et quelques modifications on arrive à un résultat plutôt satisfaisant.

 

Démo sur le site d'une cliente : http://www.little-kids.fr

 

 (attention ne pas juste redimensionner la fenêtre sinon vous n'aurai que le comportement responsive sans la détection,  

Alors tester avec un mobile et une tablette )

 

Thomas

Edited September 21, 2016 by webconcept76 (see edit history)