تنسيق الأسعار

المشكلة

عرض السعر يتضمن كلاً من الرقم والعملة. السعر الأمريكي هو $1,200.50، بينما نفس القيمة باليورو قد تكون 1 200,50 € في ألمانيا. موضع رمز العملة، وفاصل الكسور العشرية، وفاصل التجميع جميعها تتغير، وكتابة هذه القواعد بشكل ثابت لكل لغة أمر غير قابل للإدارة.

الحل

استخدم مكون FormattedNumber من react-intl مع خيار style: 'currency'. يقرأ هذا المكون اللغة الحالية من المزود الخاص به ويقوم بتنسيق الرقم كسعر، مع التعامل تلقائيًا مع موضع الرمز، وفواصل الكسور العشرية، والتجميع للغة والعملة المحددة.

الخطوات

1. إنشاء مكون عميل للأسعار

يجب استخدام مكونات التنسيق من react-intl داخل مكونات العميل.

قم بإنشاء مكون جديد، app/components/ProductPrice.tsx.

// app/components/ProductPrice.tsx
'use client';

import { FormattedNumber } from 'react-intl';

type Props = {
  price: number;
  currencyCode: string; // e.g., "USD", "EUR", "JPY"
};

export default function ProductPrice({ price, currencyCode }: Props) {
  return (
    <FormattedNumber
      value={price}
      style="currency"
      currency={currencyCode}
    />
  );
}

2. تمرير خيارات التنسيق

يتم التحكم في مكون FormattedNumber بواسطة هذه الخصائص:

• value: القيمة الرقمية للسعر.
• style: 'currency': هذا يخبر المكون بتنسيق الرقم كعملة، وليس كعدد عشري قياسي.
• currency: رمز العملة المكون من ثلاثة أحرف وفقًا لمعيار ISO (مثل 'USD'، 'EUR'). هذا مطلوب عند استخدام style: 'currency'.

3. استخدام المكون في صفحة

يمكنك الآن استخدام هذا المكون في مكونات الخادم أو العميل لعرض الأسعار.

// app/[lang]/page.tsx
import ProductPrice from '@/app/components/ProductPrice';

export default function Home() {
  const product = {
    price: 1299.99,
    currency: 'USD',
  };

  const productInEuros = {
    price: 1199.5,
    currency: 'EUR',
  };

  return (
    <div>
      <h1>Product</h1>
      <p>
        Price (USD): <ProductPrice price={product.price} currencyCode={product.currency} />
      </p>
      <p>
        Price (EUR): <ProductPrice price={productInEuros.price} currencyCode={productInEuros.currency} />
      </p>
    </div>
  );
}

سيرى المستخدم الذي يزور /en "Price (USD): $1,299.99" و "Price (EUR): €1,199.50". وسيرى المستخدم الذي يزور /es "Price (USD): 1299,99 US$" و "Price (EUR): 1199,50 €".