Lav en webshop på en weekend


13/4–2008

Læseferie, snart eksamen... Hvilket bedre tidspunkt til at gå i gang med at re–designe sin hjemmeside??.. Nu skriver jeg "re–designe" her og "lav" i overskriften.

Faktum er, at vores hjemmeside www.kondomaten.dk trængte frygteligt til et re–design. Siden var efterhånden blevet syv år gammel, og der er sket meget på de syv år. Både på teknologi–fronten og indenfor mine evner. Dertil skal lægges at syv års erfaring med e–handel har gjort, at vi godt kunne se adskillige uhensigtsmæssigheder i den oprindelige version af KONDOMATEN. Siden var blevet for rodet og een stor lappe–løsning, som var blevet tung at vedligeholde. Så da jeg burde læse til eksamen, tænkte jeg, "jeg kan da lige gå i gang med at kigge lidt på det nye design til KONDOMATEN".

Den ene time tog den anden, og jeg blev grebet af arbejdet, og det kom helt bag på mig, hvor meget jeg fik lavet på en weekend. Derfor har jeg lavet denne beskrivelse/guide/tutorial (kan ikke rigtigt finde ud af, hvad det er) – også for at give dig blod på tanden. At skabe en succesfuld webshop er ikke simpelt og kræver mange aspekter, men at skabe rammerne kan man faktisk gøre meget hurtigt. Det skal siges, at siden er langt fra færdig. Lige nu er det en skrabet webshop, der fungerer. Der mangler utallige funktionaliteter, som vil blive tilføjet løbende som jeg får tid. Er du interesseret i at følge med, kan du nederst sende mig din email–adresse, så skal jeg give besked, når jeg opdaterer denne artikel.

Går du og overvejer at starte en webshop, eller har du allerede én, som du ikke vil re–designe, kan det alligevel være, at du får nogle guldkorn med på vejen her. Alle skal i hvert fald være velkomne til at læse med.

Inden vi går i gang, skal du lige have en slags disclaimer:

Fredag kl. 20 – Grafik til navnet


–Jeg vidste, jeg ville have til at stå "KONDOMATEN" i øverste højre hjørne. Tænkte også over, hvordan jeg kunne få lidt "kærlighed" indover det... Hjerte for pokker – laver det lidt I NY–agtigt... Billed–googler "I love NY", gem billede og åbner det i GIMP (jeg laver 10–20 stykker grafik om året og til det formål er det gratis program GIMP alt rigeligt – du kan hente det her: www.gimp.org). Hmm... Ikke helt frækt nok. Måske en lille reflektion ville peppe det lidt op. Googler "gimp reflection tutorial" – Hit nr. 2 ligner noget, jeg kan bruge:
http://binnyva.blogspot.com/2006/12/creating–reflections–for–logos–in–gimp.html

Minsandten... Google er min ven – det tog jo kun seks minutter at få dette frem:

Grafik: 1 time

Fredag kl. 21 – Baggrund

Er ikke helt tilfreds med baggrunden. Jeg er stor tilhænger af hvid (eller i hvert fald lys) baggrund, men det er som om, det er lidt kedeligt med en helt hvid baggrund. Billed–googler lige "fading background" og får et par resultater, med det jeg er efter. Jeg vil have en baggrund, der går fra lidt mørk og fader langsomt ud i hvidt. Denne vil jeg så bare gentage horisontalt med CSS. Synes, det giver en god effekt. Med CSS gøres det blot sådan:
body {
   background–image: URL(grafik/background.png);
   background–repeat: repeat–x;
}
CSS er bare et superstærkt sprog.

Fredag kl. 21.15 – CSS

