> ## 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 x Replo landing page builder

> Dieser Artikel erklärt, wie du Replo so einrichtest, dass der Upcart-Drawer geöffnet wird, wenn ein Produkt zum Warenkorb hinzugefügt wird.

Replo ist ein leistungsstarker Landingpage-Builder, aber sein standardmäßiges „Add to Cart“-Verhalten leitet zur Shopify-Warenkorbseite weiter. Das unterbricht das vorgesehene Upcart-Erlebnis, das einen ausklappbaren Drawer verwendet.

Mit einem einfachen JavaScript-Snippet kannst du Replo anweisen, Upcart zu benachrichtigen, wenn ein Produkt hinzugefügt wird. So bleibt der Kunde auf derselben Seite und der Drawer öffnet sich sofort.

Das zeigt, wie JavaScript nicht nur für die Upcart-Integration, sondern auch für umfassendere Warenkorb-Anpassungen in deinem Shop genutzt werden kann.

***

<div id="why-this-integration-matters">
  ## Warum diese Integration wichtig ist
</div>

Standardmäßig unterstützt Replo mehrere Verhaltensweisen nach dem Hinzufügen zum Warenkorb:

* Weiterleitung zur Shopify-Warenkorbseite
* Weiterleitung zum Checkout
* Auf der Seite bleiben (keine Drawer-Interaktion)

Upcart öffnet sich nicht automatisch, es sei denn, du löst es explizit aus. Diese Einrichtung stellt sicher, dass sich der Drawer direkt nach dem Klick auf den „Add to Cart“-Button von Replo öffnet.

***

<div id="step-1-open-the-product-page-in-replo">
  ## Schritt 1: Öffne die Produktseite in Replo
</div>

1. Öffne deine Produkt- oder Landingpage im Replo-Editor
2. Wähle den **Add to Cart**-Button im Seitenlayout aus
3. Klicke in der rechten Seitenleiste auf den Tab **Interactions**

<img src="https://mintlify.s3.us-west-1.amazonaws.com/aftersell/images/upcart/replo-editor-interactions-on-click.gif" alt="Replo-Editor-Tab Interactions beim Hinzufügen einer On-Click-Interaktion zum Add-to-Cart-Button" />

<div id="step-2-add-a-second-interaction">
  ## Schritt 2: Füge eine zweite Interaktion hinzu
</div>

1. Bestätige, dass der Button bereits die Interaktion **Add Product to Cart** verwendet
2. Klicke auf das `+`-Symbol unter **On Click**
3. Wähle aus der Liste der Aktionen **Run JavaScript** aus
4. Füge im Code-Eingabefeld Folgendes ein:
   ```javascript theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
   window.upcartRegisterAddToCart();
   ```
   Das weist Upcart an, den Drawer zu öffnen, sobald das Produkt zum Warenkorb hinzugefügt wurde.

<div id="step-3-disable-replo-redirect-to-the-cart-page">
  ## Schritt 3: Deaktiviere die Replo-Weiterleitung zur Warenkorbseite
</div>

1. Wähle erneut die Interaktion **Add Product to Cart** aus
2. Deaktiviere den Schalter **Go to cart after?**

Das verhindert, dass Replo zur Shopify-Warenkorbseite weiterleitet, was den Upcart-Drawer vollständig umgehen würde.

<div id="step-4-preview-and-publish">
  ## Schritt 4: Vorschau anzeigen und veröffentlichen
</div>

1. Klicke in Replo auf **Preview**, um die Interaktion zu testen
2. Füge ein Produkt zum Warenkorb hinzu und bestätige, dass sich der Upcart-Drawer automatisch öffnet
3. Sobald du das bestätigt hast, klicke auf **Publish Page**, um die Änderungen live zu schalten

***

<div id="notes">
  ## Hinweise
</div>

* Diese Einrichtung muss auf **jeder Seite** angewendet werden, auf der du Replo + Upcart zusammen verwendest
* Die Funktion `window.upcartRegisterAddToCart();` stammt aus der öffentlichen API von Upcart und funktioniert ohne zusätzliche Code-Installationen
* Das funktioniert sowohl für die Mobil- als auch für die Desktop-Version von Replo-Seiten

<div id="notes-2">
  # **Hinweise**
</div>

Replo sollte jetzt nicht mehr zur Shopify-Warenkorbseite weiterleiten, sondern stattdessen Upcart benachrichtigen, wenn ein Artikel zum Warenkorb hinzugefügt wird.

Bitte beachte: Du musst diesen Vorgang für jede Produktseite durchführen, die du im Replo Landing Page Designer gestaltest.