> ## Documentation Index
> Fetch the complete documentation index at: https://docs.aftersell.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Upcart V2.0 migrationsguide
> Denne artikel er en migrationsguide til opgradering fra Upcart V1.0- til V2.0-moduler. Den dækker breaking changes, CSS-klassemapping, opdateringer af JavaScript-selektorer, fejlfinding og migrationsprocessen trin for trin.
## 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.
```
```
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:
1. 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.
2. Aktivér funktions-togglen.
3. Se Upcarts udviklerdokumentation for syntaks og eksempler.
**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.
##
##