Premiers pas avec Freeway Shop in a Box (solution E-Commerce) Préface Copyright et remerciements Contacts Copyright © 1997-2006 Softpress Systems Ltd. Tous droits réservés. Vous pouvez contacter TRI-EDRE, le distributeur de la version française de Freeway, aux coordonnées ci-dessous�: Le logiciel Freeway et sa documentation sont protégés par le droit d’auteur. Aucune partie du logiciel Freeway ne peut être reproduite, transmise, transcrite, stockée dans un système de récupération ou traduite dans n’importe quelle langue, ou dans tout langage informatique, sous toute forme et sous tout moyen sans l’autorisation écrite expresse de Softpress Systems Ltd. Des copies additionnelles de ce guide peuvent être faites et distribuées à la condition qu’elles incluent cette note de copyright. Softpress Systems Ltd se réserve spécifiquement tous les droits sur tous les logiciels Freeway. Le logiciel décrit dans ce guide est fourni sous licence d’agrément et ne peut être installé, utilisé ou copié qu’en accord avec les termes de cet agrément. Softpress est une marque commerciale de Softpress Systems Ltd aux États-Unis et autres pays. Freeway est une marque commerciale de Softpress Systems Ltd, qui peut être déposée dans certains pays. Apple, Macintosh, Power Macintosh et le logo Mac Logo sont des marques déposées de Apple Computer Inc. Tous les autres noms de produits sont des marques ou des marques déposées de leurs propriétaires respectifs. Limitation de garantie Les informations de ce guide sont censées être correctes à la date de publication. Cependant, de par le développement continu de ce produit, les informations de ce guide peuvent être modifiées sans préavis et ne représentent aucun engagement de la part de Softpress Systems Ltd. La version française de ce guide est réalisée par TRI-EDRE. 2 TRI-EDRE SARL 22 Place de l’Église BP 111 83510 LORGUES (France) Tél.�: (+33) 04�98�10�10�50 Fax�: (+33) 04�98�10�10�55 Web�: http://www.tri-edre.fr Email�: contact@tri-edre.fr Contact de Softpress Systems Ltd (United Kingdom) Tél.�: (+44) 1993 882588 - Fax�: (+44) 1993 883970 Web�: http://www.softpress.com - Email�: info@softpress.com Prémisses et conventions Pour éviter toute ambiguïté, ce guide adopte les conventions typographiques suivantes : Convention Signification Gras Identifie un nom ou un label apparaissant sur l'écran de l'ordinateur. Exemple : Cliquez sur le bouton OK. Computer Identifie un texte entré sur le clavier de l'ordinateur. LOC Représente les touches spéciales du clavier : Control, Option (ou Alt), Command, Return et Shift (Majuscule). La base de connaissances Le guide Premiers pas avec Freeway est l'endroit idéal pour commencer à apprendre comment tirer le meilleur de Freeway. Il inclut un aperçu des fonctions et des apports uniques de Freeway, des informations sur la création et la publication de votre site sur le Web, une visite guidée des principales fonctions de Freeway, et un ensemble de trois tutoriaux qui vous montreront comment utiliser Freeway pour créer des sites Web étonnants. Le site Softpress propose une base de connaissances avancée contenant une vaste gamme d'informations sur chaque aspect de l'utilisation de Freeway, y compris des notes techniques sur des fonctions spécifiques, des tutoriaux illustrant comment réaliser des effets particuliers, des réponses aux questions les plus fréquentes, et des exemples de sites créés par des concepteurs utilisant Freeway. La base de connaissance contient des fonctions de recherche, et est mise à jour chaque semaine pour répondre à toutes les questions que peuvent se poser les utilisateurs de Freeway. Utiliser Freeway Note : la base de connaissances sur le site de Softpress est en anglais. Premiers pas avec Freeway Préface À propos de la documentation Freeway Le guide Utiliser Freeway fournit des instructions claires et progressives pour utiliser les principales fonctions de Freeway, y compris comment régler, prévisualiser et publier un site, comment travailler avec des pages, du texte, des images, des tableaux et des formulaires, et comment créer des effets dynamiques. Ce guide est conçu pour vous aider à traduire votre vision dans un site Web complet et pleinement fonctionnel. Freeway Référence Le guide Freeway Référence est destiné aux utilisateurs avancés de Freeway, et fournit des informations détaillées sur les fonctions avancées de la conception Web qui ne sont pas nécessaires à tous les utilisateurs. Il fournit aussi des informations sur la migration de sites existants créés avec d'autres programmes, et un résumé des Préférences de Freeway, des palettes et des raccourcis clavier. Aide en ligne Freeway comporte une aide en ligne contextuelle exhaustive que vous pouvez utiliser à tout moment pour trouver des informations sur les fonctions que vous êtes en train d'utiliser. Cette aide comporte les mêmes informations que les guides Utiliser Freeway et Freeway Référence. 3 Préface 4 Parmi les nombreuses innovations que l’Internet nous a apportées, l’une des plus visible concerne les boutiques en ligne. Les avantages pour les commerçants sont une réduction du besoin en personnel et en espace, tout en fournissant plus de commodités aux clients, une ouverture 24 heures sur 24 heures et 7 jours sur 7 jours, une disponibilité internationale de la boutique, et la possibilité de rivaliser avec les sociétés plus grosses. Cependant, l’implémentation d’une boutique en ligne a souvent été difficile, en particulier pour les petites structures ou les entreprises individuelles. Un catalogue doit être présenté pour permettre aux clients de choisir les produits à acheter, les produits sélectionnés par le client doivent être suivis jusqu’au bout de la commande (en général sous la forme d’un panier) et, très important, il est vital de proposer un moyen de paiement sécurisé pour le règlement de la commande par le client. Comme c’est souvent le cas, une demande pour un service engendre rapidement des solutions, et il existe maintenant de nombreuses sociétés offrant ces services pour l’intégration dans un site web. PayPal, Verisign et Authorize.Net sont des sociétés bien connues fournissant des services de traitement des paiements sécurisés par carte de crédit. De nombreuses sociétés proposant des boutiques en ligne sont connectées aux services de traitement de cartes de crédit de ces sociétés, et à d’autres. L’une des meilleures solutions d’e-commerce est proposée par Mal’s e-commerce (http://www.mals-e.com) qui fournit deux solutions : un service gratuit, offrant l’intégration avec PayPal, NoChex et Paymate, et un service payant offrant l’intégration avec VeriSign, Authorize.Net et un large choix d’autres services de traitement des paiements sécurisés. Introduction Introduction Et maintenant, en utilisant la puissance de la technologie des actions Freeway, vous pouvez tirer avantage de la solution Mal’s pour créer rapidement votre propre boutique en ligne. Une toute nouvelle suite d’Actions est incluse dans Freeway 4.2 (et supérieur) fournissant une configuration facile et une intégration sans bavure. Il vous suffit de créer vos pages dans Freeway comme pour le reste de votre site, d’appliquer les Actions aux emplacements appropriés, de spécifier les réglages nécessaires, de publier et de transférer votre site — et vous avez votre propre boutique en ligne entièrement fonctionnelle ! Ce document fournit un tutoriel et une information de référence pour ces Actions et les fondamentaux pour régler et utiliser Mal’s e-commerce. Très bons commerces en ligne ! 5 Tutoriel – Réglages Mal’s e-commerce Tutoriel Réglages d’un compte Mal’s e-commerce Créer un compte Mal’s La première chose à faire pour créer une boutique en ligne est de créer un compte sur Mal’s e-commerce (Nota : les pages sont en anglais). Avec votre navigateur, allez sur http://www.mals-e.com. Sur la droite de la page, cliquez sur le lien Join Now : Vous devez conserver précieusement le nom (Username) et le mot de passe (Password) qui vous ont été assignés, et aussi le nom du serveur (Server name) sur lequel votre compte est établi (vous en aurez besoin par la suite pour renseigner une des Actions de votre document Freeway). Un email contenant un double de ces informations sera envoyé à l’adresse email que vous avez indiquée lors de la création de votre compte. Vous arrivez sur la page de création d’un nouveau compte : Réglages d’un compte Mal’s e-commerce Réglage initial L’étape suivante est de vous connecter sur votre compte Mal’s e-commerce pour les réglages de base. Revenez à la page d’accueil de Mal’s et entrez votre nom et mot de passe dans les champs Login à droite de la page : Entrez votre nom (Your name), celui de votre société (company) votre téléphone, pays (Country), adresse email (Email address) l’URL de votre site web (y compris “http://”) et le type de votre organisation. Vous devez indiquer des informations valides sur cette page (en particulier l’adresse email où seront envoyés les détails de votre compte). Puis cliquez sur le bouton Join Now en bas de la page. 6 Un message est alors affiché, contenant des informations importantes : Cliquez sur le bouton Login pour accéder à la zone Administration de votre compte. Réglages d’un compte Mal’s e-commerce Réglages International et Monnaies Vous devez vérifier et éventuellement modifier certains réglages initiaux avant de commencer à utiliser votre boutique. Maintenant que vous avez créé un panier pour votre compte, un nouvel ensemble de liens est disponible à gauche de la page Admin, sous l’en-tête Cart Links. Cliquez sur Cart set-up. Cette page offre divers liens vers des pages comportant différents réglages pour votre panier : Indiquez le mot de passe que vous avez choisi (IMPORTANT : conservez une copie de votre mot de passe dans un endroit sûr) et cliquez sur le bouton d’envoi Submit Password. Une page de confirmation est affichée. À gauche de la page, vous trouverez des liens vers les différentes sections de la zone administration. Le premier endroit à visiter est la zone des réglages de base (Admin Home). Tutoriel – Réglages Mal’s e-commerce Avant de continuer dans la zone Administration, il vous sera demandé de définir un Mot de passe pour les paiements (Payments Password) : Pour que votre boutique puisse fonctionner, vous devez activer le panier (cart). Pour cela, cochez la case “Show cart” (Afficher panier) dans la section My Admin à droite de la page Admin Home, puis validez la modification en cliquant sur le bouton Update. Une page vous informera que votre compte n’a pas de panier et vous proposera d’en créer un. Cliquez sur le bouton Yes pour créer un panier pour votre compte. Une page de confirmation indique que vos réglages Admin ont été mis à jour. 7 Tutoriel – Réglages Mal’s e-commerce 8 Cliquez sur les liens Language, Country and Currency (langue, pays et monnaie). Vous pourrez y changer les réglages internationaux de votre panier. Tout d’abord, choisissez la langue affichée pour votre panier : Ensuite, choisissez la monnaie à utiliser pour votre panier : Vos réglages internationaux de votre compte étant complétés, allez en bas de la page et cliquez sur le bouton de validation Submit Changes. Réglages d’un compte Mal’s e-commerce Paiements Mal’s e-commerce peut utiliser de très nombreux services de paiement. Le service gratuit limite ce nombre, alors que le service premium en accepte beaucoup plus. Comme il est impossible de couvrir tous ces différents réglages, nous allons juste prendre comme exemple PayPal. Pour d’autres services, veuillez vous référer à la documentation spécifique de Mal’s e-commerce. Le réglage de l’intégration de PayPal est très direct. Sur la page de réglage Cart set-up, cliquez sur le lien PayPal dans la section Payments. La seule chose à faire est d’entrer votre adresse email dans le champ PayPal Account ID et de sélectionner Website Payments Standard. IMPORTANT Réglages d’un compte Mal’s e-commerce Vérification de liens Sur la page Cart set-up, cliquez sur Link Verification (vérification de liens). Il est vital que les liens soient réglés correctement pour que votre panier fonctionne en toute sécurité. La vérification de liens vous permet de forcer votre panier pour qu’il ne fonctionne qu’avec les pages que vous avez créées, car sinon il serait possible à quiconque de se connecter à votre panier et d’acheter vos produits en changeant le prix ! Maintenant, tout ce que vous avez à faire est d’activer Link Verification en cochant la case et de valider en cliquant sur le bouton Update Record. Vous serez amené à revenir à cette page lorsque vous travaillerez sur votre document Freeway, mais vous pouvez passer à l’étape suivante. Tutoriel – Réglages Paiements Mal’s Il est possible de régler votre panier pour qu’il accepte plusieurs monnaies. Vous trouverez des détails dans la partie Référence. Mal’s e-commerce vous permet de définir un message à afficher aux clients indiquant la monnaie utilisée pour les prix du panier. Le message par défaut est “All prices are in US dollars”. Si vous utilisez une autre monnaie, changez ce message, par exemple en “Tous les prix sont indiqués en Euros”. Le menu Format sélectionne le format d’affichage des prix. Vous pouvez choisir parmi trois options celle qui correspond le mieux à la monnaie utilisée pour votre panier. La dernière option pour la monnaie (menu Currency) vous permet de sélectionner la monnaie envoyée à votre service de traitement des cartes de crédit. Sélectionnez la monnaie à utiliser dans le menu. Vous n’avez même pas besoin d’avoir créé préalablement un compte PayPal. Lorsque PayPal reçoit la première commande de votre site, ils prendront contact avec vous à l’adresse email spécifiée dans le champ PayPal Account ID. Enfin, cliquez sur le bouton Update en bas de la page pour enregistrer les changements. Ceci conclut un réglage simple de Mal’s e-commerce utilisable avec Freeway. Il existe de très nombreuses autres options, certaines d’entre elles étant mentionnées dans la section Référence de ce manuel. Pour plus de détails sur les options, veuillez vous reporter à la documentation de Mal’s e-commerce. 9 Tutoriel – Lier Freeway à Mal’s Utiliser Freeway pour lier votre site au panier Mal’s Réglages initiaux Bien que des modèles soient fournis avec Freeway E-Shop, nous allons partir d’une page blanche pour les besoins de ce tutoriel et appliquer toutes les Actions nous-même pour nous familiariser avec les Actions utilisées pour activer les liens au panier de la boutique. Lancez Freeway et créez un nouveau document basé sur le modèle Blank (Vide). La première chose à faire pour que les Actions fonctionnent est de spécifier l’adresse web de votre boutique. Ceci est l’URL de votre boutique tel que vu dans un navigateur. Sélectionnez Réglages du document du menu Fichier. Cliquez sur l’onglet Transfert. En bas du dialogue, entrez l’URL de votre boutique dans le champ Adresse Web. Pour les besoins de ce tutoriel, vous pouvez utiliser l’adresse racine de votre site web, y compris http:// au début (par exemple http://www.softpress.com). Il est aussi possible d’indiquer un sous-dossier de votre site web. Consultez la section Référence de cette documentation. Vous allez maintenant commencer à appliquer les Actions qui vont activer l’intégration de votre boutique. La plus importante est l’action E-Shop Réglages où vous allez indiquer les informations de votre compte Mal’s ecommerce. C’est une Action appliquée à un dossier. Sélectionnez le dossier Site Folder dans le panneau Site, puis ouvrez la palette Actions et cliquez sur le bouton + en bas à gauche de la palette. Un dialogue affiche toutes les Actions Dossier disponibles. Sélectionnez l’Action E-Shop Réglages et cliquez sur OK. La palette Actions affiche alors l’interface de E-Shop Réglages. Tout d’abord, remplissez votre identificateur Mal’s (User ID) dans le champ Identifieur et sélectionnez le serveur Mal’s (MAL Server) sur lequel votre compte Mal’s a été créé dans le menu Serveur MAL (vous avez eu cette 10 Ensuite, vous devez entrer votre code de vérification de liens (Link Verification). Pour obtenir ce code, vous devez vous connecter sur votre compte Mal’s et aller à la page Cart set-up. Là, cliquez sur le lien Link Verification pour aller à la page Link Verification que vous avez déjà visitée. En bas de cette page Web se trouve une section nommée “Javascript Button Creator” : Utiliser Freeway pour lier votre site au panier Mal’s Créer une page de boutique Pour démontrer les fonctionnements de base de l’intégration de Freeway avec Mal’s e-commerce, nous allons créer une boutique simple vendant de la peinture et des produits associés. D’abord, créez une image d’en-tête pour la page. Dessinez un bloc graphique et donnez-lui les dimensions : Gauche 75px, Largeur 400px, Hauteur 70px. Dans ce bloc, tapez le texte “Peintures” et, dans la palette Inspecteur, choisissez sa police Sand et sa taille 60px. Pour obtenir le code de votre compte, sélectionnez le radio bouton “Hash secret on it’s own”, entrez votre mot de passe paiements (Payment password) (pas votre mot de passe de compte Mal’s ; vous avez défini le mot de passe Paiement dans la section “Réglages d’un compte Mal’s ecommerce : Réglage initial”) dans le champ “Payment password”, et cliqué sur le bouton “Get Validator”. Cela a ouvert une page web contenant un texte simple de la forme “Hash Secret key for [Your Identifieur] : [Your Hash Secret key]” ([Your Identifieur] = votre identifieur d’utilisateur, [Your Hash Secret key] = votre clé secrète cryptée). Copiez la clé secrète (la chaîne de caractères et de nombres après les ‘:’), revenez dans Freeway et collez-la dans le champ Code des réglages de l’Action E-Shop. Il existe d’autres réglages modifiables dans cette action, disponibles dans la section Panier de l’interface utilisateur de l’Action (changer le menu déroulant Panier affiche différents groupes de réglages), cependant ils sont principalement liés à l’apparence de votre panier et seront détaillés dans la partie Référence de cette documentation. Pour l’heure, vous pouvez les laisser tels qu’ils sont. Vous êtes maintenant prêt à créer des produits à vendre sur votre site web. Tutoriel – Créer une page de boutique information en même temps que votre Identifieur). Si vous avez oublié ou perdu cette information, connectez-vous sur votre compte Mal’s et vous verrez, dans la barre d’adresse de votre navigateur, sur quel serveur se trouve votre compte (ce sera quelque chose comme ww4.aitsafe.com). Il y a différentes Actions utilisables pour créer les liens des produits au panier Mal’s. Nous allons en utiliser trois dans ce tutoriel E-Achat Bouton et EAchat Texte qui permettront aux clients d’ajouter des produits dans leur panier, et E-Revoir Bouton pour voir le contenu de leur panier. Utilisons d’abord E-Achat Bouton pour permettre aux clients d’acheter des pinceaux. L’action E-Achat Bouton peut être appliquée à un bloc graphique 11 Tutoriel – Créer une page de boutique ou à un bouton de formulaire HTML, et ajoutera le produit dans le panier avec la quantité spécifiée quand le client cliquera sur le bouton. dans le champ Adresse Web du dialogue Transfert). Cliquez sur OK pour transférer votre site. Dessinez un bloc graphique dans votre page sous l’image d’en-tête et importez une image de pinceau. À côté de ce bloc, dessinez un autre bloc graphique plus petit et entrez le texte “Acheter un pinceau”. Sélectionnez ce bloc, ouvrez le sous-menu Actions du menu Bloc, et choisissez l’Action E-Achat Bouton dans la liste des Actions. Allez sur votre site web avec votre navigateur. Vous verrez la page que vous avez créée, avec son en-tête, l’image du pinceau et les blocs proposant l’achat d’un pinceau. Cliquez sur le texte “Acheter un pinceau”. Normalement, vous serez amené sur votre panier Mal’s, mais comme c’est la première fois que vous avez transféré votre site, vous verrez le message suivant : Affichez la palette Actions. Sélectionnez le bloc auquel vous venez d’appliquer l’Action et les réglages de l’Action seront affichés dans la palette Actions : Les réglages que vous avez spécifiés dans l’action E-Shop Réglages sont transmis à Mal’s e-commerce par un fichier de configuration généré automatiquement. Si vous modifiez les réglages et transférez votre site, au premier accès les nouveaux réglages sont chargés dans le formulaire Mal’s depuis votre fichier de configuration et vous verrez le message confirmant que la configuration a été correctement transmise. Si Mal’s ne peut trouver le fichier de configuration, vous verrez le message : Nous allons définir les paramètres à passer au panier. Entrez le texte “Pinceau” dans le champ Produit, puis entrez “5.00” dans le champ Prix et laissez le champ Quantité à sa valeur par défaut, 1. Quand un client cliquera sur ce bouton, 1 pinceau coûtant 5,00 unités de la monnaie sera ajouté dans son panier. En fait, vous avez maintenant entré assez d’informations pour pouvoir tester la boutique. Faites Transférer dans le menu Fichier et entrez les réglages FTP de votre espace web (votre site doit être transféré à l’emplacement défini 12 méthode de paiement que vous avez choisie dans votre compte Mal’s. Le troisième bouton est Continue Shopping (Continuer achats). Il permet de revenir à la page web de votre boutique (celle d’où le client était arrivé au panier). Pour continuer sur le panier, rafraîchissez la page dans votre navigateur et la page du panier Mal’s sera chargée. Vous voyez que 1 pinceau au prix de 5,00 a bien été ajouté : Cliquez dans le bloc HTML que vous venez de créer et entrez le texte “Acheter peinture” suivi d’un retour panier, puis insérez un bloc graphique dans le texte en sélectionnant Bloc Graphique dans le menu Insertion. Sélectionnez le bloc graphique et modifiez sa taille en 30 pixels par 30 pixels dans la palette Inspecteur, réglez le menu Aligner sur Milieu (dans la section Dimensions) et changez sa couleur de fond en orange dans la palette Couleurs : Nous allons maintenant utiliser l’Action E-Achat Texte pour créer le lien texte HTML sur lequel les clients pourront cliquer pour ajouter la peinture à leur panier. Revenez dans Freeway et dessinez un bloc HTML de 300 pixels par 200 pixels au-dessous des blocs graphiques que vous aviez créés pour le pinceau. Sélectionnez le bloc HTML et, avec la palette Inspecteur, affectez-lui un bord noir de 1 pixel et un décalage de 5 pixels. Tutoriel – Créer une page de boutique Si vous ne voyez pas ce message, vous pouvez passer au prochain paragraphe. Si par contre vous voyez ce message, il est probable que vous n’ayez pas spécifié correctement l’URL de votre boutique dans la configuration de Mal’s e-commerce. Pour le vérifier, connectez-vous sur votre compte Mal’s e-commerce et allez à la page Account Details (le lien est dans la section Management à gauche de la page Administration de Mal’s). Sur la page Account Details, vérifiez que le champ Website URL contient le bon URL de votre boutique et sinon, changez l’URL et cliquez sur le bouton Update Record. Revenez à votre boutique en ligne et cliquez de nouveau sur le texte “Acheter un pinceau”. Vous devez voir le message confirmant que le fichier de configuration a été chargé correctement En bas du panier il y a trois boutons. Recalculate (Recalculer) permet au client de changer le nombre de produits commandés sans avoir besoin de revenir à la boutique. Un clic sur Recalculate fait recalculer le contenu du panier avec les changements apportés. Le bouton Go To Payments (Aller au paiement) amène le client à la page de paiement, qui dépend de la 13 Tutoriel – Créer une page de boutique Cliquez dans le bloc HTML (après le bloc graphique que vous venez d’insérer) pour afficher le curseur d’édition de texte et ajoutez un espace (barre d’espace). Dans le menu Insertion, allez dans le sous-menu Bloc Action et sélectionnez E-Achat Texte. Une action E-Achat Texte est insérée. Sélectionnez cette action pour l’afficher dans la palette Actions : Vous noterez que cette Action a des options très similaires à l’Action E-Achat Bouton que nous avons utilisée précédemment, car elle est conçue pour réaliser exactement le même travail ! La seule différence est la présence d’un nouveau champ, Texte du Lien, qui vous permet de spécifier le texte sur lequel le client cliquera. Entrez le texte “Acheter 1 pot de peinture orange” dans ce champ et entrez “Pot de peinture orange” dans le champ Produit. Changez le champ Prix à “13,00” et laissez la Quantité à 1. Vous pouvez transférer votre site et le tester pour vérifier que vous pouvez ajouter des pots de peinture à votre panier : Comme vous pouvez le voir, l’Action E-Achat Texte a créé un lien sur le texte entré dans le champ Texte du Lien qui ajoute un pot de peinture dans le panier. Vous pouvez utiliser les Actions E-Achat Texte et E-Achat Bouton pour ajouter différentes quantités de produits au panier, si nécessaire. Nous allons ainsi ajouter une autre Action E-Achat Texte à 14 la page pour permettre au client d’ajouter 5 pots de peinture au panier. Dans Freeway, cliquez sur le bloc HTML après l’Action E-Achat Texte que vous venez de créer. Ajoutez un saut de ligne et insérez un bloc graphique de 30 par 30 pixels, aligné au milieu du texte (comme vous l’aviez fait précédemment). Cette fois, donnez au bloc graphique une couleur de fond pourpre. Ajoutez un espace après le bloc graphique et insérez une Action E-Achat Texte. Sélectionnez l’Action et utilisez la palette Actions pour entrer dans le champ Texte du Lien “Acheter 5 pots de peinture pourpre”, dans le champ Produit “Pot de peinture pourpre” et dans le champ Prix “15,00” (la peinture pourpre est plus chère que la peinture orange). Enfin, modifiez le champ Quantité, dans lequel vous entrez “5”. Le prix de 15,00 est un prix unitaire et le total des 5 pots sera de 75,00. Vous pouvez transférer et tester votre boutique pour vérifier comment les 5 pots de peinture seront ajoutés au panier en cliquant sur ce lien. Enfin, nous allons ajouter sur la page un bouton pour que le client puisse vérifier le contenu de son panier sans ajouter de produit. Cela sera obtenu avec l’utilisation d’une Action E-Achat Bouton. Dessinez un bloc graphique de 100 pixels de large par 20 pixels de haut, sous le bloc HTML contenant les Actions E-Achat Texte. Cliquez dans le bloc graphique et tapez le texte “Voir Panier”, et dans la palette Inspecteur changez la police en Verdana et la taille en 16px. Sélectionnez le bloc graphique et appliquez-lui l’action E-Revoir Bouton par le menu Bloc. C’est tout ce que vous avez à faire ! Cette Action possède d’autres options, mais nous ne les utiliserons pas ici. Transférez de nouveau votre page, et vous pourrez maintenant cliquer sur le bouton “Voir Panier” que vous venez de créer pour voir le contenu de votre panier Mal’s. Nous allons laisser Freeway quelques instants pour voir quelques options de Mal’s e-commerce. Connectez-vous sur votre compte Mal’s. Allez à la page Cart set-up et cliquez sur le lien Shipping (transport). Vous pourrez spécifier la méthode que vous désirez utiliser pour calculer le montant des frais de port à facturer à vos clients. Huit options sont disponibles, mais seules les trois premières seront passées en revue ici. Consultez la documentation de Mal’s e-commerce pour les autres options. En haut de la page Shipping Calculations il y a deux champs de texte. Le premier permet de spécifier que toutes les commandes supérieures à une certaine valeur auront un port gratuit. Le second permet d’ajouter un coût fixe à toutes les commandes, quels que soient le moyen de transport et le montant de la commande. Par défaut, ces deux champs sont à 0.00 ce qui signifie que ces deux options sont désactivées. Pour les activer, entrez simplement une valeur pour l’option désirée. Pour les désactiver, entrez la valeur 0.00. Au-dessous de ces champs, il y a un jeu de boutons radio pour choisir la méthode de calcul des frais de port à utiliser pour votre panier. Comme déjà indiqué, nous ne parlerons que des trois premières. Par défaut, l’option No Shipping (pas de transport) est sélectionnée et dans ce cas aucun frais de transport n’est ajouté au panier. L’option 1 “Fixed Value” (valeur fixe) ajoute des frais de port fixes à chaque commande, quelle que soit la quantité de produits commandés. Entrez dans le champ de cette option les frais de port que vous désirez ajouter à chaque commande. L’option 2 “Calculated from quantity” (calculé par quantité) applique des frais fixes à chaque produit. Ainsi, si vous définissez un coût de 2 Euros par produit, les frais de port seront de 10 Euros pour 5 produits commandés. Entrez le coût par produit dans le champ de cette option. L’option 3 “Calculated from weight or other value” (calcul suivant le poids et autre) permet des frais de port basés sur une valeur définie dans Freeway. Tutoriel – Autres options Mal’s Réglages d’un compte Mal’s e-commerce Calcul des frais de port Cette option applique des frais de port par unité que vous entrez dans le champ texte de cette option. Une case à cocher en bas de cette option sert à spécifier que les unités utilisées pour calculer les frais de port sont basées sur le prix du produit. Cela vous permet de définir des frais de port comme un pourcentage du total de la commande. Par exemple, pour définir un coût de port de 10 % du total de la commande, cochez cette case et entrez 0.10 dans le champ. Sélectionnez le bouton radio correspondant à la méthode de calcul que vous désirez utiliser puis entrez les détails appropriés comme décrit cidessus. Confirmez les changements en cliquant sur le bouton Update Shipping en bas de la page. 15 Tutoriel – Autres options Mal’s Réglages d’un compte Mal’s e-commerce Taxes de vente radio, et si vous choisissez cette option, vous devrez indiquer le taux de taxe pour chaque produit dans Freeway). Retournez à la page Cart set-up et cliquez sur le lien Sales Tax (qui doit se trouver juste au-dessous du lien Shipping) pour aller dans la page Tax Calculations où nous ne considérerons ici que les options les plus simples. Enfin, il y a un autre groupe de boutons radios nommés “Which Orders Are Taxed” (Quelles commandes sont taxées). Les trois premières options seront décrites ici. Consultez la documentation Mal’s e-commerce pour les autres options. Le premier réglage est la case à cocher “Tax Shipping”. Cette case est cochée par défaut : tous les frais de livraison de la commande seront inclus dans la valeur taxée. Décochez cette case si vous désirez des frais de livraison hors taxes. Le réglage suivant est un champ de texte nommé “Tax Rate” (Taux de taxe). Si vous désirez utiliser le même taux de taxe pour tous les produits que vous vendez, vous entrerez ce taux de pourcentage sous forme de valeur décimale. Par exemple, pour une taxe de 15 %, entrez la valeur 0.15 dans ce champ. Troisièmement, il y a un groupe de deux boutons radios nommés “Basis” (Base). Vous pouvez définir s’il faut utiliser le taux de taxe spécifié dans le champ Tax Rate (premier bouton radio et réglage par défaut), ou s’il faut spécifier le taux de taxe pour chaque produit séparément (second bouton 16 Le premier choix “None” (Aucun) a comme résultat qu’aucune taxe ne sera calculée pour aucune commande. Le second choix “All orders” (Toutes les commandes) fait calculer les taxes pour toutes les commandes. Le troisième choix “Check box” (Case à cocher) fait ajouter une case à cocher dans le panier permettant au client de choisir si les taxes sont ajoutées à la commande. Un champ de texte vous permet de spécifier un message affiché en face de cette case à cocher. Pour mieux intégrer le panier à votre boutique en ligne, plusieurs options sont disponibles pour personnaliser l’apparence des pages du panier. Nous allons maintenant modifier quelques-unes de ces options, dans Freeway. Sélectionnez le dossier racine de votre site (le dossier sur lequel vous aviez appliqué l’Action E-Shop Réglages) dans le panneau Site, et ouvrez la palette Actions. Dans la palette Actions pour l’action E-Shop Réglages Action, vous avez un menu déroulant nommé Panier : Chacune des options du menu fait afficher différents réglages pour contrôler l’apparence et le comportement du panier. Nous allons en premier lieu centrer le panier horizontalement dans la fenêtre du navigateur. Sélectionnez Général dans le menu Panier ; un groupe de réglages est affiché, avec les menus Largeur Panier et Alignement Panier. Choisissez Centrer dans le menu Alignement Panier. Maintenant, sélectionnez Fond dans le menu Panier, puis sélectionnez Autre… dans le menu Couleur et choisissez une couleur jaune clair dans le dialogue de sélection des couleurs. Vous avez ainsi sélectionné une couleur jaune clair comme couleur de fond du panier. Transférez votre site, et allez sur la page de votre boutique dans votre navigateur. Cliquez sur un des boutons pour ajouter un produit dans le panier et vous serez amené à la page vous informant que vos nouveaux réglages de configuration ont été chargés. Rafraîchissez cette page pour Tutoriel – Changer l’apparence du panier Utiliser Freeway pour lier votre site au panier Mal’s Changer l’apparence du panier voir votre panier, et vous verrez que votre panier a la couleur de fond choisie et est centré dans la fenêtre du navigateur. Il existe bien d’autres options pour personnaliser votre panier. Ces options seront détaillées dans la partie Référence de ce manuel. Pendant que vous êtes dans le panier, modifiez les quantités de tous les produits à 0, et cliquez sur le bouton Recalculate (Recalculer). Cela videra votre panier, en prévision de la dernière étape de ce tutoriel. 17 Tutoriel – Afficher les commandes Utiliser Freeway pour lier votre site au panier Mal’s Afficher les commandes attendre la confirmation du paiement par Paypal (ou tout autre service que vous avez choisi) avant de traiter la commande. La dernière chose que nous allons faire est de définir comment vous allez consulter les commandes que vos clients ont passées dans votre boutique en ligne. Pour cela, nous allons faire comme si nous achetions 1 pot de peinture orange. Retournez à la page de votre boutique dans le navigateur et cliquez sur le lien “Acheter 1 pot de peinture orange”. Cela va vous amener sur le panier de Mal’s qui doit ne contenir que le seul pot de peinture orange que vous venez d’ajouter. Maintenant, continuez dans le processus de paiement en cliquant sur le bouton “Go To Payments” (Aller au paiement). Vous serez amené dans une page permettant au client d’entrer ses coordonnées. Remplissez les champs afin de voir par la suite comment ces données seront traitées par Mal’s. Ceci clôt le tutoriel d’introduction à l’intégration de Freeway avec Mal’s e-commerce. Consultez la section Référence de cette documentation pour plus d’explications sur les fonctions que vous venez de voir, et sur les autres options non couvertes jusqu’ici, dont par exemple l’ajout de variations sur un produit en utilisant l’Action E-Achat Formulaire. Une fois les informations entrées, cliquez sur le bouton “Continuer” en bas de la page. Une page résumant les détails de votre commande est affichée et, en bas, se trouve une liste d’options de paiement. Comme le seul moyen de paiement que nous avions défini dans Mal’s est Paypal, c’est le seul affiché dans la liste. Cliquez sur le bouton “Continuer” et vous serez transféré sur la page de paiements du site Paypal. Il n’y a aucun besoin d’aller plus loin, car le transfert du client sur cette page est le dernier point pris en charge par le panier Mal’s. Mal’s va maintenant effectuer un enregistrement de la transaction. Connectez-vous à nouveau sur votre compte Mal’s e-commerce. Dans la section Cart Links à gauche, cliquez sur le lien “List Orders” (Liste des commandes). La page List Orders contient une liste de toutes les commandes qui ont été traitées par votre panier, dans laquelle vous devez voir la commande que vous venez juste de passer. Si vous cliquez sur le lien “DETAILS” à droite de votre commande, une page affiche tous les détails de la commande, y compris les produits commandés et les adresses de livraison et de facturation. Une chose importante à noter est qu’il n’y a aucune confirmation du paiement par le client. Vous devez 18 Réglages du panier Mal’s E-Shop Réglages À chaque choix d’une valeur dans le menu déroulant Panier correspondent différents réglages de l’apparence et des fonctionnalités et votre panier Mal’s e-commerce. L’Action E-Shop Réglages est appliquée au dossier racine dans votre document Freeway. Sélectionnez ce dossier dans le document Freeway et cliquez sur le bouton + en bas à gauche de la palette Actions, puis sélectionnez l’Action E-Shop Réglages dans la liste. Elle contient de nombreux réglages concernant l’identification et le comportement du panier Mal’s. Réglages du panier Mal’s : Général Référence Référence Réglages de connection à Mal’s Largeur Panier : Vous permet de choisir la largeur du panier Mal’s dans le navigateur. Vous pouvez choisir une valeur fixe ou un pourcentage. Alignement Panier : Spécifie l’alignement horizontal du panier Mal’s dans la fenêtre du navigateur. Les options sont Gauche, Centré ou Droite. Réglages du panier Mal’s : Texte Ces réglages spécifient la connection à Mal’s e-commerce: Identifieur : L’identifieur (User ID) que vous avez utilisé pour vous connecter sur le site web Mal’s e-commerce. Serveur MAL : Le nom du serveur Mal’s e-commerce (MAL Server) qui vous a été assigné quand vous vous êtes enregistré. Ajouter vérification de lien : Cochez cette case si vous avez activé la vérification de lien sur votre compte Mal’s e-commerce. Code : Si la vérification de lien est activée, entrez ici le code (hash secret) obtenu dans la zone Administration de Mal’s. Police : Indique la police utilisée pour le texte du panier. Taille : Indique la taille du texte du panier. Couleur : Indique la couleur du texte du panier. 19 Référence Réglages du panier Mal’s : Fond Réglages du panier Mal’s : Affichage d’en-tête Cette section contient les réglages contrôlant l’apparence des lignes d’en-tête du panier. Ces en-têtes sont affichés sur les informations qui ne peuvent être modifiées par le client. Couleur : Spécifie la couleur de fond des pages du panier. Image : Permet de sélectionner l’image de fond pour les pages du panier. Fond : Indique la couleur de fond de l’en-tête de ligne. Position : Si une image de fond est sélectionnée, spécifie le comportement de l’image quand l’utilisateur fait défiler le contenu de la fenêtre. La valeur Défile indique que l’image doit défiler en même temps que le contenu de la page, et la valeur Fixe indique que le fond ne bouge pas quand le contenu de la page défile. Texte : Indique la couleur du texte de l’en-tête de ligne. Réglages du panier Mal’s : Image d’en-tête Réglages du panier Mal’s : En-tête d’entrée Cette section contient les réglages contrôlant l’apparence des lignes d’en-tête d’entrée du panier. Ils sont affichés au-dessus des informations pouvant être modifiées par le client. Fond : Indique la couleur de fond de l’en-tête de ligne. Image : Sélectionne l’image à afficher en haut des pages du panier. Texte alternatif : Indique le texte alternatif de l’image d’en-tête, affichée si l’image n’est pas affichée. Alignement : Indique l’alignement horizontal de l’image d’en-tête sur la page du panier. 20 Texte : Indique la couleur du texte de l’en-tête de ligne. E-Achat Bouton L’Action E-Achat Bouton crée un bouton HTML ou graphique qui ajoute un produit spécifique dans le panier lorsque le client clique dessus. Il peut être appliqué à un bloc graphique ou à un bouton de formulaire HTML. Sélectionnez le bloc sur lequel vous voulez appliquer cette action, ouvrez le sous-menu Actions du menu Bloc et sélectionnez E-Achat Bouton. Normal : Couleur des liens du panier qui n’ont pas été visités. Référence Réglages du panier Mal’s : Couleurs de liens E-Achat Bouton : Options Actif : Couleur des liens du panier sur lesquels on a cliqué. Visité : Couleur des liens du panier qui ont été visités. Réglages du panier Mal’s : Langue et Monnaie Langue : Indique la langue utilisée dans le panier Mal’s. Choisissez votre langue dans le menu déroulant. ID monnaie : Si Monnaies multiples (Multiple Currencies) a été choisi dans la zone Admin de Mal’s, ce réglage spécifie l’identifieur de monnaie, c’est à dire quelle monnaie doit être utilisée. Ce doit être une valeur de 1 à 5, correspondant au numéro de la monnaie (currency number) dans la zone Admin de Mal’s. Il n’y a pas besoin de modifier cette valeur si vous n’utilisez pas plusieurs monnaies. Produit : Spécifie le nom du produit qui sera ajouté dans le panier quand ce bouton sera cliqué. Il apparaîtra avec ce nom dans le panier, ainsi que dans les commandes une fois filtrées dans votre compte Mal’s. Prix : Spécifie le prix du produit. Il n’y a pas d’unité de monnaie, car elle est définie dans le panier lui-même. Taxe : Si votre compte Mal’s a été réglé pour que les taxes soient calculées en fonction des liens Acheter maintenant (Buy Now) que vous avez créés (voir la section Basis de la page Sales Tax de Mal’s Admin), ce champ spécifie le pourcentage de la taxe appliquée pour ce produit. 21 Référence Quantité : Indique le nombre de produits qui seront ajoutés au panier lorsque l’on clique sur ce bouton. Unités de frais d’envoi : Si votre compte Mal’s a été réglé pour calculer les frais de port d’après le poids ou d’autres valeurs (options 3, 5, 7 et 8 de la page Shipping de Mal’s Admin), ce champ indique le poids ou autre valeur à utiliser pour calculer les frais de port. Si vous n’utilisez pas ces options, laissez ce champ vide. Aide contextuelle : Spécifie le message à afficher dans une bulle quand le curseur survole ce bouton. Pour insérer automatiquement le contenu du champ Produit dans cette aide, entrez les caractères ^o (le premier caractère est obtenu en enfonçant simultanément les touches O et i) — le texte du champ Produit remplacera ces caractères lorsque vous publierez votre site. E-Achat Texte L’Action E-Achat Texte crée un lien texte HTML qui ajoute un produit dans le panier lorsqu’il est cliqué. Il peut être inséré dans une page ou dans un autre bloc HTML. Pour l’insérer, ouvrez le sous-menu Blocs Actions dans le menu Insertion et sélectionnez E-Achat Texte. E-Achat Texte : Options Les options de l’Action E-Achat Texte sont identiques à celles de l’Action E-Achat Bouton, sauf pour un champ. Référez-vous à la documentation de l’Action E-Achat Bouton pour les autres options. Cible : Spécifie où ce lien sera ouvert. Voir la section ‘Créer des liens dans une page basée sur des cadres’ dans le manuel de Référence de Freeway pour des détails sur les différentes possibilités de ce réglage. Texte dans lien : Ce champ spécifie le texte qui sera affiché avec le lien activé. Pour insérer automatiquement le contenu du champ Produit dans ce texte, entrez les caractères ^o (le premier caractère est obtenu en enfonçant simultanément les touches O et i) — le texte du champ Produit remplacera ces caractères lorsque vous publierez votre site. 22 L’Action E-Achat Formulaire est une autre Action permettant à vos clients d’ajouter des produits à leur panier, mais qui est plus évoluée que les Actions E-Achat Bouton et E-Achat Texte. Il crée un formulaire sur votre page de boutique, complétée par un bouton “Buy Now” (Acheter maintenant) sur lequel le client clique pour soumettre ses choix au panier Mal’s. En créant des produits enfants dans le E-Achat Formulaire vous pouvez ajouter des blocs de formulaire HTML offrant à vos clients un meilleur contrôle sur les quantités et les variations (par exemple une chemise peut être disponible en plusieurs tailles) des produits qu’ils désirent acheter. L’Action E-Achat Formulaire fonctionne avec deux autres Actions, E-Quantité et E-Produit Variation pour offrir cette fonctionnalité. L’Action E-Achat Formulaire peut être appliquée aux blocs HTML et aux tableaux HTML. Pour cela, sélectionnez le bloc sur lequel vous désirez appliquer cette Action, et sélectionnez E-Achat Formulaire dans le sousmenu Actions du menu Bloc. E-Achat Formulaire : Options Les options de E-Achat Formulaire sont pratiquement les mêmes que pour l’Action E-Achat Bouton. Les seules différences sont qu’il n’y a pas de champ Aide contextuelle, et qu’il y a une différence de comportement du champ Quantité qui est décrit ci-dessous. Quantité : Spécifie la quantité de produits à ajouter dans le panier lorsqu’il n’y a pas d’Action E-Quantité qui soit un enfant de l’Action E-Achat Formulaire, ou s’il n’y a pas de valeur valide sélectionnée dans l’Action E-Quantité enfant de l’Action E-Achat Formulaire. Référence E-Achat Formulaire E-Achat Formulaire : Ajout Quantités et Variations Vous utilisez les Actions E-Quantité et E-Produit Variation pour créer des champs quantité et variation disponibles pour le client. Ils peuvent être appliqués à certains blocs de formulaire HTML qui soient enfants du bloc sur lequel l’Action E-Achat Formulaire est appliquée. Les types de bloc formulaire sur lesquels ces Actions peuvent être appliquées sont les cases à cocher, les boutons radio, les champs de texte et les menus/ listes. Les blocs peuvent être soit des enfants insérés dans le bloc parent (cliquez dans le bloc E-Achat Formulaire et insérez le bloc formulaire enfant depuis le menu Insertion) ou des enfants absolus (dessinez le bloc formulaire enfant à l’intérieur du cadre du bloc E-Achat Formulaire). Vous utilisez la page Réglages de sortie du bloc dans la palette Inspecteur pour spécifier la quantité ou la variation que le bloc formulaire enfant ajustera quand le client cliquera sur le bouton Acheter maintenant. Les réglages spécifiques de chaque type de bloc formulaire sont détaillés ci-dessous. Blocs formulaires avec l’Action E-Quantité appliquée • Case à cocher : Valeur Entrez ici un nombre pour spécifier la quantité de produits ajoutés au panier si le client coche cette case. • Bouton Radio : Créez un groupe de boutons radios comme vous le faites d’habitude et appliquez l’action E-Quantité à chacun d’eux pour 23 Référence permettre au client de choisir une quantité parmi plusieurs options. Valeur Entrez ici un nombre spécifiant la quantité de produits ajoutés au panier si le client sélectionne ce radio bouton dans le groupe. • Menu/Liste : Permet de choisir une quantité dans une liste. Créez des paires Choix/Valeur pour chacune des quantités que vous désirez offrir à vos clients. Valeur Entrez ici un nombre spécifiant la quantité de produits ajoutés au panier pour chacun des Choix spécifiés. • Utiliser un bouton personnalisé dans un E-Achat Formulaire Si vous désirez utiliser un bouton pour un E-Achat Formulaire qui soit différent de celui ajouté automatiquement, créez simplement un bloc graphique enfant ou un bouton HTML du E-Achat Formulaire et appliquez l’Action E-Achat Bouton à l’enfant. Freeway reconnaîtra automatiquement que ce bouton est présent et l’utilisera comme bouton pour soumettre le formulaire, à la place du bouton par défaut. Champ Texte : Permet au client d’entrer la quantité de produits ajoutés au panier. Blocs formulaires avec l’Action E-Produit Variation appliquée • Case à cocher : Valeur : Entrez le texte spécifiant la variation du produit qui sera ajoutée si le client coche cette case. • Bouton Radio : Créez un groupe de boutons radios et appliquez l’Action E-Produit Variation à chaque bloc pour permettre au client de choisir la variation parmi plusieurs options. Valeur : Entrez le texte spécifiant la variation du produit qui sera ajoutée si le client choisit ce bouton radio dans le groupe. • Menu/Liste : Permet de choisir une variation dans une liste. Créez les paires Choix/ Valeur pour chaque variation que vous désirez offrir. Valeur : Entrez ici le texte correspondant à la variation à ajouter au panier pour le Choix spécifié. • 24 Champ Texte : Permet d’entrer la variation du produit à ajouter au panier. E-Revoir Bouton L’Action E-Revoir Bouton crée un bouton HTML ou graphique qui amène le client sur la page du panier lorsqu’il clique dessus. Il peut être appliqué sur des blocs graphiques et des boutons de formulaire HTML. Sélectionnez le bloc auquel vous désirez appliquer l’action, et choisissez E-Revoir Bouton dans le sous-menu Actions du menu Bloc. E-Revoir Bouton : Options Aide contextuelle Spécifie un message à afficher dans une bulle quand le curseur du client passe sur le bouton. Cible Spécifie où le nouveau lien doit être ouvert. Voir la section ‘Créer des liens dans une page basée sur des cadres’ dans le manuel de Référence de Freeway pour des détails sur les différentes possibilités de ce réglage. L’Action E-Revoir Texte crée un lien texte HTML qui amène le client sur la page du panier lorsqu’il clique dessus. Il peut être inséré dans la page ou dans un autre bloc HTML. Pour l’insérer, choisissez E-Revoir Texte dans le sous-menu Actions du menu Bloc. Référence E-Revoir Texte E-Revoir Texte : Options Les options de l’Action E-Revoir Texte sont identiques à celles de l’Action E-Revoir Bouton sauf pour un champ. Référez-vous à la documentation de l’Action E-Revoir Bouton pour les autres options. Texte dans lien : Ce champ spécifie le texte qui sera affiché avec le lien activé. 25 ">
Public link updated
The public link to your chat has been updated.
