1 Volume OSCDOX.COM Oscommerce Documentation Project Guide d’installation et de modification -1- OSCDOX – OSCOMMERCE DOCUMENTATION PROJECT Guide d’installation et de Modification by Michael Sasek and Melinda Odom Traduit de l’anglais par Josselin– [email protected] OSCdox.com and Michael Sasek P.O. Box 16123 • Phoenix, AZ 85011-1623 [email protected] • http://oscdox.com -i- Table of Contents Termes Clés: 3 Structure du repertoire 5 Exécution du script d’Installation 6 Sécurisez votre installation 13 Document Root Installation 14 Conclusion de l’installation 14 Quel fichiers dois-je éditer ? 15 Conventions du code et autres concepts généraux 16 Exercise 1 – Votre 1er projet 18 Exercise 2 : Réglage de la largeur de votre caddie 26 Les Blocks Systèmes latéraux 27 Ajout de Blocks, Liens et autres pages 29 Ajouter des liens en dehors des BoxesErreur ! Signet non défini. Modifier le look des blocs latérauxErreur ! Signet non défini. Section : “Comment Faire...” Exemples et Procédures 37 Edition CSS STYLESHEET: 41 Introduction C E guide vous permettra d’installer Oscommerce, de faire des changement graphique et de configurer les modules associés, Oscommerce est une solution de commerce électronique développée en open source. Ce guide suppose que vous connaissez les bases du langage HTML et que vous travaillez avec. Si vous n’y connaissez rien, trouvez-vous un bon bouquin sur le sujet afin d’en apprendre un peu plus! Bien que nous ayons essayé d’être le plus précis possible, les ressources contenues dans ce guide n’en sont pas moins exhaustives, elles sont en tous cas un bon point de départ. SVP notez qu’Oscommerce est en constante évolution dans son développement. Les changement de code sont journaliers. Cela étant dit, ce guide devrait vous être utile, en vous expliquant correctement les modifications à effectuer sur les fichiers. Si vous trouvez ce guide utile et que vous voudriez nous montrer votre ouvrage ou apporter votre contribution technique à ce guide, SVP visitez http://www.oscdox.com et joignez-vous aux discussions sur le forum. C O N V E N T I O N S , T E R M E S E T A L L U S I O N S 1 Chapter Conventions, Termes et allusions D dans tout ce guide, vous noterez l'utilisation I C O N K E Y lourde de la notation de directory path, les Valuable information références aux emplacements de fichier, et autre termes clés. Toutes les fois que vous trouvez un Keyboard exercise terme qui vous est peu familier, référez vous à cette section. En supplément, ce guide fait plusieurs allusions au sujet de votre première installation. D'abord, nous supposons que vous installerez votre caddie dans le sous répertoire /catalog de votre répertoire racine (root). Nous supposons également que vous installerez l’administration de votre caddie dans le sous répertoire /admin de votre répertoire racine (root). Tous les exemples de code, présent dans ce guide, dépendent de ces faits. termes clés: root – ce rapporte au répertoire racine de votre serveur. document root – se rapporte au répertoire de base_html accessible au public ou du Web local computer – c'est votre ordinateur personnel, non votre serveur web. – c'est un autre terme que nous utilisons pour votre serveur Web personnel localhost absolute path – c'est une adresse complète à partir de la racine de votre serveur. relative path – c’est une adresse relative à partir du répertoire courant. -3- I N S T A L L E R L E C A D D I E Installer le Caddie 2 Chapter O scommerce peut être installé sur Windows(98,2000,XP), Linux, et les machines basées sur Unix. Nous vous recommandons l’installation sur une machine basée sur Linux, mais tous fonctionnent bien, chacun avec leurs propres caprices. Les conditions de base afin d’obtenir un fonctionnement optimal sont un serveur Web, comme Apache ou IIS. Après vous avez besoin d’installer un serveur de base de données MySql, et le langage de script PHP, dans lequel Oscommerce est écrit. Si vous n'êtes pas sûr de répondre à ces exigences, abandonnez maintenant. Sans ces conditions minimales, Oscommerce ne fonctionnera pas. Ces instructions d'installation sont spécifiquement adaptées pour la version 2.2 CVS, et ne s'appliquent à aucune autre version précédente d'Oscommerce. Ensuite, les fichiers et la structure des répertoires doivent être téléchargés sur votre serveur Web. Ceci peu être accompli de différentes manières. Utilisez la méthode qui vous est la plus familière, c.-à-d., en ouvrant les archives d'Oscommerce sur votre ordinateur local et en utilisant votre programme de ftp favori pour télécharger ces fichiers, ou en utilisant wget et tar pour éviter la lenteur du téléchargement et le re-uploading (unix-linux seulement). Les fichiers peuvent être téléchargé vers le répertoire racine (document root), ou à dans un autre sous répertoire, comme /catalog. Note: si vous employez un client ftp pour télécharger ces fichiers, vous devez télécharger tous les fichiers PHP en mode ASCII, et non binaire. Avant que nous allions plus loin, assurez-vous d’avoir la capacité de créer des bases de données et des tables MySql. Si non, vous devrez entrer en contact avec l’administrateur de votre serveur et demander qu'ils créent la base de données pour vous. En outre, un autre outil valable pour manipuler des bases de données MySql est PHPMyAdmin, que vous pouvez télécharger sur http://www.phpmyadmin.net /. Beaucoup d’hébergeurs fournissent déjà cet outil pour vous, mais vous pouvez l'installer assez facilement si vous en avez besoin. Soyez sûr du mot de passe qui protège votre répertoire de PHPMyAdmin. Maintenant vous êtes prêt à créer votre base de données. Ce procédé est assez simple si vous utilisez PHPMyAdmin, et la plupart des providers qui fournissent MySql ont une interface pour que vous puissiez créer votre base de données. Les cours d'instructions de MySql excèdent la portée de ce guide, aussi si vous avez des ennuis, lisez la documentation sur http://www.mysql.com vous apprendrez comment créer et nommer votre base de données, placer les mot de passe, affecter un utilisateur, et accommoder ces informations, vous aurez besoin de tout ça bientôt. I N S T A L L E R L E C A D D I E Directory Structure Une fois que vous ouvrez les archives zip ou les archives tar d'Oscommerce, vous pourrez voir la structure des répertoires de ces archives. Il y a 2 niveaux de répertoires catalog et admin. Les fichiers que vous pouvez télécharger sont respectivement au deuxième niveau de chaque arborescence du répertoire. Catalog Catalog Admin Admin Ensuite, copiez les dossiers inférieurs (en caractères gras ci-dessus) jusque dans votre répertoire « document root » sur le serveur, comme ceci: Document Root (public_html or www) /catalog /admin Ou si vous voulez que le catalog soit dans votre document root au lieu du sous répertoire /catalog structurez simplement comme ceci: Document Root (téléchargé le contenu du dossier catalog ici) /admin Ensuite, il est important d’apporter les permissions appropriées aux répertoires, sur des systèmes UNIX ont fait ceci en utilisant la commande chmod. Les valeurs de chmod sont listées ci-dessous: Répertoire /admin/includes /catalog/includes /admin/includes/configure.php /catalog/includes/configure.php /catalog/images Niveau de permission chmod 755 chmod 755 chmod 777 chmod 777 chmod 777 Maintenant, créez le répertoire ' backups ' sous le dossier admin (ceci fixe l'erreur de sauvegarde que vous pourriez obtenir plus tard en cliquetant sur le lien de « sauvegarde de la base de données » sous « outils » et où vous recevrez un message d'erreur sur la barre supérieure de la page : Erreur : Le répertoire de sauvegarde n'existe pas. Veuillez placer ceci dans configure.php. Veillez à placer les permissions sur ce répertoire en chmod 777. 5 I N S T A L L E R L E C A D D I E Revue 1. Transférez les fichiers vers votre document root, en préservant la structure des répertoires. Vous pouvez faire cela en utilisant les commandes de wget et de tar sous UNIX ou Linux, ou vous pouvez employer votre client ftp pour télécharger les fichiers et la structure des répertoires. 2. Veillez à transférer des fichiers de PHP en mode ASCII, si vous utilisez votre client ftp. 3. Sélectionnez les permissions des répertoires et des fichiers comme marqués plus haut. 4. Créez votre base de données vide MySql et gardez sous le coude le nom de la base de données, le nom d’utilisateur et le mot de passe. Vous en aurez besoin dans la section suivante, pour l'installation d’Oscommerce. Lancez le script d’installation La prochaine étape dans l'installation sera de créer les tables dans votre base de données MySql, installer les données d'échantillon, et s’attaquer à configurer votre caddie Oscommerce sur le serveur. Dans votre browser écrivez l’url suivante: http://www.yourserver.com/catalog/install/install.php Remplacez le ' yourserver ' par votre Nom de Domaine ou votre Adresse IP. Ceci lancera la séquence d'installation Oscommerce. Au-dessous, examinez les copies d’écran des pages d'installation et des légendes. Celles-ci décomposent le processus entier d’installation, point par point. Figure 1-1 – Sélectionnez le bouton ‘Nouvelle Installation ’ 6 I N S T A L L E R L E C A D D I E Figure 1-2 Pour le numéro 1, assurez-vous que les deux cases sont sélectionnées. Pour le numéro 2, écrivez les adresses correctes. La copie d'écran ne sera peut-être pas correcte pour votre serveur. Assurez-vous de renseigner les adresses correctement. 2. SVP entrez les informations concernant votre serveur web : Repertoire racine (root) du serveur web : Ceci est le chemin d’accès absolu de la racine (root) du serveur. exemple: /home/myaccountname/public_html Répertoire WWW du catalogue. Ceci est le chemin d’accès relatif d’Oscommerce example : /catalog/ Répertoire WWW des outils d’Administration example: /admin/ 7 I N S T A L L E R L E C A D D I E Figure 1-3 Pour la question 3, écrivez les informations concernant votre base de données MYSQL que vous aviez gardé sous le coude, quand vous avez créé votre base de données MySql. Cliquez sur le bouton continuer. Database Server- Le serveur de base de données peut être sous la forme d’un nom d’hôte, comme db1.myserver.com, ou d’une Adresse IP, tel que 192, 168, 0,1. Habituellement le « localhost » fonctionnera plus justement. Username- Le nom d’utilisateur ayant les droits de connexion au serveur de base de donnée. Par exemple : mysql_10 Password- Le mot de passe utilisé ainsi que le nom d’utilisateur, forme Le compte d'utilisateur de la base de données. Note: Si le catalog doit être importé (choisi la page d’avant), le compte défini ici se connectera au serveur de base de données et devra donc avoir les permissions de création requises. Database- La base de données contenant les données du catalog. Un nom de base de données par exemple est: mysql_catalog 8 I N S T A L L E R L E C A D D I E Figure 1-4 Ensuite vous serez incités à importer la base de données. Cliquez sur continue. Figure 1-5 Si tout va bien, vous verrez à l'écran « succès ». Cliquez sur le bouton « continue ». 9 I N S T A L L E R L E C A D D I E Figure 1-6 Si vos permissions sont incorrectes, vous obtiendrez cet écran. Fixez vos permissions et cliquez sur “relance “ (retry) 10 I N S T A L L E R L E C A D D I E Figure 1-7 Voici en revue une partie de l'écran. Toute les informations présentes ici devrait être correcte, voir la prochaine page. 11 I N S T A L L E R L E C A D D I E Figure 1-8 Voici en revue la partie 2 de l'écran. Vous avez deux nouvelles options en bas. Vous pouvez permettre les connexions persistantes et vous pouvez choisir où enregistrer vos sessions. Sur les serveurs mutualisés, invalidez les connexions persistantes et enregistrez les sessions comme fichiers. Cliquez sur le bouton continuer. Figure 1-9 Quand vous atteignez cette page, vous avez terminé avec succès l'installation d'Oscommerce. Le bouton catalog vous portera au fonctionnement du caddie d'achats réel, et le bouton d'outil d'administration vous portera à votre console d'admin. 12 I N S T A L L E R L E C A D D I E Securiser votre Installation Félicitations, vous avez installé avec succès une copie fonctionnelle d'Oscommerce sur votre server web. Maintenant vous devez protéger cette installation. D'abord, et le plus facile de tous, effacez le répertoire entier /catalog/install. Ensuite, utilisez htacess sur votre répertoire /admin de sorte qu'il soit protégé par un mot de passe. Vous pouvez utiliser le gestionnaire de mot de passe sur votre compte si vous STEPS TO A SECURE INSTALL avez le cpanel ou faire une Delete the entire installation directory recherche sur le Web des commandes htaccess, vous y Set restrictive file and directory permissions –see below. trouverez des informations sur Insert a blank index.html file in all critical directories la façon d'utilser htacess. Protect your admin directory with .htaccess Habituellement votre providers Make sure you define default.php in your directory index aura des informations de listing in httpd.conf or in .htaccess. support sur ça, quelque part dans ca documentation. Ensuite, créer une page ' default.php ' à l'index de vos listes de répertoire dans le fichier de httpd.conf pour apache. Ceci fait votre page par default.php se montrera sans devoir saisir la chaîne de caractères entière: Ceci gardera apache d'envoyer la liste entière des fichiers et des répertoires de votre catalog. Vous pouvez faire ces changements vous-même en éditant votre configuration httpd.conf nommé par apache. Pour éditer ce fichier directement sur le root, la procédure de connexion au serveur est d'utiliser le pico de commande /path/to/apache/conf/httpd.conf si vous n'avez pas accès au root du serveur web, vous pouvez placer celle-ci par l'utilisation du htaccess, qui est également plus sûr pour les débutants. ajout traducteur : http://www.online.net/support/fr/doc/webperso/htaccess.html ATTENTION: ne bricolez pas votre fichier httpd.conf si vous ne savez pas ce que vous faites. Ceci pourrait détruire entièrement votre serveur si vous faites une erreur. Veillez à faire une sauvegarde de ce fichier avant de l'éditer. Si vous éditez votre fichier httpd.conf, ajoutez le rapport :DirectoryIndex default.php à la section <IfModule mod_dir.c> de votre fichier httpd.conf. Placer vos permissions Placer vos permissions comme ceci : Répertoires /admin/includes /catalog/includes /admin/includes/configure.php /catalog/includes/configure.php /catalog/images Niveau de permission chmod 755 chmod 755 chmod 644 chmod 644 chmod 777 En supplément, dans le répertoire /catalog, vous pouvez placer un fichier HTML vide nommé index.html. Ceci empêchera apache d'envoyer l'arborescence du répertoire en arrêtant les personnes mal intentionnées qui voudraient parcourir la liste des fichiers de votre répertoire. 13 I N S T A L L E R L E C A D D I E Installation Document Root Quand vous copiez vos fichiers sur le serveur, au lieu de copier le répertoire et les fichiers du catalog dans le sous répertoire /catalog, copiez simplement les fichiers et les répertoires au document root (votre répertoire WWW ou public_html) copiez le dossier admin dans le document root comme dit précédemment. Après dans votre browser entrez : http://www.yourserver.com/install/install.php . Replacez ‘yourserver’ par le nom de votre domaine ou l’adresse IP de votre serveur. Changez ce qui suit après l’installation : /includes/configure.php La ligne dans configure.php : define('DIR_WS_CATALOG', '/catalog/'); // absolute path requis Peut-être changé en : define('DIR_WS_CATALOG', '/'); // absolute path requis Et changez ces lignes : define('DIR_FS_DOCUMENT_ROOT', $DOCUMENT_ROOT); define('DIR_FS_CATALOG', DIR_FS_DOCUMENT_ROOT . DIR_WS_CATALOG); en define('DIR_FS_DOCUMENT_ROOT', '/home/serverusername/public_html'); define('DIR_FS_CATALOG', '/home/serverusername/public_html/'); Changez aussi les mêmes lignes dans le fichier /admin/includes/configure.php Conclusion de l’installation Si tout va bien ces instructions étaient assez claires pour vous aider à faire du bon travail. Mais hélas, vous n'êtes pas vraiment arrivés au bout de vos peines, plutôt au début même. Dans les chapitres suivants, nous forgerons les profondeurs Oscommerce afin de modifier son apparence. Soyez prêt à rigoler. 14 G U I D E D E 3 Chapter M O D I F I C A T I O N Guide de Modification Quels fichiers dois-je éditer ? En tant que créateur potentiel d'Oscommerce, vous devez vous familiariser avec les fichiers qui jouent un rôle important dans l’apparence d’Oscommerce. L’originalité d’Oscommerce est de générer des pages dynamiques ce qui permet au moins un procédé d'édition cohérent. Vous modifiez le même code dans tous les fichiers nécessaires et dans des emplacements semblables. Ce sont ces fichiers avec lesquels vous devrez vous accoutumer de travailler, pour personnaliser l’aspect de votre caddie : /catalog /catalog/includes /catalog/includes/languages stylesheet.css application_top.php french.php default.php column_left.php column_right.php ../languages/french A peu près chaque configure.php Tous les fichiers .php de fichier .php footer.php répertoire reproduit du html header.php qui crée l’apparence du site et doivent être édité pour changer l’aspect du site. Au-dessous voici une liste d'autres emplacements de fichiers fichier clés classés par répertoires : /catalog/images/ - catalogue des images (autre que les boutons de navigation), images de produit,….. /catalog/includes/languages/french/ -language images des drapeaux. /catalog/includes/languages/french/images/buttons -bouton de navigation du site. 15 G U I D E D E M O D I F I C A T I O N /catalog/includes/boxes/ - fichiers qui définissent les boîtes latérales et ce qu'elles contiennent. Avant que nous continuions, assurez-vous vous faites des copies de sauvegarde de tous les fichiers précités, au cas où vous feriez une erreur. En outre, ne travaillez pas sur un site « vivant » - vous pouvez détériorer le caddie et finir avec des fichiers inutilisable. Je vous suggère de créer un environnement de développement privé, séparé sur lequel vous pouvez travailler tranquillement. Ce peut être simplement un autre répertoire ou un sous domaine sur le même serveur. Le fichier stylesheet.css est une feuille de style, en cascade et il contrôle presque toutes les couleurs et les polices de tout le site. Je vous suggère de prendre une heure pour arriver à vous familier avec chacun des paramètres afférents à ce fichier stylesheet.css et ce qu'il fait. La plupart des paramètres sont pour moi assez évident, et si ils ne le sont pas, le changement des paramètres se voient très vite! Je trouve qu'ouvrir ce fichier dans un bon éditeur de css est la meilleure façon de bien progresser. Je vous recommande TopStyle. Cet utilitaire vous permettra de travailler avec stlyesheet.css très facilement. Un index des styles du fichier stylesheet.css est inclus à la fin de ce document, il détail tous les paramètres de contrôle inclus dans le fichier. Ensuite, le fichier default.php est la page du catalogue principale que vous voyez quand vous arrivez en premier sur votre site. Ce qui nous concerne c’est le code HTML qui est encastré dans ce fichier php. Il y a plusieurs sections qui contrôlent les diverses structures des tables, largeurs, etc. Chacune de ces sections doivent être modifiée pour créer un look différent à votre site. Je suggère que vous marquiez tous vos changements par un commentaire pour les dépister plus rapidement. C'est en jouant le petit poucet, que vous pourrez plus tard copier et coller vos changements facilement à tous les autres fichiers dans le caddie. C'est également une bonne idée juste au cas où vous décideriez d'améliorer par un éclair de génie une nouvelle version du caddie à une date ultérieure. Bonne chance en essayant de vous rappeler où vous avez collé 2 lignes de code il y a six mois... ☺ Conventions de code et autre concepts généraux L’originalité d’Oscommerce est de construire sont aspect par morceaux c’est un peu compliqué au début, mais une fois que vous apprenez ses conventions, vous pouvez efficacement modifier votre caddie très intensivement. D'abord, si vous regardez default.php dans un éditeur de texte, vous vous apercevrez que le code est divisé en sections. Ces sections sont définies comme suit : <!-- header //--> <?php require(DIR_WS_INCLUDES . 'header.php'); ?> <!-- header_eof //--> 16 G U I D E D E M O D I F I C A T I O N Le code <!—n’importe quel texte//--> définie le départ d’une section spécifique, et le code <!—n’importe quel texte_eof//--> défini la fin de la section. C'est important pour ceux qui ne lisent pas très bien le code php ou le code HTML. Exemple (de default.php): <body marginwidth="0" marginheight="0"> <!-- header //--> <?php require(DIR_WS_INCLUDES . 'header.php'); ?> <!-- header_eof //--> <!-- body //--> <table border="0" width="100%" cellspacing="3" cellpadding="3"> <tr> <td width=" <?php echo BOX_WIDTH; ?>" valign="top"> <table border="0" width=" <?php echo BOX_WIDTH; ?>" cellspacing="0" cellpadding="2"> <!—navigation_gauche //--> <?php require(DIR_WS_INCLUDES . 'column_left.php'); ?> <!—navigation_gauche_eof //--> Au-dessus, le code php, au début est séparé du code HTML par cette balise <?php et celle-ci ?> à la fin. Sachant ceci, vous pouvez sans risque, éditer le code HTML sans casser le code du noyau interne du script. Dans l'exemple précité plus haut, vous pouvez voir les conventions du code en action. En premier, vous voyez une balise html standard <body> suivi par le diviseur de la section <!—header//-->. Alors, j'ai mis en jaune, les balises <?php et ?> , ce qui excentre le code php qui se trouve entre elles, dans ce cas précis, le serveur requiert header.php avant l’analyse de tout le fichier default.php. Et finalement, la fermeture de la section en utilisant <!—header_eof//-->. Notez comment ceci est répété dans les sections ultérieures du code, du corps et de la navigation gauche. La compréhension de la convention ci-dessus est cruciale afin d’éditer l’apparence d'Oscommerce, et elle est utilisée dans chaque fichier d’Oscommerce. 17 M O D I F I C A T I O N G U I D E Exercise 1 – Votre premier project Le code entre les balises <?php et ?>, y compris les balises réelles, peut être traité comme modules discrets du code, et peut être déplacé autour des tags html et dans une certaine mesure, dans le texte lui-même. Un exemple simple de ces changements dans l’ordre des champs, dans le fichier account_edit.php. Voyez les captures d'écran et les petits morceaux du code dessous: Le projet est de changer l'ordre des articles mis en valeur par les boîtes rouges. L'ordre par défaut est plutôt mis au hasard, et pas très intuitif. Je vais les mettre dans un ordre plus convivial, c.-à-d. Ville, Etats (ce qui n’existe pas en France), Code Postal, et Pays. Pour faire ceci, j'ai besoin d'ouvrir account_edit.php, et je cherche la section du fichier qui est en rapport avec le l’ordre précitée. Je sais que par convention ce sera dans la section <!—body_text//--> , je dois maintenant chercher ça ! Ok, j’ai trouvé ça! Mais j’ai trouvé cette partie du code (notez la partie en surbrillance): - 18 - G U I D E D E M O D I F I C A T I O N <?php $account_query = tep_db_query("select c.customers_gender, c.customers_firstname, c.customers_lastname, c.customers_dob, c.customers_email_address, a.entry_company, a.entry_street_address, a.entry_suburb, a.entry_postcode, a.entry_city, a.entry_zone_id, a.entry_state, a.entry_country_id, c.customers_telephone, c.customers_fax, c.customers_newsletter from " . TABLE_CUSTOMERS . " c, " . TABLE_ADDRESS_BOOK . " a where c.customers_id = '" . $customer_id . "' and a.customers_id = c.customers_id and a.address_book_id = '" . $customer_default_address_id . "'"); $account = tep_db_fetch_array($account_query); require(DIR_WS_MODULES . 'account_details.php'); ?> La ligne, require(DIR_WS_MODULES . 'account_details.php'); , nous pointe dans la bonne direction. Toutes les fois que vous voyez du code php qui ressemble au départ au nom d’un répertoire ou au nom d’un fichier entre parenthèses, dans ce cas, DIR_WS_MODULES et account_details.php. Cela me dit je dois regarder dans le répertoire des Modules, comme spécifié dans le fichier configure.php, trouver le fichier account_details.php. Génial! Après avoir éditez account_details.php dans un éditeur de texte, cherchez n'importe quoi qui vous mette près de ce que vous cherchez. Dans ce cas, cherchont une variable ou du texte qui fait référence à « Ville » ou « Pays », depuis que je veux déplacer ces articles. J'utilise souvent la commande « recherchez » dans mon éditeur de texte, donc vous ne devez pas trop galérer. Utiliser cette méthode, identifiez les blocs du code qui construisent la mise en forme pour Ville et Pays. Voici ce que j'ai trouvé. Le code HTML est en Vert, le code php est en Jaune. <tr> <td class="main">&nbsp;<?php echo ENTRY_CITY; ?></td> <td class="main">&nbsp; <?php if ($is_read_only) { echo $account['entry_city']; } elseif ($error) { if ($entry_city_error) { echo tep_draw_input_field('city') . '&nbsp;' . ENTRY_CITY_ERROR; } else { echo $HTTP_POST_VARS['city'] . tep_draw_hidden_field('city'); } } else { echo tep_draw_input_field('city', $account['entry_city']) . '&nbsp;' . ENTRY_CITY_TEXT; } ?> </td> </tr> Notez comment ceci crée un joli bloc différentiable de code. Les balises < tr > et < td > sont vos divisions de lignes et de cellules, et emboîtée d'une manière ordonnée dans cette cellule on trouve la séquence type du code php, qui sort le nom de « ville ». 19 G U I D E D E M O D I F I C A T I O N D'ici, tout que vous devez faire est de coupé ce code hors de son endroit, et le coller au-dessus du bloc modulaire qui définit ENTRY_POST_CODE. Prochaine recherche le bloc qui définit ENTRY_STATE, copier et coller aussi au-dessus du block ENTRY_POST_CODE, mais au-dessous du block ENTRY_CITY. Regardez la comparaison du code sur la prochaine page. Voici le code Original (J'ai mis en valeur chaque bloc modulaire de code avec une couleur différente): <tr> <td class="main">&nbsp;<?php echo ENTRY_STREET_ADDRESS; ?></td> <td class="main">&nbsp; <?php if ($is_read_only) { echo $account['entry_street_address']; } elseif ($error) { if ($entry_street_address_error) { echo tep_draw_input_field('street_address') . '&nbsp;' . ENTRY_STREET_ADDRESS_ERROR; } else { echo $HTTP_POST_VARS['street_address'] . tep_draw_hidden_field('street_address'); } } else { echo tep_draw_input_field('street_address', $account['entry_street_address']) . '&nbsp;' . ENTRY_STREET_ADDRESS_TEXT; } ?></td> </tr> <? if (ACCOUNT_SUBURB == 'true') { ?> <tr> <td class="main">&nbsp;<?php echo ENTRY_SUBURB; ?></td> <td class="main">&nbsp; <?php if ($is_read_only) { echo $account['entry_suburb']; } elseif ($error) { if ($entry_suburb_error) { echo tep_draw_input_field('suburb') . '&nbsp;' . ENTRY_SUBURB_ERROR; } else { echo $HTTP_POST_VARS['suburb'] . tep_draw_hidden_field('suburb'); } } else { echo tep_draw_input_field('suburb', $account['entry_suburb']) . '&nbsp;' . ENTRY_SUBURB_TEXT; } ?></td> </tr> <? } ?> <tr> <td class="main">&nbsp;<?php echo ENTRY_POST_CODE; ?></td> <td class="main">&nbsp; <?php if ($is_read_only) { echo $account['entry_postcode']; } elseif ($error) { if ($entry_post_code_error) { echo tep_draw_input_field('postcode') . '&nbsp;' . ENTRY_POST_CODE_ERROR; 20 G U I D E D E M O D I F I C A T I O N } else { echo $HTTP_POST_VARS['postcode'] . tep_draw_hidden_field('postcode'); } } else { echo tep_draw_input_field('postcode', $account['entry_postcode']) . '&nbsp;' . ENTRY_POST_CODE_TEXT; } ?></td> </tr> <tr> <td class="main">&nbsp;<?php echo ENTRY_CITY; ?></td> <td class="main">&nbsp; <?php if ($is_read_only) { echo $account['entry_city']; } elseif ($error) { if ($entry_city_error) { echo tep_draw_input_field('city') . '&nbsp;' . ENTRY_CITY_ERROR; } else { echo $HTTP_POST_VARS['city'] . tep_draw_hidden_field('city'); } } else { echo tep_draw_input_field('city', $account['entry_city']) . '&nbsp;' . ENTRY_CITY_TEXT; } ?></td> </tr> <tr> <td class="main">&nbsp;<?php echo ENTRY_COUNTRY; ?></td> <td class="main">&nbsp; <?php if ($is_read_only) { echo tep_get_country_name($account['entry_country_id']); } elseif ($error) { if ($entry_country_error) { tep_get_country_list('country', $HTTP_POST_VARS['country'], (ACCOUNT_STATE == 'true') ? 'onChange="update_zone(this.form);"' : ''); echo '&nbsp;' . ENTRY_COUNTRY_ERROR; } else { echo tep_get_country_name($HTTP_POST_VARS['country']) . tep_draw_hidden_field('country'); } } else { tep_get_country_list('country', $account['entry_country_id'], (ACCOUNT_STATE == 'true') ? 'onChange="update_zone(this.form);"' : ''); echo '&nbsp;' . ENTRY_COUNTRY_TEXT; } ?></td> </tr> <?php if (ACCOUNT_STATE == 'true') { $customers_state = ($account['entry_state']) ? $account['entry_state'] : JS_STATE_SELECT; ?> <tr> <td class="main">&nbsp;<?php echo ENTRY_STATE; ?></td> <td class="main">&nbsp; <?php if ($is_read_only) { echo tep_get_zone_name($account['entry_country_id'], $account['entry_zone_id'], $account['entry_state']); } elseif ($processed) { 21 G U I D E D E M O D I F I C A T I O N echo tep_get_zone_name($HTTP_POST_VARS['country'], $HTTP_POST_VARS['zone_id'], $HTTP_POST_VARS['state']) . tep_draw_hidden_field('zone_id') . tep_draw_hidden_field('state'); } else { echo tep_get_zone_list('zone_id', $account['entry_country_id'], $account['entry_zone_id'], 'onChange="resetStateText(this.form);"'); echo '&nbsp;' . ENTRY_STATE_TEXT; } ?></td> </tr> Maintenant c'est juste une affaire de ré-arrangeant des couleurs! Les couleurs commencent comme ça Vert, Jaune, Bleu, Gris, Sarcelle,kaki,. Je change l'ordre à Vert, Jaune, Gris, kaki, Bleu, Sarcelle. Voici ce que ca donne : <tr> <td class="main">&nbsp;<?php echo ENTRY_STREET_ADDRESS; ?></td> <td class="main">&nbsp; <?php if ($is_read_only) { echo $account['entry_street_address']; } elseif ($error) { if ($entry_street_address_error) { echo tep_draw_input_field('street_address') . '&nbsp;' . ENTRY_STREET_ADDRESS_ERROR; } else { echo $HTTP_POST_VARS['street_address'] . tep_draw_hidden_field('street_address'); } } else { echo tep_draw_input_field('street_address', $account['entry_street_address']) . '&nbsp;' . ENTRY_STREET_ADDRESS_TEXT; } ?></td> </tr> <? if (ACCOUNT_SUBURB == 'true') { ?> <tr> <td class="main">&nbsp;<?php echo ENTRY_SUBURB; ?></td> <td class="main">&nbsp; <?php if ($is_read_only) { echo $account['entry_suburb']; } elseif ($error) { if ($entry_suburb_error) { echo tep_draw_input_field('suburb') . '&nbsp;' . ENTRY_SUBURB_ERROR; } else { echo $HTTP_POST_VARS['suburb'] . tep_draw_hidden_field('suburb'); } } else { echo tep_draw_input_field('suburb', $account['entry_suburb']) . '&nbsp;' . ENTRY_SUBURB_TEXT; } ?></td> </tr> <? } ?> <tr> <td class="main">&nbsp;<?php echo ENTRY_CITY; ?></td> <td class="main">&nbsp; <?php 22 G U I D E D E M O D I F I C A T I O N if ($is_read_only) { echo $account['entry_city']; } elseif ($error) { if ($entry_city_error) { echo tep_draw_input_field('city') . '&nbsp;' . ENTRY_CITY_ERROR; } else { echo $HTTP_POST_VARS['city'] . tep_draw_hidden_field('city'); } } else { echo tep_draw_input_field('city', $account['entry_city']) . '&nbsp;' . ENTRY_CITY_TEXT; } ?></td> </tr> <tr> <td class="main">&nbsp;<?php echo ENTRY_STATE; ?></td> <td class="main">&nbsp; <?php if ($is_read_only) { echo tep_get_zone_name($account['entry_country_id'], $account['entry_zone_id'], $account['entry_state']); } elseif ($processed) { echo tep_get_zone_name($HTTP_POST_VARS['country'], $HTTP_POST_VARS['zone_id'], $HTTP_POST_VARS['state']) . tep_draw_hidden_field('zone_id') . tep_draw_hidden_field('state'); } else { echo tep_get_zone_list('zone_id', $account['entry_country_id'], $account['entry_zone_id'], 'onChange="resetStateText(this.form);"'); echo '&nbsp;' . ENTRY_STATE_TEXT; } ?></td> </tr> <tr> <td class="main">&nbsp;<?php echo ENTRY_POST_CODE; ?></td> <td class="main">&nbsp; <?php if ($is_read_only) { echo $account['entry_postcode']; } elseif ($error) { if ($entry_post_code_error) { echo tep_draw_input_field('postcode') . '&nbsp;' . ENTRY_POST_CODE_ERROR; } else { echo $HTTP_POST_VARS['postcode'] . tep_draw_hidden_field('postcode'); } } else { echo tep_draw_input_field('postcode', $account['entry_postcode']) . '&nbsp;' . ENTRY_POST_CODE_TEXT; } ?></td> </tr> <tr> <td class="main">&nbsp;<?php echo ENTRY_COUNTRY; ?></td> <td class="main">&nbsp; <?php if ($is_read_only) { echo tep_get_country_name($account['entry_country_id']); } elseif ($error) { if ($entry_country_error) { tep_get_country_list('country', $HTTP_POST_VARS['country'], (ACCOUNT_STATE == 'true') ? 'onChange="update_zone(this.form);"' : ''); echo '&nbsp;' . ENTRY_COUNTRY_ERROR; } else { 23 G U I D E D E M O D I F I C A T I O N echo tep_get_country_name($HTTP_POST_VARS['country']) . tep_draw_hidden_field('country'); } } else { tep_get_country_list('country', $account['entry_country_id'], (ACCOUNT_STATE == 'true') ? 'onChange="update_zone(this.form);"' : ''); echo '&nbsp;' . ENTRY_COUNTRY_TEXT; } ?></td> </tr> Maintenant, épargnez vous ces changements et visitez la page dans votre navigateur. Vous pouvez voir les changements mis en valeur ci-dessous: Original Page 24 G U I D E D E M O D I F I C A T I O N Modified Page C'est une démonstration assez simple de la modularité de l'affichage du code que vous pouvez modifier. Dans cet exemple, nous avons déplacé des zones d’affichages et des cellules, mais il devrait être assez évident de modifier la structure d’une table pour voir comment vous pouvez augmenter celle-ci, de changer et son positionnement, aussi bien que la sortie graphique. 25 M O D I F I C A T I O N G U I D E Exercise 2 : Réglage de la largeur de votre caddie Cette section illustre comment changer la largeur de votre caddie d'achats et son affichage dans un browser. C’est assez facile à faire. Ouvrez le fichier default.php dans Dreamweaver ou un bon éditeur de texte. Dans Dreamweaver, vous aurez la vue du code et la vue de conception, ce qui est très maniable pour changer la structure d’une table à la volée, vous pourrez ainsi visualiser immédiatement les changements effectué au frame. En utilisant un éditeur de texte, vous devez bien connaître le code qui manque de clarté, mais dans ou l’autre vous obtiendrez de bon résultat. Recherchez le code HTML qui contrôle les attributs de la table principale. Les éléments concernés sont en caractères gras ci-dessous. Change this: <!-- body //--> <table border="0" width="100%" cellspacing="3" cellpadding="3"> <tr> <td width="<?php echo BOX_WIDTH; ?>" valign="top"><table border="0" width="<?php echo BOX_WIDTH; ?>" cellspacing="0" cellpadding="2"> To this: <!-- body //--> <table border="0" width="750" cellspacing="1" cellpadding="1" align=”center”> <tr> <td width="<?php echo BOX_WIDTH; ?>" valign="top"><table border="0" width="<?php echo BOX_WIDTH; ?>" cellspacing="0" cellpadding="2"> Le changement ci-dessus placera la largeur de votre caddie à 750 Pixel et centrera la table sur la page. Il ramènera également la remplissage et l'interligne à 1 Pixel. Étape une terminée. Ensuite vous devez effectuer les mêmes configurations dans header.php et footer.php dans votre répertoire / catalog/includes. Étape deux est terminée. Voyez la copie d’écran suivante. - 26 - G U I D E D E M O D I F I C A T I O N Les Blocs Sytèmes latéraux Le prochain exemple montrera comment garder les blocs que vous désirez voir s’afficher dans le caddie d'achats, et comment déplacer les blocs existants de part et d’autre. Il montrera également comment invalider les blocs qui ne vous sont pas nécessaires. Savoir comment faire ceci vous permettra de changer rapidement l’aspect du caddie. D'abord, pour invalider l’affichage d’un « sideblock » donné, vous devez éditer le code php dans un de deux fichiers, column_left.php ou column_right.php, tous les deux se trouvent dans le répertoire /catalog/includes/. Pour invalider l’affichage du bloc « reviews » , retirez simplement la ligne suivante de column_right.php: require(DIR_WS_BOXES . 'reviews.php'); Pour invalider l’affichage du bloc « languages » et du bloc « devises » d’un côté de la page, retirez la ligne du fichier column_right.php. Pour déplacer le bloc vers le côté gauche, couper la portion de code et déplacement là dans column_left.php où vous voulez qu'il apparaisse : 27 G U I D E D E M O D I F I C A T I O N if (substr(basename($PHP_SELF), 0, 8) != 'checkout') { include(DIR_WS_BOXES . 'languages.php'); include(DIR_WS_BOXES . 'currencies.php'); } Pour changer la largeur réelle des colonnes latérales, trouvez et éditez la ligne suivante dans application_top.php. Changer 125 à la largeur que vous désirez avoir en Pixel : define('BOX_WIDTH', 125); Maintenant, pour retirer complètement la colonne de côté, nous devons éditer d'abord le fichier default.php Recherchez la section étiquetée <! - - body_text_eof //-->. directement au-dessous de cette balise, vous devrez effacer le code suivant : <td width="<?php echo BOX_WIDTH; ?>" valign="top"> <table border="0" width="<?php echo BOX_WIDTH; ?>" cellspacing="0" cellpadding="2"> <!-- right_navigation //--> <?php require(DIR_WS_INCLUDES . 'column_right.php'); ?> <!-- right_navigation_eof //--> </table> </td> Sauver default.php et lancer là dans votre browser. La colonne droite est partie. Voyez la copie d’écran suivante : 28 G U I D E D E M O D I F I C A T I O N Figure 2-1 – La colonne de droite n’est plus là Nous n’avons pas encore terminés. Afin que la colonne de droite soit entièrement retirée dans tout le site entier, vous devez retirer l’affichage du code en question de CHAQUE page des fichier php. Recherchez dans chaque fichier de votre répertoire / catalog la balise <! - - le body_text_eof //--> et effacez le même bloc de code que nous avons effacé dans default.php Ajout de Blocks, Liens et Nouvelles Pages Nous examinerons maintenant comment ajouter nos propres cadres faits sur commande, aussi bien qu’ajouter ou modifier des liens dans pages et changer les images dans des blocs existant. En outre, nous apprendrons comment ajouter des éléments aux colonnes, en dehors des cadres existant. Il est assez facile d’exécuter toutes ces modifications, mais elles ne sont pas entièrement intuitives (Aie !). 29 G U I D E D E M O D I F I C A T I O N Branchons-nous desuite dessus. Les fichiers impliqués sont : /catalog/includes dir: column_left.php column_right.php /catalog/includes/boxes dir: Tous les fichiers dans ce répertoire. Ouvrez simplement information.php dans un éditeur de texte etenregistrez le sous test.php. Alors dans column_left.php, ajoutez cette ligne : require(DIR_WS_BOXES . 'test.php'); directement au-dessous de cette ligne: require(DIR_WS_BOXES . 'information.php'); Enregistrez column_left.php sur votre serveur, et rechargez la page principale du catalog. Vous verrez maintenant 2 cadres d'information du côté gauche. Le second que nous avons juste additionné avec une ligne de code. C'est la partie la plus facile.. Voyez la copie d’écran ci-contre : La prochaine étape est de personnaliser notre cadre, et pour ce faire, nous devons modifier quelques plus avant notre fichier. Je veux changer la barre de titre de notre nouveau cadre, aussi bien que créer de nouveaux liens, pointer vers des pages que je créerai également.. Ce processus est un peu plus chiant qu'il devrait être, mais nous devons faire avec. Allons-y! Les fichiers et leurs chemin d’accès sont énumérés cidessous: Pour cet exemple, je créerai quatre liens vers des pages appelées : testpage1.php, testpage2.php testpage3.php, et testpage4.php. dans le nouveau bloc « information » que nous avons créé sur la page principale. J'utilise le fichier original shipping.php comme modèle. Utilisez cet exemple pour commencer. Le processus est le même pour les autres blocs, vous avez besoin juste d'identifier les fichiers à copier et à modifier. Vous êtes perdu? Bon. lisez ceci… 30 G U I D E D E M O D I F I C A T I O N Maintenant, j'expliquerai point par point de ce que vous devez faire. Ouvrez les fichiers suivants dans WordPad ou un autre éditeur de texte qui ne modifie pas le code, et vous permette les commande rechercher et remplacer : /catalog/includes/application_top.php /catalog/includes/languages/french.php /catalog/includes/languages/french/shipping.php /catalog/shipping.php /catalog/includes/boxes/test.php Dans le fichier /catalog/includes/application_top.php, trouvez la section marquée ‘définissez les noms de fichier utilisés dans le projet (define filenames used in the project.).’ Dans cette section, copiez n’importe quelle définition de fichiers, et copiez là sur une nouvelle ligne. Maintenant vous devez modifier la ligne nouvellement collée pour vous diriger à ' testpage1 ' voyez l'exemple cidessous : define('FILENAME_ACCOUNT', 'account.php'); Collez alors celle-ci sur une nouvelle ligne juste après elle. Créez quatre nouvelles définition comme suit : define('FILENAME_TESTPAGE1', define('FILENAME_TESTPAGE2', define('FILENAME_TESTPAGE3', define('FILENAME_TESTPAGE4', 'testpage1.php'); 'testpage2.php'); 'testpage3.php'); 'testpage4.php'); Maintenant, enregistré /catalog/includes/application_top.php. C'est l'étape qui crée les définitions de nom de fichier de sorte qu'Oscommerce puisse établir des liens. Après, dans le fichier /catalog/includes/languages/french.php, trouver la section marquée : « texte du cadre information». Copiez la section entière et coller là sous la section originale. Changer la section devrait ressembler à ceci: // information box text in includes/boxes/test.php define('BOX_HEADING_TEST', 'Test Box'); define('BOX_TEST_LINK1', 'Test Link 1'); define('BOX_TEST_LINK2', 'Test Link 2'); define('BOX_TEST_LINK3', 'Test Link 3'); define('BOX_TEST_LINK4', 'Test Link 4'); Enregistrez french.php. Cette étape a crée le lié le texte avec chaque nouveau lien que vous avez créée. 31 G U I D E D E M O D I F I C A T I O N Dans le fichier: /catalog/includes/languages/french/shipping.php editez les lignes suivantes : define('NAVBAR_TITLE', 'Shipping & Returns'); define('HEADING_TITLE', 'Shipping & Returns'); define('TEXT_INFORMATION', 'Enter your shipping info here'); ressemble à ca :: define('NAVBAR_TITLE', 'Test Page 1'); define('HEADING_TITLE', 'Test Page 1'); define('TEXT_INFORMATION', 'This is an added sample page'); Enregistrez-sous /catalog/includes/languages/french/testpage1.php Répétez ceci trois fois encore, créant ainsi testpage2, 3, et 4. C'est l'étape qui crée réellement le texte qui sera sur chacune de vos nouvelles pages, et dans le processus, crée 4 nouveaux fichiers . Dans le fichier : /catalog/shipping.php en utilisant la commande remplacer de vous éditeur de texte : Remplacer ça : FILENAME_SHIPPING Par ça: FILENAME_TESTPAGE1 Enregistrez-sous /catalog/testpage1.php Répétez ceci trois fois encore, Changez FILENAME_TESTPAGE1 en FILENAME_TESTPAGE2, 3 et 4 et enregistrez sous testpage2.php, 3 and 4. Cette étape crée les pages qui seront chargées par les liens. Finallement editez le fichier /catalog/includes/boxes/test.php pour qu’il ressemble a ceci (les changements sont mis en valeur): <?php $info_box_contents = array(); $info_box_contents[] = array('align' => 'left', 'text' => BOX_HEADING_TEST ); new infoBoxHeading($info_box_contents, false, false); $info_box_contents = array(); $info_box_contents[] = array('align' => 'left', 'text' => '<a href="' . tep_href_link(FILENAME_TESTPAGE1, '', 'NONSSL') . '">' . '</a><br>' . '<a href="' . tep_href_link(FILENAME_TESTPAGE2, '', 'NONSSL') . '">' . '</a><br>' . '<a href="' . tep_href_link(FILENAME_TESTPAGE3, '', 'NONSSL') . '">' . '</a><br>' . '<a href="' . tep_href_link(FILENAME_TESTPAGE4, '', 'NONSSL') . '">' . '</a>' 32 BOX_TEST_LINK1 . BOX_TEST_LINK2 . BOX_TEST_LINK3 . BOX_TEST_LINK4 . G U I D E D E M O D I F I C A T I O N Ceci change le texte qui qui s’affiche dans le browser. Assurez-vous de télécharger les fichiers vers les répertoires appropriés, comme certains d'entre eux ont les mêmes noms de fichier. Affichez votre catalogue dans votre navigateur et les nouveaux liens devraient apparaître, dans votre nouveau bloc! Voyez l'image à gauche. Ajouter liens en dehors des blocs Ensuite, vous pouvez vouloir ajouter des liens ou du code HTML à la colonne gauche ou droite sans l'entourer dans un cadre, tel qu’un boutton clignotant, des logos ou n’importe quoi de plus que vous puissiez imaginer. C'est une petite édition facile, qui exigent seulement que vous ajoutiez un peu du code à column_left.php ou à column_right.php. Ci-dessous ce trouve un échantillon de code à ajouter après la fermante fermante de php ?> <tr> <td><img src="http://www.link-to-sampleimage.com"></td> </tr> Voyez la copie d’écran de tous les changements effectué jusqu’ici. Notez l'image « Thawte » en bas à de la colonne gauche. Elle se trouve à l’extérieur des blocs : 33 G U I D E D E M O D I F I C A T I O N Modifier l’aspect des blocs Nous avons appris comment ajouter et invalider des blocs, les déplacer de part et d’autres, ajouter et retirer des liens et des pages. Maintenant ce que nous allons faire vous semblera vraiment différent. Nous entrons dans la modification de la police, des graphiques, des couleurs et des modèles des blocs. Les fichiers principaux pour ces modifications sont : catalog/includes/classes/boxes.php - Cela contrôle la construction des boîtes existantes. catalog/stylesheet.css – C'est ici que vous changez ou ajoutez des styles pour affectent les blocs.. catalog/includes/boxes/ - Ici tous les fichiers php sont les blocs existants. Le prochain exemple montrera quel code vous devez éditer dans le fichier boxes.php et stylesheet.css afin de retirer les graphiques faisants le coin, changez la couleur, et ajoutez une bordure au-dessus et en-dessous des blocs comme séparateur. Dans le Fichier stylesheet.css, créez le style “infoBoxHeading” pour lui faire avoir une bordure supérieure et inférieure d’une largeur de 2px.. Dans catalog/includes/classes/boxes.php trouvez le code suivant (autour des lignes 97-100) : class infoBoxHeading extends tableBox { function infoBoxHeading($contents, $left_corner = false, $right_corner = false, $right_arrow = false) { $this->table_cellpadding = '0'; Et ajoutez cette ligne au-dessous d’elle : $this->table_parameters = 'class="infoBoxHeading"'; Ceci créera une balise de classe de style dans la génération du code html, quand les blocs seront appelés cela changera leur titre avec une bordure supérieure et inférieure. Voir la copie d’écran ci-contre : Ensuite, pour nettoyer les entêtes des blocs, nous voulons retirer les graphiques faisants le coin complètement arrondis et carrés des blocs, comme un autre exemple de modification. Il y a 2 façons de faire ça : On retire le code qui implante les images ou on change les graphiques en .gif transparent. Je trouve cette façon de charger le GIF transparent, plus facile. Pour faire ceci, trouvez simplement ce code dans boxes.php: 34 G U I D E D E M O D I F I C A T I O N class infoBoxHeading extends tableBox { function infoBoxHeading($contents, $left_corner = true, $right_corner = true, $right_arrow = false) { $this->table_cellpadding = '0'; if ($left_corner) { $left_corner = tep_image(DIR_WS_IMAGES . 'infobox/corner_left.gif'); } else { $left_corner = tep_image(DIR_WS_IMAGES . 'infobox/corner_right_left.gif'); } if ($right_arrow) { $right_arrow = '<a href="' . $right_arrow . '">' . tep_image(DIR_WS_IMAGES . 'infobox/arrow_right.gif', ICON_ARROW_RIGHT) . '</a>'; } else { $right_arrow = ''; } if ($right_corner) { $right_corner = $right_arrow . tep_image(DIR_WS_IMAGES . 'infobox/corner_right.gif'); } else { $right_corner = $right_arrow . tep_draw_separator('pixel_trans.gif', '11', '14'); } Et remplacer les chemins mis en surbrillance par le nom de fichier ‘pixel_trans.gif’. Ca devrait ressembler au code suivant : class infoBoxHeading extends tableBox { function infoBoxHeading($contents, $left_corner = false, $right_corner = false, $right_arrow = false) { $this->table_cellpadding = '0'; $this->table_parameters = 'class="infoBoxHeading"'; if ($left_corner) { $left_corner = tep_image(DIR_WS_IMAGES . 'pixel_trans.gif'); } else { $left_corner = tep_image(DIR_WS_IMAGES . 'pixel_trans.gif'); } if ($right_arrow) { $right_arrow = '<a href="' . $right_arrow . '">' . tep_image(DIR_WS_IMAGES . 'infobox/arrow_right.gif', ICON_ARROW_RIGHT) . '</a>'; } else { $right_arrow = ''; } if ($right_corner) { $right_corner = $right_arrow . tep_image(DIR_WS_IMAGES . 'pixel_trans.gif'); } else { $right_corner = $right_arrow . tep_draw_separator('pixel_trans.gif', '11', '14'); } Cela supprime complètement les images des coins. De même, vous pourriez très facilement, spécifier vos propres images. Un changement final est d’augmenter la hauteur du titre des blocs. Cela fait des titres plus large sur le haut des blocs. Pour faire ceci, trouvez le code suivant dans boxes.php: 35 G U I D E D E M O D I F I C A T I O N $info_box_contents = array(); $info_box_contents[] = array(array('align' => 'left', 'params' => 'height="14" class="infoBoxHeading"', 'text' => $left_corner), array('align' => 'left', 'params' => 'width="100%" height="14" class="infoBoxHeading"', 'text' => '<b>' . $contents[0]['text'] . '</b>'), array('align' => 'left', 'params' => 'height="14" class="infoBoxHeading"', 'text' => $right_corner)); $this->tableBox($info_box_contents, true); et changez les hauteurs en surbrillance en nombre que vous voulez. Plus c’est hauts = plus les titres sont larges. Je les change à 20 pour cet exemple. Voyez la copie d’écran ci-dessous : Après 36 How-To Section –Examples and Procedures Note: Cette section est une compilationd e nombreuses sources, donner un crédit individuel serait trop important. Aussi je vous informe que je n’ai pas écris les solutions suivantes, je les aies seulement compilées pour en facilité l’usage et la diffusion. J’aimerais quand même remercier l’ensemble des personnes qui ont consacré leur temps et leur compétences à fournir des solutions aux problèmes compilés ci-dessous. Merci FOND D’IMAGES DANS LES COLONNES GAUCHE ET DROITES : Q. Comment vous mettez un fond d'image dans les colonnes gauches et droites dans la version 2.2CVS? A: Mettez ce code dans la page default.php et chaque page du répertoire /catalog/ <!-- body //--> <table border="0" width="100%" cellspacing="0" cellpadding="3"> <tr> <td width="<?php echo BOX_WIDTH; ?>" valign="top" background="images/left_column.jpg" bgcolor="#5a6ba5"><table border="0" width="<?php echo BOX_WIDTH; ?>" cellspacing="0" cellpadding="8"> <!-- left_navigation //--> CHANGEZ TOUS LES COINS DE BLOCS EN ARRONDI : Jetez un coup d'oeil dans le code de chaque bloc (boxes). Là vous trouverez quelque chose comme ceci : new infoBoxHeading($info_box_contents, false, false); Changez les 2 'false' en 'true' votre bloc aura des coins arrondis a gauche et à droite. AJOUT DE TELECHARGEMENT : Ajouter le produits au catalogue, alors allez aux attributs et ajoutez un attribut de téléchargement : Placez les permissions de /catalog/pub en chmod 777 et /catalog/download en chmod 755 EMAIL EXTENSIONS ADDITIONS : Ceci a été déjà changé dans les versions postérieures d'Oscommerce mais il fait bon de le savoir : Les adresses Email .biz sont marquées "invalid email address" quand elles sont enregistrées. Regardez dans validations.php à la function tep_validate_email. Vous verez une liste case case case case case case 'com': 'net': 'org': 'gov': 'edu': 'int': Ajouter juste : case 'biz': à la fin de la liste :-) 37 LIENS SUR LE LOGO D’ENTETE VERS LA PAGE DE DEMARRAGE : Les liens de logo renvois à la page de démarrage. Il ne devrait pas s'ouvrir dans une fenêtre séparée, mais il le fait, nous devons donc fixer le problème. Dans header.php changez : <td valign="middle"><?php echo tep_image(DIR_WS_IMAGES . 'oscommerce.gif', 'OSCommerce'); ?></td> to: <td valign="middle"><?php echo '<a href="' . HEADER_IMAGE_LINK . '">' . tep_image(DIR_WS_IMAGES . HEADER_IMG_PIC, HEADER_IMG_ALT) . '</a>'; ?></td> Alors dans french.php définissez le code suivant : // définissez l'information d'image d'en-tête define('HEADER_IMG_PIC', 'votreimage.gif'); define('HEADER_IMG_ALT', ' Bienvenue à celui que vous voulez ici '); define('HEADER_IMAGE_LINK','http://www.yourdomain.com'); [ceci ouvrira votre page dans la même fenêtre] define('HEADER_IMAGE_LINK','http://www.yourdomain.com” target=”_blank’); [ceci ouvrira votre page dans un autre browser] A l’avenir les changements, les liens et les la configuration des balise “alt” sur les logos seront plus faciles. CHANGEMENT DE LA LONGUEUR DE LA REFERENCE DU PRODUIT : Nous supposons que vous utilisez PHPMyAdmin selectionnez la table « orders_products » à gauche. Click sur “product_model” check box Click sur “Change Button” Puis, sous Length/Values placez votre nouvelle longueur Click Save Ensuite, fixez la table « products » avec les même paramètres : Selectionnez la table “products” sur la gauche Click sur “product_model” check box Click sur “Change Button” Puis sous Length/Values Placez votre nouvelle longueur. GRAPHIQUES MANQUANTS À LA PAGE : Si en editant vos pages PHP les chemins pointant les styles et les graphiques ne sont pas brisés, vérifiez le lien à votre fichier stylesheet.css. Très probablement, c'est un chemin d'accès inexact. <LINK href="../oscommerce/catalog/catalog/stylesheet.css" type=text/css rel=stylesheet> Vous devez trouver quelle ligne vous plante et la corriger pour pointer vers votre stylesheet.css existant. 38 ENLEVER LE NOMBRE DE PRODUIT / CHANGER LA LARGEUR DES COLONNES : Q. Comment est-ce que vous supprimez l'affichage du nombre de produit disponible dans chaque catégorie? A: Trouvez /catalog/includes/application_top.php Vers la ligne 135 regardez ce code: define('SHOW_COUNTS', 1); // montrez le compte de la catégorie: false=disable; true=enable changement vrai à faux Q. Comme faites vous pour changer la largeur du bloc de la colonne de droite? A: Il y a un paramètre BOX_WIDTH dans application_top.php qui affecte les colonnes droite et gauche de chaque page. PRODUITS LIMITE A QUELQUES “NOUVEAUX PRODUITS” PLUTOT QUE D’INSCRIRE LA BASE DE DONNEE ENTIERE : Changez ces (3) fichiers : /catalog/products_new.php /catalog/includes/modules/new_products.php (changez le code, et month(p.products_date_added) = month(now()) en 2e place dans cette page) /catalog/includes/boxes/whats_new.php using /boxes/whats_new comme exemple : Trouvez la ligne : IF(s.status, s.specials_new_products_price, NULL) around line number 17. Bonh, AVANT cette ligne entrez : p.products_date_added, (don't forget the "," if needed) Ensuite, Cherchez: order by p.products_date_added bien AVANT ce texte, entrez : and month(p.products_date_added) = month(now()) Maintenant, vous avez seulement les produits ajoutés dans le mois courant qui s’affiche au devant de la page, et dans la page « what’s new ? ». Quand une page s’affiche, le bloc «what’s new ? » dans la colonne de droite affiche aléatoirement le produit du mois courant. AJOUTER UNE IMAGE DANS LE BLOC D’ENTETE Q. Comment avez-vous fait pour mettre une image dans le bloc d'en-tête ? A: Ouvrez votre fichier stylesheet.css et editez ça : Par exemple: table.infoBoxHeading { background-image: url('http://www.your.com/dir/to/your/image.gif'); background-repeat: no-repeat } 39 INSTALLATION des TAXES 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. Dans votre page d’admin, sous Locations/Taxes, click sur "Tax Zones" Click sur le bouton "new zone" Dans le nom zone : zone d’entrée j’écris « CA ». Pour Description j’entre"California". Click sur "insert" Après avoir clickez “insert”, vous verrez le “CA » apparaître dans la liste. Vous pensez que c’est bon, mais pas tout à fait !! Click sur "CA" (ou le nom que vous avez entré!) dans la liste et vous verrez que l’entête indique les « zones géographiques / CA" Ici vous voyez encore un bouton "new zone". Cliquez dessus ! Maintenant vous obtenez le choix d’une zone géographique. A partir du Pays, je choisis les Etats-Unis. A Partir de la Région , choisissez “Californie”. Clickez “update” Quelques étapes de plus pour finir ! Maintenant sous "Locations/Taxes" clickez sur "Tax Rates" Click sur le bouton "new tax rate (nouveaux taux de taxe)" Selectionnez "Taxable Goods (marchandises imposables)" à partir du menu déroulant « Tax Class Title » À partir du « menu de zone », choisissez « CA » (ou le nom que vous avez créé!)) Dans le champs “Tax Rate field” entrez le pourcentage de la taxe. Dans le champs description, écrivez la description, exemple "California Sales Tax" Maintenant tout est ok ! TEXT CHANGES: Faites tous les changements aux fichiers dans le dossier /language/FRENCH, pour la plupart des changements sur les textes. Si vous regardez les fichiers, ils ont la plupart du temps les sections textes. Q: Y a-t-il un endroit pour changer ce qu’indique le texte quand un nouveau client signe et/ou achète un produit et puis obtient un email? A: Ce serait dans /languages/*/create_account_process.php Q: Comment éditez-vous le texte de copyright et le lien en bas de page, ainsi que la couleur du mot "required " à côté des blocs de la page "mon compte"? A: /catalog/includes/languages/french.php Ceci est la couleur par defautl du mot "required" #AABBDD Q: Comment vous changez le texte d'introduction et de bienvenue de default.php? A: catalog/includes/languages/french/default.php Vous devrez changer la page default.php dans tout des dossiers de langage. Vous pouvez également changer les noms de titre d'entête dans cette page. Q: Comment vous changez le texte qui apparaît dans la partie supérieure gauche de la fenêtre du browser ? A: Dans languages/french.php // Titre de la page - define('TITLE', 'osCommerce'); 40 Q: A quelle page devons-nous editez l’adresse des méthodes de paiement pour les chèques/les mandats et où modifier l’adresse des methodes de paiement dans l’Email que le client reçoit? A: catalog/includes/languages/french/modules/payment/moneyorder.php Ce sont les 2 lignes au-dessous qui énumère le module. define('MODULE_PAYMENT_MONEYORDER_TEXT_DESCRIPTION', 'Make Payable To:<br>' . ' Affairs To Remember<br>' . ' 600 Broadway<br>' . ' Van Buren, AR 72956<br><br>' . ' Your order will not ship until we receive payment.'); define('MODULE_PAYMENT_MONEYORDER_TEXT_EMAIL_FOOTER', 'Make Payable To:' . "\n\n" . 'Your Company, Inc.' . "\n" . '555 Something St.' . "\n" . 'Sometown, ST 00000' . "\n\n" . 'Your order will not ship until we receive payment.'); Éditez ces deux lignes avec votre adresse et détails. Q: Comment changez-vous le texte comme le "top", "catalog" sur la barre supérieure ? A: catalog/includes/languages/french.php Q: Comment changez-vous les mots " click to enlarge " sous le graphique les images des produits? A: includes/languages/french/product_info.php & includes/languages/french/product_reviews_info.php Q: Comment vous changez les mots " There are no products to list in this category (il n'y a aucun produit à énumérer dans cette catégorie.)" sur la barre qui monte quand vous cliquetez une catégorie? A: includes/languages/french/default.php Q: Comment changez-vous les mots " Forgot your password? Click here (vous avez oublié votre mot de passe? Cliquetez ici )" sur l'écran de procédure de connexion? A: includes/languages/french/login.php EDITION DU FICHIER CSS STYLESHEET : A : Changement des couleurs de textes dans les blocs gauches et droits comme "Advanced " et le texte des blocs d’information. . A.headerNavigation : Couleurs des textes dans la table colorée supérieure (liens supérieurs de Catalog etc..... listées seulement) A.pageResults A.hover : couleur de lien survolé BODY : • La couleur de type est la couleur des textes dans les cadres des colonnes gauches et droites et le " text body (corps des textes) ". • Couleur de fond dans le corps des " textes " mais pas l'en-tête. • Place la couleur du cadre qui circule la page.. • Place le cadre supérieur à 10px avec la même couleur et elle desndra jusqu’en bas de la table. 41 DIV.pageHeading : La couleur à la fin de la page de commande qui indique " votre commande a été traitée!" FORM : Change la couleur de ce texte, mots-clés d'utilisation pour trouver le produit que vous recherchez dans le bloc du moteur de recherche du côté gauche. SPAN.greetUser : Votre nom à la page par défaut - invité bienvenu ! SPAN.markProductOutOfStock SPAN.newItemInCart:: Le nouveau produit ajouté au caddie est couleur différente sous la colonne droite " caddie d'achats " TABLE.formArea • Dans " information sur mon compte " la couleur intérieure de cadre des détails. Place la bordure autour des block dans la section bordure. TABLE.infoBox Encadrez la couleur autour des cadres gauches et droits des colonnes dans la section de fond. Place la couleur de fond et elle retire la ligne blanche de séparation entre la barre du bloc d’entête et le corps de chaque cadre de table TABLE.infoBoxContents • Colore l'intérieur des bloc de colonne gauches et droits dans la section de fond. • Vous pourriez placer la couleur des textes pour les blocs dans la section " type " également. • Vous pouvez également placer une images en fond dans la section fond: { background-image; background-repeat: no-repeat } TD.accountCategory TD.checkoutBar : Texte inférieur de la page de contrôle qui indique [ delivery address | payment method | confirmation | finished! ] TD.footer: Couleur inférieure de table et de textes TD.formAreaTitle • Change la couleur des textes sur les blocs à la page de " My Account Info (information de mon compte) ". • Laisse le blanc de la couleur des blocs de textes et la couleur est noire. TD.headerInfo TD.headerNavigation : Couleur supérieure de fond de barre et les couleurs de flèche qui se dirigent en avant TD.infoBoxHeading : La colonne gauche et droite enferme dans une boîte la couleur d'entête et la couleur des textes. TD.main : Si vous placez la couleur des textes c'est la couleur des textes dans les cadres à la page de "information de mon compte ". TD.pageHeading • Qu'est qu'il y a de neuf ici? Appréciez Vos Achats! Couleur du texte à toutes les pages de produit. • Changez la taille du texte ici également. TD.productListing data: change la couleur du texte des numéros de type de produit aux pages de produit. TD.productListing- entête - Couleur de la barre du produit supérieure qui a maintenant" le "Nom du Produit", « Achat » et "Prix" dedans. Mettez la couleur du texte sous cette section pour les mots "Achetez Maintenant." 42 TD.smallText: Couleur du texte copyright au fond de la page. TD.subBar TR.accountHistory-even : Couleur de la barre de l'adresse en haut TR.accountHistory-odd : Couleur de la barre de l'adresse en haut TR.addressBook-even : Couleur de la barre de l'adresse en haut pour les entrées du carnet d’adresse. TR.addressBook-odd : Couleur du carnet d’adresse en haut TR.alsoPurchased-even : Couleur de barre d'adresse en haut TR.alsoPurchased-odd : Couleur de barre d'adresse en haut TR.footer : Couleur inférieure de barre des droite et gauches côtés de la barre et pas au milieu de la barre TR.headerNavigation TR.productListing-even : Liste blanche de fond quand vous cliquetez en fonction un produit sous une sous-position TR.productListing- entête TR.productListing-odd Liste verte de fond quand vous cliquetez en fonction un produit sous une sous-position TR.productReviews-even : Fond blanc sous la section « revue » TR.productReviews-odd :Fond gris de liste grise sous la section de revue TR.subBar 43 ">
Public link updated
The public link to your chat has been updated.