Lær, hvordan du bruger HTML, CSS og JavaScript til at bygge brugerdefinerede funktioner og styling i din cart drawer.
⚠️ Vigtig meddelelseEksempeltilpasningen i dette dokument virker kun med V1.0 af Upcarts kurvmoduler. Hvis du for nylig har opgraderet din kurv til Version 2, virker denne tilpasningskode ikke. Du skal bruge de nye selektorer til Version 2 i migrationsguiden.Se den øvrige tilpasningsdokumentation for V2.0-løsninger.
Upcart giver dig fuld kontrol til at ændre kurvens udseende og adfærd med brugerdefineret HTML, brugerdefineret CSS og JavaScript. Disse værktøjer lader dig tilføje nye funktioner, style din kurv, så den matcher dit brand, eller indføre logik, der forbedrer, hvordan din kurv fungerer.Denne guide dækker det grundlæggende i hver af dem og viser, hvordan du kommer i gang. Hver sektion indeholder et hurtigt visuelt eksempel, der hjælper dig med at forstå, hvordan ændringerne ser ud i praksis.Før du går i gang, bør du gennemgå Upcarts tilpasningspolitik, så du ved, hvad vores team understøtter og ikke understøtter.
HTML bruges til at tilføje statisk indhold som tekst, bannere eller knapper i din kurv. Du kan vælge mellem flere HTML-placeringer i Custom HTML-editoren (f.eks. over checkout-knappen, i bunden af kurven, mellem varerne).Almindelige anvendelser:
Tilføj brugerdefinerede beskeder
Indsæt juridiske forbehold eller links til politikker
Fremhæv forsendelsesfrister eller leveringsinfo
Eksempel:
<div style="text-align: center; font-weight: bold;"> Thanks for shopping with us! </div
JavaScript styrer kurvens adfærd og logik. Du kan bruge det til at vise eller skjule elementer, anvende betinget styling eller reagere på kurvændringer i realtid.Du pakker din kode ind i et <script>-tag og placerer den i Custom HTML > Scripts (Before Load) eller Above Announcements, afhængigt af hvornår den skal køre.Eksempel: Begræns kurven til én upsell ad gangen:
<script> // Show upsells again when upsells are removed window.upcartSubscribeItemRemoved((event) => { if (event.item?.properties?.__upcartUpsell) { const upsells = window.upcartDocumentOrShadowRoot.querySelector(".upcart-upsells-module"); if (upsells) upsells.style.display = "block"; } }); // Hide upsells once one is added window.upcartSubscribeUpsellsAddedToCart(() => { const upsells = window.upcartDocumentOrShadowRoot.querySelector(".upcart-upsells-module"); if (upsells) upsells.style.display = "none"; }); // Check for upsell in cart when it loads window.upcartSubscribeCartLoaded((event) => { const upsells = window.upcartDocumentOrShadowRoot.querySelector(".upcart-upsells-module"); const items = event.cart.items || []; const hasUpsell = items.some(item => item?.properties?.__upcartUpsell); if (upsells && hasUpsell) { upsells.style.display = "none"; } }); </script>
Bemærkning om ældre kode: Callbacks som window.upcartOnItemRemoved, window.upcartOnAddUpsell og window.upcartOnCartLoaded virker stadig, men er udfasede og logger advarsler i konsollen. Brug upcartSubscribeItemRemoved, upcartSubscribeUpsellsAddedToCart og upcartSubscribeCartLoaded til alle nye scripts.
🔧 Bemærkning til udviklere:
Upcart tilbyder en komplet Public API-dokumentation, der viser alle funktioner, variabler og best practice-mønstre, som er tilgængelige for avancerede tilpasninger. Vi anbefaler at gennemgå den, når du bygger mere komplekse scripts eller integrationer.
CSS styrer udseendet af elementerne i din kurv. Brug det til at justere afstande, farver, skriftstørrelser eller skjule uønskede elementer. Custom CSS er en af fanerne under Settings (bag More settings, hvis fanerækken løber over).Almindelige anvendelser:
