Intégration du service Picto Whitelab dans un site WordPress

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.

new_page

 

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.

Preview

 

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

Sans Authentification Whitelab

Exemple de page alors que vous êtes authentifiés sur le site whitelab.picto.fr

 

Avec Authentification Whitelab

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=”https://www.cbphoto.fr/wordpress/wp-content/uploads/2012/01/img_21.jpg” alt=”” width=”400″ height=”250″ /></a>

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.

  • Pingback : WhiteLab

  • Bonjour,

    Je suis intéressé par le module White Lab de Picto afin de l'intégrer à mon site web et vendre mes photographies en ligne.
    Il se trouve que j'ai crée mon site web moi-même avec le logiciel iweb de Mac, mes compétences informatiques étant limitées, ce logiciel prêt à l'emploi me convient très bien.
    Mon site est désormais en ligne et quoique relativement simple, il est tout à fait adapté à l'usage que je souhaite en faire.
    Ce qui me manque à présent c'est la possibilité de vendre mes tirages en ligne et White Lab semble être tout à fait approprié sauf que je ne sais pas si son intégration est possible, et si oui, comment ça se passe !
    J'ai contacté Picto, qui me dit ne pas savoir ou bien que ce n'est pas possible mais qu'ils n'en sont pas certain.
    Peut-être pourrez vous m'éclairer sur ce sujet, vous semblez avoir de bien meilleurs connaissances en informatiques que j'en ai moi-même. J'espère juste que vous êtes familier avec le logiciel iweb.
    Merci pour votre réponse.
    Cordialement,

    Benjamin Cuevas

    • cbphoto said:

      Bonjour,

      Je ne connais malheureusement pas le logiciel IWEB.
      Cela dit il vous sera nécessaire de mettre les mains dans le code afin d'y ajouter ou de modifier les balises
      <head> </head>

      Par exemple, imaginons que votre page dans laquelle se trouve votre boutique s'appelle boutique.html.
      Et bien il suffira d'éditer le fichier manuellement et de vérifier si il existe une balise <head> </head>. Si c'est est le cas, entre les deux balises il suffira d'ajouter l'adresse du CSS et du javascript WhiteLAB.

      Ainsi vous aurez quelque chose comme cela:

      <head>

      <link rel="stylesheet" href="http://whitelab.picto.fr/css/module.css">
      <script src="https://whitelab.picto.fr/module/5c2cc1cae8184a1732d8f5e00ffc98f16cf4034e/script.js"></script>


      </head>


      Il se peut qu'il y'est d'autres lignes de code dans la balise head. Si tel est le cas, insérez ces deux lignes tout en haut, juste en dessus du premier <head>

      Voilà en gros comment cela devrait marcher... Mais je ne puis vous le confirmer.
      J'espère que cela pourra vous aider.

      Bonne continuation pour la suite.

      Christophe

  • Merci Christophe pour cette réponse.
    J'ai envoyé le même message sur un forum d'aide pour utilisateurs iweb.
    J'attends désormais leurs conseils afin de savoir si cette intégration est possible, et s'il m'est autorisé sur iweb d'ajouter ou modifier ces fameuses balises !

    • cbphoto said:

      Comme je vous le disais, si IWEB ne l'autorise pas, vous devrez le faire en éditant les fichiers manuellement.
      Et la normalement, il n'y a pas de raison que cela ne marche pas :)

  • Bonjour Christophe, et merci pour ces infos!
    je m'intéresse à ce module, mais le tiens renvoie une erreur 404... as-tu des problèmes d'intégration du whitelab ?

    Bien à toi,
    Ludovic

    • cbphoto said:

      Bonjour Ludovic,

      Merci pour l'info !
      En effet je n'avais pas refait le test de la boutique suite à la mise à jour de mon thème.
      Le problème est maintenant résolu :)

      Encore merci !

  • Bonjour,

    Je ne comprends absolument rien à tous ces termes techniques et moi qui étais à deux doigts de m'inscrire afin d'installer sur mon site le module Boutique en ligne, j'en ressors assez refroidi !

    Je pensais que ce serait simple et que Picto gérerait le problème mais d'après ce que je lis là, pour le profane en informatique que je suis, ça m'a l'air une grosse galère !

    • cbphoto said:

      Bonjour,

      Malheureusement l'intégration de la boutique nécessite quelques connaissances techniques.
      Cela dit si vous suivez pas à pas mon tuto, vous devriez vous en sortir sans trop de problème.
      Sinon peut être vous faire aider par votre entourage ? Mais je peux comprendre votre désappointement...

      Bon courage.

      Christophe

  • Voilà un service (et un tuto) qui gagne à être connu. Je vais de ce pas entamer la procédure.

    Un grand merci à vous.

  • Bonsoir, me concernant ça ne fonctionne pas. J'utilise WP et quand j'insère la ligne de code sous le HEAD de la page haeder.php mon site s'affiche avec une page entièrement blanche. Je cherche une autre solution d'intégration avec WP mais je n'ai encore rien trouvé.

    • cbphoto said:

      Bonjour,

      Vérifiez bien que l'ID de la page est bien le bon.
      Il ne faut pas utiliser 922 qui est l'ID de mon exemple mais bien votre ID. Parfois certaines personnes se trompent.
      Après je sais qu'avec certains thèmes cela ne fonctionne pas...

      Cdt,

      Christophe

  • Oui c'est bien la bonne id de ma page, mais visiblement ça ne fonctionne pas avec mon thème. je vais donc créer une page php externe à wp à l'image de la charte graphique de mon site et cliquable depuis le menu de mon site.
    Merci pour la réactivité :)