Skip to main content
En tilpasset skabelon lader dig tilsidesætte, hvordan en individuel blok renderes. I stedet for blokkens indbyggede UI renderer carten din egen JSX, ved brug af de samme data, blokken normalt ville bruge. Det er en tværgående mulighed snarere end en blok i sig selv: de fleste blokke eksponerer den fra deres Code-fane. Denne side dækker det, der gælder for alle blokke. For de props, en specifik blok giver dig, spring til blokkens egen reference.

​
Tilpasset skabelon vs. Custom code-blok

Disse lyder ens, men gør forskellige ting:
  • En tilpasset skabelon erstatter renderingen af en eksisterende blok med din egen markup og giver dig den bloks egne data (Headerens titel og vareantal, Summarys totaler og så videre). Den tilføjer intet nyt; den restyler én blok.
  • Custom code-blokken tilføjer en ny blok med vilkårlig HTML eller React hvor som helst i carten.
Gå efter en tilpasset skabelon, når den indbyggede blok er næsten rigtig, men du har brug for et andet layout eller anden markup. Gå efter en Custom code-blok, når du vil tilføje noget, de indbyggede blokke ikke dækker.

​
Brug af en tilpasset skabelon

  1. Vælg en blok i editoren, og åbn dens Code-fane.
  2. Redigér standardskabelonen. Tilpassede skabeloner er kun JSX (valget mellem HTML og JSX er eksklusivt for Custom code-blokken).
  3. Klik på Compile. Kompilering fjerner typerne og transpilerer JSX’en, så den fanger syntaks-fejl. Typefejl stopper ikke en kompilering — editoren markerer dem inline, mens du skriver, med den samme IntelliSense, der autoudfylder blokkens props.
  4. Slå skabelonen til, så carten bruger den i stedet for den indbyggede rendering.
  5. Reset to default gendanner blokkens oprindelige skabelon når som helst.

​
At skrive en skabelon med AI

Code-fanen indeholder en Copy AI prompt-knap (✦ tryllestavsikon). Et klik på den kopierer en selvstændig brief til din udklipsholder, som du kan indsætte direkte i en AI-chatsession (Claude, ChatGPT eller lignende). Prompten indeholder alt, hvad AI’en skal bruge for at skrive en gyldig skabelon til den specifikke blok:
  • Kompileringsreglerne (ét enkelt udtryk, ingen export default, ingen imports)
  • De præcise props, blokken modtager, matchende det, editorens IntelliSense viser
  • Den låste funktionssignatur, editoren håndhæver
  • Blokspecifikke regler (pengeformater, hvilke handlers der skal kobles, tilgængelighedskrav)
  • En udfyldningssektion, hvor du indsætter din nuværende skabelon og beskriver den ændring, du ønsker
Efter kopiering skal du åbne en AI-session, indsætte prompten, udfylde de to tomme felter i bunden (din nuværende skabelon og den ændring, du ønsker) og sende. AI’en returnerer en komplet skabelon, du kan indsætte tilbage i editoren og kompilere.
Indsæt din eksisterende skabelon i udfyldningssektionen i stedet for at lade den stå tom. AI’en bruger den som udgangspunkt, så enhver tilpasning, du allerede har lavet, føres videre i stedet for at blive erstattet af standarden.
Prompten er specifik for hver blok. Copy AI prompt-knappen vises kun på blokke, der understøtter tilpassede skabeloner.
Standardskabelonen, du starter fra, er en fungerende kopi af blokkens indbyggede markup, så du har altid en korrekt, renderende reference at ændre i stedet for en blank side. Brug Reset to default, når du vil have den reference tilbage.Det er ikke altid et byte-for-byte-match. Headerens standardskabelon renderer også logoUrl, som den indbyggede markup ikke har nogen placering til, så at slå den skabelon til er måden, et uploadet header-billede først vises på.

​
Hvad din skabelon erstatter

