Blocco Rewards

Il blocco Rewards mostra una barra di avanzamento verso livelli di ricompensa (spedizione gratuita, uno sconto sull’ordine o un omaggio) che gli acquirenti sbloccano aggiungendo altro al carrello, incentivando carrelli più grandi mostrando agli acquirenti quanto sono vicini alla prossima ricompensa e concedendo automaticamente le ricompense raggiunte. I livelli possono variare per mercato, paese e valuta.

• L’avanzamento esclude dal totale le righe di omaggi, le righe di product add-on, le righe di shipping protection e le carte regalo, così quegli articoli non gonfiano il progresso dell’acquirente verso una ricompensa.
• Il messaggio mostra l’importo o il conteggio rimanente per il livello successivo, oppure il messaggio di completamento una volta raggiunti tutti i livelli.
• Gli omaggi vengono concessi automaticamente. Quando un acquirente raggiunge un livello con omaggio, l’omaggio viene aggiunto al carrello; se scende sotto la soglia, l’omaggio viene rimosso. Con le ricompense cumulabili disattivate, viene concesso solo l’omaggio del livello più alto raggiunto.
• Add back removed free gifts controlla cosa succede quando un acquirente rimuove manualmente un omaggio concesso automaticamente. Quando è abilitato (il predefinito), l’omaggio viene automaticamente riaggiunto al successivo aggiornamento del carrello. Quando è disabilitato, la rimozione viene rispettata e l’omaggio resta fuori dal carrello per il resto di quella sessione, così gli acquirenti non devono lottare con il carrello per rifiutare un omaggio.

• Regione: qualsiasi (top, body o bottom).
• Massimo: 1 per stato del carrello — il carrello pieno e il carrello vuoto ne hanno ciascuno uno proprio.
• Stato: sia carrello pieno che vuoto.
• Non aggiunto per impostazione predefinita. Non bloccato, quindi puoi rimuoverlo o nasconderlo.

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