Installation du catalogue interactif

Transcription

1 Installation du catalogue interactif SARL au capital de uro RCS Roubaix-Tourcoing SIRET : APE : 721Z 134 rue de la Chocolaterie Marcq en Baroeul Tél : +33 (0) Fax : +33 (0) contact@prestimedia.com -

2 SOMMAIRE 1 PRESENTATION DES FICHIERS LA PAGE «INDEX.HTM» LA PAGE «APPLI.HTM» LE FICHIER «V308.SWF» LE FICHIER «XML.MAIN.XML» LE DOSSIER «RES» LE DOSSIER «DATA» LE DOSSIER «MAIL» INSTALLATION SUR UN SERVEUR TEST - SECURITE FAIRE UN LIEN <A HREF='...'> INTEGRATION DU MINIBOOK CUSTOMISEZ L'OUVERTURE DE VOS FICHES PRODUIT ADAPTER LA FONCTION D'ENVOI A UN AMI Installation du catalogue interactif e.print Page 2 sur 11

3 1 Présentation des fichiers Le catalogue interactif e.print est une application web développée avec la technologie flash. L'installation de cette application sur votre site web ne demande aucunement de préparation spécifique de votre server (sauf pour le cas particulier de l'option d'envoi à un ami), ni les compétences d'un développeur pour sa mise en place. Cette application constituée de page html statiques. Prestimedia vous a fourni un lien vous permet de télécharger votre catalogue e.print. Cliquez sur ce lien et enregistrez le fichier sur votre disque local. Décompactez le zip et installez le sur votre server dans le dossier spécifique que vous avez choisi pour l'installation de votre catalogue e.print. Nous appellerons dans ce présent doc ce dossier le CATALOG_PATH. Voici le contenu du dossier de votre catalogue : 1.1 La page «index.htm» Cette page permet de tester votre catalogue interactif. Le code source de cette page vous servira d'exemple pour l'intégration dans votre page html ou apparaitra le lien sur le catalogue pour le charger. Ne faites pointer en aucun cas un lien sur cette page, l'effet serait de passer par une page intermédiaire à l'ouverture du catalogue e.print. Nous reviendrons plus tard sur le code source de cette page à intégrer sur votre page html (par exemple la home page de votre site). Néanmoins, ne supprimez, ne renommez ou ne modifiez pas cette page, car elle va servir pour l'option mail d'envoi à un ami. Installation du catalogue interactif e.print Page 3 sur 11

