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: [email protected][email protected][email protected]
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 ### 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 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/
English.php../languages/english All .php files in this directory.
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.
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): 'left', 'text' => BOX_HEADING_TEST ); new infoBoxHeading($info_box_contents, false, false); $info_box_contents = array(); $info_box_contents[] = array('align' => 'left', 'text' => '' . BOX_TEST_LINK1 . ' '. '' . BOX_TEST_LINK2 . ' '.
11
'' . BOX_TEST_LINK3 . ' '. '' . BOX_TEST_LINK4 . '' 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 ?>
Of laat de
en de
tag weg en de afbeelding zal aan de bovenkant van de kolom verschijnen.
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.
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 plaats het volgende stukje code tussen de tags van de Header.php pagina. <script language="JavaScript"> Plaats dan het volgende stuk ergens in de header.php pagina. Op die plek zal de bookmark tekst tevoorschijn komen. Bookmark Us
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. 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:
In dit:
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.
'; 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 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
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.
Zie je hoe dit een mooie modulair block van code maakt. De
en de
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);
--> 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:
20
.
21
Nu nog even alle veranderingen opslaan en bezoek de pagina in je browser. En zie de veranderingen.
Dit is een simpele demonstratie van de modulairiteit van de display code die jij zal gaan veranderen. In dit voorbeeld, hebben we de display velden en cellen verplaatst, maar het kan ook erg makkelijk zijn om uit te breidden en zelfs het grafische uiterlijk te beïnvloeden.
22
Kolom Bewerking. Het zijkant blocken systeem. In het volgende voorbeeld zullen we laten zien hoe je de rechter blocken kunt verwijderen. En hoe je de bestaande blocken van rechts naar links kunt verhuizen. Ik zal ook laten zien hoe je blocken kunt uitzetten die niet nodig zijn.Wetend hoe dit gedaan moet worden geeft je de mogelijkheid om snel het uiterlijk van de winkel te veranderen. Om de weergave van een zijblock uit te zetten, moet je de php code bewerken. In één of twee bestanden. Te noemen column_left.php en/of column_right.php. Beide zijn terug te vinden in de /catalog/includes/ directory. Om bijvoorbeeld het review block uit te zetten, hoef je alleen maar de volgende regel van column_right.php te verwijderen of uit te commentaren. //require(DIR_WS_BOXES . 'reviews.php'); Voor de language en currency block aan de rechterkant van de pagina, volg je de bovenste stap, maar dan voor deze regels in column_right.php: //include(DIR_WS_BOXES . 'languages.php'); //include(DIR_WS_BOXES . 'currencies.php'); Om ze te verplaatsen naar de linkerkant van het scherm, knip en plak je de code in het bestand column_left.php waar je het wilt hebben. if (substr(basename($PHP_SELF), 0, 8) != 'checkout') { include(DIR_WS_BOXES . 'languages.php'); include(DIR_WS_BOXES . 'currencies.php'); } Om de eigenlijke breedte van de kolommen te veranderen, zoek en bewerk je de volgende regel in application_top.php. Verander 125 in wat jij maar wilt. define('BOX_WIDTH', 125); Om nu de volledige rechterkolom te verwijderen, moet je eerst default.php bewerken. Zoek naar de sectie die gelabeld is met . Gelijk hieronder moet je het volgende stukje code verwijderen:
23
Sla nu alles op en bezoek je catalog wederom. De rechterkolom is verdwenen.
We zijn nog niet helemaal klaar. Om ervoor te zorgen dat de rechterkolom voor elke pagina verdwijnt moet je elk bestand bewerken die een pagina weergeeft. Zoek in elk bestand in de /catalog directory voor een en verwijder hetzelfde stukje code dat we in default.php hebben verwijderd.
Code Conventies en Algemene concepten. De manier waarop OSCommerce is opgebouwd lijkt in eerste instantie ingewikkeld, maar zodra je de conventies kent, kan je de winkel zeer uitgebreid veranderen. Als je met de tekst editor kijkt naar default.php, zul je zien dat de code is opgesplitst in secties. Deze Secties zijn als volgt gedefinieerd: De code definieert een start van een bepaalde sectie , terwijl de code het einde definieert. Dit is belangrijk voor degene die niet of nauwelijks php en/of html kunnen lezen. Een voorbeeld uit default.php:
24
Het hierboven gegeven stukje code moet als volgt gezien worden, de php code onderscheid zich door middel van de tag aan het eind. Dit wetende, kun je makkelijk het html gedeelte bewerken, zonder de php scripting aan te tasten. In het bovenstaande voorbeeld zie je de conventies in actie. Als eerste zie je een standaard html tag, gevolgd door een sectie splitter, . Dan in geel,ik de php tag gemarkeerd, staat het php commando. In dit geval de server vertellen dat deze eerst header.php moet halen, voordat de server verder gaat met parsen van de rest van het bestand. Nu zien we het einde van deze sectie door middel van de tag. Je ziet dat deze secties met code subsequent worden herhaald, zoals hiervoor de body en left_navigation. Het begrijpen van de bovengenoemde conventies is essentieel voor het bewerken van het uiterlijk van OSCommerce. En het wordt in elk OSCommerce bestand gebruikt. De code tussen de tags, inclusief de echte tags, kunnen behandeld worden als een discrete code module. En kan verplaatst worden binnen de html tags en tot op zekere hoogte ook binnen het script zelf. Een simpel voorbeeld van dit is het veranderen van de order velden in het bestand account_edit.php.
Credit Cards bewerken. Hoe de creditcard mogelijkheid te bewerken. Dit is een manier om bepaalde creditcards te weigeren. Elk “type” creditcard heeft een unieke reeks nummers. In /catalog/includes/functions/ccval.php (deze pagina heette vroegere versies cc_val.php) zoek je naar de volgende regels: elseif ( ($NumberLeft >= 3400) && ($NumberLeft <= 3499) ) { $CardName = 'American Express'; $ShouldLength = 15; en voeg achter de $shouldLenght = 15; het volgende toe: $ccval = sprintf('Sorry, We do not accept American Express.', $NumberLeft); return $ccval; Het komt er dan zo uit te zien: elseif ( ($NumberLeft >= 3400) && ($NumberLeft <= 3499) ) { $CardName = 'American Express'; $ShouldLength = 15;$ccval = sprintf('Sorry, We do not accept American Express.',$NumberLeft); return$ccval; Nu zullen alle creditcards van AE geweigerd worden.
25
Download Toevoegingen. Hoe de download functie te gebruiken. Al eerste zet je het product dat gedownload kan worden in de download directory op het internet: /catalog/download Het zal gelezen worden vanuit de “pub” directory. Ga naar de attributes sectie in de admin en voeg een download attribuut toe. Wees er zeker van dat er een option name en een value is, genaamd download. In versie 2.2 CVS staat er een voorbeeld in. Deze mag niet worden verwijderd. De /catalog/pub moet 777 zijn en /catalog/download 755. Nadat je je product als te downloaden hebt ingesteld zal er een download attribute box verschijnen in jouw winkel en onder dat product.
Email Extensies Toevoegen. Dit is in de latere versies al verbeterd, maar het is handig om te weten. .biz email adressen geven een “invalid email address” wanneer er geregistreerd wordt. Kijk in de “validation.php” naar de tep_validate_email functie. Je zult hier een lijst te zien krijgen: case 'com': case 'net': case 'org': case 'gov': case 'edu': case 'int': Voeg toe aan het einde van de lijst: case 'biz': Doe dit ook voor andere email adressen die nog niet bekend zijn in deze lijst.
Header Logo Naar Home Site Instellen van een link in de header om naar een andere site toe te laten wijzen. Het logo in de /catalog/includes/header.php is een link naar de klant z’n website. Het opent geen nieuw venster, dus dat moeten we ook aanpassen.
Dan in english.php: // define header image information define('HEADER_IMG_PIC', 'jouwimage.gif'); define('HEADER_IMG_ALT', ' Welkom blabla '); define('HEADER_IMAGE_LINK','http://www.jouwdomein.com'); [Dit zal de pagina openen in hetzelfde venster] define('HEADER_IMAGE_LINK','http://www.jouwdomein.com" target="_blank'); [En dit opent de een nieuw browser scherm] De definities maken het makkelijker om toekomstige veranderingen te doen in afbeeldingen, links en alt teksten voor het logo.
Afbeeldingen in Box Header Het plaatsen van een afbeelding in de Box Header. Open /catalog/stylesheet.css en bewerk het: Bijvoorbeeld: table.infoBoxHeading { background-image: url('http://www.your.com/dir/naar/jouw/image.gif'); background-repeat: no-repeat }
Producten gelimiteerd op “New Products” Verander de producten zodat ze alleen die maand nieuw zijn. Dit is goed voor de snapshots voor Mei 2002. Één van de pagina’s hierbeneden hebben niet dezelfde code. Verander deze drie bestanden: • • •
/catalog/products_new.php /catalog/includes/modules/new_products.php (plaats de code, and month(p.products_date_added) = month(now()) op twee plaatsen op deze pagina) /catalog/includes/boxes/whats_new.php
27
../boxes/whats_new.php gebruiken we als voorbeeld: Zoek de regel: IF(s.status, s.specials_new_products_price, NULL) Rond regel nummer 17. Voor deze regel voeg je dit toe : p.products_date_added, (Vergeet de "," niet, indien nodig) Vervolgens zoek je: order by p.products_date_added Voor deze regel voeg je dit toe: and month(p.products_date_added) = month(now()) Nu heb je alleen de producten van deze maand op je begin pagina en op de What’s New pagina. De in de rechterkolom What’s New boxen gaat willekeurig door de producten van de maand.
Missende grafische afbeeldingen op de pagina HELP! Geen grafische afbeeldingen op de pagina! Als de pagina alles goed laat zien, behalve dat de afbeeldingen missen, ga dan naar de pagina in /catalog/checkout_succes.php (zie voorbeeld) en verander de link van je stylesheet. Het enige wat je hoeft te doen is die regel te zoeken in checkoutsucces.php en pas het aan om naar de juiste locatie van de stylesheet.css link te laten wijzen.
Lengte van Product ID nummer veranderen Bewerk het product ID nummer. Vanuitgaande dat je phpMyAdmin gebruikt……. Selecteer de ‘order_products’ tabel aan de linkerkant van het scherm. Klik op de ‘products_model’ check box Klik op de ‘change’ knop Dan onder ‘Length/Value’ stel jouw lengte in Klik op ‘save’ Vervolgens doe hetzelfde met de ‘products’ tabel. Selecteer de ‘products’ tabel aan de linkerkant van het scherm. Klik op de ‘products_model’ check box Klik op de ‘change’ knop Dan onder ‘Length/Value’ stel jouw lengte in Klik op ‘save’
28
Product nummers verwijderen/kolom verbreden Verwijder de nummers van category products. Dit is hoe je die nummers naast de producten onder de categorieën kunt verwijderen catalog/includes/application_top.php Rond regelnummer 135 define('SHOW_COUNTS', 1); // show category count: false=disable; true=enable verander true naar false V. A.
Hoe verander je de breedte van de rechterkolom? Er is een BOX_WIDTH instelling in application_top.php die de rechter en linker kolommen aantast op alle pagina’s.
Stylesheet Bewerkingen Stylesheet bewerkingen, Als je hier nog iets mist, laat het ons weten!! Dat zou grandioos zijn. We hebben er een stel gemist, dus voel je vrij om deze toe te voegen. Of laat het ons weten en wij voegen het handmatig toe. A Veranderd de tekst kleuren in de linker en rechter boxen zoals “Advanced” en de informatie Box tekst. A.headerNavigation Tekst kleuren in de top gekleurde tabel. (Top >> catalog, etc. alleen lijst met links) A.pageResults ??? A.hover Kleur van link hover BODY Type is tekst kleur in linker en rechter kolom boxen en de “text body” Background kleur in de “text” body maar niet de header. Stel de border kleur in welke rond de pagina loopt. Stel de top border in op 10 met dezelfde kleur en het zal de tabel verlagen DIV.pageHeading De kleur aan het eind van de order pagina dat zegt "Your Checkout Has Been Processed!" FORM Veranderd de kleur van deze tekst. Gebruik keywords om de producten te vinden waarnaar je zoekt in de “Quick Find” box aan de linkerkant. SPAN.greetUser Jouw naam op de default.php pagina (Welkom Gast) SPAN.markProductOutOfStock ??? SPAN.newItemInCart Nieuw product in winkelmandje is anders van kleur, onder rechterkolom “Shopping Cart”
29
TABLE.formArea In My Account Information de binnenkant van de box kleur van my details. Stel de border rond de boxen in de border sectie. TABLE.infoBox Border kleur rond de linker & rechter boxen in de background sectie. Stel de background kleur in en het haalt de witte scheidingslijn tussen de tabelbox heading bar en de body van elke tablebox weg en maakt de boxen aan elkaar. TABLE.infoBoxContents Kleur binnenin de linker en rechter kolom in de background sectie. Je kan de tekst kleur instellen voor de bozen in de type sectie. Je kan ook een achtergrond afbeelding instellen in de background sectie: { background-image; background-repeat: no-repeat } TD.accountCategory ??? TD.checkoutBar De tekst onderaan de checkout pagina dat zegt: [ delivery address | payment method | confirmation | finished! ] TD.footer Onderste tabel & kleur TD.formAreaTitle Verander de tekst kleur boven de boxen op de “My Account info” pagina. Laat de tekstkleur box blank en de kleur is zwart TD.headerInfo TD.headerNavigation Top balk background kleur en de pijl kleur die vooruit wijst TD.infoBoxHeading Linker en rechterkolom boxen heading kleur & tekst TD.main Als je deze text kleur instelt is dat de tekst kleur in de boxen op de “My account info” pagina. TD.pageHeading What’s New here? Enjoy your shopping! Kleur van de tekst op alle product pagina’s. Verander hier ook de kleur van de tekst. TD.productListing-data Verander de kleur van de tekst van het product model nummer op de product pagina’s. TD.productListing-heading Top product balk kleur waar “Product Name” “Price” “Buy Now” in staat. Stel de tekst kleur in onder de sectie voor de worden “Buy Now” TD.smallText Copyright tekst onderaan de pagina TD.subBar ???
30
TR.accountHistory-even Adresbalk kleur bovenaan TR.accountHistory-odd Adresbalk kleur bovenaan TR.addressBook-even Adresbalk kleur bovenaan voor entry’s in jouw adresboek TR.addressBook-odd Adresbalk kleur bovenaan voor entry’s in jouw adresboek TR.alsoPurchased-even Adresbalk kleur bovenaan TR.alsoPurchases-odd Adresbalk kleur bovenaan TR.footer Onderste balk kleur aan de rechterkant en linkerkant van de balk en niet in het midden van de balk. TR.headerNavigation ??? TR.productListing-even Witte achtergrond lijst wanneer je op een product klikt onder de subheading TR.productListing-heading ??? TR.productListing-odd Lijmgroene achtergrond lijst TR.productReviews-even Witte achtergrond lijst onder de review sectie TR.productReviews-odd Grijze achtergrond lijst onder de review sectie TR.subBar ???
Belasting Setup Eerst in de Admin sectie 1) Locations/Taxes Taxzones Insert Zone Name: NY Only (of welke naam je wilt) Description: Only NY Residence will be taxed. (of welke omschrijving je wilt) Klik op de pijl onder action: Insert Country: US 31
Zone: New York 2) Locations/Taxes Tax Classes New tax class Tax class title: Taxable Goods (belastbare goederen) Description: Non-food, services (non-voedsel, services) 3) Locations/Taxes Tax Rates Class Title: Taxable goods Zone: NY Only Tax Rate (%): 19 (voor nederland) Description: NY Tax (of NL BTW) Standaard is prioriteit 1, wat betekent dat de belasting sowieso wordt geheven, behalve wanneer tax Rate nul is. Dan wordt dit gedeelte gegenereerd. Ten tweede, in mijn database (gebruikmakend van phpMyAdmin), onder de “products” category, zorg ik ervoor dat al mijn items die belast worden in New York prioriteit 1 krijgen, Onder “products_tax_class_id”. Anders wordt het niet belast. Of gebruik liever het Admin Panel, onder Category/products en selecteer dan Tax Class Taxable Goods for each product you entered. Dan wil ik dat de prijzen in de winkel als exclusief BTW worden weergegeven, totdat je bij de checkout bent. Dus in application_top.php rond regel nummer 132: define('DISPLAY_PRICE_WITH_TAX', true); Verander dit in false Nu ben je klaar.
Tell a friend email ook naar eigenaar Tell a friend zowel naar je vriend als naar de eigenaar van de winkel sturen. Deze fix zal een email sturen naar de winkel eigenaar wanneer iemand de Tell a friend box invult. In het /catalog/tell_a_friend.php script, ga naar regel 82 (ongeveer) Onder deze regel, tep_mail($HTTP_POST_VARS['friendname'], $HTTP_POST_VARS['friendemail'], $email_subject, stripslashes($email_body), '', $from_email_address, ''); Voeg je deze toe: tep_mail($HTTP_POST_VARS['friendname'], '[email protected]', 'Tell A Friend', stripslashes($email_body), '', $from_email_address, ''); Vervang [email protected] met je eigen email adres. Dit zal een email sturen naar de winkel eigenaar en naar het tell a friend email adres.
32
Tekst veranderingen Maak alle veranderingen aan de bestanden in de /catalog/english.php, voor de meeste tekst veranderingen. Als je naar de bestanden kijkt zie dat het meestal tekst secties zijn.
Vraag & Antwoord: V. A. V. A.
Is er een plek om te veranderen wat de tekst zegt als er een nieuwe klant zich inschrijft en/of een product koopt en dan zijn email krijgt? Dat zal het bestand /languages/*/create_account_process.php Hoe pas je de copyright footer tekst en links aan. En de tekst “required” na de boxen op de “My account” pagina? /catalog/includes/languages/english.php . De standaard kleur van het woord required is #AABBDD.
V. A.
Hoe verander je de introductie en welkoms tekst in default.php? catalog/includes/languages/english/default.php. Je moet in alle languages directory’s default.php aanpassen.
V.
Hoe verander je de tekst die je te zien krijgt in de meest linker hoek van je browser scherm? In languages/english.php // page title define('TITLE', 'osCommerce');
A.
V. A.
Hoe bewerk je de tekst Payment Methode adres for Checks/Money Orders. Op de pagina en de payment Methode address in de Email die de klant binnen krijgt? catalog/includes/languages/english/modules/payment/moneyorder.php Dit zijn de 2 regels onder de eerste die de module laat zien. define('MODULE_PAYMENT_MONEYORDER_TEXT_DESCRIPTION', 'Make Payable To: ' . ' Affairs To Remember ' . ' 600 Broadway ' . ' Van Buren, AR 72956
' . ' 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.'); Bewerk beide regels zodat ze jouw adres en details hebben.
V. A.
Hoe verander je de tekst zoals top, catalog, in de bovenste balk? catalog/includes/languages/english.php
V. A.
Hoe verander je de woorden “There are no products to list in this category” in de balk die te voorschijn komt wanneer je op een category klikt? includes/languages/english/default.php
V. A.
Hoe verander je de tekst “forgot your password? Click here” in het loginscherm? includes/languages/english/login.php
33
Uploading Afbeeldingen Dit is voor de afbeeldingen, om ze in hun eigen categorieën en sub-directory’s te zetten. Zoals alle afbeeldingen voor Software gaan in hun Software directory en binnen de software directory kan je ook sub categorieën maken. Afbeeldingen voor Hardware in de hardware dir, etc. Je kan de directory’s ook op fabrikanten, merken, distributeurs, etc. indelen. Hierdoor zijn de afbeeldingen makkelijker te vinden. Zodoende hoef je niet door een hele lang lijst te bladeren. Stap 1 – Stap 2 −
Stap 3 −
Maak directory’s aan in jouw catalog die overeen komen met de categorieën. Maak een gelijkwaardige structuur aan op je eigen PC. Op de manier zoals de Demo Catalog. Dvd Movies, Hardware, Software, etc. Upload de afbeelding naar de juiste directory op je site. Dus dat software afbeeldingen in /images/software komen te staan. Wanneer je afbeelding toegevoegd is via het admin paneel, selecteer je de locatie via browse en upload je het plaatje. Als jouw subdirectory’s niet geaccepteerd worden en je hebt problemen om afbeeldingen te uploaden, volg dan de instructies na stap 2
Stap 4 −
Wanneer je links naar afbeeldingen maakt via het item description page (in het admin paneel) selecteer de locatie via browse. Voor de naam van plaatje verander je deze switch “\”in deze switch “/”
Een voorbeeld: Je hebt een plaatje genaamd: amdathlon.jpg in de hardware categorie. C:\oscommerce\catalog\images\hardware\amdathlon.jpg op jouw computer. Het zal er uitzien als C:\oscommerce\catalog\images\hardware/amdathlon.jpg en in de catalog zul je dit te zien krijgen: hardware/amdathlon.jpg en de afbeelding, als je succes hebt gehad. Onthoud dat je het plaatje eerst upload. Subcategorieën zullen ongeveer hetzelfde verlopen, dus als een afbeelding (amdathlon2.jpg) in de input subcategorie wilt zetten (C:\oscommerce\catalog\images\hardware\input\amdathlon2.jpg) zal het er zo moeten uitzien; C:\oscommerce\catalog\images\hardware/input/amdathlon2.jpg.En natuurlijk zul je dit input/amdathlon2.jpg in het admin scherm zien.
