Blok Rewards

Blok Rewards pokazuje pasek postępu w kierunku progów nagród (darmowa wysyłka, rabat na zamówienie lub darmowy prezent), które klienci odblokowują, dodając więcej do koszyka — motywuje do większych koszyków, pokazując klientom, jak blisko są następnej nagrody, i automatycznie przyznaje nagrody spełniające warunki. Progi mogą się różnić w zależności od rynku, kraju i waluty.

• Postęp wyklucza z sumy pozycje prezentów z nagród, pozycje product add-on, pozycje ochrony przesyłki oraz karty podarunkowe, więc te produkty nie przybliżają sztucznie klienta do nagrody.
• Komunikat pokazuje pozostałą kwotę lub liczbę do następnego poziomu albo komunikat ukończenia, gdy wszystkie poziomy zostaną osiągnięte.
• Darmowe prezenty są przyznawane automatycznie. Gdy klient osiągnie poziom prezentu, prezent jest dodawany do koszyka; jeśli spadnie poniżej, prezent jest usuwany. Przy wyłączonym sumowaniu nagród przyznawany jest tylko prezent najwyższego osiągniętego poziomu.
• Add back removed free gifts kontroluje, co się dzieje, gdy klient ręcznie usunie automatycznie przyznany prezent. Gdy jest włączone (domyślnie), prezent jest automatycznie dodawany ponownie przy następnej aktualizacji koszyka. Gdy jest wyłączone, usunięcie jest respektowane i prezent pozostaje poza koszykiem do końca tej sesji, dzięki czemu klienci nie walczą z koszykiem, żeby odmówić prezentu.

• Region: dowolny (góra, korpus lub dół).
• Maksymalnie: 1 na stan koszyka — wypełniony koszyk i pusty koszyk mają każdy swój własny.
• Stan: zarówno wypełniony, jak i pusty koszyk.
• Nie jest dodawany domyślnie. Nie jest zablokowany, więc możesz go usunąć lub ukryć.

function Rewards(props) {
  return (
    <div>
      <div dangerouslySetInnerHTML={{ __html: props.rewardsMessageHtml }} />

      {props.milestones.map((milestone) => (
        // Each tier gets its own track; positionPercent (0-100) fills that track.
        <div key={milestone.id}>
          <div style={{ background: '#E9E9E9', height: 5 }}>
            <div style={{ width: `${milestone.positionPercent}%`, background: '#000', height: 5 }} />
          </div>
          {props.showIcons && milestone.icon ? milestone.icon : null}
          {props.showTierLabels && milestone.label !== '' ? milestone.label : null}
        </div>
      ))}
    </div>
  );
}