הקדמה: למה חשוב שולחן דינמית

טבלאות מחירים הן אבן הפינה של כל אתר מוצר או שירות.A סטטי, שולחן בגודל אחד יכול להציג את נקודות המחיר שלך, אבל FLT:0דינמית טבלת המחירים ריצוף 101 - אחד שעדכונים בזמן אמת על אינטראקציות משתמשים - יכול להגדיל באופן משמעותי את שיעורי ההמרה.על ידי כך שמבקרים לא יוכלו להתגבר בין דפדפנים חודשיים ושנתיים, לראות את העלות הכוללת עם תוספות, או להשוות תכונות אינטראקטיביות, ליצור תמחור ויזואלי, ללא קשר קבוע, ללא קשר עם קומפקטי, וחוויה סטנדרטית, דינמית.

הקמת מבנה HTML עבור רשת מחירים

הבסיס של כל טבלת תמחור דינמי הוא מבנה HTML נקי, סמנטי.נחיל עם מיכל שהפך לרשת ה- CSS שלנו, ואז קן כרטיסי תמחור בודדים בתוכו.כל כרטיס צריך להחזיק את שם התוכנית, מחיר, רשימת תכונות, ולחיצת טלפון אל-פעולה.כדי לאפשר עדכונים דינמיים, אנו כוללים תכונת FLT:0 על כל כרטיס ומבנה עם ציון יכול להיות מטרה עם JavaScript.

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

(הופנה מהדף [[1924]] ו[[1924]]]], [[1924]]]]]], [[1924]]]]]], [[1924]]]]]], [[1924]]]]]]]]]], [[1924]]]]]]]], [[1924]]]]]]]], [[1924]]]]]]]]

בניית ה-CSS Grid Layout

CSS Grid עושה את זה פשוט ליצור רשת קשובה אשר מאמת את מספר העמודות על בסיס התצוגה.We מגדיר את המכולה כרשת, להגדיר מספר גמיש של עמודות עם FLT:5 ו-FLT:6, ולהוסיף ספא עם 7FLT 7 בתוך כל כרטיס, אנו משתמשים CSS פנימי כדי להתאים את המחיר, תכונות, כפתור.

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

ה-FLT:9 מבטיח שהלחצנים תמיד נשארים בתחתית, גם אם רשימות תכונה שונות באורך.התג "הפופולרי ביותר" של הכרטיס נוצר עם כותרת כדי למנוע תוספת סימן.

הוספת JavaScript Interactivity

עכשיו מגיע החלק הדינמי.We'llוסיף מתג מתפתל המאפשר למבקרים לעבור בין מחירים חודשיים ושנה.כאשר השינויים המתפתלים, JavaScript מעדכנת את המחירים עבור כל הקלפים.We כוללים גם עוזר לעצב מחירים ומעבר חלק לשינוי המספרי.

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

JavaScript שמחייב את העדכון:

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

(ב) ,ב"ד (ב)"המחירים" (בשנה) מייצגים את העלות החודשית כאשר משלמים מדי שנה - דפוס משותף.התפקיד FLT:14) מעל כל כרטיס, קורא את העלות שלו (FLT:15), ומעדכן את הסכום המוצג ואת התקופה.

המונחים: the Transition

כדי להפוך את השינוי במחיר מרגיש חלק, אנו יכולים להוסיף מעבר CSS קצר על פני השטח (FLT:17 ו ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ 

.price {
 transition: opacity 0.2s ease;
}

.updating .price {
 opacity: 0;
}

לאחר מכן ב- JavaScript, הוסף בקצרה וסיר את שיעור ה-FLT:21 בכל כרטיס, אך עבור רוב המקרים השימוש, העדכון המיידי הוא בסדר.

ביצוע שולחן אחריות וגישה

CSS Grid כבר מטפל בהיענות, אך להבטיח כי על מסך קטן מאוד את ערימה הקלפים בעמודה אחת.ערך ה- 22 של ה-FLT עושה זאת באופן אוטומטי.עבור נגישות, עלינו להבטיח כי העגש הוא קלף מקלדת ומכריז על מדינתו.

בנוסף, לספק אינדיקטור בולט עבור משתמשי מקלדת.התחילת ברירת המחדל עובדת, אבל אתה יכול לעצב אותו כדי להתאים את מיתוג שלך:

.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>

לאחר מכן ב- JavaScript, הגדר את הטקסט שלה למשהו כמו "מחירים מעודכנים עד שנתי חיוב" לאחר כל רכיב קורא מסך זה רק יכריז על השינוי ללא הפרעה חזותית.

הוספת תכונות דינמיות

לאחר יצירת הליבה, אתה יכול להרחיב את שולחן התמחור עם אינטראקציה נוספת:

תגית: toggles

הוסף תיבות בדיקה עבור תוספות (למשל, אחסון נוסף, חברי הצוות) שעדכון המחיר הכולל.אחסן את מחירי הבסיס ולהוסיף עלויות על אובייקט.כאשר תיבת צ'ק משתנה, לחשב מחדש את הסכום עבור כל כרטיס בהתאם.

מטבע Selector

אם הקהל שלך הוא גלובלי, להוסיף ירידה לעבור בין USD, EUR, GBP, וכו 'חנות שיעורי המרה להכפיל את מחיר הבסיס.עדכון טקסט FLT:28 עם מטבע מתאים פורמט באמצעות מטבע תקין באמצעות FPLT:29.

מחיר האנימציה

להשפעה מלוטשת, להוליד את המספר מהערך הישן לערך החדש מעל כמה מאות אלפי שניות.ליבריות כמו FLT:0 .csssssigtureFLT:1 אינם נדרשים - פשוט (FLT:30 לולאה עובד).

חיסכון Badge

כאשר החיוב שנתי הוא להקדים, להראות תג "מעל 20%" ליד המחיר, לחשב את החיסכון כמו FLT:31 ולהציג אותו באופן דינמי.

שיקולים

עם רק כמה כרטיסי מחיר, הביצועים אינם דאגה, אבל אם יש לך עשרות תוכניות (למשל, SaaS שיוצר תוכניות ממסד נתונים), שקול את האופטימיזציה הזו:

  • משלחת אירוע FLT:0 (Use Event Expeditionir: 1FLT) צורף להאזין לאירוע למכל ההורים במקום לכל כרטיס.
  • (ב) ויקרא י"א: "בְּהִנְטַה אֱלֹהִים אֱלֹהִים אֲשֶׁר נָתַהָּעָה, וְאֶת הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא
  • (ב) [15] ,0) ,Use (FLT:35) עבור אנימציה: ⁇ FLT 1 תזמון עדכונים חזותיים עבור מחזור הצבע הבא כדי למנוע פריצה.
  • (ב) ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇

דוגמאות לשימוש אמיתי בעולם

טבלאות תמחור דינמיות משמשות בכל מקום משירותי המנויים כמו FLT:0DropirboxFLT 1 ו-FLT:2SpotifyFLT 3 כדי לארח ספקים כמו FLT:4DigitalOcean אורך:5 דפוס משותף הוא להציע טופס חודשי / שנה כדי לקבל תווית "ערך הטוב ביותר" על האפשרות של כמה חברות יכול גם להיות אחראי על ידי $ 10 / $ לשנה.

וריאציות אחרות הן קשקשים עבור כמות.שולחן מחירים עבור מוצר SaaS עשוי להיות שקופיות עבור מספר משתמשים או אחסון. כמו המשתמש מעביר את השקופית, עדכוני המחירים חיים. CSS Grid מטפל הפריסה, ו- JavaScript מעדכן את ערכי המחירים.זה יכול להיות בנוי עם אותם עקרונות: מחסנית מחירים, להקשיב לשינויים קלט, לעדכן את DOM.

לגישה מתקדמת יותר, אתה יכול לטעון נתונים תמחור של קובץ JSON או API, מה שהופך את השולחן באמת מונע נתונים.אם האתר שלך בנוי עם CMS חסר ראש כמו Directus, נתוני התמחור יבואו מאוסף, ואת JavaScript הקדמי שלך יחזיר אותו ולהפוך את הרשת דינמי.

בדיקות ותמיכה בדפדפן

(הופנה מהדף ה-CSS Grid) נתמך בכל הדפדפנים המודרניים, כולל Internet Explorer 11 עם ה-FLT:38 prefix - אם כי אנו ממליצים להשתמש ב- Autoprefixer או להתעלם IE11 עבור פרויקטים חדשים.The JavaScript המשמש כאן (ES6FLT:39, , ⁇ :40 , פונקציות חץ, FLT:41 , תבניות) פועל ב-Chrome, Firefox, Edge, ואם אתה צריך תמיכה בדפדפן רגיל, כולל קונסולהקוד פתוח, כולל , כולל , כולל קונסולת משחקים מודרניים, 3.

גישה חלופית: CSS Grid עם CSS Custom Properties

שיטה מעניינת להימנע מ- JavaScript עבור מחירי ה-CSS Custom Properties ו-FLT:45 (כאשר תמיכה בדפדפן בוגרת) היית קובע את המחירים כ-FLT:46 וכו ', ולשנות אותם על ידי הובלת מעמד על הגוף.עם זאת, עבור לוגיקה דינמי אמיתי (למשל, הוספת שני תוספות), JavaScript עדיין נדרש.

מסקנה

[ב] בניית שולחן תמחור דינמי עם JavaScript ו- CSS Grid הוא גם אמין ומרחיב.על ידי החל ב- HTML סמנטי, להורות לרשת עם CSS Grid, והוספת JavaScript פשוט לאינטראקציה, אתה יוצר כלי שיכול להתאים למודלים מורכבים ללא תלות נפיחות מורכבת.

עכשיו ליישם את הדפוסים האלה בפרויקט שלך, המשתמשים שלך יעריכו את הבהירות, ואת שיעורי ההמרה שלך עשויים להודות לך.