Upcart V2.0 migrationsguide

Oversigt

Upcart V2.0-moduler introducerer et komplet arkitektonisk redesign af kurvsystemet. Opdateringen fokuserer på forbedret ydeevne, udvidet tilpasning og bedre vedligeholdelse. Denne guide hjælper dig med at forstå, hvad der ændrer sig, når du migrerer fra V1.0- til V2.0-moduler, hvilke kompatibilitetsproblemer du kan støde på, og hvordan du opdaterer dine eksisterende tilpasninger sikkert.

Breaking changes - ændringer af CSS-klassenavne

V1-klasser (udfasede)

🚨 Følgende V1.0-klassenavne understøttes ikke længere i V2.0:

.styles_Header__  
.styles_ProductRow__  
.styles_Rewards__  
.styles_TieredRewards__  
...

Advarselsklasserne for udsolgte varer upcart-quantity-warning og upcart-quantity-warning-text er også uændrede. De kommer fra kurv-initialisereren og ikke fra et versioneret modul, så de udsendes identisk, uanset om dine moduler er på V1 eller V2.

.styles_CartPreview__card__ er ikke på denne liste — det er den fælles cart-shell-wrapper, der renderes omkring hvert modul uanset version, så regler, der rammer den, bliver ved med at virke på V2. Rewards-klasserne er .styles_Rewards__ (simpel bar) og .styles_TieredRewards__ (trindelt bar); der findes ingen .styles_RewardsModule__.

/*******************  
*** Cart Header ***  
*******************/  
'upcart-header',  
'upcart-header-text',  
'upcart-header-logo',  
'upcart-header-close-button',  
'upcart-header-close-button-icon',  
  
/******************  
*** Line Items ***  
******************/  
'upcart-products-section',  
'upcart-product-item',  
/** > Title */  
'upcart-product-title',  
'upcart-product-title-link',  
/** > Prices */  
'upcart-item-prices-row',  
'upcart-item-price',  
'upcart-item-compare-price',  
'upcart-product-savings',  
/** > Options/Variants */  
'upcart-item-option',  
'upcart-item-option-category',  
'upcart-item-option-value',  
/** > Bundle Item Components */  
'upcart-bundle-item-image-wrapper',  
'upcart-bundle-item-product-title',  
'upcart-bundle-item-variant-title',  
'upcart-bundle-detail-toggle',  
/** > Properties */  
'upcart-item-properties',  
'upcart-item-property',  
'upcart-item-property-subscription',  
/** > Quantity Selector */  
'upcart-product-quantity-input',  
'upcart-product-quantity-minus',  
'upcart-product-quantity-plus',  
/** > Image */  
'upcart-product-image-wrapper',  
  
/*********************  
*** Announcements ***  
*********************/  
'upcart-announcement',  
  
/***************  
*** Rewards ***  
***************/  
'upcart-rewards',  
'upcart-rewards-message',  
'upcart-rewards-bar-background',  
'upcart-rewards-bar-foreground',  
'upcart-rewards-tier',  
'upcart-rewards-tier-circle',  
'upcart-rewards-tier-icon',  
'upcart-rewards-tier-description',  
  
/***************  
*** Upsells & Recommendations ***  
***************/  
'upcart-upsells-module',  
'upcart-upsells-title',  
'upcart-upsells-button',  
'upcart-upsell-item-title',  
'upcart-upsell-item-card',  
'upcart-upsell-item-image-wrapper',  
'upcart-upsell-item-image',  
'upcart-upsell-item-price',  
'upcart-upsell-item-price-row',  
'upcart-upsell-item-compare-price',  
'upcart-upsell-item-variant-selector',  
'upcart-upsells', // deprecated  
'upcart-recommendation-module',  
'upcart-recommendations-title',  
'upcart-recommendations-shop-now-button',  
  
/***************  
*** Add-ons ***  
***************/  
'upcart-addons',  
'upcart-addons-title',  
'upcart-addons-product-description',  
'upcart-addons-price',  
'upcart-addons-compare-price',  
'upcart-addons-toggle',  
'upcart-addons-image-wrapper',  
  
