oscommerce Handleiding
Introductie...3 Installatie Procedure...4 Base Directory...4 Catalog Directory...4 Customisatie Handleiding...8 Het toevoegen van blocken en links...9 Achtergrond Afbeeldingen....13 Toevoegen aan Favorieten code Alleen IE....13 Box hoeken veranderen...14 Winkel breedte veranderen....15 Checkout_succes.php checkbalk kleur....16 Order velden veranderen...16 Kolom Bewerking...23 Code Conventies en Algemene concepten...24 Credit Cards bewerken....25 Download Toevoegingen...26 Email Extensies Toevoegen...26 Header Logo Naar Home Site...26 Afbeeldingen in Box Header...27 Producten gelimiteerd op New Products...27 Missende grafische afbeeldingen op de pagina...28 Lengte van Product ID nummer veranderen...28 Product nummers verwijderen/kolom verbreden...29 Stylesheet Bewerkingen...29 Belasting Setup...31 Tell a friend email ook naar eigenaar...32 Tekst veranderingen...33 Uploading Afbeeldingen...34 2
Introductie OSCommerce Installatie en Modificatie Handleiding. Datum 06/17/2002 Door Martijn van Amerongen (vertaling Nederlands) Copyright 2002, Martijn van Amerongen (NL), Micheal Sasek. Dit is een handleiding over hoe je het uiterlijk van OSCommerce, de open source e-commerce oplossing, kan veranderen. Deze handleiding gaat er vanuit dat je een goede basiskennis hebt omtrent HTML en weet hoe het werkt. Als u deze kennis niet hebt, is het verstandig om een een goed referentie boek te kopen. Zodat u dit snel kan gaan leren. Dit is absoluut geen uitgebreidde resource, maar is bedoeld om gebruikt te worden als startpunt. Let op; OSCommerce staat onder constante ontwikkeling, hierdoor verandert de code bijna dagelijks. Met dit gezegd, zal de handleiding een handige hulp zijn om je naar de juiste bestanden en locaties, binnen de bestanden, te wijzen voor modificaties. Als u deze handleiding behulpzaam gevonden heeft en u wilt ons uw werk laten zien of wilt meedoen in een technische contributie aan deze handleiding, kunt u ons bereiken op respectievelijk de volgende email adressen: jb@debom.net msasek@synergetichealth.com oscguide@designhosting.biz 3
Dit is de installatie procedure voor het installeren van OSCommerce 2.2 (CVS) in de catalog en/of base directory Systemen kunnen anders zijn, hou er rekening mee dat dit alleen maar een handleiding is. Base Directory Installeer in de Base Directory. Kopieer de admin mapnaar de jouw base directory, net zoals installeren in de catalog sectie. Kopieer de catalog map naar de base directory (Alleen de bestanden). Vervolgens tik in je browser: http://www.jouwserver.com/install/install.php vervang jouwserver met uw domeinnaam. Bewerk na de installatie het volgende bestand: catalog/includes/configure.php Verander de lijn in de configure.php: define( DIR_WS_CATALOG, /catalog/ ); // absolute path required in define( DIR_WS_CATALOG, / ); // absolute path required en verander deze lijnen: define( DIR_FS_DOCUMENT_ROOT,$DOCUMENT_ROOT); in define( DIR_FS_DOCUMENT_ROOT, /home/servergebruikersnaam/public_html ) Deze: define('dir_fs_catalog',dir_fs_document_root. DIR_WS_CATALOG); in define('dir_fs_catalog', '/home/serverusername/public_html/'); Verander de admin/includes/configure.php ook. De lijnen in admin/includes/configure.php moeten er zo komen uit te zien: define('dir_fs_document_root', $DOCUMENT_ROOT); // waar jou pagina s op de server staan, als $DOCUMENT_ROOT niet overeenkomt met jouw wensen, vervang deze dan met een lokaal pad. (bv, /usr/local/apache/htdocs) define('dir_ws_admin', '/admin/'); define('dir_ws_catalog', '/'); Catalog Directory Cart Installatie Procedure 1. De catalog en de admin komen in deze volgorde: Catalog Catalog Admin Admin Je wilt de onderste mappen kopiëren naar je server root directory, zoals hier staat weergegeven: 4
Root Catalog Admin Je zult merken dat alle bestanden zich bevinden in de onderste of tweede mappen genaamd catalog en admin. 2. Om er voor te zorgen dat we geen fout meldingen krijgen wanneer we de cart aan het installeren zijn, moeten we de permissies veranderen. Stel deze permissies in voordat je gaat installeren en nadat alles naar de server is gekopieerd. admin/includes/ = 755 admin/includes/configure.php = 777 catalog/includes/ = 755 catalog/includes/configure.php = 777 images/ = 777 Maak in de admin map een directory aan genaamd backups (dit zorgt ervoor dat je geen foutmelding krijgt wanneer je een backup wilt maken van de database. De melding die je dan te zien krijgt is deze: Error: Backup directory doesn t exist. Please set this in configure.php) /admin/backups/ =777 Permissies instellen kan op twee manieren: 1. Via een ftp-client. Doe dan een eigenschappen van het desbetreffende bestand of map en stel de permissies in comform het gene wat er gevraagd of nodig is. 2. Met een sh-commando. chmod ### <bestand/map> waar ### het bovengenoemde nummer is. Ga nu naar je internet browser en tik in: http://www.jouwserver.com/install/install.php Vervang jouwserver met je eigen domiennaam. Dit zal het installatie script starten en je door de cart installatie heen helpen. NEW INSTALL Dit is de tekst die je zult zien op de installatie pagina. De tekst in vet is wat je moet invullen in de kaders. 1. Please customize your new installation with the following options. (Pas je nieuwe installatie aan met de volgende opties) Import Catalog database Importeer de catalog database structuur inclusief tabellen en voorbeelden. Automatic Configuration De informatie die jij stuurt omtrent de webserver en database server zal in zowel de catalog als de administratie tools configuratie bestanden automatisch worden opgeslagen. 5
2. Please enter your website server information: Please Note that /public_html and /www and /web are different versions/names of the same directory. (Vul hier je website server informatie in: Hou er rekening mee dat /public_html en /www en /web verschillende versies/namen zijn voor dezelfde directory.) WebserverRoot Directory De directory waar jouw webpagina s gehosted worden, meestal is dit: /home/mijnnaam/public_html (of waar je je bestanden ook hebt staan) WWW Catalog Directory De virtuele directory waar de OSCommerce Catalog module staat, meestal is dit: /catalog/ WWW administration Tool Directory De virtuele directory waar OSCommerce Administratie Tools zich bevindt, meestal is dit, /catalog/admin/ 3. Please enter your database server information. (Vul hier je database server informatie in.) Database server De database server kan in de vorm zijn van een IP-adres (192.168.0.1) of een hostname (db1.mijndatabase.com). In mijn geval is dit: localhost Username De gebruikersnaam wordt gebruikt om een connectie te leggen met de database server Een voorbeeld van een gebruikersnaam is: mysql_10 Let op: Als de catalog geïmporteerd moet worden (zoals bovenaan is geselecteerd), moet het account permissies hebben om Drop en Create functie uit te voeren. Password Het wachtwoord is nodig om samen met de gebruikersnaam connectie te leggen met de database server. Je wachtwoord Database De database die gebruikt wordt om de catalog data op te slaan. Bijvoorbeeld: mysql_catalog 6
Ik raad je aan om bekend te worden met de werking van de cart. Maak ook een backup van je complete cart, niet aangepast, zodat als je iets verkeerds hebt gedaan (en geloof me dat gebeurt), dat je het originele bestand terug kan zetten en de boel weer werkend hebt. Dit weet ik uit ervaring! Er zijn nog een paar configuratie handelingen die je op de server moet doen voor de cart beveiliging. Je moet.htaccess in je /admin directory neerzetten zodat deze directory afgeschermd is met een wachtwoord. Je kan je wachtwoord manager gebruiken van je account als je een cpaneel hebt of één van de andere. Je moet default.php toevoegen aan je directory index listing in httpd.conf bestand voor apache als je apache gebruikt. Dit zorgt ervoor dat je niet het hele webadres hoeft in te vullen: http://www.jouwserver.com/catalog in plaats van: http://www.jouwserver.com/catalog/default.php Je kan deze wijziging zelf aanbrengen door het bewerken van het apache configuratie bestand /usr/local/apache/conf/httpd.conf Je moet het bestand bewerken op de server door in te loggen als root en het volgende commando gebruiken: pico /usr/local/apache/conf/httpd.conf Zorg er wel voor dat je een backup maakt van dit bestand voordat je het gaat bewerken. Voeg deze zin toe: DirectoryIndex defaut.php Aan de <IfModule mod_dir.c> sectie van jouw httpd.conf bestand. Plaats in de catalog directory een leeg html bestand genaamd index.html. Dit zorgt ervoor dat apache stopt met het sturen van de directory boom en staat niet toe dat mensen ongeoorloofd kunnen bladeren door jouw bestanden. Dit zijn de correcte configuraties voor de verschillende mappen na de installatie. admin/includes/ = 755 admin/configuration.php = 644 admin/includes/configure.php = 644 catalog/includes/ = 644 catalog/includes/configure.php = 644 images/ = 777 Verwijder je install directory: cd catalog rm r install 7
Introductie Specifieke voorbeelden en procedures. Let op: Dit gedeelte is gemaakt met behulp van veel bronnen, te veel om een ieder persoonlijk te bedanken. Ook de oplossing van de problemen zijn met behulp van de verschillende mensen aangeboden. Ik wil iedereen bedanken voor de tijd en de moeite die ze hierin hebben gestoken om deze handleiding compleet te maken. Als een zogenaamde OSCommerce ontwerper, moet je bekend worden met de bestanden die het eigenlijke uiterlijk van OSCommerce bepalen. De manier waarop OSCommerce zijn pagina dynamisch gegenereerd, houdt het in ieder geval een consistent bewerk proces. Je kan dezelfde code veranderen op een gelijkwaardige locatie voor alle benodigde bestanden. Dit zijn de bestanden die je nodig hebt om jezelf bekend te laten worden om het uiterlijk van OSCommerce te kunnen aanpassen. /catalog/ /catalog/includes/ /catalog/includes/languages/ stylesheet default.php Zo n beetje elk.php bestand heeft een duplicaat HTML dat het uiterlijk gegenereerd van de site en moet bewerkt worden om het uiterlijk te veranderen in elk bestand. application_top.php column_left.php column_right.php configure_phpfooter.php header.php English.php../languages/english All.php files in this directory. Hieronder staat een lijst met andere belangrijke locaties per directory: /catalog/images/ -catalog afbeeldingen anders dan de navigatie knoppen, bv, product afbeeldingen /catalog/includes/languages/english/ -Taal vlag icon /catalog/includes/languages/english/images/buttons -navigatie knoppen voor de site /catalog/includes/boxes/ -Bestanden die de boxen aan de zijkant definiëren the side boxes en wat ze doen. Voordat we verder gaan, maak een backup van alle files hierboven, voor het geval je een fout maakt en werk niet met een site die al in gebruik is. Je kan de cart verknallen en eindigen in een onbruikbare chaos. Ik raad aan om gebruik te maken van een aparte ontwikkel omgeving waarmee je kunt werken. Dit kan zo simpel zijn als een andere directory of een subdomein op dezelfde server. Het bestand stylesheet.css is een zogehete cascading style sheet, hier staan zo n beetje alle lettertypen en kleuren van de gehele winkel in gedefinieerd. Ik raad aan om deze een uurtje ofzo door te nemen 8
om bekend te worden met alle instelling in deze style sheet. De meeste instellingen spreken voor zich. En als dat niet zo is, vandaar die instelling maar, dan zie je vanzelf wat het doet. Open dit bestand dan wel in een goede style sheet editor (bv, Topstyle), dit maakt het bewerken ervan een stuk gemakkelijker. In dit.pdf bestand is een stuk van de stylesheet toegevoegd en wordt er globaal gekeken wat de meeste instellingen doen. Het bestand default.php is de hoofdpagina die je te zien krijgt als je de winkel binnen komt. We gaan ons bemoeien met het html gedeelte in dit bestand. Er zijn verschillende secties die o.a. de breedte en verschillende tabel structuren bijhouden. Elke sectie moet aangepast worden om een andere uitstraling van jouw site te creëren. Ik raad aan dat je alle veranderingen markeert, zodat je ze later terug kan vinden. Ook is het een goed idee om de aangepaste bestanden op te slaan als orginelenaam 1.php of iets vergelijkbaars. Dit is je kruimel spoor, zodat je later alle veranderingen kunt kopiëren en plakken naar het origineel. Dit kan ook gedaan worden wanneer je besluit om over te gaan naar een nieuwe versie van OSCommerce. Dan vind ik het knap als je dan nog twee lijnen kunt terugvinden die je 6 maanden geleden had aangepast Het toevoegen van blocken en links Het toevoegen van blocken en links We zullen gaan kijken hoe we onze eigen boxen, links, pagina s, en afbeeldingen kunnen toevoegen. Als extra zullen we leren hoe we items aan de kolommen kunnen toevoegen, maar buiten de eigenlijke boxen. Al deze handelingen zijn vrij simpel uit te voeren. Maar spreken niet voorzich!! Laten we beginnen. De bestanden die we nodig hebben zijn: /catalog/includes dir: column_left.php column_right.php /catalog/includes/boxes dir: alle bestanden hier Open het bestand information.php in een tekst editor (wordpad) en sla deze op als test.php. Dan in column_left.php voegen we deze lijn toe: require(dir_ws_boxes. 'test.php'); Direct daaronder deze lijn: require(dir_ws_boxes. 'information.php'); Sla column_left.php op aan de serverkant en vernieuw de hoofdpagina van catalog. Je zult nu 2 information boxen zien aan de linkerkant van de pagina. De tweede box hebben we met 1 lijn van code toegevoegd. Dit is het gemakkelijke deel. Zie de screen shot hiernaast. 9
De volgende stap is om deze box aan te passen naar onze wensen, om dit te kunnen doen, moeten we wat meer bestanden aanpassen. Ik de titelbalk van onze nieuwe box veranderen, danwel de links maken naar de nieuwe custom pagina s die ik zal gaan maken. Dit proces is meer omslachtiger, maar we moeten ons er aan houden. De bestanden en hun padnamen staan hieronder aangegeven: Bijvoorbeeld: Ik wil vier links maken naar de pagina s die heten testpage1.php, testpage2.php, testpage3.php en testpage4.php in het nieuwe information block die we zojuist gemaakt hebben op de hoofdpagina. Ik gebruik mijn originele shipping.php bestanden voor mijn basis template. Gebruik dit voorbeeld om mee te beginnen. Dit proces is hetzelfde voor de andere blocken, je moet dan de juiste bestanden identificeren om te kopiëren en aan te passen. Verward? Mooi, laten we verder gaan Nu zal ik stap voor stap uitleggen wat je moet doen. 1. Open de volgende bestanden in wordpad of een andere tekst editor die de code niet aantast en je de mogelijkheid geeft om te zoeken en te vervangen (search and replace) /catalog/includes/application_top.php /catalog/includes/languages/english.php /catalog/includes/languages/english/shipping.php /catalog/shipping.php /catalog/includes/boxes/test.php 2. In het bestand /catalog/includes/application_top.php vind je een sectie die gemarkeerd is als define filenames used in the project. In deze sectie, kopieer één van deze definities en plak ze dan als een nieuwe regel, gelijk na degene die je hebt gekopieerd. Nu moet je geplakte regel aanpassen tot op het punt van testpage1 Zie het voorbeeld hieronder: Kopieer de eerste regel die je tegen komt: define('filename_account', 'account.php'); Plak deze regel dan gelijk onder de regel die je net hebt gekopieerd, en doe dit vier keer. Pas deze regels dan zo aan dat ze verwijzen naar de testpagina s: define('filename_testpage1', 'testpage1.php'); define('filename_testpage2', 'testpage2.php'); define('filename_testpage3', 'testpage3.php'); define('filename_testpage4', 'testpage4.php'); Nu kan je /catalog/includes/application_top.php opslaan. Deze stap is nodig om ervoor te zorgen dat de bestandsnaam definities gemaakt worden. Zodat OSCommerce zijn links kan bouwen. 3. Vervolgens, in het bestand /catalog/includes/languages/english.php, vind je een sectie die gemarkeerd is met: information box text. Kopieer de volledige sectie en plak het eronder. Verander de sectie om er zo te laten uitzien: 10
// 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'); Sla english.php op. Deze stap maakt de link tekst die aan elke nieuwe link die jij maakt wordt gegeven. 4. Bewerk in het bestand /catalog/includes/languages/english/shipping.php het volgende: define('navbar_title', 'Shipping & Returns'); define('heading_title', 'Shipping & Returns'); define('text_information', 'Enter your shipping info here'); Zodat het er zo uit komt te zien: define('navbar_title', 'Test Page 1'); define('heading_title', 'Test Page 1'); define('text_information', 'This is an added sample page'); Sla dit bestand dan op als /catalog/includes/languages/english/testpage1.php. Herhaal deze stap nog drie keer voor de andere test pagina s (2, 3 en 4). Deze stap maakt de eigenlijke tekst die zal verschijnen op elk van de nieuwe pagina s. 5. Vervang (met behulp van de zoek en vervang functie) in /catalog/shipping.php de tekst: Vervang dit: FILENAME_SHIPPING Met dit: FILENAME_TESTPAGE1 En sla dit bestand op als /catalog/testpage1.php. Herhaal ook deze stap drie keer voor de andere resterende pagina s (2, 3 en 4). Deze stap maakt de eigenlijke pagina s waar de links naartoe wijzen. Uiteindelijk gaan we /catalog/includes/boxes/test.php bewerken om het er zo te laten uitzien (verander het gemarkeerde stuk tekst): <?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'). '">'. BOX_TEST_LINK1. '</a><br>'. '<a href="'. tep_href_link(filename_testpage2, '', 'NONSSL'). '">'. BOX_TEST_LINK2. '</a><br>'. 11
'<a href="'. tep_href_link(filename_testpage3, '', 'NONSSL'). '">'. BOX_TEST_LINK3. '</a><br>'. '<a href="'. tep_href_link(filename_testpage4, '', 'NONSSL'). '">'. BOX_TEST_LINK4. '</a>' Dit verandert de tekst die je te zien krijgt in je browser. Op dit punt zijn we klaar met het bewerken van de bestanden. Upload de bestanden naar de juiste directory s, omdat sommige bestanden dezelfde naam hebben. Bekijk de catalog in je browser en de nieuwe links moeten nu zichtbaar zijn in je nieuwe block. Zie de afbeelding hiernaast. Natuurlijk mag je ook links of normaal html toevoegen aan de rechterof linkerkolom, zoals button adverteren, logo s of iets anders waaraan kan denken. Dit is een andere makkelijke bewerk opdracht en vergt alleen wat meer code bij de column_left.php en/of column_right.php. Hieronder is een voorbeeld code die toegevoegd kan worden kan worden na het sluitende php commando?> <tr> <td><img src="http://www.link-to-sampleimage.com"></td> </tr> Of laat de <tr> en de <td> tag weg en de afbeelding zal aan de bovenkant van de kolom verschijnen. <img src="http://www.link-to-sampleimage.com"> Bekijk de screenshot voor alle veranderingen tot dusver, je zult zien dat de Thawte afbeelding buiten de boxen en geheel op zichzelf staat: 12
Achtergrond Afbeeldingen. Achtergrond afbeeldingen in de linker- en de rechterkolom. Dit is hoe je een achtergrond afbeelding toevoegt in de linker en de rechterkolom in OSCommerce versie 2.2 CVS. Voeg het volgende stuk code toe aan de default.php pagina en elke andere pagina onder de /catalog directory. <!-- 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 //--> Toevoegen aan Favorieten code Alleen IE. Toevoegen aan Favorieten. Dit zogenaamde stuk Bookmark code werkt alleen samen met Internet Explorer. Na de php intro maak je de volgende tags aan <head> </head> plaats het volgende stukje code tussen de <head> tags van de Header.php pagina. <script language="javascript"> <!-- var bookmarkurl="http://www.domain-to-be-bookmarked.com/" var bookmarktitle="title of the bookmark-domain & short description!" function addbookmark(){ if (document.all) window.external.addfavorite(bookmarkurl,bookmarktitle) --> </script> Plaats dan het volgende stuk ergens in de header.php pagina. Op die plek zal de bookmark tekst tevoorschijn komen. <a href="javascript:addbookmark()"><font color="white" face="verdana, arial" size="1"><b> Bookmark Us</b></font></a> 13
De code zou er zo uit kunnen zien: <td align="right" class="headernavigation"><?php if (tep_session_is_registered('customer_id')) {?><a href="<?php echo tep_href_link(filename_logoff, '', 'SSL');?>" class="headernavigation"><?php echo HEADER_TITLE_LOGOFF;?></a> <?php?><a href="<?php echo tep_href_link(filename_account, '', 'SSL');?>" class="headernavigation"><?php echo HEADER_TITLE_MY_ACCOUNT;?></a> <a href="<?php echo tep_href_link(filename_shopping_cart, '', 'NONSSL');?>" class="headernavigation"><?php echo HEADER_TITLE_CART_CONTENTS;?></a> <a href="<?php echo tep_href_link(filename_checkout_payment, '', 'SSL');?>" class="headernavigation"><?php echo HEADER_TITLE_CHECKOUT;?></a> <font color=#ff6600> </font><a href="javascript:addbookmark()"><font color="white" face="verdana, arial" size="1"><b> Bookmark Us</b></font></a> </td> </tr> Dit stuk code plaatst een verticale balk ( ) een oranje kleur na de checkout link boven aan de linker top balk van jouw winkel. De Bookmark link is wit van kleur tegen een donkere achtergrond in dit geval. Dit zou het moeten doen. Ik raad aan om een icoon te gebruiken, deze is makkelijker te vinden. Proces voor het maken een cursor. Ja kan een afbeelding gebruiken en deze converteren naar een icoon (.ico). Aan te raden is het shareware programma IconForge. Zorg ervoor dat de.ico is ingesteld op 16x16 en sla het.ico bestand op. Upload dit bestand naar je begin map. En plaats deze tekst boven de bookmark code. <link rel="shortcut ICON" href="/favicon.ico"> DOWNLOAD URLS: http://www.favicons.com/ http://www.winsite.com/bin/info?4000000037704 Box hoeken veranderen Box hoeken kunnen ook rond zijn. De box hoeken kunnen worden veranderd in /catalog/includes/boxes. Daar zul je zoiets als het volgende te zien krijgen: new infoboxheading($info_box_contents, false, false); Verander beide false in true van jouw box, om ook ronde hoeken te krijgen aan de linker en rechterkant. 14
Winkel breedte veranderen. Instellen van de tabel breedte. Dit gedeelte illustreert hoe je de breedte van je winkel kunt veranderen. Dit is terug te zien in je browser. Het is vrij gemakkelijk te doen. Open default.php in Dreamweaver of een andere goede tekst verwerker. In Dreamwaever zie je de code en het design, wat heel handig is voor veranderen van de tabel structuur. Je ziet de veranderingen gelijk met het aanpassen. Met een tekstverwerker moet je de code iets meer begrijpen, maar met beide zul je hetzelfde resultaat krijgen. Je zoekt naar het html gedeelte die de attributen van de master tabel controleert. Je bent geïnteresseerd in het vet gedrukte gedeelte hieronder: Verander dit: <!-- 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"> In dit: <!-- 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"> Deze verandering zal de breedte van je tabel aanpassen naar 750 pixels en deze centreren in het midden van het browser scherm. Het reduceert ook de padding en spacing naar 1 pixel. Stap 1 is gedaan. Je moet deze verandering ook doen voor header.php en footer.php in jouw /catalog/includes directory. Stap 2 is dan ook gedaan. Zie screenshot 15
Checkout_succes.php checkbalk kleur. Verandert de gekleurde balk voor notificatie op uitchecken. In /catalog/checkout_success.php zul je het volgende vinden. <?php if ($global['global_product_notifications']!= '1') { echo TEXT_NOTIFY_PRODUCTS. '<br><p style="background: E1F0FF">'; Verander E1F0FF in elke kleur die jij wilt. Order velden veranderen. Bekijk de screencaptures en de code delen hieronder. We zullen laten zien hoe je de ordervelden van de My Account box kunt veranderen. Ik ga de volgende van de rood gemarkeerde items veranderen. De standaard volgorde is niet vanzelfsprekend (voor de Engelstalige landen). Ik ga ze in een, voor engelse, vriendelijkere volgorde zetten. Te noemen City, State, Postcode en Country. Om dit te doen moet ik het bestand account_edit.php openen en ga zoeken naar de sectie die overeen komt met de nevenstaande output. Ik weet dat dit de <!-body_text//--> sectie is, dus het moet niet al te moeilijk zijn om deze vinden. Ok, ik heb hem dus niet gevonden Maar wat ik wel heb kunnen vinden is dit stukje code (let op het gemarkeerde deel): 16
<?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');?> Die regel require(dir_ws_modules. 'account_details.php');, wijst ons naar de juiste richting. Wanneer je een stuk php code ziet met require kijk dan eerst in die directory of bestandsnaam in de parentheses, in dit geval, DIR_WS_MODULES en account_details.php. Dit vertelt mij dat ik moet kijken in de modules directory, zoals gespecificeerd in configure.php en om account_details.php te vinden. Mooi! Na het openen van account_details.php in een tekstverwerker, zoek voor alles dat je in de juiste kosterijen brengt. In dit geval, zoek naar een variabele of een stuk tekst dat refereert naar City, State, enz, omdat ik deze items wil verplaatsten. Ik gebruik geregeld het zoeken commando. In mijn tekstverwerker, zodat ik niet al te moeilijk hoef te doen. Met deze methode heb ik nul in de code blocken die het formulier output genereren voor City & voor State. Hier is wat ik heb gevonden, Het html is groen en php oranje van kleur. <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> Zie je hoe dit een mooie modulair block van code maakt. De <tr> en de <td> tags zijn je kolom en je rij verdeling en deze cell vind je het php script, welke de output van de cityname direct in de cell zet. Het enige wat je vanaf hier hoeft te doen is deze php code te selecteren en te knippen om dan deze selectie te plakken boven het block dat zich identificeert als ENTRY_POST_CODE. Zoek nu het block dat ENTRY_STATE definieert. Knip de code en plak dit ook boven de ENTRY_POST_CODE, maar onder het ENTRY_CITY block. Zie de code vergelijking op de volgende pagina. 17
De originele code (ik heb elk modulair block gemarkeerd met een kleur); <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; else { echo $HTTP_POST_VARS['postcode']. tep_draw_hidden_field('postcode'); 18
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) { 19
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> --> Nu hoef je alleen nog maar de kleuren in de juiste volgorde te zetten. De kleuren beginnen met groen, oranje, blauw, grijs, paars, goud. Verander de volgorde in: Groen, oranje, grijs, goud, blauw en paars. Zie hier: <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> 20