Omówienie

Jeśli oferujesz nagrody tylko w wybranych regionach, możesz ukryć pasek nagród przed klientami z określonych krajów, łącząc JavaScript i CSS. Dzięki temu koszyk pozostaje przejrzysty i adekwatny dla kupujących w zależności od tego, skąd przeglądają sklep. Uwaga: Nawet gdy pasek jest ukryty, logika nagród nadal działa w tle. Na przykład darmowy prezent może wciąż zostać dodany do koszyka po spełnieniu warunków, mimo że pasek nie jest widoczny.

Krok 1: znajdź kody docelowych krajów

Musisz określić, które kraje mają widzieć pasek nagród. Aby znaleźć kody, skorzystaj z listy Shopify zawierającej dwuliterowe kody krajów ISO. Przykłady:

US → Stany Zjednoczone
CA → Kanada
MX → Meksyk

Krok 2: dodaj niestandardowy HTML

Przejdź do Upcart > Cart Editor > Settings > Custom HTML
Wklej poniższy kod w obu poniższych lokalizacjach:
- Above announcements/rewards
- On empty cart

Zastąp "US" wybranym kodem lub kodami krajów.

<script>  
  function hideRewards() {  
    let rewardsBar = window.upcartDocumentOrShadowRoot.querySelector(".upcart-rewards");  
    let country = window.Shopify.country;  
  
    if (country.includes("US")) {  
      rewardsBar.classList.remove("hide");  
      return;  
    }  
  
    rewardsBar.classList.add("hide");  
  }  
  
  window.upcartSubscribeCartOpened(() => setTimeout(hideRewards, 300));  
  window.upcartSubscribeCartLoaded(hideRewards);  
</script>

Uwaga dotycząca starszej wersji: wywołania zwrotne window.upcartOnCartOpened i window.upcartOnCartLoaded nadal działają, ale są przestarzałe i generują ostrzeżenia w konsoli. We wszystkich nowych skryptach używaj upcartSubscribeCartOpened i upcartSubscribeCartLoaded.

Alternatywny kod dla wersji Rewards V2.0

Jeśli Twoje nagrody zostały zaktualizowane do wersji V2, kod różni się tylko nieznacznie — selektor nagród został zastąpiony nowym selektorem .upcart-public-rewards. Użyj poniższego kodu, jeśli Twój moduł nagród progowych został zaktualizowany

<script>  
  function hideRewards() {  
    let rewardsBar = window.upcartDocumentOrShadowRoot.querySelector(".upcart-public-rewards");  
    let country = window.Shopify.country;  
  
    if (country.includes("US")) {  
      rewardsBar.classList.remove("hide");  
      return;  
    }  
  
    rewardsBar.classList.add("hide");  
  }  
  
  window.upcartSubscribeCartOpened(() => setTimeout(hideRewards, 300));  
  window.upcartSubscribeCartLoaded(hideRewards);  
</script>

Aby obsłużyć wiele krajów, dostosuj warunek w następujący sposób:

if (["US", "CA", "GB"].includes(country)) {

Krok 3: dodaj niestandardowy CSS

Przejdź do Upcart > Cart Editor > Settings > Custom CSS
Wklej poniższy kod, aby sterować widocznością:

.hide {  
  display: none;   
}

Efekt końcowy

Klienci z wykluczonych krajów nie zobaczą paska nagród w swoim koszyku, mimo że logika nagród nadal działa w tle. Użyj tej metody, jeśli:

Oferujesz nagrody tylko na wybranych rynkach
Chcesz uniknąć wyświetlania promocji, które nie mają zastosowania
Potrzebujesz tymczasowego obejścia przed skonfigurowaniem właściwej logiki regionalnej

Potrzebujesz pomocy?

W przypadku zaawansowanej logiki regionalnej lub wsparcia w zakresie JavaScriptu zalecamy współpracę z ekspertem Shopify. Wsparcie Upcart nie pomaga w pisaniu ani debugowaniu niestandardowego kodu. Zobacz ekspertów Shopify

Pierwsze kroki

Moduły koszyka

Ustawienia koszyka

Przyklejony przycisk koszyka

Multicart

Personalizacje

Analityka

Integracje i kompatybilność

Rozliczenia i konto

Rozwiązywanie problemów

Ukrywanie paska nagród dla wybranych krajów

Omówienie

Krok 1: znajdź kody docelowych krajów

Krok 2: dodaj niestandardowy HTML

Alternatywny kod dla wersji Rewards V2.0

Krok 3: dodaj niestandardowy CSS

Efekt końcowy

Potrzebujesz pomocy?

​Omówienie

​Krok 1: znajdź kody docelowych krajów

​Krok 2: dodaj niestandardowy HTML

​Alternatywny kod dla wersji Rewards V2.0

​Krok 3: dodaj niestandardowy CSS

​Efekt końcowy

​Potrzebujesz pomocy?

Omówienie

Krok 1: znajdź kody docelowych krajów

Krok 2: dodaj niestandardowy HTML

Alternatywny kod dla wersji Rewards V2.0

Krok 3: dodaj niestandardowy CSS

Efekt końcowy

Potrzebujesz pomocy?