En skabelon erstatter blokkens rendering fuldstændigt. Der er ingen wrapper tilbage omkring din JSX, hvilket har konsekvenser, der er værd at kende, før du begynder at slette ting:
Design-fanen er den, folk bliver fanget af. Mens en tilpasset skabelon er aktiv, er Design-fanens felter deaktiveret, og et advarselsikon vises ved siden af “Design”-overskriften. Hold musen over ikonet for at se hvorfor. Stil i stedet blokken fra din skabelon, enten inline eller med din egen CSS. Felterne genaktiveres, så snart du slår den tilpassede skabelon fra.
Hvad du beholder: blokkens position i carten, dens synligheds-knap, dens indstillinger (som stadig føder de props, du modtager), cartens Tilpasset CSS-panel og den indbyggede indlæsnings-skeleton. Det sidste overrasker folk. Blokken tjekker, om carten stadig indlæses, før den når din skabelon, så den indbyggede skeleton renderes under indlæsning, og din skabelon kører først, når carten er klar. Du behøver ikke bygge en indlæsningstilstand.

​
Hvad der er tilgængeligt inde i en skabelon

Din skabelon er en enkelt funktionskomponent. Den kompileres fra TSX, så typeannotationer er tilladt og fjernes ved kompilering. Det er derfor, standardskabelonerne er skrevet med dem:
Signaturlinjen og den afsluttende klamme er låst — editoren lader dig ikke redigere nogen af dem, og hold musen over viser “Locked — this line can’t be edited.” Du skriver kroppen mellem dem. Reset to default er det eneste, der kan erstatte dem. Hvad der ellers er vigtigt:
  • Du får fem hooks: useState, useEffect, useMemo, useRef og useCallback. Plus Fragment, til <>…</>.
  • Der er ingen imports. Du kan ikke importe noget, og der er intet React-objekt i scope, så ingen React.useReducer, ingen React.Children. Hvis en hook ikke er på listen ovenfor, er den ikke tilgængelig.
  • Props er skrivebeskyttede. At mutere en prop gør ikke noget nyttigt. For at ændre carten skal du bruge de handler-props, blokken giver dig (onClose, increment, selectPlan og så videre) i stedet for at skrive direkte til props.
  • window kan nås, så en skabelon kan kalde Cart SDK via window.aftersell.cart, når den har brug for noget, blokkens props ikke dækker.

​
Konventioner på tværs af alle blokke

Tre regler gælder overalt, og at kende dem fjerner det meste af gætteriet:
  • *Html-props er præ-saneret rich text. Render dem med dangerouslySetInnerHTML. De har allerede været gennem cartens sanitizer, og forhandler-tokens som {{total_price}} er allerede udfyldt.
  • Priser, der ankommer som string, er allerede formateret i butikkens pengeformat. Priser som number er i cent. En blok giver dig det ene eller det andet, og hver bloks tabel angiver hvilket.
  • isLoading er altid false inde i en skabelon. Blokken renderer sin indbyggede skeleton og kalder først din skabelon, når carten er indlæst, så proppen videregives for fuldstændighedens skyld snarere end for, at du skal forgrene på den.
Nogle få blokke returnerer slet intet i visse tilstande, så din skabelon kaldes aldrig med tomme data. Rewards-skabelonen ser aldrig en tom milestones, og Subscription upgrade-skabelonen ser aldrig et null-view. Hver bloks reference angiver, hvor dette gælder, så du kan springe tom-tilstands-forgreningen over.

​
Styling af en tilpasset skabelon

Standardskabelonen, du starter fra, bærer blokkens klassenavne. Hvordan du styler dine ændringer afhænger af, hvor langt du bevæger dig fra det udgangspunkt.

​
De to klassefamilier

Hvert element i en standardskabelon bærer et parret klassenavn, og de har meget forskellige opgaver: Så cart-internal-header__title er det, der får titlen til at ligne den indbyggede titel, og cart-external-header__title er håndtaget, du skal gribe, når du vil ændre, hvordan den ser ud.

​
Små ændringer: behold begge klassenavne

Hvis du omarrangerer elementer, omdøber eller tilføjer noget inde i den eksisterende struktur, skal du lade klassenavnene være. Du beholder det indbyggede udseende gratis, og du restyler gennem Tilpasset CSS rettet mod cart-external-*-krogene.

​
Omstrukturering: drop begge klassenavne

