Rewards-blok

Blokken Rewards viser en fremdriftslinje mod belønningsniveauer (gratis fragt, en ordrerabat eller en gratis gave), som kunder låser op ved at lægge mere i kurven — den motiverer større kurve ved at vise kunderne, hvor tæt de er på den næste belønning, og tildeler kvalificerende belønninger automatisk. Niveauer kan variere efter marked, land og valuta.

• Fremdrift udelukker belønningsgave-linjer, tilkøbslinjer, fragtbeskyttelseslinjer og gavekort fra totalen, så disse varer ikke puster kunden op mod en belønning.
• Beskeden viser det resterende beløb eller antal til det næste niveau, eller den fuldførte besked, når alle niveauer er nået.
• Gratis gaver tildeles automatisk. Når en kunde når et gaveniveau, tilføjes gaven til kurven; hvis de falder under det, fjernes gaven. Med stakbare belønninger slået fra tildeles kun gaven fra det højeste opnåede niveau.
• Add back removed free gifts styrer, hvad der sker, når en kunde manuelt fjerner en automatisk tildelt gave. Når den er aktiveret (standard), tilføjes gaven automatisk igen ved den næste kurvopdatering. Når den er deaktiveret, respekteres fjernelsen, og gaven holdes ude af kurven resten af den session, så kunderne ikke kæmper med kurven for at afslå en gave.

• Region: alle (top, body eller bund).
• Maksimum: 1 pr. kurvtilstand — den fyldte kurv og den tomme kurv får hver deres egen.
• Tilstand: både fyldt og tom kurv.
• Tilføjes ikke som standard. Ikke låst, så du kan fjerne eller skjule den.

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>
  );
}