/**********************  
*** Discount Codes ***  
**********************/  
'upcart-discount-code-row',  
'upcart-discount-code-module',  
'upcart-discount-code-button',  
'upcart-discount-code-input',  
'upcart-discount-code-badge',  
'upcart-discount-code-icon',  
'upcart-discount-code-text',  
'upcart-discount-code-input-wrapper',  
  
/*****************************  
*** Subscription Upgrades ***  
*****************************/  
'upcart-subscription-upgrade-section',  
'upcart-subscription-upgrade-button',  
'upcart-subscription-upgrade-dropdown',  
  
/***************************  
*** Express Pay Buttons ***  
***************************/  
'upcart-express-pay-buttons-container',  
'upcart-express-pay-buttons-row',  
'upcart-express-pay-button',  
'upcart-express-pay-button-shop-pay',  
'upcart-express-pay-button-google-pay',  
'upcart-express-pay-button-paypal',  
'upcart-express-pay-button-apple-pay',  
'upcart-express-pay-button-amazon-pay',  
'upcart-express-pay-button-meta-pay',  
  
/********************  
*** Trust Badges ***  
********************/  
'upcart-trust-badge',  
'upcart-trust-badge-image',  
  
/********************  
*** Integrations ***  
********************/  
'upcart-integration-zapiet-pickup',  
  
/*****************  
*** Skeletons ***  
*****************/  
'upcart-skeleton',  
'upcart-product-item-skeleton',  
'upcart-product-image-skeleton',  
'upcart-product-title-skeleton',  
'upcart-item-option-skeleton',  
'upcart-product-quantity-skeleton',  
'upcart-product-price-container-skeleton',  
'upcart-announcement-skeleton',  
'upcart-rewards-skeleton',  
'upcart-rewards-message-skeleton',  
'upcart-rewards-bar-skeleton',  
'upcart-upsells-module-skeleton',  
'upcart-upsells-title-skeleton',  
'upcart-upsell-item-image-skeleton',  
'upcart-upsell-item-title-skeleton',  
'upcart-upsell-item-price-skeleton',  
'upcart-upsells-button-skeleton',  
'upcart-trust-badge-skeleton',  
'upcart-trust-badge-image-skeleton',  
'upcart-checkout-button-container-skeleton',  
'upcart-checkout-button-skeleton',  
'upcart-addons-skeleton',  
'upcart-addons-image-wrapper-skeleton',  
'upcart-addons-skeleton-text-container',  
'upcart-discount-code-module-skeleton',  
'upcart-discount-code-input-skeleton',  
'upcart-discount-code-button-skeleton',  
'upcart-express-pay-buttons-container-skeleton',  
'upcart-express-pay-button-skeleton'

V2.0-klasser (nyt system)

V2.0 introducerer et struktureret navngivningssystem med interne og offentlige klassepræfikser.

Interne klassenavne

Disse er reserveret til intern brug og kan ændres uden varsel. Hvis du overskriver disse klasser, er fremtidig kompatibilitet ikke garanteret.

/* Internal classes - for Upcart's internal styling */   
.upcart-internal-header  
.upcart-internal-header__close-button  
.upcart-internal-cart-items  
.upcart-internal-rewards  
...

Offentlige klassenavne

🚨 Liste over tilgængelige offentlige klassenavne

/*******************  
***** Skeleton *****  
*******************/  
'upcart-public-skeleton'  
  
/*******************  
****** Header ******  
*******************/  
'upcart-public-header'  
'upcart-public-header__close-button'  
'upcart-public-header__close-button-icon'  
  
/*******************  
*** Announcement ***  
*******************/  
'upcart-public-announcement'  
  
