# Best practice: Fra standard storefront til vedkommende specialbutik

Denne shop er bygget med Orderlys package-owned komponenter, men den er gjort vedkommende, appellerende og unik ved at behandle kataloget, brandet og købsoplevelsen som én samlet redaktionel oplevelse. Målet har ikke været at skjule Orderly-komponenterne, men at bruge dem som et robust fundament og lægge et tydeligt shoplag ovenpå: relevant indhold, stærk navigation, levende kategorier, brandnær visuel rytme og en kurv/checkout, der føles integreret i layoutet.

## 0. Definition of Done for shopudviklere og AI-agenter

En færdig Orderly-shop skal ikke blot være teknisk funktionel. Den skal føles som en butik med en tydelig afsender, en forståelig redaktionel ide og en moderne frontend-oplevelse, som udvikleren kan være stolt af at vise frem.

Før en shop leveres som færdig, skal udvikleren eller agenten:

- Have læst og fulgt dette dokument som praktisk tjekliste.
- Have inspiceret produktkataloget og brugt varerne som materiale til navigation, forside, kategorier og indhold.
- Have omsat brand- eller referencewebsite til et konkret visuelt system med tokens, layout, spacing, typografi, billedbrug og komponentrytme.
- Have skrevet relevante forside- og kategoriintroduktioner, som sætter shop, kategori eller produkttype i kontekst for brugeren.
- Have researchet aktuelle stærke frontend-eksekveringer, når netværksadgang er mulig, og brugt dem som kvalitetsbar for responsivt layout, interaktioner, motion, performance og tilgængelighed.
- Have kørt shoppen lokalt og inspiceret den visuelt på desktop og mobil i browseren.
- Have tjekket forside, kategori, produkt, kurv og checkout, inklusive tom kurv og kurv med varer.
- Have rettet synlige problemer med overlap, spacing, tekstlængder, billedbeskæring, interaktionsstates, horisontal overflow og mobil/desktop-breakpoints.

Hvis browser, backend, katalogdata, konto id, credentials eller referencewebsite mangler, skal det rapporteres eksplicit som en forudsætning. Man må ikke kalde shoparbejdet færdigt uden enten visuel QA eller en konkret forklaring på, hvorfor visuel QA ikke kunne udføres.

## 1. Start med butikkens formål, ikke med templaten

Standardtemplaten giver en fungerende butik, men den fortæller ikke hvorfor kunden skal blive hængende. For Kræftens Bekæmpelses Bøger blev formålet gjort tydeligt på forsiden: brugte bøger får længere liv, og købet støtter kræftsagen. Det gør shoppen mere end en produktliste. Den får en grundtone, som kan mærkes i hero, informationsbokse, footer, checkout-tekst og navigation.

Best practice er at formulere en kort redaktionel kerne tidligt:

- Hvad sælger shoppen?
- Hvorfor er udvalget interessant?
- Hvilken sag, ekspertise, stil eller kuratering gør shoppen anderledes?
- Hvad skal kunden forstå, før de begynder at klikke på produkter?

I denne shop blev svaret ikke en lang forklaring, men korte, gentagne signaler: genbrug, bøger, frivillighed, støtte til kræftforskning, forebyggelse og patientstøtte.

## 2. Brug brandet som designretning, ikke som dekoration

Cancer.dk blev brugt som visuel reference for farver, klarhed, kant, typografi og kontrast. Fordi brandbrugen var godkendt, kunne Kræftens Bekæmpelses røde identitet og logoform indgå tydeligt. Det vigtige greb var dog ikke kun at indsætte et logo. Brandet blev omsat til et system:

- En dyb burgundy/rød hovedflade til hero og stærke sektioner.
- Hvide og cremefarvede flader til læsbarhed og ro.
- Stramme radii og tydelige knapper, så shoppen føles mere institutionel og troværdig end dekorativ.
- Korte rubrikker med stor vægt, så forsiden får redaktionel energi.
- Konsekvent brug af rødt til handlinger, aktive menupunkter og vigtige signaler.

Best practice er at oversætte referencebrandet til design tokens og mønstre frem for at kopiere enkelte elementer. Tokens holder resten af shoppen konsistent, mens komponent-specifik CSS kun bruges, hvor tokens ikke kan udtrykke layoutet.

## 3. Lad kataloget forme indholdet

Shoppen blev gjort unik ved at læse kataloget og finde mønstre i varerne: forfattere med mange titler, kogebøger med tydelige temaer, biografier med stærke personer og kategorier med genkendelige bogforsider. Det gav indhold, der føles kurateret i stedet for generisk.

Konkrete greb:

- Forfatterskabssider for navne, der faktisk fylder i kataloget.
- Kategoritekster på dansk, skrevet ud fra varerne i kategorien.
- Kategoriheaders med udvalgte bogforsider, så siderne hurtigt får stemning og relevans.
- En kogebogssektion på forsiden med temaer som grønt, sundhed, fuldkorn, grill og hverdagsmad.
- En biografisektion med portrætnære forsider og korte tekster om hvorfor personen er interessant at læse om.

Best practice er at bruge produktdata som redaktionelt råmateriale. En god storefront skal ikke kun vise produkter; den skal hjælpe kunden med at forstå hylderne.

## 4. Gør navigationen til en del af oplevelsen

Den venstrestillede vertikale menu blev valgt, fordi den passer til en bogshop med mange genrer og underkategorier. Den giver kunden en fast fornemmelse af katalogets struktur, næsten som en fysisk reol. Menuen blev også udvidet med custom indgange som "Find nærmeste butik", "Giv ting til genbrug" og "Bliv frivillig", så navigationen både hjælper med shopping og fortæller om organisationens virkelighed.

