De fem kundesider viser embeddet hvor det hører hjemme. Denne side viser det udstillet: hver størrelse, form og variant, hver tilstand, og hvert forvalg — alle sammen levende, og alle sammen pegende på Strandhotellets rigtige butik i produktion.
Ni kombinationer af data-shape og data-variant, alle i
md. Geometrien kommer fra de samme konstanter som dashboardets
forhåndsvisning — det her er ikke et billede af knappen, det er knappen.
md er 44 px høj — det mindste rørepunkt resten af produktet er revideret
efter — og sm er 32 px, til den der med vilje har valgt en lille knap.
data-block fylder beholderen. data-class slukker for
al vores styling, så knappen arver kundens eget designsystem i stedet for at slås
med det.
ingen inline-styling overhovedet
modal er standard. inline bytter knappen ud med butikken på
stedet. tab forlader siden helt — udvejen for en kunde med en streng CSP, og
den eneste tilstand der ikke bruger en iframe.
aria-haspopup="dialog" · fokusfælde · Esc lukker
knappen forsvinder, rammen tager dens plads
ingen aria-haspopup: der åbner ingen dialog
Et forvalg springer aldrig et spørgsmål over, som køberen stadig selv skal svare på: trinnet går kun frem så længe alt bag det er udfyldt. Og et ugyldigt tal bliver ignoreret, ikke rundet af — 20 stk. når der stod 999 er et tal ingen har valgt.
I praksis holder et data-step næsten altid, fordi butikkens egen
starttilstand er gyldig hele vejen til betaling. Reglen findes til de tilstande, der ikke
er det — en hilsen over grænsen, en modtager uden mailadresse — og dér stopper den ved det
første trin, der mangler noget.
data-quantity hører til gavekort. En billetkurv tælles pr. niveau inde i
kurven, så parameteren følger med i adressen og bliver ikke brugt af
/{slug}/event/{id}.
?product=…&amount=150000 (kroner ind, øre ud)
?quantity=4
alt bag trinnet er udfyldt → det holder
holder: butikkens egne standarder (første hurtigbeløb, selvlevering) er allerede
gyldige, så der er intet ubesvaret bag trinnet
parameteren udelades helt — se adressen i panelet
?kampagne=cmp_… — Vinterophold er offentlig og gælder også uden; en unoteret kampagne
gælder kun gennem et link som dette
data-locale vælger butikkens sprog. Dansk er standard og har ingen præfiks i
adressen; de fire andre får deres eget.
Til en side der tegner sig selv. kuvert.url() bygger adressen uden at åbne
noget — brugbar i deres egne mails og nyhedsbreve.
—
Den flydende knap kan ikke vises her: den dukker kun op på en side der ingen egne triggere har. Hvert hjørne har derfor sin egen bare side.
| Side | Hvad den viser |
|---|---|
| /lab/hjoerne-br | data-position="br" — standard, nederst til højre |
| /lab/hjoerne-bl | data-position="bl" |
| /lab/hjoerne-tr | data-position="tr" |
| /lab/hjoerne-tl | data-position="tl" — og data-mode="tab" på scriptet |
| /lab/naegtet | en oprindelse der nægter at blive indlejret: den hvide kasse, de seks sekunders tålmodighed, og udvejen der bliver tilbudt i stedet |