Når du ændrer DOM-strukturen frem for at justere den, skal du fjerne begge familier fra din markup og i stedet bruge dine egne klassenavne. Der er en separat grund til hver. Drop cart-internal-*, fordi den indbyggede CSS blev skrevet til den indbyggede DOM. Behold de klasser på omstruktureret markup, og du arver layoutregler, der forudsætter elementer, du ikke længere har: flex-containere, der forventer andre børn, afstande mellem elementer, der er flyttet, positionering i forhold til noget, du har fjernet. Dette viser sig som regel ved, at din egen CSS “ikke virker”, når det er de indbyggede regler, der vinder.
Drop cart-external-*, fordi det er et delt navn, ikke dit. De klassenavne betyder noget specifikt på den indbyggede markup, og din Custom CSS skrives én gang for hele carten. Hvis en omstruktureret skabelon genbruger dem, rammer enhver regel, du skriver, både din struktur og den indbyggede.Det går galt i det øjeblik, du slår den tilpassede skabelon fra: blokken vender tilbage til sin indbyggede markup, og din CSS peger stadig på den og styler nu en DOM, den aldrig blev skrevet til. Dit eget præfiks holder de to rent adskilt, så at slå en skabelon fra er en ren tilbagevenden.
To måder at style det, du har bygget:

​
Mulighed 1: dine egne klassenavne plus Custom CSS

Bedst til alt, hvad du vil vedligeholde eller genbruge. Giv dine klasser et præfiks, ingen andre kolliderer med, som regel dit butiks- eller brandnavn:
Derefter skal du i cart-editoren vælge Cart settings i venstre panel og åbne Custom CSS-fanen til højre:
Et præfiks betyder mere, end det ser ud til. Uden et risikerer en klasse som .header eller .title at kollidere med cartens egne klasser, en anden apps skabelon eller en fremtidig blok.

​
Mulighed 2: inline-stile

Ingen tur rundt om CSS-panelet, og alt bor ét sted:
Godt til layout-stillads og engangsting. Dens grænser er de sædvanlige: ingen :hover eller andre pseudoklasser, ingen media queries og ingen genbrug på tværs af blokke. Gå til Mulighed 1, når du vil have noget af det.

​
Valg af tilgang

Carten renderes i en shadow root, så dit temas stylesheet kan ikke nå ind i den. Stile til en tilpasset skabelon skal komme fra cartens eget Custom CSS-panel eller fra inline-stile, ikke fra dit tema. Se Tilpasset CSS.

​
Når en skabelon fejler

En ødelagt skabelon ødelægger aldrig carten. Blokken renderer intet, og alt omkring den fungerer fortsat, hvilket er sikkert, men let at overse: et tomt rum, hvor din blok skulle være, er symptomet. Fordi blokken forsvinder i stilhed i stedet for at fejle synligt, bør du altid tjekke en skabelon i forhåndsvisning, før du publicerer. Hvis en blok er forsvundet, skal du først åbne browserkonsollen. To ting, der er værd at gardere sig mod, da begge crasher en skabelon, der antager andet:
  • Props, der kan være null. Mange props er null under normale forhold (logoUrl uden logo, imageUrl uden billede, variantTitle på et produkt med én variant). Tjek, før du bruger dem.
  • Arrays, der kan være tomme. discountTags og discountCodes er langt oftere [] end ej.

​
Begrænsninger

  • Tilpassede skabeloner er visningstilsidesættelser. For at køre logik mod carten (abonnere på events, tilføje varer, reagere på ændringer) skal du bruge Tilpassede scripts og Cart SDK.
  • Næsten alle blokke understøtter en. Undtagelserne er Express payments-blokken, som rummer Shopifys egne betalingsknapper, og selve Cart items-containeren, selvom Product-rækken inde i den understøtter en tilpasset skabelon.
  • En skabelon kan ikke ændre, hvad en blok grundlæggende gør. Den ændrer, hvordan blokkens data præsenteres, ikke dataene eller adfærden bag dem.

​
Props for hver blok

Hver blok videregiver sine egne data. Den fulde prop-tabel, med typer og et gennemarbejdet eksempel, ligger på den bloks side: Custom code-blokken er den ene flade, der tilføjer markup i stedet for at erstatte en bloks rendering, så dens props er anderledes: hele carten, plus en læg-i-kurv-handling. Se Custom code-blokke → Props.