ಚೆಕ್‌ಔಟ್ ಸಾರಾಂಶ

ಕಾರ್ಟ್ ಬದಲಾದಂತೆ ಪ್ರಮಾಣಗಳು, ಸಾಲು ಮೊತ್ತಗಳು ಮತ್ತು ಒಟ್ಟು ಉರುಳುತ್ತವೆ; ಕೂಪನ್ ಸೂಚನೆ ಬಂದು ಹೋಗುತ್ತದೆ; ಪಾವತಿಗೆ ಉದ್ದೇಶಪೂರ್ವಕ ಹಿಡಿತ ಬೇಕು.

MotionListMotionNumberMotionPresenceMotionHold

ಉದಾಹರಣೆ ಸಿದ್ಧವಾಗುತ್ತಿದೆ…

JavaScript ಆಫ್ ಆಗಿದೆ. ಕೆಳಗಿನ ಕೋಡ್ ಪೂರ್ಣ ಉದಾಹರಣೆ.

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

ಇದು ಹೇಗೆ ಕೆಲಸ ಮಾಡುತ್ತದೆ

MotionList ಹೊಸ ಸಾಲುಗಳನ್ನು ಒಳಗೆ ಮತ್ತು ತೆಗೆದವನ್ನು ಹೊರಗೆ ಜಾರಿಸುತ್ತದೆ.
MotionNumber intl ನಿಂದ ಕರೆನ್ಸಿ ಫಾರ್ಮ್ಯಾಟ್ ಮಾಡಿ, ಕರೆನ್ಸಿ ಬದಲಾವಣೆ ಸೇರಿ ಪ್ರತಿ ಬದಲಾವಣೆಯನ್ನು ಉರುಳಿಸುತ್ತದೆ.
MotionPresence ಕೂಪನ್ ಸಂದೇಶ ನಿರ್ಗಮಿಸುವಾಗ ಅದನ್ನು ಮೌಂಟ್ ಆಗಿಡುತ್ತದೆ.
MotionHold ಪಾವತಿಯ ಮೊದಲು ಒತ್ತಿ ಹಿಡಿಯಲು ಕೇಳುತ್ತದೆ; ಬೇಗ ಬಿಟ್ಟರೆ ಹಿಂದಕ್ಕೆ ಸರಿಯುತ್ತದೆ.

ಚೆಕ್‌ಔಟ್ ಸಾರಾಂಶ

ಇದು ಹೇಗೆ ಕೆಲಸ ಮಾಡುತ್ತದೆ

ಇನ್ನಷ್ಟು ಉದಾಹರಣೆಗಳು

ಹುಡುಕಿ