Skip to main content
Replo is een krachtige landingspaginabuilder, maar het standaard “Add to Cart”-gedrag leidt door naar de Shopify-cartpagina. Dit onderbreekt de bedoelde Upcart-ervaring, die een uitschuivende drawer gebruikt. Met een eenvoudig JavaScript-fragment kun je Replo Upcart laten informeren wanneer een product wordt toegevoegd, zodat de klant op dezelfde pagina blijft en de drawer direct opent. Dit laat zien hoe JavaScript niet alleen voor Upcart-integratie kan worden gebruikt, maar ook voor bredere cartaanpassingen in je winkel.

​
Waarom deze integratie belangrijk is

Standaard ondersteunt Replo meerdere gedragingen na het toevoegen aan de cart:
  • Doorverwijzen naar de Shopify-cartpagina
  • Doorverwijzen naar de checkout
  • Op de pagina blijven (geen drawer-interactie)
Upcart opent niet automatisch tenzij je dit expliciet activeert. Deze configuratie zorgt ervoor dat de drawer direct opent nadat op de Replo “Add to Cart”-knop is geklikt.

​
Stap 1: open de productpagina in Replo

  1. Open je product- of landingspagina in de Replo-editor
  2. Selecteer de Add to Cart-knop in de pagina-indeling
  3. Klik in de rechterzijbalk op het tabblad Interactions
Replo-editor Interactions-tabblad waarbij een On Click-interactie aan de Add to Cart-knop wordt toegevoegd

​
Stap 2: voeg een tweede interactie toe

  1. Controleer of de knop al de Add Product to Cart-interactie gebruikt
  2. Klik op het +-pictogram onder On Click
  3. Selecteer Run JavaScript in de lijst met acties
  4. Plak het volgende in het code-invoerveld:
    Dit vertelt Upcart om de drawer te openen zodra het product aan de cart is toegevoegd.

​
Stap 3: schakel de Replo-redirect naar de cartpagina uit

  1. Selecteer opnieuw de Add Product to Cart-interactie
  2. Schakel de toggle Go to cart after? uit
Dit voorkomt dat Replo doorverwijst naar de Shopify-cartpagina, wat de Upcart-drawer volledig zou omzeilen.

​
Stap 4: bekijk een voorbeeld en publiceer

  1. Klik op Preview in Replo om de interactie te testen
  2. Voeg een product toe aan de cart en controleer of de Upcart-drawer automatisch opent
  3. Klik na bevestiging op Publish Page om de wijzigingen live te zetten

​
Opmerkingen

  • Deze configuratie moet worden toegepast op elke pagina waar je Replo + Upcart samen gebruikt
  • De functie window.upcartRegisterAddToCart(); komt uit de publieke API van Upcart en werkt zonder extra code-installaties
  • Dit werkt voor zowel mobiele als desktopversies van Replo-pagina’s

​
Opmerkingen

Replo zou nu moeten stoppen met doorverwijzen naar de Shopify-cartpagina en in plaats daarvan Upcart moeten informeren wanneer een artikel aan de cart wordt toegevoegd. Let op: je moet dit proces voltooien voor elke productpagina die je ontwerpt in Replo Landing Page Designer.