Rewards-Block

Der Rewards-Block zeigt einen Fortschrittsbalken hin zu Reward-Stufen (Gratisversand, ein Bestellrabatt oder ein Gratisgeschenk), die Käufer freischalten, indem sie mehr in ihren Warenkorb legen. Er motiviert zu größeren Warenkörben, indem er Käufern zeigt, wie nah sie am nächsten Reward sind, und gewährt qualifizierende Rewards automatisch. Stufen können nach Markt, Land und Währung variieren.

• Der Fortschritt schließt Reward-Geschenk-Zeilen, Product-add-on-Zeilen, Versandschutz-Zeilen und Geschenkkarten von der Summe aus, damit diese Artikel den Käufer nicht künstlich Richtung Reward treiben.
• Die Nachricht zeigt den verbleibenden Betrag oder die verbleibende Anzahl bis zur nächsten Stufe, oder die Abschluss-Nachricht, sobald alle Stufen erreicht sind.
• Gratisgeschenke werden automatisch gewährt. Wenn ein Käufer eine Geschenk-Stufe erreicht, wird das Geschenk in den Warenkorb gelegt; fällt er darunter, wird das Geschenk entfernt. Bei ausgeschalteten stapelbaren Rewards wird nur das Geschenk der höchsten erreichten Stufe gewährt.
• Add back removed free gifts steuert, was passiert, wenn ein Käufer ein automatisch gewährtes Geschenk manuell entfernt. Wenn aktiviert (der Standard), wird das Geschenk beim nächsten Warenkorb-Update automatisch wieder hinzugefügt. Wenn deaktiviert, wird die Entfernung respektiert und das Geschenk bleibt für den Rest dieser Sitzung aus dem Warenkorb — Käufer kämpfen also nicht gegen den Warenkorb, um ein Geschenk abzulehnen.

• Region: beliebig (oben, Body oder unten).
• Maximum: 1 pro Warenkorb-Zustand — der gefüllte und der leere Warenkorb erhalten jeweils einen eigenen.
• Zustand: sowohl gefüllter als auch leerer Warenkorb.
• Nicht standardmäßig hinzugefügt. Nicht gesperrt — du kannst ihn also entfernen oder ausblenden.

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