Oversigt

Denne tilpasning tilføjer en tydelig omkostningsoversigt over checkout-knappen, der viser subtotal, forsendelse og total baseret på en fast forsendelsestakst. Den hjælper kunder med at forstå deres endelige beløb inden checkout, hvilket øger tilliden og reducerer tøven. Vigtigt: Denne metode fungerer kun med faste forsendelsestakster. Hvis din butik bruger dynamisk forsendelse, kan resultaterne være unøjagtige.

Hvis du er på Upcart V1.0

Trin 1: Tilføj brugerdefineret HTML

Gå til Upcart > Cart Editor > Settings > Custom HTML
Vælg Above checkout button i dropdown-menuen Select HTML Location
Indsæt følgende kode, og opdater variablerne, så de afspejler din butiks forsendelsesomkostninger og grænseværdi:

<hr>  
  
<div class="cartSummarySection">  
  <div class="cartSummarySubtotal alignLeft">  
    Subtotal:  
    <span class="alignRight subtotalprice">{{UPCART_SUBTOTAL}}</span>  
  </div>  
  
  <div class="cartSummaryShipping alignLeft">  
    Shipping:  
    <span class="alignRight upcartShipping"></span>  
  </div>  
  
  <div class="cartSummaryEndTotal alignLeft">  
    Total:  
    <span class="alignRight upcartEndTotal"></span>  
  </div>  
  
  <div style="clear: both; display: flex;"></div>  
</div>  
  
<script>  
  var shippingThreshold = 15000; // In cents  
  var shippingCostWhenUnderThreshold = 290; // In cents  
  var textWhenUnderShippingThreshold = "$2.90";  
  var textWhenOverShippingThreshold = "FREE";  
  var currencySymbolToAddInfrontOfEndPrice = "$";  
  var shouldCurrencySymbolBeOnLeftSide = true;  
  
  window.upcartSubscribeCartLoaded((event) => {  
    var shippingText = window.upcartDocumentOrShadowRoot.querySelector(".upcartShipping");  
    var endTotal = window.upcartDocumentOrShadowRoot.querySelector(".upcartEndTotal");  
  
    if (event.cart.total < shippingThreshold) {  
      shippingText.innerText = textWhenUnderShippingThreshold;  
  
      if (shouldCurrencySymbolBeOnLeftSide) {  
        endTotal.innerText =  
          currencySymbolToAddInfrontOfEndPrice +  
          ((event.cart.total + shippingCostWhenUnderThreshold) / 100).toFixed(2);  
      } else {  
        endTotal.innerText =  
          ((event.cart.total + shippingCostWhenUnderThreshold) / 100).toFixed(2) +  
          currencySymbolToAddInfrontOfEndPrice;  
      }  
  
    } else {  
      shippingText.innerText = textWhenOverShippingThreshold;  
  
      if (shouldCurrencySymbolBeOnLeftSide) {  
        endTotal.innerText =  
          currencySymbolToAddInfrontOfEndPrice +  
          (event.cart.total / 100).toFixed(2);  
      } else {  
        endTotal.innerText =  
          (event.cart.total / 100).toFixed(2) +  
          currencySymbolToAddInfrontOfEndPrice;  
      }  
    }  
  });  
</script>

Note om ældre versioner: window.upcartOnCartLoaded-callbacks fungerer stadig, men er forældede og logger konsoladvarsler. Brug upcartSubscribeCartLoaded til alle nye scripts.

Trin 2: Tilføj brugerdefineret CSS

Gå til Upcart > Cart Editor > Settings > Custom CSS
Indsæt følgende CSS, og juster background-color eller andre stilarter, så de matcher din kurvs footer:

.upcart-footer {  
  padding-top: 0px !important;  
}  
  
.cartSummarySection {  
  background-color: #f6f4ef !important;  
  padding: 10px 23px;  
}  
  
.cartSummarySubtotal,  
.cartSummaryShipping,  
.cartSummaryEndTotal {  
  color: black;  
  width: 100%;  
  text-align: left;  
  font-weight: normal;  
  font-size: 16px;  
  padding: 0;  
}  
  