Suk – tid til noget CSS. Det er ikke min store interesse og heller ikke min store styrke.. Har heldigvis brug for et ret simplet set–up. Prøver mig frem med lidt floats og div. Googler "css three column with header" og får forskellige resultater frem. Roder lidt med det. Får ret hurtigt den løsning, jeg ønsker. Tid til at teste i forskellige browsere.
Firefox, Mac – OK
Safari, Mac – OK
Firefox, Ubuntu – OK
Konqueror, Ubuntu – OK
Camino, Mac – OK
Firefox, Windows – OK
Opera, Windows – OK
iPhone – Hmm – nogenlunde (skulle måske ha' læst A List Aparts artikel, inden jeg gik i gang – http://www.alistapart.com/articles/putyourcontentinmypocket)
Internet Explorer...... (virtuel trommehvirvel)... øv...
Fedter frem og tilbage. Fire–fem grå hår mere kan tilskrives Micro$oft. Endelig.. Efter et kvarters tid finder jeg en acceptabel løsning.

Kunne godt ha' brugt en af de online løsninger som f.eks. http://browsershots.org/, men har erfaret at de ikke altid er præcise, så foretrækker mit setup med tre computere. Måske er jeg gammeldags.
Tilfreds med resultatet
KONDOMATEN på iPhone, Internet Explorer, Firefox Ubuntu og Safari Mac OS X
Ahh – CSS på plads for nu.
CSS 1 time 1 kvarter (kunne godt være gjort hurtigere, hvis man er bedre til CSS, end jeg er. Det er de fleste)

Fredag 22.30 – Menu

Ska' bruge en menu. Vil ha' den øverst som på vores gamle side. På den gamle side havde vi en menu bestående af gif–filer, men erfaringen har lært mig, at en CSS–menu er at foretrække. Dette skyldes flere ting, men primært følgende:
Så jeg går ind på Digg.com for at søge efter en lækker css menu. Skriver "css menu" i deres søgefelt i øverste højre hjørne. Når du har foretaget søgningen, så vælg "sort by most diggs" i drop–down–menuen. Så får du de mest populære resultater – som oftest de bedste løsninger. Husk også at kigge gennem kommentarerne – der er ofte nogle rigtigt gode tips og links.
Kommer forbi
http://www.dynamicdrive.com/style/ og finder en menu, jeg godt kan lide:
http://www.dynamicdrive.com/style/csslibrary/item/solid–block–menu/
Checker lige deres betingelser – yes, man må godt bruge dem kommercielt. Napper menuen og laver lige en prototype for at checke at det hele virker, som jeg ønsker det. Bingo – strikker menuen sammen i en fil for sig, så den bare skal inkluderes på hver side.
Menu: 2 timer (tog primært så lang tid fordi jeg surfede rundt på alle de fede menuer, der blev linket til fra Digg. Havde jeg fundet min menu i første go, havde det taget en halv time)

Lørdag 00.30 – Skabelon

Prøver lige at strikke en forside sammen, så kan den fungere som skabelon. Kondomaten–grafik øverst, menu og så tre spalter. Undermenu i venstre side, indhold i midten og indkøbskurv i højre side.
Det går som en leg. Skal lige ha' lavet en menu i venstre side. Bør også kunne inkluderes, så den kan genbruges på tværs af sider. Sorterer kondomerne i kategorier, størrelser og efter mærke. På den gamle side havde vi kun kondomerne sorteret efter mærke, og specielt kvinder har givet os kritik for det, så denne ændring er udtryk for, at vi har lyttet til kritik og lært noget i løbet af de syv år.
Ha – det går som en leg. Forside prototype, som kan bruges som skabelon klar på under en time.
Skabelon/forside: 1 time

Lørdag 01.30 – Basale behov

Zzzzzzzz + havregryn + kaffe + avis
Boble og morgenmad: 8 timer

Lørdag 09.30 – Databasearkitektur

Min hjerne arbejder klart bedst om morgenen, så vælger at kigge på database–arkitekturen. Skal naturligvis have følgende tabeller:
men skal også kunne håndtere lager–kontrol, mængderabat og tilbud. F.eks. skal det være muligt at give mængderabat på en vare, således:
1 Black Jack 58,–
3 Black Jack 148,–
6 Black Jack 280,–
Samtidigt skal det være muligt at sammensætte et tilbud, der f.eks. kunne indeholde en pakke Safe Play, en pakke Ultra Thins og en pakke Maxlove. Det i sig selv er ikke besværligt – det er mere når vare–salget skal håndteres i lager–styringen. Hmm... Har jo også en søgefunktion at tage hensyn til... Normalisering og design af databaser er altså en tungen–lige–i–munden–disciplin. Bliver nødt til at løbe en tur og tænke det igennem.
Løbesko, iPod, rundt om Søerne... Hjemme igen har jeg det hele på plads. Skynder mig at skitsere det, inden jeg går i bad.

Databasen? MySQL selvfølgelig! Hvis den er god nok til Google, er den også god nok til Kondomaten. Jeg bruger phpMyAdmin til at håndtere den. Det er et lækkert værktøj og kan godt skrive "CREATE TABLE", men PHPMyAdmin gør det bare så meget nemmere.

Yes... Hele strukturen på plads. Og så er man oveni købet nyvasket.
Database–design og løbetur: 4 timer

Lørdag 13.30 – Basale behov II

Frokost

Lørdag 14.00 – Instrumentbræt

Skal have lavet et administrations–interface eller instrumentbræt, som jeg plejer at kalde det. Her er jeg ligeglad med lækkert design og SEO – det skal bare være nemt og hurtigt.
Starter med at lave en forside og en underside, hvor man kan oprette varer.
Finder lige ikoner til at peppe det lidt op på www.iconfinder.net. Sådan noget som:
slet
tilføj
redigér
kan man nemt finde nogle lækre ikoner til.

Nu kan jeg i det mindste smide nogle varer i databasen og begynde at teste det på siden. Opretter lige to varer i databasen for at ha' noget at teste på.
Administrations–interface (ultra skrabet version): 45 min

Lørdag 14.45 – Tre statiske sider

Laver lige siderne vilkår, levering og om Kondomaten. Det er rimeligt statiske sider, som der ikke skal pilles meget ved bagefter. Teksterne skal holdes kort (folk gider ikke læse ret meget på nettet) og samtidigt er der nogle ting, som PBS kræver fremgår af siden sådan noget som fysisk adresse, at priser fremgår som DKK og ikke kr, at der udtrykkeligt står, at kunden har 14 dages returret m.m. Samtidigt skal siderne skrives, så de kan læses af søgemaskiner. Jeg er modstander af at sige, de skal skrives til søgemaskinerne. Det skal de ikke, men hvis søgemaskinerne ikke kan læse dem, så skal du ikke regne med, at der er mange mennesker, der kommer til det. Så det er en afvejning. Lad en meget sigende og velformuleret overskrift være omkranset af h1–tags ("velkommen til min hjemmeside" er måske nok sigende, men ikke for en søgemaskine. Kig på mine overskrifter på de tre sider og se, hvad jeg mener) og fremhæv vigtige detaljer i teksten med b–tagget. På den måde finder din kunde nemt, hvad hun søger, og søgemaskinerne er også med.
Med grafik og lidt fedten rundt med at få nogle fornuftige formuleringer, er jeg færdig med
tre sider: 2 timer

Lørdag 16.45 –Indkøbskurven programmeret i PHP

Kan lige så godt komme i gang med indkøbskurven. Her er der endelig et sted, hvor jeg kan genbruge lidt kode fra den gamle side. Har nemlig lavet en ultra–skrabet version af en indkøbskurv i PHP med brug af sessions.

Logoerne fra de betalingskort, vi modtager skal fremgå (også et krav fra PBS). Ind på www.betaling.dk og hente logoer. br> Smide dem sammen med den skrabede indkøbskurv og integrere med databasen. Går overraskende hurtigt, men der er selvfølgelig heller ikke meget hokus–pokus i det. Vigtigt: Husk at filtrere input og fjerne muligheden for SQL–injektion (læs mere om SQL–injektion her: http://en.wikipedia.org/wiki/Sql_injection).
Indkøbskurv integreret med databasen: 2 timer

Lørdag 18.45 – Basale behov III

Aftensmad...
Tænker, "hmm – burde få læst til eksamen"

Lørdag 20.00 – Præsentation af varerne

Skal jo have varerne vist på siden. Det er jo unægteligt en stor del af en webshop. Vi har i grove træk to varegrupper. Kondomer og glidecreme. Kondomer har to produktfotos – ét af kondom–pakken og ét af kondomets form. Glidecreme har kun ét produktfotos. Bestemmer mig for at løse det ved at lave en onmouseover–effekt i stedet for at vise to billeder for hvert kondom. På den måde sparer jeg plads på siden. Laver et ret simpelt setup med produktbilledet til venstre og så en beskrivelse af kondomet til højre. Ved hjælp af PHP checker jeg, om produktet har to produktfotos i databasen. Er det ikke tilfældet, så viser jeg produktet som glidecreme. Ellers går jeg ud fra, det er et kondom.

Tester lige på de to bedøvende kondomer, Performa og MaxLove, der er de mest populære kondomer. Når jeg har lavet en tilfredsstillende prototype med dem, kan jeg bare bruge det som skabelon for de øvrige produkter. Det er en ultra–simpel opgave. Skal blot ha' lavet en funktion, der tester, om den aktuelle vare er på lager og så ellers vise dem, hvis det er tilfældet. Der udover vil jeg godt ha' mulighed for at bestemme, hvor mange varer, der skal vises på hver side, så jeg har mulighed for f.eks. at sætte 4 varer på hver side eller 6 afhængigt af, hvad jeg vurderer fungerer bedst.
Sørger for at inkludere varens navn i et <h1>–tag, da det jo er det vigtigste på siden.

For nu nøjes jeg med et link til "læg Performa i indkøbskurven". Skal nok have set på det senere.
Opsætning af varer 2 timer

Lørdag 22.00 – Blog

Det er ved at blive sent... Må ha' kaffe.. Uhmm – en fantastisk drik. Slurp.
Corporate blogging... Det er hot! Spørgsmålet er om KONDOMATEN, der er en "kælder–virksomhed" kan kaldes "corporate"? Og har vi virkeligt noget "på hjertet" at fortælle vores brugere? Til trods for at der er millioner af blogs og de fleste er ubetydelige, så kan en blog være et rigtigt stærkt værktøj. Her er et par grunde til hvorfor:
Så derfor ska' vi også ha' en blog. Databasemæssigt er det ret simpelt. Et blog–indlæg har en titel, en tidsstempling, en overskrift, en meta–description (til Google) og et par keywords. Venter lige med kommentarerne, men de er jo blot endnu simplere. Har endnu ikke fundet ud af, om jeg vil have kommentarer på bloggen (selvom det i den grad kan generere dynamik på en blog).

Nå – tilføjer til mit instrumentbræt en side, hvor man kan oprette et blog–indlæg. Rimeligt simpelt. Skal for guds skyld have et XML–feed, så folk kan abonnere på vores blog–indlæg, men det er også nødvendigt for at man kan pinge de store medier, jeg nåvnte før.

Igen sørger jeg for at sætte overskriften i <h1>–tags (du er nok ved at fange pointen).
Blog med admin–modul: 4 timer

Søndag 02:00 – Basale behov IV

Bladrer lige lidt i e–pusher, inden jeg lægger mig til at trække torsk i land. Hvis du overvejer at starte en webshop eller allerede har én, kan e–pusher varmt anbefales. Prisen virker afskrækkende, men tro mig, du kan hurtigt tjene den hjem igen.
Trække torsk m.m. 7 timer

Søndag 09:00

Kan ligeså godt komme i gang med det – skal have lavet selve "gå–til–kassen"–proceduren. Vil helt klart genbruge opsætningen fra den gamle KONDOMATEN. Når man skulle til kassen opdelte vi det i tre trin og fjernede menuen. Det gjorde vi af flere årsager. For det første så vil man ikke miste sin kunde, når de har besluttet sig for at gå til kassen. Derfor fjerner vi evt. "fristelser" til at klikke væk. Der udover vil vi gerne gøre betalings–processen så nem som muligt, så vi fjerner alt "støj" og viser kunden, at hun er ved "Trin 1 af 3". Så er det da til at se, hvad man skal gøre.

Første trin er at udfylde navn og adresse. Jeg har lavet en lille lækker brugervenlig funktion, der udfylder by–navnet på baggrund af postnummeret vha javascript. Har for lang tid siden lagt den artikel op her på V4D5 (postnr by med javascript–artikel – du er velkommen til at sakse den). Lavede den oprindeligt fordi så mange af vores kunder skrev forkert by eller postnummer, og vi så endte med at få varerne retur – og så er det jo også bare brugervenligt.

Jeg checker brugerens indtastning både på klient–siden og server–siden. Man kan ikke stole på, at brugeren har javascript slået til, så det er særdeles nødvendigt at checke indtastningen på server–siden også.

Næste trin i betalingsprocessen er at vise kunden, hvad hun er i færd med at købe. Det er et krav fra PBS, så der er ikke så meget at gøre ved det. Det tager ikke mere end ti minutter at flække den side sammen.

Slutteligt skal brugeren indtaste sine kreditkort–oplysninger. Vi bruger Freepay til at håndtere den slags. Indledningsvis laver jeg siden, der skal håndtere det, og når så siden bliver lagt online, skal jeg blot lige ændre et par indstillinger ved Freepay. Formularen skal indeholde oplysninger om valuta, vores kundenummer ved Freepay m.m. Første gang man stifter bekendtskab med det, lyder det uoverskueligt, men det er overraskende simpelt at lave.
Betalingsproces 3 timer

Søndag kl. 12:00 – Knap til "læg i kurven"

Vil lige ændre det link, jeg brugte til at lågge en vare i kurven. Smutter igen ind på Digg og søger denne gang efter "css button". Finder rimeligt hurtigt denne fætter, jeg synes er ret lækker (man kan ellers nemt bruge lang tid på Digg, men i dag er jeg opsat på at komme videre). Laver lige en prototype.. Dejligt nemt og vedligeholdelses–venligt – den tager jeg. Ren copy–paste.

Knap 1 time

Søndag kl. 13:00 – Favicon

Ren eye–candy, jeg ved det godt, men jeg kan altså godt lide favicons (det er det lille logo/stykke grafik, du kan se i adresselinjen, fanebladene og i dine bogmærker). Tager bare hjertet og laver til et favicon ved hjælp af denne favicon generator.
Hmm – ser ikke så godt ud i Firefox, at der er en hvid baggrund. Måske kan man lave det gennemsigtigt. Googler lige "transparent favicon". Minsandten – masser af tutorials. Gennemsigtigt favicon på 45 minutter

Favicon 45 minutter


Søndag 13:45 – Oprette varer

Tid til at fylde varer i databasen. Kedsommeligt job, men det skal gøres (godt kunderne opretter sig selv). Heldigvis kan jeg bruge vores gamle produktfotos, så det sparer mig for megen tid.
Det er ren tastearbejde og copy–paste.
Varer i databasen 4 timer... Gaaaab

Søndag 17:45 – Undermenuen

Kan endelig lave mine undermenuer. Har heldigvis en god skabelon at gå ud fra, så nu laver jeg mine undersider som f.eks. "store kondomer", "kondomer med farve", "bedøvende kondomer". Det er forhåbentligt meget brugervenligt og intuitivt for vores kunder og samtidigt giver det godt i søgemaskinerne.
Undersider + hurtig aftensmad 3 timer

Søndag 20:45 – Test og tilretninger

Tid til tests... Hmm – lader til at det hele fungerer efter planen. Retter lige enkelte skønhedsfejl og andre ting, jeg vil have anderledes. Ser sgu' ud til, at det kører.
Tilretning 2 timer

Søndag 22:45 – Google Analytics for pokker

Havde helt glemt det. Skal lige have smidt koden fra Google Analytics i bunden af mine sider. Google Analytics leverer et superstærkt værktøj til at se statistik på dine sider. Kender du det ikke, så check det ud.
Statistik – 15 minutter

Søndag 23:00 – Faktura–printning

Skal lige lave mulighed for at printe faktura og labels. Tilføjer en række i tabellen over ordrer, så man kan se, om en ordre har været printet. Laver så på administrationssiden en side, hvor vi lyn–hurtigt kan printe fakturaer på de kunder, hvor varerne ikke er sendt endnu.
Mulighed for at printe fakturaer 1,5 time

Søndag 23:30 – webshop på en weekend. Eksamen i overmorgen!



Ventede et par uger med at lægge den online, da jeg frygtede, der ville komme et par komplikationer i forbindelse med dette. Det gjorde der nu ikke. Lagde den ud og havde den kørende på lidt over en time og nu er den her.

Der mangler stadig meget, men det er små projekter, jeg kan lave i løbet af en eftermiddag. Lige p.t. står følgende højest på min liste:
Jeg vil løbende implementere disse funktioner og mange flere og skrive lidt om det her. Er du interesseret i at få en mail, når der sker nyt på den front, så skriv din mail i feltet herunder (vil ikke blive brugt til spam eller videresolgt til andre).

"–Det er meget hurtigere at gøre med en standard–løsning", vil du måske indvende. Muligvis, vil jeg så sige, men jeg har valgt en skræddersyet løsning af tre årsager:

Håber, du har nydt at læse med. Tak fordi du hang ved så længe. Smut nu over og køb nogle kondomer.

Update:

Jeg har nu fået skrevet del 2 af denne artikel.
Læs her om, hvordan jeg har forbedret Kondomaten i løbet af det første år

Update 2:

Jeg har i 2013 startet webshop systemet Shoporama. Det er oplagt, hvis du selv vil starte webshop.

Morten
Min blog – http://blog.v4d5.net