Rewards-blok

Het Rewards-blok toont een voortgangsbalk naar beloningsniveaus (gratis verzending, een bestelkorting of een gratis geschenk) die shoppers ontgrendelen door meer aan hun winkelwagen toe te voegen. Het stimuleert grotere winkelwagens door shoppers te laten zien hoe dicht ze bij de volgende beloning zijn, en kent kwalificerende beloningen automatisch toe. Niveaus kunnen variëren per markt, land en valuta.

• De voortgang sluit regels van beloningsgeschenken, product add-on-regels, verzendbeschermingsregels en cadeaubonnen uit van het totaal, zodat die artikelen de shopper niet kunstmatig richting een beloning stuwen.
• Het bericht toont het resterende bedrag of aantal tot het volgende niveau, of het voltooiingsbericht zodra alle niveaus zijn behaald.
• Gratis geschenken worden automatisch toegekend. Wanneer een shopper een geschenkniveau bereikt, wordt het geschenk aan de winkelwagen toegevoegd; zakt hij eronder, dan wordt het geschenk verwijderd. Met stapelbare beloningen uit wordt alleen het geschenk van het hoogst behaalde niveau toegekend.
• Add back removed free gifts bepaalt wat er gebeurt wanneer een shopper een automatisch toegekend geschenk handmatig verwijdert. Indien ingeschakeld (de standaard) wordt het geschenk bij de volgende winkelwagen-update automatisch opnieuw toegevoegd. Indien uitgeschakeld wordt de verwijdering gerespecteerd en blijft het geschenk voor de rest van die sessie uit de winkelwagen, zodat shoppers niet met de winkelwagen hoeven te vechten om een geschenk te weigeren.

• Regio: overal (bovenkant, body of onderkant).
• Maximum: 1 per winkelwagenstaat — de gevulde winkelwagen en de lege winkelwagen krijgen er elk hun eigen.
• Staat: zowel gevulde als lege winkelwagen.
• Niet standaard toegevoegd. Niet vergrendeld, dus je kunt het verwijderen of verbergen.

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