مقدمة: لماذا يُعنى جدول الخصخصة الديناميكية

ولا يمكن أن يقدم جدول ثابت ومناسب للجميع نقاط الأسعار الخاصة بك، ولكن جدول للتسعير الديناميكي - الذي يستكمل في الوقت الحقيقي على أساس تفاعلات المستعملين - يمكن أن يعزز إلى حد كبير معدلات التحويل، وذلك بإتاحة الفرصة للزوار للتنافس بين الملصقات الشهرية والسنوية، ومقارنة التكلفة الإجمالية مع ملامح الإنتاج.

إنشاء هيكل لـ "الـ "إتش تي إل" لـ "غريغ غريد

وأساس أي جدول للتسعير الدينامي هو هيكل نظيف وثابت للشبكة، وسنبدأ بحاوية ستصبح طاقتنا الخاصة بالسوق المشتركة، ثم نستخدم بطاقات التسعير الفردية داخلها، وينبغي أن تحمل كل بطاقة اسم الخطة، والسعر، وقائمة بالملامح، وزر اتصال هاتفي، ولتمكين المستجدات الدينامية، سندرج هيكلا في كل بطاقة.

<div class="pricing-grid" role="group" aria-label="Pricing plans">
 <div class="pricing-card" data-plan="basic">
 <h3 class="plan-name">Basic</h3>
 <p class="price">
 <span class="amount">$10</span>
 <span class="period">/mo</span>
 </p>
 <ul class="features">
 <li>5 projects</li>
 <li>10 GB storage</li>
 <li>Basic support</li>
 </ul>
 <a href="#" class="btn">Get Started</a>
 </div>
 <div class="pricing-card featured" data-plan="pro">
 <h3 class="plan-name">Pro</h3>
 <p class="price">
 <span class="amount">$25</span>
 <span class="period">/mo</span>
 </p>
 <ul class="features">
 <li>Unlimited projects</li>
 <li>100 GB storage</li>
 <li>Priority support</li>
 </ul>
 <a href="#" class="btn">Get Started</a>
 </div>
 <div class="pricing-card" data-plan="enterprise">
 <h3 class="plan-name">Enterprise</h3>
 <p class="price">
 <span class="amount">$50</span>
 <span class="period">/mo</span>
 </p>
 <ul class="features">
 <li>Unlimited projects</li>
 <li>1 TB storage</li>
 <li>24/7 support</li>
 </ul>
 <a href="#" class="btn">Contact Sales</a>
 </div>
</div>

ملاحظة: ] و] لتحسين إمكانية الوصول، فإن درجة على بطاقة برو تسمح لنا بإبراز الخيار الأكثر شعبية دون زيادة جافاسكوبت.

بناء مركز الـ "سي إس" للـ "جريد"

(ب) إنَّ مجموعة الـ (سي إس إس غريد) تجعل من مباشرة إنشاء شبكة مستجيبة تُعدِّل عدد الأعمدة استناداً إلى المنظر، ونعرِّف الحاوية على أنها شبكة، ونضع عدداً مرناً من الأعمدة مع [(FLT:5] و، ونضيف التباعد مع .() وفي كل بطاقة، نستخدم شبكة CSS Grid داخلياً لمواءمة السعر والمعالم والمعالم والمواصفة.

.pricing-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
 gap: 1.5rem;
 max-width: 1200px;
 margin: 0 auto;
 padding: 2rem;
}

.pricing-card {
 display: grid;
 grid-template-rows: auto auto 1fr auto;
 border: 1px solid #e0e0e0;
 border-radius: 12px;
 padding: 2rem;
 text-align: center;
 background: #fff;
 transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.pricing-card:hover {
 transform: translateY(-4px);
 box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

.pricing-card.featured {
 border: 2px solid #007bff;
 position: relative;
}

.pricing-card.featured::before {
 content: "Most Popular";
 position: absolute;
 top: -12px;
 left: 50%;
 transform: translateX(-50%);
 background: #007bff;
 color: #fff;
 padding: 4px 16px;
 border-radius: 20px;
 font-size: 0.8rem;
 font-weight: 600;
}

.plan-name {
 font-size: 1.5rem;
 margin: 0 0 0.5rem;
}

.price {
 margin: 0 0 1.5rem;
}

.amount {
 font-size: 2.5rem;
 font-weight: 700;
}

.period {
 font-size: 1rem;
 color: #666;
}

.features {
 list-style: none;
 padding: 0;
 margin: 0 0 1.5rem;
}

.features li {
 padding: 0.5rem 0;
 border-bottom: 1px solid #eee;
}

.features li:last-child {
 border-bottom: none;
}

.btn {
 display: inline-block;
 padding: 0.75rem 1.5rem;
 background: #007bff;
 color: #fff;
 text-decoration: none;
 border-radius: 8px;
 transition: background 0.3s;
}

.btn:hover {
 background: #0056b3;
}

The ensures that the blue always stays at the bottom, even if feature lists differ in length. The featured card’s “Most Popular” card is created with a pseudoelement to avoid extra markup.

إضافة نشاط جافاسكريبت

والآن يأتي الجزء الدينامي، وسنضيف مبدلاً للزوار يتبادل بين السعر الشهري والسنوي، وعندما تطرأ تغييرات على النظافة، يقوم جافاسكريب بتحديث أسعار جميع البطاقات، كما ندرج مساعداً في شكل الأسعار والانتقال السلس للتغير الرقمي.

<div class="pricing-toggle">
 <label class="toggle-label">
 <span>Monthly</span>
 <input type="checkbox" id="billing-toggle" role="switch" aria-checked="false">
 <span class="toggle-slider"></span>
 <span>Yearly (save up to 20%)</span>
 </label>
</div>

CSS for the toggle:

.pricing-toggle {
 text-align: center;
 margin-bottom: 2rem;
}

.toggle-label {
 display: inline-flex;
 align-items: center;
 gap: 0.75rem;
 cursor: pointer;
 user-select: none;
}

.toggle-label input[type="checkbox"] {
 position: absolute;
 opacity: 0;
 width: 0;
 height: 0;
}

.toggle-slider {
 width: 50px;
 height: 26px;
 background: #ccc;
 border-radius: 13px;
 position: relative;
 transition: background 0.3s;
}

.toggle-slider::after {
 content: "";
 position: absolute;
 top: 3px;
 left: 3px;
 width: 20px;
 height: 20px;
 background: white;
 border-radius: 50%;
 transition: transform 0.3s;
}

input:checked + .toggle-slider {
 background: #007bff;
}

input:checked + .toggle-slider::after {
 transform: translateX(24px);
}

جافا سريبت) الذي يُمكنه) أن يُحدث

