Prestashop: rilevare i dispositivi mobili

Oltre ad utilizzare un tema responsive, che si adatti a seconda delle dimensioni del dispositivo utilizzato dall’utente, a volte può essere utile rilevare se il dispositivo sia uno smartphone, un tablet, un computer.

In un tema responsive, generalmente, si utilizza la tecnica del non visualizzare alcune porzioni della pagina su alcuni dispositivi semplicemente nascondendoli tramite alcune regole dei fogli di stili (css): questa soluzione però non alleggerisce il peso delle pagine in quanto il codice nascosto sarà comunque presente nella pagina e quindi caricato dal browser.

Rilevando invece il dispositivo utilizzato, potrà essere possibile richiamare o meno testi, immagini, video, funzionalità aggiuntive, ecc. in maniera corretta ed efficace.

Prestashop 1.7.x e Prestashop 1.6.1.x

Queste versioni di Prestashop utilizzano nativamente una classe apposita per rilevare il dispositivo utilizzato (/classes/Context.php), grazie alla quale, possiamo effettuare la verifica direttamente nei file .tpl del nostro tema.

Rilevare uno smartphone

{if Context::getContext()->isMobile() && !Context::getContext()->isTablet()}
  il contenuto da far visualizzare
{/if}

oppure

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

Rilevare un tablet

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

oppure

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

Rilevare un computer

{if !Context::getContext()->isMobile() && !Context::getContext()->isTablet()}
  il contenuto da far visualizzare
{/if}

oppure

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

Prestashop 1.6

Rilevare un dispositivo mobile

{if isset($mobile_device) && $mobile_device}
  il contenuto da far visualizzare
{/if}

Pro e Contro

• È più efficace rispetto alla soluzione di non visualizzare alcune porzioni della pagina su alcuni dispositivi semplicemente nascondendoli tramite alcune regole dei fogli di stili (css).
• Alcuni dispositivi potrebbero non essere rilevati correttamente per cui suggeriamo di effettuare il maggior numero possibile di verifiche.