Skip to main content
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.

​
Warum diese Integration wichtig ist

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.

​
Schritt 1: Öffne die Produktseite in Replo

  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
Replo-Editor-Tab Interactions beim Hinzufügen einer On-Click-Interaktion zum Add-to-Cart-Button

​
Schritt 2: Füge eine zweite Interaktion hinzu

  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:
    Das weist Upcart an, den Drawer zu öffnen, sobald das Produkt zum Warenkorb hinzugefügt wurde.

​
Schritt 3: Deaktiviere die Replo-Weiterleitung zur Warenkorbseite

  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.

​
Schritt 4: Vorschau anzeigen und veröffentlichen

  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

​
Hinweise

  • 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

​
Hinweise

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.