4 1.2 La page «appli.htm» C'est la page qui charge l'animation flash du catalogue e.print. Elle contient le code qui permet de faire le lien entre le catalogue et votre fiche produit. Elle vous est fournie fonctionnelle, mais il est possible que vous ayez à modifier le code HTML/javascript de la fonction «openarticle(param)» en fonction de spécificités de votre site (par exemple un site développé avec des frames, ou encore un ID de session a faire passer dans l'url, si votre site ne gère pas les cookies de session). Il vous est possible de customiser cette page (et uniquement cette page), vous pourrait alors la retourner à prestimedia qui vous fournira les futures versions de catalogue avec l'intégration de vos modifications. Le renommage de cette page n'est pas autorisé sous risque encore de bloquer certaines fonctionnalités de votre catalogue. Si vous êtes amené néanmoins à le faire, veuillez en discuter avec prestimedia avant toute intervention. 1.3 Le fichier «V308.swf» C est le moteur standardisé du catalogue e.print. Ce moteur sera appelé à évoluer avec le temps (ici version 3.08) pour y apporter de nouvelles fonctionnalités. Prestimedia ne compile pas de versions spécifiques du catalogue e.print sous demandes spécifiques de client, car une unique version standard est maintenue est évolutive. Néanmoins, l'intégration de nouvelles fonctionnalité sont généralement apportés dans le catalogue, son l'impulsion de demandes spécifiques client. 1.4 Le fichier «xml.main.xml» C est le fichier de configuration du moteur. Il n'est pas permis de modifier ce fichier. 1.5 Le dossier «res» Ce dossier contient les éléments de la charte graphique de votre catalogue. Ce dossier ainsi que les fichiers contenus ne doivent pas êtres modifiés. 1.6 Le dossier «data» Ce dossier contient les pages de votre catalogue. Ce dossier, ainsi que les fichiers contenus ne doivent pas être modifiés. Installation du catalogue interactif e.print Page 4 sur 11

5 1.7 Le dossier «mail» si vous avez opté pour l'option d'envoi à un ami, ce dossier vous sera fourni. Cette partie est développé en technologie PHP et si votre site est écrit dans cette technologie, votre développeur WEB ou votre agence, saura adapter ces pages très facilement afin de faire fonctionne cette fonction sur votre site (Prestimedia ne possède pas toutes les informations nécessaire permettant de développer cette partie dans son ensemble). Si vous faites des modifications sur cette partie et si vous désirez que prestimedia vous fournissent vos prochains catalogues directement avec vos modifications, envoyez ce dossier à Prestimedia, et vous n'aurez plus à vous occuper de cette section pour les prochains catalogues. Installation du catalogue interactif e.print Page 5 sur 11

6 2 Installation sur un serveur test - Sécurité Le catalogue interactif e.print, pour des raisons de sécurité, dispose d une sécurité sous la forme d une clé. Dans cette clé, nous avons codé les différents éléments liés aux différents noms de domaines de vos sites internet en ligne. Sur un serveur test ou en local sur votre PC, le catalogue ne marchera que si vous l installez dans un répertoire se nommant d un des ces mots-clés ou se nommant «eprint» ou «prestimedia» qui font partie des clés par défaut. Par exemple, sur un serveur test, le lien de votre catalogue sera : ou ou Si cela n est pas respecté, votre catalogue se bloquera à l ouverture et le message d erreur cidessous apparaîtra : Si vous souhaitez diffuser vos catalogues sur des nouveaux noms de domaine, prévenez-nous afin que l on puisse ajouter ces nouveaux mots-clés. Installation du catalogue interactif e.print Page 6 sur 11

7 3 Faire un lien <A href='...'> Le catalogue interactif e.print s'ouvre dans une fenêtre javascript. Le code javascript permettant d'ouvrir se type de fenêtre est assez répandu et facile à trouver. Néanmoins, il est important d'ouvrir le catalogue interactif à l'aide du code sources expliqué ce dessous ; il permettra d'avoir un catalogue 100% fonctionnel. Considérons que votre page html devant intégrer le lien sur le catalogue se trouve sur le home page. L'url de cette page serait alors du type : (l'extension est en fonction de la technologie de votre site mais cela reste le même). Vous avez décompacté le catalogue dans un dossier spécifique, par exemple La page appli.htm et index.htm se trouvent dans le dossier /e.print/catalogue1/ à partir de la racine du site Vous désirez avoir un lien simple sur votre home avec le texte suivant : Ouvrir le catalogue : Voici donc le code sources qu'il faut intégrer sur votre site : <script language="javascript1.1" type="text/javascript" src="/e.print/catalogue1/res/appli.js"></script> <a href="javascript:launch_catalogue('/e.print/catalogue1/appli.htm');">ouvrir le catalogue</a> La ligne 1 permet de charger une librairie de fonction javascript appli.js, stockée dans le dossier res du catalogue e.print. Cette librairie permet de fabriquer la fenêtre javascript à la bonne dimension pour votre catalogue. Elle a aussi d autres fonctions importantes pour le bon fonctionnement du catalogue. Nous vous demandons donc de ne pas modifier cette librairie, et Prestimedia ne pourra pas prendre en charge vos modifications dans d'autres catalogues. La ligne 2 est le lien par lui même ; il utilise le fonction javascript launch_catalogue(path) contenu dans la librairie appli.js Pour terminer, il apparaît 2 fois en rouge le PATH que vous devez changer en fonction de l'emplacement réel de votre catalogue. Dans notre exemple, nous avions choisi /e.print/catalogue1/appli.htm à partir de la racine du site. Installation du catalogue interactif e.print Page 7 sur 11

8 4 Intégration du minibook. Avec le catalogue e.print vous est fourni systématiquement un minibook, que vous pourrez placer sur votre site afin de donnez un lien plus visible sur votre catalogue e.print. Ce minibook est aussi facile à implémenter qu'un lien simple. Nous partons du fait que le path reste le même, soit /e.print/catalogue1/ Les fichiers du minibook dans le catalogue e.print sont : minibook.swf minibook.xml Ces fichiers doivent rester dans le catalogue pour obtenir un minibook fonctionnel, et ne doivent pas être modifié. Voici donc l'exemple de code : <script language="javascript1.1" type="text/javascript" src="/e.print/catalogue1/res/appli.js"></script> <script language="javascript1.1" type="text/javascript"> function HandleMiniBook(param) { launch_catalogue('/e.print/catalogue1/appli.htm'); </script> <OBJECT classid="clsid:d27cdb6e-ae6d-11cf-96b " codebase=" rsion=6,0,0,0" WIDTH="200" HEIGHT="150" id="minibook" ALIGN=""> <PARAM NAME=movie VALUE="/e.print/catalogue1/minibook.swf?kta=/e.print/catalogue1/"> <PARAM NAME=menu VALUE=false> <PARAM NAME=quality VALUE=high> <PARAM NAME=bgcolor VALUE=#FFFFFF> <EMBED src="/e.print/catalogue1/minibook.swf?kta=/e.print/catalogue1/" menu=false quality=high bgcolor=#ffffff WIDTH="200" HEIGHT="150" NAME="minibook" ALIGN="" TYPE="application/x-shockwave-flash" PLUGINSPAGE=" SRC="data/0000v.jpg"></EMBED> </OBJECT> On voit à nouveau l'intervention de la librairie appli.js en 1ère ligne Vous voyez en rouge tous les path que vous devez modifiez pour rendre ce minibook 100% fonctionnel. Installation du catalogue interactif e.print Page 8 sur 11

9 5 Customisez l'ouverture de vos fiches produit Si vous avez demandez un catalogue interactif avec des maps permettant de faire des liens sur vos fiches produits, Prestimedia vous a fourni un catalogue qui ouvrira une fenêtre à chaque clic sur un lien. C'est la fonction openarticle(param) dans le fichier appli.htm qui gère cet ouverture de fenêtre. En voici le code standard fourni par Prestimedia : <script language="javascript1.1" type="text/javascript" src="res/appli.js"></script> <script language="javascript"> <!-- FONCTIONS CLIENTS --> var URLBASE=" var WindowStyle="width=800,height=600,resizable=1,scrollbars=1,menubar=1,toolbar=1,s tatus=1,location=1,left=0,top=0"; function openarticle(params){ //client's choice : //1 - la fiche produit s'ouvre dans le opener(le domain du site doit etre identique au domain du kta) //1 - product description page opens in the page that has opened the kta window (the site's domain has to be the same as the kta domain) //0 - defaut (la fiche produit s'ouvre dans une nouvelle fenetre chaque fois) //0 - default (the product description page opens in a new window every time) var clientchoice=0; FinalUrl=URLBASE+params; if(params.indexof("http")>=0) FinalUrl=params; if(clientchoice==0){ opennewwin(finalurl,windowstyle); resizeandmove('0'); else if(clientchoice==1){ if(!verifydomain(finalurl)){ opennewwin(finalurl,windowstyle); resizeandmove('0'); else{ if(navigator.appname.indexof("microsoft")>=0){ if (!opener.closed) { opener.location=finalurl; resizeandmove('1'); window.opener.focus(); else if(opener.closed){ opennewwin(finalurl,windowstyle); resizeandmove('0'); else if(navigator.appname.indexof("netscape")>=0){ if (window.opener) { opener.location=finalurl; resizeandmove('1'); window.opener.focus(); Installation du catalogue interactif e.print Page 9 sur 11

10 </script> else if(!window.opener){ opennewwin(finalurl,windowstyle); resizeandmove('0'); Chaque clic sur le catalogue e.print appelle la fonction openarticle(param) en passant comme paramètre l'id du produit cliqué. En voici le cheminement : FinalUrl=URLBASE+param; FinalUrl devient l'url complète de la fiche produit, en concaténant la BASEURL et l'id du produit passé en argument if(params.indexof("http")>=0) FinalUrl=params; Si le param contient http, alors il ne faut pas ajouter l'urlbase (cela permet dans le catalogue de faire des liens sur d'autres pages du site qui ne correspondent pas aux fiches produit) opennewwin(finalurl,windowstyle);resizeandmove('0'); Il va faire appel à la fonction opennewwin() pour ouvrir un fenêtre avec votre fiche produit. Ensuite il appelle resizeandmove('0') pour déplacer la fenêtre du catalogue en haut à droite, et celle de la fiche produit en haut à gauche, afin de profiter au maximum de l'écran. Vous avez la possibilité de customisez ces fontions dans le appli.htm et uniquement dans ce fichier. Vous pourrez retourner cet appli.htm modifié à Prestimedia, afin qu il l intégre dans vos prochains catalogues. //client's choice : //1 - la fiche produit s'ouvre dans le opener(le domain du site doit etre identique au domain du kta) //1 - product description page opens in the page that has opened the kta window (the site's domain has to be the same as the kta domain) //0 - defaut (la fiche produit s'ouvre dans une nouvelle fenetre chaque fois) //0 - default (the product description page opens in a new window every time) var clientchoice=0; Le mode d'ouverture de la fiche produit est maintenant paramétrable. On vous invite a tester les 2 modes d'ouverture de la fiche produit et choisir celui qui vous satisfait (voir en haut la description de la variable clientchoice). Important : La variable clientchoice vous permet d'ouvrir une fiche produit dans la fenêtre OPENER (l OPENER est la fenêtre qui ouvre votre catalogue interactif votre home page par exemple) que si le domaine du site est identique au domaine du kta (par exemple votre site -> alors le catalogue interactif doit se trouver sur le même domaine -> Sinon, vous n'aurez pas une erreur javascript MAIS la fiche produit va s'ouvrir dans une nouvelle fenêtre (le comportement par défaut). Installation du catalogue interactif e.print Page 10 sur 11

11 6 Adapter la fonction d'envoi à un ami Si vous avez opté pour la fonction «d'envoi de mail à un ami» et que vous devez héberger cette fonctionnalité sur votre serveur, il est probable qu'une adaptation de la programmation de base fourni par Prestimedia soit nécessaire. Dans le dossier mail, vous pouvez trouver un page nommée sendmail.php. C'est cette page qui envoie les différents mails. Ci dessous le code de cette page à faire adapter par vos services informatiques. //construction du mail $V_message = ereg_replace("\n","<br>",$v_message); $montext_mail = ereg_replace(";;nom;;",$v_nom,$montext_mail); $montext_mail = ereg_replace(";;prenom;;",$v_prenom,$montext_mail); $montext_mail = ereg_replace(";;lien;;",$lien_cata,$montext_mail); $montext_mail = ereg_replace(";;message;;",$v_message,$montext_mail); // header $myheader = "Content-Type: text/html\n"; $myheader.= "From: $envoyeur\n"; $myheader.= "Reply-To: $V_ Exp\n"; $myheader.= "bcc: $mailbox\n"; $myheader.= "X-Mailer: PHP/".phpversion()."\n"; $myheader.= "X-Sender: $mailbox\n"; $myheader.= "Return-Path: $mailbox\n"; $myheader.= "Errors-To: $mailbox\n"; // En cas d' erreurs $myheader.= "Date: ".date("l j F Y, G:i")."\n"; $myheader.= "MIME-Version: 1.0\n"; foreach ($V_ as $i) { if ($i!= $sujet_mailing, $montext_mail, $myheader); Installation du catalogue interactif e.print Page 11 sur 11