/*******************  
** Recommendation **  
****** Upsell ******  
*******************/  
'upcart-public-component-upsell-tile'  
'upcart-public-component-upsell-tile__image-container'  
'upcart-public-component-upsell-tile__image'  
'upcart-public-component-upsell-tile__info'  
'upcart-public-component-upsell-tile__title-link'  
'upcart-public-component-upsell-tile__title'  
'upcart-public-component-upsell-tile__rating-row'  
'upcart-public-component-upsell-tile__stars'  
'upcart-public-component-upsell-tile__star--partial'  
'upcart-public-component-upsell-tile__reviews'  
'upcart-public-component-upsell-tile__price-row'  
'upcart-public-component-upsell-tile__price-compare-at'  
'upcart-public-component-upsell-tile__price'  
'upcart-public-component-upsell-tile__variant-row'  
'upcart-public-component__button'  
'upcart-public-component-loader'  
'upcart-public-upsell__skeleton'  
'upcart-public-upsell__skeleton-title'  
'upcart-public-upsell__skeleton-image'  
'upcart-public-upsell__skeleton-product-title'  
'upcart-public-upsell__skeleton-product-price'  
  
/*******************  
****** Notes *******  
*******************/  
'upcart-public-notes'  
'upcart-public-component-collapse__dropdown-container'  
'upcart-public-component-collapse__expand-icon'  
'upcart-public-notes__text-container'  
'upcart-public-notes__textarea'  
  
/*******************  
** Discount Code ***  
*******************/  
'upcart-public-discount-code'  
'upcart-public-discount-code__form'  
'upcart-public-discount-code__input-wrapper'  
'upcart-public-discount-code__input'  
'upcart-public-discount-code__suffix'  
'upcart-public-discount-code__error'  
'upcart-public-discount-code__button'  
'upcart-public-component__button'  
'upcart-public-skeleton'  
'upcart-public-discount-code__skeleton'  
'upcart-public-discount-code__skeleton-input'  
'upcart-public-discount-code__skeleton-button'  
  
/*******************  
** Trust Badges ****  
*******************/  
'upcart-public-trust-badges'  
'upcart-public-trust-badges__image'  
  
/*******************  
** Tiered Rewards **  
*******************/  
'upcart-public-rewards'  
'upcart-public-rewards__message'  
'upcart-public-rewards__bar'  
'upcart-public-component-segmented-progress-bar'  
'upcart-public-component-segmented-progress-bar__segments-container'  
'upcart-public-component-segmented-progress-bar__segment'  
'upcart-public-component-segmented-progress-bar__segment-fill'  
'upcart-public-component-segmented-progress-bar__milestone'  
'upcart-public-component-segmented-progress-bar__milestone--bottom'  
'upcart-public-component-segmented-progress-bar__milestone--top'  
'upcart-public-component-segmented-progress-bar__milestone--middle'  
'upcart-public-component-segmented-progress-bar__milestone-icon'  
'upcart-public-component-segmented-progress-bar__milestone-label'  
'upcart-public-component-segmented-progress-bar__milestone-label--align-right'  
'upcart-public-component-segmented-progress-bar__milestone-label--align-center'  
'upcart-public-rewards__skeleton',  
'upcart-public-rewards__skeleton-message',  
'upcart-public-rewards__skeleton-bar',  
  
