Étiquette : theme

Bonjour à tous,

Aujourd’hui je vais essayer de vous donner quelques astuces afin d’adapter votre template pour un rendu sur terminal mobile de type Iphone, Ipad, Android…

Il existe un moyen très simple dans magento de choisir un thème en fonction que certains paramètres comme le “User Agent” (ou signature) de votre navigateur. En effet que vous naviguiez sous windows, mac ou OS mobile, les signatures de navigateur ne sont pas les mêmes.

Dans la partie admin de magento, on peut créer des exceptions pour les signatures des terminaux mobile. J’ai trouvé sur différents sites la liste de ces signatures.

Nous allons donc créer des exceptions pour le design de départ afin de charger un nouveau thème si nous chargeons le site a partir d’un terminal mobile.

Pour cela, rendez-vous dans la partie admin de votre Magento, dans SYSTEM->CONFIGURATION->DESIGN

Une fois sur cette page, vous avez acces aux themes de votre site Magento. Par default, il se peut que vous n’ayez rien a cet endroit cela veut dire que vous utilisez le theme par default de magento. Sinon vous devez avoir le nom de votre theme dans le champs : Nom de l’interface

Pour ajouter une exception pour les mobiles, il suffit de cliquer sur “Ajouter une exception”. L’expression correspondante a notre exception est la suivante

iPhone|iPod|BlackBerry|Palm|Googlebot-Mobile|Mobile|mobile|mobi|Windows Mobile|Safari Mobile|Android|Opera Mini

Cela correspond a la signature de la plupart des terminaux mobile actuels. Dans le champs “Valeur”, nous allons spécifier le nom du thème que nous allons créer. Par ex : “mobile”.

Dans l’arborescence des répertoires, vous mettrez “mobile” au même niveau que votre thème magento. Ce thème sera chargé chaque fois que magento détectera une des signatures présente dans la liste. Ce qui vous évite de devoir le faire en javascript par exemple.

Vous trouverez quelques thèmes mobiles gratuits sur la toile dont celui de INCHOO : imobile

A vous de faire votre choix ou de développer votre propre thème. Il existe des librairies comme Jquery Mobile qui permettent de facilement créer un template mobile a partir de certaines balises HTML.

L’équipe Infinitic travaille actuellement sur un thème mobile pour un client. Nous reviendrons vers vous pour vous donner des trucs et astuces une fois que le projet sera terminé.