Mode d'emploi | OS COMMERCE osCommerce MS2 Manuel utilisateur

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"> <?php echo ENTRY_CITY; ?></td>
<td class="main"> 
<?php
if ($is_read_only) {
echo $account['entry_city'];
} elseif ($error) {
if ($entry_city_error) {
echo tep_draw_input_field('city') . ' ' . ENTRY_CITY_ERROR;
} else {
echo $HTTP_POST_VARS['city'] . tep_draw_hidden_field('city');
}
} else {
echo tep_draw_input_field('city', $account['entry_city']) . ' ' .
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"> <?php echo ENTRY_STREET_ADDRESS; ?></td>
<td class="main"> 
<?php
if ($is_read_only) {
echo $account['entry_street_address'];
} elseif ($error) {
if ($entry_street_address_error) {
echo
tep_draw_input_field('street_address')
.
' '
.
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']) . ' ' .
ENTRY_STREET_ADDRESS_TEXT;
}
?></td>
</tr>
<?
if (ACCOUNT_SUBURB == 'true') {
?>
<tr>
<td class="main"> <?php echo ENTRY_SUBURB; ?></td>
<td class="main"> 
<?php
if ($is_read_only) {
echo $account['entry_suburb'];
} elseif ($error) {
if ($entry_suburb_error) {
echo tep_draw_input_field('suburb') . ' ' . ENTRY_SUBURB_ERROR;
} else {
echo $HTTP_POST_VARS['suburb'] . tep_draw_hidden_field('suburb');
}
} else {
echo
tep_draw_input_field('suburb',
$account['entry_suburb'])
.
' '
.
ENTRY_SUBURB_TEXT;
}
?></td>
</tr>
<?
}
?>
<tr>
<td class="main"> <?php echo ENTRY_POST_CODE; ?></td>
<td class="main"> 
<?php
if ($is_read_only) {
echo $account['entry_postcode'];
} elseif ($error) {
if ($entry_post_code_error) {
echo tep_draw_input_field('postcode') . ' ' . 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'])
.
' '
.
ENTRY_POST_CODE_TEXT;
}
?></td>
</tr>
<tr>
<td class="main"> <?php echo ENTRY_CITY; ?></td>
<td class="main"> 
<?php
if ($is_read_only) {
echo $account['entry_city'];
} elseif ($error) {
if ($entry_city_error) {
echo tep_draw_input_field('city') . ' ' . ENTRY_CITY_ERROR;
} else {
echo $HTTP_POST_VARS['city'] . tep_draw_hidden_field('city');
}
} else {
echo tep_draw_input_field('city', $account['entry_city']) . ' ' . ENTRY_CITY_TEXT;
}
?></td>
</tr>
<tr>
<td class="main"> <?php echo ENTRY_COUNTRY; ?></td>
<td class="main"> 
<?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 ' ' . 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 ' ' . 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"> <?php echo ENTRY_STATE; ?></td>
<td class="main"> 
<?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 ' ' . 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"> <?php echo ENTRY_STREET_ADDRESS; ?></td>
<td class="main"> 
<?php
if ($is_read_only) {
echo $account['entry_street_address'];
} elseif ($error) {
if ($entry_street_address_error) {
echo
tep_draw_input_field('street_address')
.
' '
.
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']) . ' ' .
ENTRY_STREET_ADDRESS_TEXT;
}
?></td>
</tr>
<?
if (ACCOUNT_SUBURB == 'true') {
?>
<tr>
<td class="main"> <?php echo ENTRY_SUBURB; ?></td>
<td class="main"> 
<?php
if ($is_read_only) {
echo $account['entry_suburb'];
} elseif ($error) {
if ($entry_suburb_error) {
echo tep_draw_input_field('suburb') . ' ' . ENTRY_SUBURB_ERROR;
} else {
echo $HTTP_POST_VARS['suburb'] . tep_draw_hidden_field('suburb');
}
} else {
echo
tep_draw_input_field('suburb',
$account['entry_suburb'])
.
' '
.
ENTRY_SUBURB_TEXT;
}
?></td>
</tr>
<?
}
?>
<tr>
<td class="main"> <?php echo ENTRY_CITY; ?></td>
<td class="main"> 
<?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') . ' ' . ENTRY_CITY_ERROR;
} else {
echo $HTTP_POST_VARS['city'] . tep_draw_hidden_field('city');
}
} else {
echo tep_draw_input_field('city', $account['entry_city']) . ' ' . ENTRY_CITY_TEXT;
}
?></td>
</tr>
<tr>
<td class="main"> <?php echo ENTRY_STATE; ?></td>
<td class="main"> 
<?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 ' ' . ENTRY_STATE_TEXT;
}
?></td>
</tr>
<tr>
<td class="main"> <?php echo ENTRY_POST_CODE; ?></td>
<td class="main"> 
<?php
if ($is_read_only) {
echo $account['entry_postcode'];
} elseif ($error) {
if ($entry_post_code_error) {
echo tep_draw_input_field('postcode') . ' ' . 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'])
.
' '
.
ENTRY_POST_CODE_TEXT;
}
?></td>
</tr>
<tr>
<td class="main"> <?php echo ENTRY_COUNTRY; ?></td>
<td class="main"> 
<?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 ' ' . 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 ' ' . 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