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

​
Dlaczego ta integracja jest ważna

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.

​
Krok 1: Otwórz stronę produktu w Replo

  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
Karta Interactions w edytorze Replo z dodawaniem interakcji On Click do przycisku Add to Cart

​
Krok 2: Dodaj drugą interakcję

  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:
    Dzięki temu Upcart otworzy wysuwany koszyk, gdy tylko produkt zostanie dodany do koszyka.

​
Krok 3: Wyłącz przekierowanie Replo na stronę koszyka

  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.

​
Krok 4: Podejrzyj i opublikuj

  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

​
Uwagi

  • 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

​
Uwagi

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.