Ringkasan checkout

Jumlah, total per baris, dan total keseluruhan bergulir saat keranjang berubah; pemberitahuan kupon masuk dan pergi; membayar memerlukan tahanan yang disengaja.

MotionListMotionNumberMotionPresenceMotionHold

Menyiapkan contoh…

JavaScript nonaktif. Kode di bawah adalah contoh lengkapnya.

App.jsx

import { useState } from 'react';
import {
  MotionHold,
  MotionList,
  MotionNumber,
  MotionPresence,
} from '@kkwaenggwari/animated-chorus';
import './styles.css';

const rates = { USD: 1, EUR: 0.92, KRW: 1380 };
const catalog = [
  { id: 'mug', name: 'Stoneware mug', price: 18 },
  { id: 'tote', name: 'Canvas tote', price: 24 },
  { id: 'lamp', name: 'Desk lamp', price: 89 },
  { id: 'plant', name: 'Small fern', price: 32 },
];

export default function App({ currency = 'USD', holdTime = 1200 }) {
  const [cart, setCart] = useState([
    { ...catalog[0], quantity: 2 },
    { ...catalog[2], quantity: 1 },
  ]);
  const [coupon, setCoupon] = useState(false);
  const [paid, setPaid] = useState(false);

  const money = (amount) => ({
    value: Math.round(amount * rates[currency] * 100) / 100,
    intl: true,
    locale: 'en-US',
    format: { style: 'currency', currency },
  });
  const change = (id, delta) =>
    setCart(
      cart
        .map((item) => (item.id === id ? { ...item, quantity: item.quantity + delta } : item))
        .filter((item) => item.quantity > 0),
    );
  const addNext = () => {
    const next = catalog.find((product) => !cart.some((item) => item.id === product.id));
    if (next) setCart([...cart, { ...next, quantity: 1 }]);
  };

  const subtotal = cart.reduce((sum, item) => sum + item.price * item.quantity, 0);
  const discount = coupon ? subtotal * 0.1 : 0;
  const total = subtotal - discount;

  return (
    <div className="checkout">
      <MotionList
        as="ul"
        className="cart"
        items={cart}
        effect="slide"
        renderItem={(item) => (
          <div className="line">
            <span className="name">{item.name}</span>
            <span className="quantity">
              <button onClick={() => change(item.id, -1)}>−</button>
              <MotionNumber value={item.quantity} />
              <button onClick={() => change(item.id, 1)}>+</button>
            </span>
            <MotionNumber className="amount" {...money(item.price * item.quantity)} />
          </div>
        )}
      />
      <div className="actions">
        <button onClick={addNext}>Add an item</button>
        <button onClick={() => setCoupon(!coupon)}>{coupon ? 'Remove' : 'Apply'} SAVE10</button>
      </div>
      <MotionPresence present={coupon} className="coupon">
        SAVE10 applied: 10% off
      </MotionPresence>
      <p className="total">
        <span className="label">Total</span>
        <MotionNumber {...money(total)} mode="roll" />
      </p>
      {paid ? (
        <button className="done" onClick={() => setPaid(false)}>
          Paid. Start over
        </button>
      ) : (
        <MotionHold
          className="pay"
          fillClassName="pay-fill"
          duration={holdTime}
          onConfirm={() => setPaid(true)}
        >
          Hold to pay
        </MotionHold>
      )}
    </div>
  );
}

styles.css

.checkout {
  display: grid;
  gap: 12px;
  max-width: 520px;
  margin: 0 auto;
  padding: 24px 20px;
}

.cart {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid #cfe8dc;
  border-radius: 12px;
  background: #fff;
}

.name {
  color: #0e2e24;
  font-weight: 600;
}

.quantity {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-variant-numeric: tabular-nums;
}

.quantity button {
  width: 32px;
  height: 32px;
  border: 1px solid #cfe8dc;
  border-radius: 50%;
  background: #fff;
  font-size: 16px;
  cursor: pointer;
}

.amount {
  min-width: 84px;
  text-align: end;
  font-variant-numeric: tabular-nums;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.actions button {
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid #cfe8dc;
  border-radius: 999px;
  background: #fff;
  font:
    600 14px system-ui,
    sans-serif;
  cursor: pointer;
}

.coupon {
  padding: 10px 14px;
  border-radius: 12px;
  background: #eaf6f0;
  color: #176b52;
  font-weight: 600;
}

.total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 6px 0 0;
  padding-top: 12px;
  border-top: 1px solid #cfe8dc;
  font:
    800 30px system-ui,
    sans-serif;
  font-variant-numeric: tabular-nums;
  color: #0e2e24;
}

.total .label {
  font-size: 16px;
  font-weight: 600;
  color: #5b616b;
}

.pay,
.done {
  position: relative;
  min-height: 52px;
  overflow: hidden;
  isolation: isolate;
  border: 0;
  border-radius: 999px;
  background: #176b52;
  color: #fff;
  font:
    700 16px system-ui,
    sans-serif;
  cursor: pointer;
  user-select: none;
  touch-action: none;
}

.pay-fill {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #0e2e24;
}

.done {
  background: #0e2e24;
}

Cara kerjanya

MotionList meluncurkan baris baru masuk dan baris yang dihapus keluar.
MotionNumber memformat mata uang dengan intl dan menggulirkan setiap perubahan, termasuk pergantian mata uang.
MotionPresence menjaga pesan kupon tetap terpasang saat ia pergi.
MotionHold meminta tekan dan tahan sebelum membayar; melepas terlalu cepat memundurkannya.

Ringkasan checkout

Cara kerjanya

Contoh lainnya

Cari