document.addEventListener('DOMContentLoaded', () => {
 const toggle = document.getElementById('billing-toggle');
 const prices = {
 basic: { monthly: 10, yearly: 8 }, // per month when billed yearly
 pro: { monthly: 25, yearly: 20 },
 enterprise: { monthly: 50, yearly: 40 }
 };

 function updatePrices(isYearly) {
 document.querySelectorAll('.pricing-card').forEach(card => {
 const plan = card.dataset.plan;
 if (!plan || !prices[plan]) return;
 const amountElement = card.querySelector('.amount');
 const periodElement = card.querySelector('.period');
 let amount, period;
 if (isYearly) {
 amount = prices[plan].yearly;
 period = ' /mo (billed yearly)';
 } else {
 amount = prices[plan].monthly;
 period = ' /mo';
 }
 amountElement.textContent = `$${amount}`;
 periodElement.textContent = period;
 });
 }

 toggle.addEventListener('change', () => {
 const isYearly = toggle.checked;
 updatePrices(isYearly);
 toggle.setAttribute('aria-checked', isYearly);
 });

 // Initialize with monthly
 updatePrices(false);
});

وتخزن الجسمين كل من الأسعار الشهرية والسنوية، وتمثل الأسعار السنوية تكلفة الشهر عند الدفع سنويا - نمطا مشتركا، وتصدر المهمة على كل بطاقة، وتقرأ ]، وتستكمل الكمية والفترة المعروضة، كما نستكمل سمة لإبقاءها في متناولها.

تعزيز العملية الانتقالية

ولجعل تغيير الأسعار سلسا، يمكننا أن نضيف انتقالا قصيرا من خدمات الدعم المركزية إلى عناصر و ]، ولكن بما أن ]] تغيرات فورية، يمكننا أن نحفز أثرا في العد مع فترة زمنية قصيرة، أو أن نستخدم ببساطة دواءا، بالنسبة لموقع إنتاجي، انتقال سريع في حالة عدم جدوى على حاوية الأسعار يعمل جيدا.

.price {
 transition: opacity 0.2s ease;
}

.updating .price {
 opacity: 0;
}

ثم في جافاسكريبت، أضيف وأزيلت فصل ] على كل بطاقة، ولكن بالنسبة لمعظم الحالات المستخدمة، فإن التحديث الفوري لا بأس به.

جعل الجدول مستجيباً ومتاحاً

وتتولى مؤسسة CSS Grid بالفعل الاستجابة، ولكن تكفل أن تكون البطاقات في عمود واحد على شاشات صغيرة جداً، وأن تكون القيمة هي التي تقوم بذلك تلقائياً، ولكي يتسنى الوصول إليها، يجب أن نكفل أن يكون الضحك قابلاً للتشغيل ويعلن عن دولته.

إضافة إلى ذلك، تقدم مؤشر تركيز واضح لمستخدمي اللوحات الرئيسية، مخطط الفشل يعمل، لكن يمكنك أن تُطابقه مع علاماتك التجارية:

.toggle-label input:focus-visible + .toggle-slider {
 outline: 2px solid #007bff;
 outline-offset: 4px;
}

اختبار طاولة التسعير مع قارئ الشاشة للتحقق من أن تغيرات الأسعار قد أعلنت، ولتحسين ذلك، بعد استكمال السعر، يمكنك استخدام منطقة حية:

<div aria-live="polite" aria-atomic="true" class="sr-only"></div>

ثم في جافاسكريبت، وضع نصه على شيء مثل " التسعيرات المستكملة إلى الفواتير السنوية " بعد كل من المناظرة، وهذا العنصر المرتدئ المرئي سيعلن التغيير دون انقطاع بصري.

