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

> Questo articolo spiega come configurare Replo per aprire il drawer di Upcart quando un prodotto viene aggiunto al carrello.

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.

***

<div id="why-this-integration-matters">
  ## Perché questa integrazione è importante
</div>

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.

***

<div id="step-1-open-the-product-page-in-replo">
  ## Passaggio 1: apri la pagina prodotto in Replo
</div>

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**

<img src="https://mintlify.s3.us-west-1.amazonaws.com/aftersell/images/upcart/replo-editor-interactions-on-click.gif" alt="Scheda Interactions dell'editor di Replo con l'aggiunta di un'interazione On Click al pulsante Add to Cart" />

<div id="step-2-add-a-second-interaction">
  ## Passaggio 2: aggiungi una seconda interazione
</div>

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:
   ```javascript theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
   window.upcartRegisterAddToCart();
   ```
   In questo modo Upcart aprirà il drawer non appena il prodotto viene aggiunto al carrello.

<div id="step-3-disable-replo-redirect-to-the-cart-page">
  ## Passaggio 3: disattiva il reindirizzamento di Replo alla pagina del carrello
</div>

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.

<div id="step-4-preview-and-publish">
  ## Passaggio 4: anteprima e pubblicazione
</div>

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

***

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

* 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

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

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.