أداة حاسبة الذهب: دليل التضمين والاستخدام
قدّم لزوار موقعك حسابات دقيقة وتفاعلية لأسعار المعادن الثمينة. تتيح أداة حاسبة الذهب تقييمًا فوريًا لكل من الذهب والفضة عبر مختلف العيارات ووحدات الوزن و150 عملة عالمية دون أي حاجة للصيانة.
1. البدء السريع: تضمين الأداة في موقعك
تضمين الحاسبة سهل ومباشر. أضف كود السكربت وعنصر HTML المخصص داخل وسم <body> في المكان الذي ترغب بظهور الأداة فيه:
<!-- تحميل محرك الأداة -->
<script src="https://www.forexinvestors.com/widgets/gold-calculator/widget.js"></script>
<!-- عنصر حاسبة الذهب -->
<gold-calculator-widget
lang="ar"
currency="USD"
show-header="on"
header-text="حاسبة الذهب"
theme="default"
border-radius="5">
</gold-calculator-widget>نصيحة للأداء: يكفي استيراد ملف السكربت widget.js مرة واحدة فقط في الصفحة، حتى عند تضمين عدة حاسبات في نفس الصفحة.
2. خصائص التخصيص والإعدادات
يمكنك التحكم في المظهر والوضع الافتراضي للأداة عبر تعديل الخصائص على عنصر <gold-calculator-widget>:
| الخاصية | النوع | القيمة الافتراضية | الوصف |
|---|---|---|---|
lang |
نص (String) | en |
تحدد لغة الواجهة وتنسيق الأرقام (en، ar، fr، es، ru). وتفعّل تلقائيًا اتجاه العرض من اليمين إلى اليسار (RTL) للغات مثل العربية (ar). |
currency |
نص (String) | USD |
رمز العملة الافتراضية عند التحميل وفق معيار ISO 4217 (مثل USD، EUR، GBP، SAR، AED، EGP، INR). |
show-header |
نص (String) | on |
التحكم في إظهار أو إخفاء شريط عنوان الأداة (on للإظهار أو off للإخفاء). |
header-text |
نص (String) | Gold Calculator |
نص العنوان المخصص الذي يظهر في رأس الأداة عندما تكون show-header="on" (الافتراضي هو العنوان المترجم للغة المختارة). |
header-link |
نص (String) | https://www.goldpricedata.com/ |
رابط اختياري (http أو https) لعنوان الأداة العلوي. |
theme |
نص (String) | default |
اختيار نمط الألوان: default، blue، green، yellow، red، ocean، purple، teal، dark، rose، أو custom. |
border-radius |
رقم (Number) | 5 |
درجة استدارة الحواف بالبكسل لإطار الأداة والحقول (عدد صحيح من 0 إلى 20 في أداة الإعداد، ويدعم حتى 50، مثل 0، 5، 12). |
خصائص ألوان المظهر المخصص (Custom Theme)
عند ضبط theme="custom"، يمكنك تخصيص ألوان الأداة باستخدام أكواد الألوان السداسية المكونة من 6 خانات (بدون علامة #):
| الخاصية | القيمة الافتراضية | الوصف |
|---|---|---|
bg-color |
F6F6F6 |
لون خلفية حاوية الأداة. |
border-color |
BCBCBC |
لون الإطار الخارجي للأداة وحقول الإدخال. |
text-color |
222222 |
لون النص الأساسي للعناوين والحقول والتاريخ. |
input-bg-color |
FFFFFF |
لون خلفية حقول الإدخال والقوائم المنسدلة ومربع النتيجة. |
bg-color-button |
535353 |
لون خلفية أزرار الشريط السفلي. |
button-border-color |
2E2E2E |
لون إطار أزرار الشريط السفلي. |
button-hover-color |
8A8A8A |
لون التمييز عند تمرير المؤشر فوق الأزرار السفلية وخيارات قائمة العملات. |
3. مميزات الأداة للمستخدم النهائي
يستفيد زوار موقعك عند استخدام الحاسبة من المزايا المدمجة التالية:
- دعم الذهب والفضة: التبديل الفوري بين الذهب والفضة مع تحديث قائمة العيارات والنقاء تلقائيًا حسب المعدن المختار.
- تشكيلة شاملة من العيارات ودرجات النقاء:
- عيارات الذهب:
24K(.999)،23K(.965)،22K(.916)،21K(.875)،18K(.750)،14K(.585)،12K(.500)،10K(.417)،9K(.375)، و8K(.333). - عيارات الفضة:
999(فضة نقية)،958(بريتانيا)،925(فضة إسترليني)،900(فضة العملات)، و800(فضة المجوهرات).
- عيارات الذهب:
- مرونة الوزن ووحدات القياس: إدخال أي وزن مخصص والتبديل بين وحدات قياس المعادن الثمينة القياسية: الأوقية (الأونصة الترويسية)، الجرام، والتولة.
- قائمة عملات قابلة للبحث مع الأعلام: تصفح 150 عملة عالمية مقسمة إلى العملات المفضلة (
USD،EUR،GBP،CAD،AUD،JPY،CHF،INR،AED،SAR) وجميع العملات، مع أعلام الدول وتصفية بحث فورية ودعم التنقل بلوحة المفاتيح. - عزل التنسيقات عبر Shadow DOM: تعمل الأداة داخل بيئة Shadow DOM معزولة لضمان عدم تعارض تنسيقات موقعك مع تصميم الحاسبة.
- توقيت آخر تحديث للأسعار: تعرض الأداة تاريخ ووقت آخر مزامنة لأسعار السوق في الشريط السفلي إلى جانب روابط سريعة لمصدر البيانات وصفحة إعداد الأداة (
+).
4. تعليمات التضمين في أنظمة إدارة المحتوى (CMS)
ووردبريس (WordPress / Gutenberg & Elementor)
- أضف مكوّن HTML مخصص (Custom HTML) في المقال أو الصفحة أو الشريط الجانبي.
- الصق كود السكربت وعنصر
<gold-calculator-widget>الناتج أعلاه. - احفظ الصفحة أو انشرها.
Webflow وWix وShopify
- أدرج عنصر تضمين كود مخصص (Embed / Custom Code) في تخطيط الصفحة.
- الصق كود تضمين الأداة.
- تأكد من أن عرض الحاوية الأب لا يقل عن
280pxإلى360pxلضمان أفضل محاذاة للحقول في عمودين.
5. الأسئلة الشائعة (FAQ)
كم مرة يتم تحديث أسعار الذهب والفضة في الأداة؟
يتم تحديث الأسعار كل 5 دقائق بالاعتماد على بيانات السوق الحية للمعادن الثمينة وأسعار الصرف. يوضح الطابع الزمني أسفل الأداة وقت آخر تحديث.
هل تؤثر هذه الأداة على سرعة تحميل موقعي؟
لا. سكربت Web Component خفيف للغاية، ويجلب بيانات الأسعار بشكل غير متزامن (Asynchronous)، ويعرض الأداة داخل Shadow DOM معزول دون إعاقة تحميل الصفحة.
هل يمكنني وضع أكثر من أداة في نفس الصفحة؟
نعم. يمكنك إضافة عدة عناصر <gold-calculator-widget> بلغات أو عملات افتراضية أو قوالب ألوان مختلفة، مع تضمين وسم <script> مرة واحدة فقط في الصفحة.
هل الأداة متوافقة مع الهواتف المحمولة واللغة العربية (RTL)؟
نعم. تستخدم الأداة تخطيطًا مرنًا يتكيف تلقائيًا مع عرض الحاوية على الهواتف والأجهزة اللوحية وأجهزة سطح المكتب، وتتحول تلقائيًا إلى الاتجاه من اليمين إلى اليسار (RTL) عند اختيار lang="ar".
هل تتطلب الأداة مفتاح API أو خاصية data-endpoint؟
لا يلزم أي مفتاح API، ولا تحتاج إلى إضافة خاصية data-endpoint؛ حيث تستنتج الأداة رابط البيانات تلقائيًا من مسار ملف widget.js.