إضافة المزيد من الصور الدينامية

بمجرد أن يعمل النواة الأساسية، يمكنك توسيع طاولة التسعير مع التفاعل الإضافي:

النظارات المميزة

إضافة صناديق تسجيل للإضافات (مثل التخزين الإضافي وأعضاء الفريق) التي تستكمل السعر الإجمالي، وتخزن أسعار الأساس وتكاليف إضافة الأضافات في جسم ما، وعندما تتغير صناديق التفتيش، تعيد حساب المجموع لكل بطاقة تبعا لذلك.

المهنة

وإذا كان جمهوركم عالمياً، يضاف هبوطاً في اتجاه التحول بين دولار الولايات المتحدة، وهى من فئة EUR، وGBP، وما إلى ذلك.

سعر الصرف المتحرك

ولأجل التأثير المكبوت، يُقلل العدد من القيمة القديمة إلى القيمة الجديدة على بضع مئات من المليارات، ولا يلزم توفير المكتبات مثل animate.cs - أي عمل بسيط ، غير أنه يُبقيها تؤدي: مجرد تقدير للبطاقات الظاهرة.

الوفورات بادج

وعندما يتم تخطيط الفواتير السنوية، تظهر شارة " الإنقاذ 20 في المائة " بجانب السعر، وتحسب الوفورات بأنها وتظهرها دينامية.

اعتبارات الأداء

مع بضع بطاقات تسعير فقط، الأداء ليس مصدر قلق، ولكن إذا كان لديك عشرات الخطط (مثلاً، نظام سايس الذي يولد خططاً من قاعدة بيانات)، فإعتبار هذه التقديرات:

  • Use event delegation:] Attach an event listener to a parent container instead of each card. For the toggle, that’s already done. For checkboxes inside cards, delegate.
  • Cache DOM references:] On initialization, store references to the and ] elements in an array or Map by plan key. then, when updating, you don’t need to que the DOM again.
  • Usese ] for animations:] Schedule visual updates for the next paint cycle to avoid layout thrashing.
  • ]Minimize reflows:] Batch DOM changes when updating multiple cards. In our ] function, we read and write to the DOM in a single cycle - that’s fine. If you add classes or inline fashions, consider reading all values first, then writing all changes.

حالات الاستخدام العالمي الحقيقي والأمثلة

وتستخدم جداول التسعير الدينامي في كل مكان من خدمات الاشتراك مثل ]FLT:0[Dropbox و]() تُعرّف لاستضافة مقدمي الخدمات مثل DigitalOcean.

وثمة تغيير آخر هو تقلص حجم المنتجات من أجل الكمية، وقد يكون من شأن جدول تسعير منتج من منتجات شركة ساسا أن يكون له مزلاجات لعدد المستخدمين أو التخزين، حيث يقوم المستخدم بنقل الشريحة، فإن تحديث الأسعار على الهواء، ويعالج المخطط، ويستكمل شركة جافاسكريب قيم الأسعار، ويمكن بناء ذلك بنفس المبادئ: المدونات الجاهزة للبيع، والاستماع إلى التغييرات في المدخلات، وتحديث إدارة الشؤون الإدارية.

وتوخياً لنهج أكثر تقدماً، يمكنك تحميل بيانات التسعير من ملف (الوكالة المشتركة بين الدول المستقلة) أو (المكتب) لجعل الجدول محركاً فعلياً للبيانات، وإذا تم بناء موقعك بجهاز قياسي لا يُعقل، مثل (جيروس)، فإن بيانات التسعير ستأتي من مجموعة، و(جافاسكريب) ستجلبه وتجعل الشبكة دينامية، وهذا النهج يحافظ على التطابق مع ظهرك.

دعم الاختبارات والزهور

CSS Grid is supported in all modern browsers, including Internet Explorer 11 with the prefix — though we recommend using Autoprefixer or ignoring IE11 for new projects. The JavaScript used here (ES6 , , arrow functions,

النهج البديل: مقياس البرمجيات المشبع بالفلور مع مقاييس البرمجيات

ومن الطرق الهامة التي تتفادى جافاسكورت لتجميع الأسعار استخدام السلع الأساسية و] (عندما ينضج دعم المروجين) - فإنكم ستضعون الأسعار على أنها وما إلى ذلك، وتغيرونها عن طريق تجميع طبقة على الجسم، ولكن المنطق الدينامي الحقيقي (مثلا، إضافة اثنين من الإضافة).

خاتمة

(ب) بناء جدول للتسعير الدينامي مع شركة " جافاسكوريب " و " CSS Grid " قابل للتحقيق وموسع، وببدء استخدام نظام HTML، وبهيكل شبكة مع شركة CSS Grid، وبإضافة نظام مباشر للتفاعل، فإنكم تبتكرون أداة يمكن أن تتكيف مع نماذج التسعير المعقدة دون مستويات متفاوتة.

الآن نفذ هذه الأنماط في مشروعك الخاص، مستعمليك سيقدرون الوضوح، وأسعار التحويل قد تشكرك