#CartPopup hr {  
  margin: 0px !important;  
}  
  
.alignLeft {  
  float: left;  
}  
  
.alignRight {  
  float: right;  
}

Slutresultat

Når det er anvendt:

Vises en omkostningsoversigt over checkout-knappen
Ser kunderne subtotal, forsendelse (fast eller GRATIS) og total
Justeres forsendelsesomkostningerne dynamisk baseret på din grænseværdi

Det øger omkostningsgennemsigtigheden, forbedrer tilliden og kan reducere antallet af forladte checkouts.

Hvis du er på Upcart V2.0

Trin 1: Gå til kurvoversigtsmodulet

Aktivér først brugerdefinerede skabeloner: I Upcart > Cart Editor > Settings > Cart settings skal du udvide Advanced Settings og markere Access custom templates. Den er slået fra som standard, og indtil den er slået til, viser fanen Cart summary kun beskeden “Custom templates aren’t enabled” uden nogen editor.
Gå til Upcart > Cart Editor > Cart summary > Custom template

Indsæt følgende kode:

Den brugerdefinerede kode til sektionen er fra linje 52 til linje 73

<div>  
  <div className="upcart-internal-cart-summary upcart-public-cart-summary">  
    <div className="upcart-internal-cart-summary__discount-codes upcart-public-cart-summary__discount-codes">  
      <span className="upcart-internal-cart-summary__discount-label upcart-public-cart-summary__discount-label">  
        {props.totalSavingsText}  
      </span>  
  
      <div className="upcart-internal-cart-summary__slide-codes upcart-public-cart-summary__slide-codes">  
        {props.discountApplications.map((discountApplication) => (  
          <span  
            key={discountApplication.key}  
            className="upcart-internal-component-tag upcart-public-component-tag"  
          >  
            <span className="upcart-internal-component-tag__icon upcart-public-component-tag__icon">  
              <svg  
                xmlns="http://www.w3.org/2000/svg"  
                viewBox="0 0 20 20"  
                focusable="false"  
              >  
                <title>Discount tag icon</title>  
                <path  
                  fillRule="evenodd"  
                  d="M8.575 4.649a3.75 3.75 0 0 1 2.7-1.149h1.975a3.25 3.25 0 0 1 3.25 3.25v2.187a3.25 3.25 0 0 1-.996 2.34l-4.747 4.572a2.5 2.5 0 0 1-3.502-.033l-2.898-2.898a2.75 2.75 0 0 1-.036-3.852l4.254-4.417Zm4.425 3.351a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"  
                />  
              </svg>  
            </span>  
  
            <span className="upcart-internal-component-tag__text upcart-public-component-tag__text">  
              {discountApplication.title}  
            </span>  
  
            {discountApplication.type === "discount_code" && (  
              <button  
                type="button"  
                className="upcart-internal-component-tag__remove-button upcart-public-component-tag__remove-button"  
                onClick={props.handleRemoveDiscount}  
                aria-label="Remove tag"  
              >  
                {props.isRemovingDiscount ? (  
                  <div className="upcart-internal-component-loader upcart-public-component-loader" />  
                ) : (  
                  <svg  
                    xmlns="http://www.w3.org/2000/svg"  
                    viewBox="0 0 20 20"  
                  >  
                    <path d="M12.72 13.78a.75.75 0 1 0 1.06-1.06l-2.72-2.72 2.72-2.72a.75.75 0 0 0-1.06-1.06l-2.72 2.72-2.72-2.72a.75.75 0 0 0-1.06 1.06l2.72 2.72-2.72 2.72a.75.75 0 1 0 1.06 1.06l2.72-2.72 2.72 2.72Z" />  
                  </svg>  
                )}  
              </button>  
            )}  
          </span>  
        ))}  
      </div>  
    </div>  
  
    <div>  
      {props.showCartTotalDiscount && (  
        <span  
          className="upcart-internal-cart-summary__total-discount upcart-public-cart-summary__total-discount"  
          dangerouslySetInnerHTML={{  
            __html: props.formattedCartTotalDiscount,  
          }}  
        />  
      )}  
    </div>  
  </div>  
  
  {/* Custom code for summary section */}  
  <hr />  
  
  <div className="upcart-custom-cart-summary__container">  
    <div className="upcart-custom-cart-summary__row upcart-custom-cart-summary__subtotal">  
      Subtotal:  
      <span className="upcart-custom-cart-summary__subtotal-value">  
        ${(props.totalAfterAllDiscounts / 100).toFixed(2)}  
      </span>  
    </div>  
  
    <div className="upcart-custom-cart-summary__row upcart-custom-cart-summary__shipping">  
      Shipping:  
      <span className="upcart-custom-cart-summary__shipping-value">  
        $2.99  
      </span>  
    </div>  
  
    <div className="upcart-custom-cart-summary__row upcart-custom-cart-summary__cart-total">  
      Total:  
      <span className="upcart-custom-cart-summary__cart-total-value">  
        {/* totalAfterAllDiscounts excludes shipping — add the same 299 cents shown above. */}  
        ${((props.totalAfterAllDiscounts + 299) / 100).toFixed(2)}  
      </span>  
    </div>  
  </div>  