/*******************  
**** Cart Items ****  
*******************/  
'upcart-public-component-product-tile'  
'upcart-public-component-product-tile__content'  
'upcart-public-component-product-tile__image-wrapper'  
'upcart-public-component-product-tile__image'  
'upcart-public-component-product-tile__info'  
'upcart-public-component-product-tile__header'  
'upcart-public-component-product-tile__product-title'  
'upcart-public-component-product-tile__title-link'  
'upcart-public-component-product-tile__remove-button'  
'upcart-public-component-loader'  
'upcart-public-component-product-tile__variant'  
'upcart-public-component-product-tile__properties'  
'upcart-public-component-product-tile__bundle'  
'upcart-public-component-product-tile__product-pricing'  
'upcart-public-component-product-tile__price-compare-at'  
'upcart-public-component-product-tile__price'  
'upcart-public-component-product-tile__savings'  
'upcart-public-component-product-tile__controls'  
'upcart-public-component-product-tile__quantity-selector'  
'upcart-public-component-product-tile__quantity-minus'  
'upcart-public-component-product-tile__quantity-plus'  
'upcart-public-component-product-tile__discount-codes'  
'upcart-public-component-tag'  
'upcart-public-component-tag__icon'  
'upcart-public-component-tag__text'  
'upcart-public-component-product-tile__subscription-upgrade'  
'upcart-public-component__button'  
'upcart-public-component-product-tile__select-wrapper'  
'upcart-public-component-product-tile__select'  
'upcart-public-product-properties__subscription'  
'upcart-public-product-properties__item'  
'upcart-public-product-properties__link'  
'upcart-public-cart-items__key-value-pair'  
'upcart-public-bundle-properties'  
'upcart-public-bundle-properties__variant-title'  
'upcart-public-component-collapse__dropdown-container'  
'upcart-public-bundle-properties__header'  
'upcart-public-component-collapse__expand-icon'  
'upcart-public-notes__text-container'  
'upcart-public-bundle-properties__item-components'  
'upcart-public-bundle-properties__item-component-row'  
'upcart-public-bundle-properties__image-wrapper'  
'upcart-public-bundle-properties__content'  
'upcart-public-bundle-properties__product-title'  
'upcart-public-upsell__skeleton'  
'upcart-public-upsell__skeleton-title'  
'upcart-public-upsell__skeleton-image'  
'upcart-public-upsell__skeleton-product-title'  
'upcart-public-upsell__skeleton-product-price'  
  
/*******************  
***** Add-ons ******  
*******************/  
'upcart-public-addons'  
'upcart-public-addons__image-wrapper'  
'upcart-public-addons__content-wrapper'  
'upcart-public-addons__content-title-wrapper'  
'upcart-public-addons__content-title'  
'upcart-public-addons__content-price'  
'upcart-public-addons__compare-at-price'  
'upcart-public-addons__price'  
'upcart-public-addons__content-description'  
'upcart-public-addons__toggle-wrapper'  
'upcart-public-addons__toggle'  
'upcart-public-addons__toggle-switch'  
'upcart-public-addons__toggle-slider'  
'upcart-public-skeleton'  
'upcart-public-addons__skeleton'  
'upcart-public-addons__skeleton-image'  
'upcart-public-addons__skeleton-text'  
  
/*******************  
*** Cart summary ***  
*******************/  
'upcart-public-cart-summary'  
'upcart-public-cart-summary__discount-codes'  
'upcart-public-cart-summary__discount-label'  
'upcart-public-cart-summary__slide-codes'  
'upcart-public-cart-summary__total-discount'

Disse er en del af den offentlige styling-API (upcart-public-) og er sikre at overskrive til brugerdefinerede designs.

.upcart-public-header  
.upcart-public-header__close-button  
.upcart-public-rewards  
...

✅ DO’s

Brug kun upcart-public--klassenavne til styling.

/* ✅ Correct usage */  
.upcart-public-header {     
  font-size: 18px;  
  font-weight: bold;   
}

❌ DON’T’s

Undgå at overskrive interne klassenavne

/* ❌ Avoid this */  
.upcart-internal-header {     
  font-size: 18px;  
  font-weight: bold;   
}

Undgå at ramme specifikke noder med dybe eller brugerdefinerede selektorer.

/* ❌ Avoid this */  
.upcart-public-upsell div a {     
  font-size: 18px;  
  font-weight: bold;   
}

Data-attribut-system

V2.0 introducerer et struktureret data-attribut-system til forbedret targeting og avanceret tilpasning.

<!-- V2 data attributes for targeting -->   
<div data-upcart-chunk="header-title-content" />     
<div data-internal-properties="hasNonDefaultTitleAlignment=true" />       
<div data-placement="topOfFooter" />

Disse attributter gør det nemmere at skabe fleksible, datadrevne skabeloner og samtidig bevare klar og tydelig kode.

Ændringer af skabelonvariabler

V2-moduler bruger en ny syntaks for skabelonvariabler med dobbelte krøllede parenteser {{ }}.

Announcement-modul