Best practice:

- Brug menuen til mere end kategori-links, når brandet har relevante service- eller støttehandlinger.
- Hold kategoriniveauerne få og stabile, så kunden ikke drukner i struktur.
- Gør aktive punkter tydelige.
- Sørg for at menuen fungerer forskelligt på desktop og mobil, men med samme informationsarkitektur.

## 5. Integrer kurven i layoutet

På desktop blev kurven ikke behandlet som et standard overlay, men som en højre sidekolonne, der kun vises, når der er varer i kurven. Det matcher den venstre vertikale menu og giver en balanceret tre-delt struktur: navigation til venstre, indhold i midten, kurv til højre. Når kurven er tom, optager den ikke plads.

På mobil blev kurven i stedet gjort kompakt: en fast "Kurv"-knap med antal varer. Checkout blev samtidig gjort til én kolonne, så formular og kurvoversigt ikke konkurrerer om pladsen.

Best practice:

- Vis ikke tomme UI-områder bare fordi layoutet har plads til dem.
- Lad kurvens placering følge viewporten: inline på desktop, kompakt på mobil.
- Vis altid antal varer, når en kurvknap er synlig.
- Hold checkout enkel, især på mobil. Formularen skal komme først, kurvoversigten bagefter.

## 6. Gør forsiden til en redaktionel indgang

Forsiden blev udvidet fra standard produktsektioner til en mere levende shopforside med flere indgange:

- Hero med tydeligt brand, stærk rubrik og hurtige kategoriindgange.
- Information om genbrug, butikker og støtten til kræftsagen.
- Forfatterskabskort med bogforsider.
- Kogebogsspor med tematiske forsider.
- Biografimosaik med portrætter og korte læsebegrundelser.
- Scroll-reveal, parallax og diskrete animationer, som giver bevægelse uden at overdøve produkterne.

Best practice er at bruge animation som prioritering og rytme, ikke som pynt. Bevægelse skal hjælpe brugeren med at opdage indhold og mærke forskel på sektioner. Den skal stadig være robust, responsiv og let nok til at siden føles hurtig.

## 7. Bevar package-owned komponenter

Selvom shoppen er kraftigt brandet, er kerneflowet stadig bygget på Orderlys komponenter: `orderly-home-page`, `orderly-category-page`, `orderly-product-detail-page`, `orderly-checkout-page`, `configureShop(...)`, templates og den genererede Vite/static build-opsætning. Det giver en vigtig balance: shoppen kan føles unik, men den afviger ikke unødigt fra pakkens kontrakter.

Best practice:

- Tilpas med slots, templates, konfiguration og CSS før du erstatter komponentadfærd.
- Brug komponenternes events og controllers til state, fx basket-events til kurvtælling.
- Undgå custom checkout- eller kurvlogik, medmindre pakken ikke kan levere adfærden.
- Hold SSR/static category URLs og produktlinks intakte, så SEO og routing ikke lider under designændringer.

## 8. Skriv tekster som en del af produktoplevelsen

Alle kategoritekster blev skrevet på dansk og med et mere inspirerende sprog end standardlabels. Forfattersiderne fik researchbaserede tekster om forfatterskaber, serier og læseoplevelse. Checkout-teksten blev gjort relevant for Kræftens Bekæmpelse i stedet for at nævne den tekniske platform.

Best practice:

- Fjern platformstekst fra kundevendte flader.
- Skriv korte tekster, der forklarer værdien af netop denne shop.
- Brug kategori- og forfattertekster til at guide, ikke til at fylde.
- Gentag den vigtigste brandværdi på de steder, hvor kunden træffer valg: forside, kurv og checkout.

## 9. Test visuelt i rigtige breakpoints

Flere forbedringer kom fra visuel QA: skjulte overskrifter, for smalle headers, checkout-overlap på mobil, tom højre kurvkolonne på forsiden og manglende kurvantal. Det blev rettet ved at se shoppen i browseren, ikke kun ved at læse CSS.

Best practice:

- Test desktop, tablet og mobil efter hver større layoutændring.
- Tjek både tom kurv og kurv med varer.
- Tjek forsiden, kategori, produkt og checkout.
- Mål horizontal overflow på mobil.
- Byg static output til deployment efter ændringer, så `root/` altid repræsenterer den version, der kan publiceres.

## Kort tjekliste for andre shopudviklere

1. Find butikkens redaktionelle kerne og skriv den ind i forsiden.
2. Oversæt brandreferencen til tokens, typografi, spacing og komponentrytme.
3. Brug kataloget til at skabe kuraterede indgange, ikke kun kategorilister.
4. Gør navigationen nyttig, synlig og brandrelevant.
5. Vis kurven på en måde, der passer til layoutet og kun optager plads, når den er relevant.
6. Brug bogforsider eller produktbilleder aktivt i kategoriheaders og forsideindgange.
7. Skriv alle tekster på kundens sprog og fjern tekniske platformshenvisninger.
8. Bevar package-owned komponenter og brug konfiguration, slots, templates og CSS før custom logic.
9. Test visuelt på mobil og desktop, især kurv og checkout.
10. Byg deployment-outputtet til sidst og dokumenter kendte forudsætninger.

Det vigtigste princip er, at en god Orderly-shop ikke skal føles som en komponentdemo. Den skal føles som en butik med en klar afsender, et forståeligt udvalg og en købsoplevelse, der passer til både kataloget og brandets formål.
