⚠️ Wichtiger Hinweis Diese Anpassung funktioniert nur mit Version 1 der Upcart-Warenkorbmodule. Wenn du deinen Warenkorb kürzlich auf Version 2 aktualisiert hast, funktionieren diese Anpassungen möglicherweise nicht. Du musst die neuen Selektoren für Version 2 aus dem Migrationsleitfaden verwenden. Wenn deine Anpassungen nicht wie erwartet funktionieren, kannst du den Warenkorb selbst auf Version 1 zurücksetzen: Verwende im Cart Editor das Dropdown Cart version oben im linken Menü und wähle V1.0 (Legacy). Das Dropdown erscheint, sobald jedes Modul im Warenkorb auf V2 ist. Wir arbeiten derzeit an neuen Anpassungsvorlagen für Version 2 der Module, die bald verfügbar sein werden.

Übersicht

Mit dieser Anpassung kannst du bestimmte Teile des Warenkorbs ausblenden, zum Beispiel die Rewards-Leiste, wenn bestimmte Produkte vorhanden sind. Das ist nützlich, wenn du das Warenkorb-Erlebnis für bestimmte SKUs vereinfachen oder verhindern möchtest, dass bestimmte Aktionen neben bestimmten Artikeln erscheinen. Diese Einrichtung verwendet Produkt-IDs, um zu erkennen, welche Produkte sich im Warenkorb befinden, und blendet ein ausgewähltes Element aus, wenn eine Übereinstimmung gefunden wird. Du wendest die Logik mit benutzerdefiniertem HTML und CSS im Upcart-Editor an.

Wann du das verwenden solltest

Die Rewards-Leiste ausblenden, wenn sich Aktionsartikel im Warenkorb befinden
Benutzerdefinierte Inhaltsblöcke, Trust-Badges oder Upsell-Bereiche abhängig vom Produkttyp ausblenden
Einen saubereren oder besser zugeschnittenen Checkout-Ablauf für bestimmte Artikel bieten

Dieser Ansatz erfordert Grundkenntnisse in HTML und JavaScript.

Schritt 1: Finde die Produkt-IDs

Gehe zu Shopify-Adminbereich > Produkte
Klicke auf das Produkt, das du ansprechen möchtest
Kopiere die numerische Produkt-ID aus der URL nach /products/

Beispiel:

/products/1234567890 → 1234567890

Diese IDs verwendest du im JavaScript-Array, das die Sichtbarkeit steuert.

Schritt 2: Füge benutzerdefiniertes HTML hinzu

Gehe zu Upcart > Cart Editor > Settings > Custom HTML
Füge den folgenden Code in beide HTML-Positionen Above announcements/rewards und On empty cart screen ein
Ersetze die Werte in productIDsToExclude durch deine Produkt-IDs
Passe .YOUR-CLASS-HERE an, um das Warenkorbelement anzusprechen, das du ausblenden möchtest (zum Beispiel: .upcart-rewards, .custom-message, .trust-badge)

<script>  
  window.upcartSubscribeCartLoaded((event) => {  
    const items = event.cart.items;  
    const productIDsToExclude = [  
      6958755512411,  
      6958755610712,  
      7736708759774  
    ];  
  
    let cartContainsExcludedItem = false;  
  
    items.forEach((item) => {  
      productIDsToExclude.forEach((id) => {  
        if (item.productId === id) {  
          cartContainsExcludedItem = true;  
        }  
      });  
    });  
  
    const targetElement = window.upcartDocumentOrShadowRoot.querySelector(".YOUR-CLASS-HERE");  
    if (targetElement) {  
      targetElement.style.display = cartContainsExcludedItem ? "none" : "block";  
    }  
  });  
</script>

Legacy-Hinweis: window.upcartOnCartLoaded-Callbacks funktionieren noch, sind aber veraltet und erzeugen Konsolenwarnungen. Verwende upcartSubscribeCartLoaded für alle neuen Skripte.

Schritt 3: Optionales Fallback-CSS

Wenn du sicherstellen möchtest, dass das Element ausgeblendet ist, bevor der Warenkorb vollständig geladen wird, füge dies im Bereich Custom CSS hinzu:

.YOUR-CLASS-HERE {   display: none; }

Hinweis: Das kann das Element vorübergehend für alle Nutzerinnen und Nutzer ausblenden, bis das JavaScript ausgeführt wird, was zu Flackern führen kann. In den meisten Fällen ist es besser, sich auf die JavaScript-Methode zu verlassen.

Endergebnis

Nach der Einrichtung:

Das angesprochene Warenkorbelement (zum Beispiel die Rewards-Leiste) wird ausgeblendet, wenn der Warenkorb eines der angegebenen Produkte enthält
Andernfalls bleibt das Element sichtbar
Du kannst diese Logik wiederverwenden, um verschiedene Elemente basierend auf produktspezifischen Regeln aus- oder einzublenden

Brauchst du weiterhin Hilfe?

Für komplexere Anpassungen empfehlen wir die Zusammenarbeit mit einem Shopify-Experten. Diese können bei HTML, CSS und JavaScript in deinem Cart Drawer helfen. Shopify-Experten ansehen

Referenz der Warenkorbfunktionen

CSS-Referenz

Styling-Rezepte

Funktions-Rezepte

Benutzerdefinierte Vorlagen

Öffentliche API von Upcart

Bestimmte Warenkorbelemente mit Produkt-IDs ausblenden

Übersicht

Wann du das verwenden solltest

Schritt 1: Finde die Produkt-IDs

Schritt 2: Füge benutzerdefiniertes HTML hinzu

Schritt 3: Optionales Fallback-CSS

Endergebnis

Brauchst du weiterhin Hilfe?

​Übersicht

​Wann du das verwenden solltest

​Schritt 1: Finde die Produkt-IDs

​Schritt 2: Füge benutzerdefiniertes HTML hinzu

​Schritt 3: Optionales Fallback-CSS

​Endergebnis

​Brauchst du weiterhin Hilfe?

Übersicht

Wann du das verwenden solltest

Schritt 1: Finde die Produkt-IDs

Schritt 2: Füge benutzerdefiniertes HTML hinzu

Schritt 3: Optionales Fallback-CSS

Endergebnis

Brauchst du weiterhin Hilfe?