Om projektet
En webbutik byggd för att visa hur jag arbetar
Objekt är en påhittad butik. Varumärket och produkterna finns inte, bilderna är genererade och alla betalningar går mot Stripes testläge. Allt annat fungerar som i en riktig butik: varukorgen, kassan, orderhanteringen och recensionerna.
Testa ett köp
- Välj en produkt, en färg och eventuellt ett tillbehör till paketpris.
- Gå till kassan och betala med Stripes testkort
4242 4242 4242 4242, valfritt framtida datum och valfri CVC. Klarna går också att välja i testläge. - Stripe skickar en webhook till butiken. Servern kontrollerar signaturen och sparar ordern i DynamoDB.
- Ordern syns i adminvyn, där den kan markeras som skickad.
Funktionerna, och varför de finns
- Leveransdatum vid köpknappen
- Datumet räknas från klockan i Stockholm, med brytpunkt kl. 14, helger och svenska röda dagar. Kunden ser när varan kommer utan att behöva leta i fraktvillkoren.
- En köpknapp som följer med
- När den stora knappen har scrollats bort dyker en smal list upp längst ner med produkten, priset och en knapp. Den som läst klart specifikationerna kan köpa direkt.
- Mätare för fri frakt
- Varukorgen visar hur mycket som saknas till fri frakt (999 kr). Det är ett av de vanligaste sätten att höja ordervärdet, och kunden vet alltid vad frakten kostar.
- Tillbehör till paketpris
- Bordslampan säljs med en glödlampa och vaserna med en skötselduk till lägre pris. Rabatten räknas om på servern vid varje köp, så den går inte att manipulera från webbläsaren.
- Färgval direkt på produktkorten
- Håll muspekaren över en färgprick för att se produkten i den färgen. Ett klick tar dig direkt till den varianten på produktsidan.
- Kategorier som egna sidor, filter i adressen
- Varje kategori är en egen sida som byggs i förväg och cachas nära besökaren, så den laddar snabbt och syns i sökmotorer. Färg, pris och sortering läggs i adressen, så varje filtrerad vy har en länk som går att dela och bakåtknappen tar bort det senaste filtret.
- Ett A/B-test på köpknappen
- Hälften av besökarna som godkänt statistik ser totalpriset på knappen. Adminvyn visar andelen som lägger i varukorgen och antalet köp för varje variant.
Det jag valde bort
Butiken har inga nedräkningar, inga påhittade "tidigare priser" och ingen popup med lyckohjul. Ingen video startar av sig själv. Lagersaldot som visas är det som står i produktdatan. Recensionerna skrivs av besökare och ingen recension är förifylld. Statistik räknas först när besökaren har godkänt det, och båda knapparna i cookiebannern är lika stora.
Sådana knep kan ge fler köp på kort sikt. För en butik som vill att kunderna kommer tillbaka kostar de förtroende, och de gör det svårare att lita på siffrorna i ett A/B-test.
Rabattkoder finns, men de visas öppet här i stället för i en popup. Testa koden VALKOMMEN10 i kassan för 10 % på första köpet.
Teknik
- Next.js 15 och TypeScript, med sidor som renderas på servern och uppdateras när en recension kommer in
- AWS Amplify för hosting och Cognito för inloggningen till adminvyn
- En DynamoDB-tabell för ordrar, recensioner, statistik och begränsning av antal anrop
- Stripe Checkout med kort och Klarna i svenska kronor, och en webhook som sparar ordern
- Vitest för logiken (priser, leveransdatum, filter) och Playwright för hela köpflödet
- Produktdata i en enda fil, så ett nytt sortiment kräver inga kodändringar