V1.0: `{TIMER}`
V2.0: `{{timer}}`

Tiered Rewards-modul

V1.0: `{AMOUNT}` → V2: `{{amount}}`
V1.0: `{COUNT}` → V2: `{{count}}`

Migrationsproces

1. Tag backup af din nuværende konfiguration

Før du foretager ændringer, skal du tage backup af dine eksisterende custom CSS- og HTML-filer.

2. Test i sandbox-tilstand

Opsæt din opdaterede kurv i sandbox-tilstand for sikkert at teste nye moduler, før du går live.

Avanceret tilpasning med V2.0

Brugerdefinerede skabeloner

V2.0-moduler understøtter fuldt brugerdefinerede skabeloner for forhandlere, der ønsker fuld kontrol over layout og struktur. Sådan aktiverer du brugerdefinerede skabeloner:

Gå til Settings > Cart settings, udvid Advanced Settings, og sæt flueben ved Access custom templates. Afkrydsningsfeltet ligger inde i den sammenfoldede sektion, ikke på selve fanen Cart settings.
Aktivér funktions-togglen.
Se Upcarts udviklerdokumentation for syntaks og eksempler.

Aktiveret Access custom templates-afkrydsningsfelt med tilhørende beskrivelse i Upcarts kurvindstillinger

Bemærk: Upcarts supportteam kan ikke hjælpe med at udvikle, debugge eller fejlfinde brugerdefinerede skabeloner.

Best practices

Test altid opdateringer i sandbox-tilstand først.
Migrér og opdatér tilpasninger trinvist.
Brug offentlige klasser til styling i stedet for interne.
Behold backups af alle tidligere versioner, før du opdaterer live-indstillinger.

Fremtidige overvejelser

V2-moduler vil fortsat modtage nye funktioner, optimeringer og opdateringer.
V1-moduler er nu i vedligeholdelsestilstand med begrænset support og ingen nye funktioner.
Forhandlere opfordres til at migrere til V2 hurtigst muligt for fuld kompatibilitet.

Kom godt i gang

Kurvmoduler

Kurvindstillinger

Fastgjort kurvknap

Multicart

Tilpasninger

Analyser

Integrationer og kompatibilitet

Fakturering og konto

Fejlfinding

Oversigt

Breaking changes - ændringer af CSS-klassenavne

V1-klasser (udfasede)

V2.0-klasser (nyt system)

Interne klassenavne

Offentlige klassenavne

✅ DO’s

❌ DON’T’s

Data-attribut-system

Ændringer af skabelonvariabler

Announcement-modul

Tiered Rewards-modul

Migrationsproces

1. Tag backup af din nuværende konfiguration

2. Test i sandbox-tilstand

Avanceret tilpasning med V2.0

Brugerdefinerede skabeloner

Best practices

Fremtidige overvejelser

​Oversigt

​Breaking changes - ændringer af CSS-klassenavne

​V1-klasser (udfasede)

​V2.0-klasser (nyt system)

​Interne klassenavne

​Offentlige klassenavne

​

​✅ DO’s

​❌ DON’T’s

​Data-attribut-system

​Ændringer af skabelonvariabler

​Announcement-modul

​Tiered Rewards-modul

​Migrationsproces

​1. Tag backup af din nuværende konfiguration

​2. Test i sandbox-tilstand

​Avanceret tilpasning med V2.0

​Brugerdefinerede skabeloner

​Best practices

​Fremtidige overvejelser

​

​

Oversigt

Breaking changes - ændringer af CSS-klassenavne

V1-klasser (udfasede)

V2.0-klasser (nyt system)

Interne klassenavne

Offentlige klassenavne

✅ DO’s

❌ DON’T’s

Data-attribut-system

Ændringer af skabelonvariabler

Announcement-modul

Tiered Rewards-modul

Migrationsproces

1. Tag backup af din nuværende konfiguration

2. Test i sandbox-tilstand

Avanceret tilpasning med V2.0

Brugerdefinerede skabeloner

Best practices

Fremtidige overvejelser