Skip to main content
Replo è un potente page builder per landing page, ma il suo comportamento predefinito di “Add to Cart” reindirizza alla pagina del carrello di Shopify. Questo interrompe l’esperienza prevista di Upcart, che usa un drawer a scorrimento laterale. Con un semplice snippet JavaScript puoi dire a Replo di avvisare Upcart quando un prodotto viene aggiunto, mantenendo il cliente sulla stessa pagina e aprendo subito il drawer. Questo esempio mostra come JavaScript possa essere usato non solo per l’integrazione con Upcart, ma anche per una più ampia personalizzazione del carrello del tuo negozio.

​
Perché questa integrazione è importante

Per impostazione predefinita, Replo supporta diversi comportamenti dopo l’aggiunta al carrello:
  • Reindirizzamento alla pagina del carrello di Shopify
  • Reindirizzamento al checkout
  • Permanenza sulla pagina (senza interazione con il drawer)
Upcart non si apre automaticamente a meno che tu non lo attivi esplicitamente. Questa configurazione garantisce che il drawer si apra subito dopo il clic sul pulsante “Add to Cart” di Replo.

​
Passaggio 1: apri la pagina prodotto in Replo

  1. Apri la tua pagina prodotto o landing page nell’editor di Replo
  2. Seleziona il pulsante Add to Cart nel layout della pagina
  3. Nella barra laterale destra, fai clic sulla scheda Interactions
Scheda Interactions dell'editor di Replo con l'aggiunta di un'interazione On Click al pulsante Add to Cart

​
Passaggio 2: aggiungi una seconda interazione

  1. Verifica che il pulsante usi già l’interazione Add Product to Cart
  2. Fai clic sull’icona + sotto On Click
  3. Dall’elenco delle azioni, seleziona Run JavaScript
  4. Nel campo del codice, incolla quanto segue:
    In questo modo Upcart aprirà il drawer non appena il prodotto viene aggiunto al carrello.

​
Passaggio 3: disattiva il reindirizzamento di Replo alla pagina del carrello

  1. Seleziona di nuovo l’interazione Add Product to Cart
  2. Disattiva l’interruttore Go to cart after?
Questo impedisce a Replo di reindirizzare alla pagina del carrello di Shopify, che aggirerebbe completamente il drawer di Upcart.

​
Passaggio 4: anteprima e pubblicazione

  1. Fai clic su Preview in Replo per testare l’interazione
  2. Aggiungi un prodotto al carrello e verifica che il drawer di Upcart si apra automaticamente
  3. Una volta verificato, fai clic su Publish Page per pubblicare le modifiche

​
Note

  • Questa configurazione va applicata a ogni pagina in cui usi Replo + Upcart insieme
  • La funzione window.upcartRegisterAddToCart(); fa parte dell’API pubblica di Upcart e funziona senza installazioni di codice aggiuntive
  • Funziona sia per la versione mobile sia per quella desktop delle pagine Replo

​
Note

Ora Replo dovrebbe smettere di reindirizzare alla pagina del carrello di Shopify e avvisare invece Upcart quando un articolo viene aggiunto al carrello. Nota bene: dovrai completare questa procedura per ogni pagina prodotto che crei in Replo Landing Page Designer.