> ## 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 — kreator stron docelowych

> Ten artykuł wyjaśnia, jak skonfigurować Replo, aby otwierało wysuwany koszyk Upcart po dodaniu produktu do koszyka.

Replo to potężny kreator stron docelowych, ale jego domyślne zachowanie „Add to Cart” przekierowuje na stronę koszyka Shopify. Przerywa to zamierzone doświadczenie Upcart, które korzysta z wysuwanego koszyka.

Za pomocą prostego fragmentu kodu JavaScript możesz sprawić, że Replo powiadomi Upcart o dodaniu produktu, dzięki czemu klient pozostanie na tej samej stronie, a wysuwany koszyk otworzy się natychmiast.

To pokazuje, jak JavaScript może być używany nie tylko do integracji z Upcart, ale także do szerszej personalizacji koszyka w Twoim sklepie.

***

<div id="why-this-integration-matters">
  ## Dlaczego ta integracja jest ważna
</div>

Domyślnie Replo obsługuje kilka zachowań po dodaniu do koszyka:

* Przekierowanie na stronę koszyka Shopify
* Przekierowanie do checkoutu
* Pozostanie na stronie (bez interakcji z wysuwanym koszykiem)

Upcart nie otwiera się automatycznie, dopóki nie uruchomisz go jawnie. Ta konfiguracja zapewnia, że wysuwany koszyk otwiera się zaraz po kliknięciu przycisku „Add to Cart” w Replo.

***

<div id="step-1-open-the-product-page-in-replo">
  ## Krok 1: Otwórz stronę produktu w Replo
</div>

1. Otwórz swoją stronę produktu lub stronę docelową w edytorze Replo
2. Zaznacz przycisk **Add to Cart** w układzie strony
3. W pasku bocznym po prawej stronie kliknij kartę **Interactions**

<img src="https://mintlify.s3.us-west-1.amazonaws.com/aftersell/images/upcart/replo-editor-interactions-on-click.gif" alt="Karta Interactions w edytorze Replo z dodawaniem interakcji On Click do przycisku Add to Cart" />

<div id="step-2-add-a-second-interaction">
  ## Krok 2: Dodaj drugą interakcję
</div>

1. Potwierdź, że przycisk już korzysta z interakcji **Add Product to Cart**
2. Kliknij ikonę `+` pod **On Click**
3. Z listy akcji wybierz **Run JavaScript**
4. W polu kodu wklej poniższy fragment:
   ```javascript theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
   window.upcartRegisterAddToCart();
   ```
   Dzięki temu Upcart otworzy wysuwany koszyk, gdy tylko produkt zostanie dodany do koszyka.

<div id="step-3-disable-replo-redirect-to-the-cart-page">
  ## Krok 3: Wyłącz przekierowanie Replo na stronę koszyka
</div>

1. Ponownie zaznacz interakcję **Add Product to Cart**
2. Wyłącz przełącznik **Go to cart after?**

Zapobiega to przekierowaniu przez Replo na stronę koszyka Shopify, co całkowicie pominęłoby wysuwany koszyk Upcart.

<div id="step-4-preview-and-publish">
  ## Krok 4: Podejrzyj i opublikuj
</div>

1. Kliknij **Preview** w Replo, aby przetestować interakcję
2. Dodaj produkt do koszyka i potwierdź, że wysuwany koszyk Upcart otwiera się automatycznie
3. Po potwierdzeniu kliknij **Publish Page**, aby opublikować zmiany

***

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

* Tę konfigurację trzeba zastosować na **każdej stronie**, na której używasz razem Replo + Upcart
* Funkcja `window.upcartRegisterAddToCart();` pochodzi z publicznego API Upcart i działa bez dodatkowych instalacji kodu
* Działa to zarówno w mobilnej, jak i desktopowej wersji stron Replo

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

Replo powinno teraz przestać przekierowywać na stronę koszyka Shopify, a zamiast tego powiadamiać Upcart, gdy produkt zostanie dodany do koszyka.

Pamiętaj: musisz ukończyć ten proces dla każdej strony produktu, którą projektujesz w Replo Landing Page Designer.