</div>

b. Den relevante del er denne sektion fra linje 52-73. Brug dette dokument til at beslutte, hvilken værdi du planlægger at vise på skærmen

  <hr />  
  
  <div className="upcart-custom-cart-summary__container">  
    <div className="upcart-custom-cart-summary__row upcart-custom-cart-summary__subtotal">  
      Subtotal:  
      <span className="upcart-custom-cart-summary__subtotal-value">  
        ${(props.totalAfterAllDiscounts / 100).toFixed(2)}  
      </span>  
    </div>  
  
    <div className="upcart-custom-cart-summary__row upcart-custom-cart-summary__shipping">  
      Shipping:  
      <span className="upcart-custom-cart-summary__shipping-value">  
        $2.99  
      </span>  
    </div>  
  
    <div className="upcart-custom-cart-summary__row upcart-custom-cart-summary__cart-total">  
      Total:  
      <span className="upcart-custom-cart-summary__cart-total-value">  
        {/* totalAfterAllDiscounts excludes shipping — add the same 299 cents shown above. */}  
        ${((props.totalAfterAllDiscounts + 299) / 100).toFixed(2)}  
      </span>  
    </div>  
  </div>

c. Gå til Upcart > Cart Editor > Settings > Custom CSS, og tilføj dette:

.upcart-custom-cart-summary__row {  
  display: flex;  
  flex-direction: row;  
  justify-content: space-between;  
}

Har du brug for hjælp?

Hvis du vil tilpasse dette til flere forsendelsesgrænser eller avanceret logik, anbefaler vi at samarbejde med en Shopify Expert. Upcarts supportteam yder ikke hjælp til at implementere eller fejlfinde brugerdefineret kode.

Kom godt i gang

Kurvmoduler

Kurvindstillinger

Fastgjort kurvknap

Multicart

Tilpasninger

Analyser

Integrationer og kompatibilitet

Fakturering og konto

Fejlfinding

Tilføj en sluttotal-linje over checkout-knappen

Oversigt

Hvis du er på Upcart V1.0

Trin 1: Tilføj brugerdefineret HTML

Trin 2: Tilføj brugerdefineret CSS

Slutresultat

Hvis du er på Upcart V2.0

Trin 1: Gå til kurvoversigtsmodulet

Har du brug for hjælp?

​Oversigt

​Hvis du er på Upcart V1.0

​Trin 1: Tilføj brugerdefineret HTML

​Trin 2: Tilføj brugerdefineret CSS

​Slutresultat

​Hvis du er på Upcart V2.0

​Trin 1: Gå til kurvoversigtsmodulet

​Har du brug for hjælp?

Oversigt

Hvis du er på Upcart V1.0

Trin 1: Tilføj brugerdefineret HTML

Trin 2: Tilføj brugerdefineret CSS

Slutresultat

Hvis du er på Upcart V2.0

Trin 1: Gå til kurvoversigtsmodulet

Har du brug for hjælp?