Il y’a quelques semaines de cela, je découvrais grace à JC Milhet, le nouveau service du laboratoire Picto: le service Whitelab. Pour rappel, Whitelab est un service permettant de vendre ligne des tirages photos directement à partir de son site Internet, en sous traitant l’impression et l’envoi des photos commandées au laboratoire Picto.
Point non négligeable, le service est totalement gratuit, et vous propose un espace de stockage de 500Mo ce qui à mon sens est largement suffisant pour commencer.
A travers ce poste je n’aborderai pas une présentation du service puisque JCM s’en est chargé avant moi 
Pour plus d’information sur le service en question je vous propose d’aller lire son article disponible sur le site Bistro-Photo.fr.
A travers ce bulletin nous allons aborder le point relatif à l’intégration du module de vente en ligne WhiteLab, dans WordPress. En effet de plus en plus de photographe n’ont pas forcément les compétences et l’expérience nécessaire pour développer un site dans son intégralité, et se tournent très souvent vers des CMS qui facilitent la création et la mise en ligne d’un site Internet. Le plus connu et sûrement même le plus utilisé de ces CMS étant WordPress.
Lorsque j’ai découvert ce nouveau service, ma première question à donc été : << Mais comment vais je intégrer ce service dans mon site WordPress ? >> L’intégration du service consistant à ajouter entre les entêtes <head></head> de la page, et ce avant n’importe quel autre appel javascript, les deux lignes suivantes fournies par Whitelab au moment de la validation de votre inscription:
<link rel=”stylesheet” href=”http://whitelab.picto.fr/css/module.css”>
<script src=”http://whitelab.picto.fr/module/8B2cc1cae8004a1732d8f5e99ffc98f16cf4034e/script.js”></script>
Oui mais voilà, sous WordPress le seul moyen d’ajouter ces deux lignes avant tout autre appelle javascript dans les champs <head></head> nécessite la modification des fichiers PHP WordPress directement en dur. Cela impliquant une autre chose…L’apparition du bandeau relatif à la boutique Whitelab sur l’ensemble de vos pages affichées par le CMS.
En cherchant un peu j’ai trouvé une solution simple permettant d’intégrer le module pour une page spécifique, et ce en m’appuyant sur l’ID de la page définie par WordPress au moment de l’ajout d’une nouvelle page.
La procédure qui suit à été réalisée sous WordPress 3.3.1 sur lequel j’ai appliqué le thème FUSION du site mysitemyway.com. Cette procédure est normalement applicable à l’ensemble des thèmes WordPress.
Premièrement nous commençons par créer une nouvelle page WordPress.
L’objectif maintenant que notre nouvelle page est crée, est de connaitre son ID. Si vous êtes comme moi et que vous utilisez une structure de lien de type POSTNAME, l’URL d’accès à votre page se compose du FQDN suivi du titre de la page (et parfois de la date de création). Pour obtenir l’ID de cette page, il suffit de cliquer sur le bouton Preview situé normalement en haut à droite de votre écran.
Nous constatons que l’URL indiquée dans le navigateur contient le paramètre page_id avec une valeur correspondant ici à 922, ce qui correspond à l’ID de la page que nous venons de créer. Nous allons utiliser maintenant cet ID pour activer le module Whitelab uniquement sur cette page.
Pour cela nous allons éditer le fichier header.php qui se trouve dans le répertoire relatif à votre thème installé. Pour ma part, utilisant le thème FUSION, le chemin d’accès au fichier correspond à celui-ci : wordpress/wp-content/themes/fusion/header.php.
A l’aide d’un éditeur de fichier, il suffit de localiser la balise <head> et d’ajouter juste en dessous les lignes suivantes:
<?php if ( is_page(922) ) { ?>
<link rel=”stylesheet” href=”http://whitelab.picto.fr/css/module.css”>
<script src=”http://whitelab.picto.fr/module/8B2cc1cae8004a1732d8f5e99ffc98f16cf4034e/script.js”></script>
<?php } ?>
Ainsi le script va s’exécuter au chargement de chaque page et vérifier que l’ID de la page correspond à la valeur 922. Si tel est le cas, le module Whitelab sera activé dans les entêtes de la page affichée.
Pour vérifier que cela fonctionne correctement il ne reste plus qu’a charger notre nouvelle page dans notre navigateur. Logiquement vous devriez voir apparaitre tout en haut de cette page un bandeau indiquant vos informations relatives à votre compte Whitelab. Tout dépend si vous êtes authentifiés ou non.
Exemple de page alors que vous n’êtes pas authentifiés sur le site whitelab.picto.fr
Exemple de page alors que vous êtes authentifiés sur le site whitelab.picto.fr
Il ne nous reste plus maintenant qu’à insérer dans notre page les images et les liens qui permettront de faire apparaître les informations relatives aux tirages proposés.
Le mieux pour cela est d’utiliser le mode de saisie HTML. Pour ma part, j’ai choisi de ne pas utiliser de bouton commander et de fonctionner par lien direct sur les photos mises en vente. Voici un exemple de code HTML que j’utilise dans ma page de boutique:
<a href=”http://whitelab.picto.fr/order/items/new/3885a0511f714b98b36d15095653b6fc”><img title=”" src=”http://www.cbphoto.fr/wordpress/wp-content/uploads/2012/01/img_21.jpg” alt=”" width=”400″ height=”250″ /></a>
Pour plus de visibilité sur l’intégration du service Whitelab je vous propose de vous rendre directement sur ma boutique.
J’espère ce que petit tutoriel vous apportera l’aide nécessaire à l’intégration du service Whitelab dans votre si WordPress et pour toute question ou information complémentaire n’hésitez pas à me laisser un message soit dans les champs dédiés à cet effet à la fin de cette article ou directement par mon formulaire de contact.
Derniers commentaires