Zen-Cart : adapter le template à l’équipement du visiteur
Zen-Cart est un outil open-source dérivé d’OS Commerce et qui permet l’exploitation de boutiques en ligne d’une manière à la fois simple et sophistiquée. Son système « d’overrides » et de templates permet notamment de modifier le code sans pour autant mettre en péril la mise en oeuvre des nouvelles versions, et d’adapter la présentation des informations à tout type de situation. Je l’utilise depuis 2005 sur plus de 20 boutiques actuellement opérationnelles avec beaucoup de satisfaction de la part de mes clients.
Depuis quelque temps, le nombre de visiteurs utilisant des plateformes mobiles grandit et il apparaît que la proportion PC / mobile risque de s’inverser rapidement. Or la présentation des pages conçues pour être visualisées sur un écran disposant d’une résolution égale ou supérieure à 1024 x 768 (90%+ des visites) n’est pas toujours adaptée à la navigation à partir d’un mobile. Dès lors il convient de mettre en place un mécanisme permettant à ces visiteurs (sur mes sites : actuellement 7% en forte progression) de bénéficier d’une navigation et d’une présentation adaptées afin que du statut de visiteur ils passent à celui de client.
Plusieurs approches sont possibles : un sous-domaine dédié, un jeu de feuilles de style spécifiques, la ré-écriture du site, … En ce qui me concerne, je prévois d’utiliser les possibilités offertes par Zen-Cart afin d’utiliser un template dédié à la plateforme du visiteur. Le mécanisme est simple : on détecte le type de plateforme utilisée et, en fonction de ce type, on utilise un template plutôt qu’un autre. Certains templates présenteront la totalité des informations, d’autre une version simplifiée mieux adaptée à un écran de petite taille.
Voici l’approche que j’ai proposée récemment sur le forum Zen-Cart :
Pour diriger un visiteur sur un template adapté à sa plateforme plutôt qu’un autre, il suffit de faire un override du programme init_templates.php.
Tout d’abord il faut s’assurer de disposer d’un accès au fichier browscap.ini. C’est un des paramètres de php.ini. Téléchargez le fichier browscap.ini (browsers.garykeith.com/downloads.asp) et placez le sur votre serveur. Modifiez la variable browscap = /emplacement/du/fichier/browscap.ini et redémarrez Apache. Vous disposez maintenant d’un certain nombre d’informations sur votre visiteur depuis vos programmes PHP.
Dupliquez le fichier init_templates.php de includes/init_includes vers includes/init_includes/overrides et ajoutez ces quelques lignes juste avant le commentaire « The actual template directory to use » :
/**
* BOF : SPECIFIC TEMPLATE FOR MOBILE CLIENT
*/
/**
* Determine if client is a mobile device or not ($mobile = 1 ==> it is | $mobile = 0 ==> it is not)
*/
$browser = get_browser($_SERVER['HTTP_USER_AGENT'], true);
$mobile = ($browser['ismobiledevice'] == null ? 0 : $browser['ismobiledevice']);
$platform = $browser['browser'];
/**
* Check if there is a specific template for this mobile platform and use it
*/
if ($mobile == 1)
{
$exists_mobile = file_exists(DIR_WS_TEMPLATES . $template_dir . '_mobile');
if ($exists_mobile)
{
$exists_platform = file_exists(DIR_WS_TEMPLATES . $template_dir . '_mobile_' . $platform);
if ($exists_platform)
{
$template_dir .= '_mobile_' . $platform;
}
else
{
$template_dir .= '_mobile';
}
}
else
{
// use regular template
}
}
/**
* EOF : SPECIFIC TEMPLATE FOR MOBILE CLIENT
*/
En utilisant les informations issues du browscap.ini, le programme détermine si le visiteur utilise ou non un mobile (si non : template habituel). Si oui, il vérifie qu’il existe un template spécifique pour sa plateforme et dans ce cas utilise ce template. Le cas échéant il utilise un template générique pour mobiles. Si rien n’existe il utilise le template habituel. Ainsi, si le template standard se nomme monTpl, le template générique pour les mobiles s’appellera monTpl_mobile et il est possible de prévoir des templates adaptés comme : monTpl_mobile_Android, monTpl_mobile_iPhone, … etc
Pour que tout fonctionne correctement, il conviendra également de dupliquer les répertoires de templates dans languages, modules, …
Enfin, il y a de nouvelles plateformes sur le marché presque tous les jours. N’oubliez pas de mettre à jour fréquemment votre browscap.ini.
