Omówienie

Ta personalizacja używa HTML, CSS i JavaScriptu do blokowania checkoutu, gdy koszyk zawiera wyłącznie produkty upsell. Pomaga zapewnić, że upselle są traktowane jako oferty dodatkowe, a nie samodzielne zakupy, wspierając bardziej kontrolowaną i przemyślaną strategię upsellową. Dzięki temu produkty upsell funkcjonują w określonych granicach, podkreślając ich rolę jako uzupełnienia produktów głównych. Po wdrożeniu przycisk checkoutu będzie wyłączony, dopóki do koszyka nie zostanie dodany co najmniej jeden produkt niebędący upsellem.

Jak to działa

Jeśli koszyk zawiera tylko produkty upsell, przycisk checkoutu jest wyszarzony
Pod przyciskiem pojawia się komunikat ostrzegawczy
Po dodaniu zwykłego produktu przycisk staje się aktywny, a ostrzeżenie znika — zapewnia to jasną walidację w scenariuszach, w których produkty upsell mają być kupowane wyłącznie z powiązanymi produktami wyzwalającymi, na przykład poprzez wyświetlanie ukierunkowanych komunikatów ostrzegawczych.

Ta konfiguracja jest idealna dla właścicieli sklepów lub deweloperów z podstawową znajomością JavaScriptu i CSS.

Krok 1: dodaj niestandardowy HTML

Przejdź do:
Upcart > Cart Editor > Settings > Custom HTML

W sekcji Above announcements/rewards wklej:

<script>  
  function CartContainsOnlyUpsells(cart) {  
    var cartWithoutUpsells = cart.items.filter(item => item.properties?.__upcartUpsell == null);  
    return cartWithoutUpsells.length === 0;  
  }  
  
  function ToggleCheckoutButton(shouldBeEnabled) {  
    var checkoutButton = window.upcartDocumentOrShadowRoot.querySelector(".upcart-checkout-button");  
    var warning = window.upcartDocumentOrShadowRoot.querySelector(".upcartUpsellOnlyWarning");  
  
    if (checkoutButton && warning) {  
      if (shouldBeEnabled) {  
        checkoutButton.classList.remove("upcart-disable-checkout-button");  
        warning.style.display = "none";  
      } else {  
        checkoutButton.classList.add("upcart-disable-checkout-button");  
        warning.style.display = "block";  
      }  
    }  
  }  
  
  window.upcartSubscribeCartLoaded((event) => {  
    ToggleCheckoutButton(!CartContainsOnlyUpsells(event.cart));  
  });  
</script>

Uwaga dotycząca starszej wersji: wywołania zwrotne window.upcartOnCartLoaded nadal działają, ale są przestarzałe i generują ostrzeżenia w konsoli. We wszystkich nowych skryptach używaj upcartSubscribeCartLoaded.

W sekcji Below checkout button wklej:

<div class="upcartUpsellOnlyWarning" style="display: none;">  
  Your cart only contains upsell products. <br>  
  Please add a regular product to continue to checkout.  
</div>

Możesz dowolnie dostosować treść komunikatu ostrzegawczego do tonu swojej marki.

Krok 2: dodaj niestandardowy CSS

Przejdź do:
Upcart > Cart Editor > Settings > Custom CSS Wklej poniższy kod:

.upcartUpsellOnlyWarning {  
  width: 100%;  
  text-align: center;  
  margin-top: 10px;  
  color: red;  
  font-weight: bold;  
  font-size: 15px;  
}  
  
.upcart-disable-checkout-button {  
  cursor: none !important;  
  pointer-events: none !important;  
  opacity: 0.4 !important;  
}

Ten kod styluje komunikat ostrzegawczy oraz wyłącza przycisk checkoutu wizualnie i funkcjonalnie.

Efekt końcowy

Po skonfigurowaniu:

Checkout jest zablokowany, dopóki w koszyku nie znajdzie się co najmniej jeden produkt niebędący upsellem
Komunikat informuje klientów, dlaczego checkout jest wyłączony
Całość działa płynnie i spójnie z marką

Jest to szczególnie pomocne w następujących przypadkach — połączenie skutecznych strategii upsellowych z tymi technikami poprawia także ogólne doświadczenie zakupowe klientów, eliminując zbędne konflikty w procesie zakupowym:

Zapobieganie przypadkowym zakupom pojedynczych produktów upsell
Utrzymanie upselli wyłącznie jako produktów dodatkowych
Zapewnienie lepszej kontroli nad AOV i łączeniem produktów w zestawy

Nadal potrzebujesz pomocy?

Jeśli potrzebujesz pomocy przy personalizacjach, zalecamy skonsultowanie się z ekspertem Shopify w sprawie dodania HTML, CSS, a nawet JavaScriptu do Twojego cart drawer. Zobacz ekspertów Shopify

Pierwsze kroki

Moduły koszyka

Ustawienia koszyka

Przyklejony przycisk koszyka

Multicart

Personalizacje

Analityka

Integracje i kompatybilność

Rozliczenia i konto

Rozwiązywanie problemów

Zapobieganie zakupom samych upselli w koszyku

Omówienie

Jak to działa

Krok 1: dodaj niestandardowy HTML

W sekcji Above announcements/rewards wklej:

W sekcji Below checkout button wklej:

Krok 2: dodaj niestandardowy CSS

Efekt końcowy

Nadal potrzebujesz pomocy?

​Omówienie

​Jak to działa

​Krok 1: dodaj niestandardowy HTML

​W sekcji Above announcements/rewards wklej:

​W sekcji Below checkout button wklej:

​Krok 2: dodaj niestandardowy CSS

​Efekt końcowy

​Nadal potrzebujesz pomocy?

Omówienie

Jak to działa

Krok 1: dodaj niestandardowy HTML

W sekcji Above announcements/rewards wklej:

W sekcji Below checkout button wklej:

Krok 2: dodaj niestandardowy CSS

Efekt końcowy

Nadal potrzebujesz pomocy?