Javascript ve CSS Grid ile dinamik bir fiyat tablosu oluşturmak

Giriş: Neden Dinamik Fiyatlandırma Masa Maddeleri

Fiyat tabloları herhangi bir ürün veya hizmet web sitesinin bir temel taşıdır. Bir statik, tek boyutlu-fits-all masası fiyat puanlarınızı sunabilir, ancak aENFLT:0)dinamik fiyat tablosu) - gerçek zamanlı olarak güncellenen bir ürün - ziyaretçileri aylık ve yıllık faturalar arasında tutmanıza izin vererek, toplam maliyeti ekleyen veya interaktif olarak, şeffaf ve ilgi çekici bir deneyim yaratırsınız.Bu kılavuzda, gerçek zamanlı olarak, doğru bir şekilde dönüşüm oranları ve CSS ve uygulamaktadır.

Bir Fiyatlama için HTML Yapısını Ayarlayın

Herhangi bir dinamik fiyat tablosunun temeli temiz, semantik HTML yapısıdır. CSS Grid'imiz olacak bir konteynerle başlayacağız, sonra her kartta ve JavaScript ile hedefleyebileceğimiz bir sınıfla fiyat.

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

Mevcut ve [[Döneticileri) erişilebilirliği artırmak için not edin. Pro kartında sınıf, ekstra JavaScript olmadan en popüler seçeneği vurgulamamıza izin verir.

CSS Grid Layoutout

CSS Grid, her karta dayanan sütun sayısını ayarlayan bir ağ oluşturmak için basit bir şekilde yapar.Bir ağ olarak konteyneri bir ağ olarak tanımlarız, [[Dönetici: 5) ve [[DÜcretsiz bir ağ oluşturmak için basit bir şekilde ayarlıyoruz.

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

[[Dind: 9) düğmenin her zaman altta kalmasını sağlar, hatta özellik listeleri uzun süre farklı olsa da, "En Popüler" kötüge ekstra işaretten kaçınmak için bir piçle oluşturulur.

JavaScript Interaktivite eklemek

Şimdi dinamik bir bölüm geliyor. Ziyaretçilerin aylık ve yıllık fiyat arasında geçiş yapmasına izin veren bir toggle geçişi ekleyeceğiz. Tüm kartlar için fiyatlar güncelliyor. Ayrıca, toplam döviz fiyatları ve numeric değişim için bir yardımcı ekledik.

<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 bu güncellemeyi güçler:

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

[FONT: 9) Her ay ve yıl boyunca depolar. Yıl fiyatları, her yıl ödeme yaparken ayda aylık maliyeti temsil eder - ortak bir model.The functionETHFLT:14] her kart üzerinden iterates, görüntülenen miktarı ve süresini günceller.

Geçişi Teşvik Etmek

Fiyat değişikliği düzgün hissetmek için, küçük bir aralığı ile bir hesap açın veya sadece bir üretim sitesi için, fiyat konteynerinde hızlı bir opaklık geçişi iyi çalışır.

.price {
 transition: opacity 0.2s ease;
}

.updating .price {
 opacity: 0;
}

Sonra JavaScript'te, her kartta kısaca sıralanır ve kaldırılır. Ama çoğu kullanım vakası için, anlık güncelleme iyi.

Masa Sorumluluk ve Accessible yapmak

CSS Grid zaten duyarlılığı ele geçiriyor, ancak kartların tek bir sütunda toplandığını garanti ediyor.TheurFLT:22) değer otomatik olarak erişilebilirlik için, ayak uçmasını ve durumunu duyurmalıyız.TheurFLT:23 ve [[FONTFLT:24) Ayrıca ekran okuyucularına yardımcı oluyoruz.

Ayrıca, klavye kullanıcıları için görünür bir odak göstergesi sağlar. varsayılan taslak çalışır, ancak markanızı eşleştirmek için stillayabilirsiniz:

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

Fiyat değişikliklerini doğrulamak için bir ekran okuyucu ile fiyat tablounu test edin. Bunu geliştirmek için, fiyatı güncellemeden sonra, canlı bir bölge kullanabilirsiniz:

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

Sonra JavaScript'te, her toggletan sonra "Prices" gibi bir şeye metni ayarladı. Bu ekran hazırlayıcı-yalnızca element, görsel kesinti olmadan değişikliği duyurur.

Daha fazla Dinamik Özellikler Ekle

Çekirdek toggle işe başladığında, fiyat masasını ek Interaktivite ile genişletebilirsiniz:

Özel Toggles

Add-ons (e.g., ekstra depolama, takım üyeleri) toplam fiyatı güncelleyen ve bir nesnede fiyat ekleyen çekboxlar ekleyin.Bir çekbox değişikliği olduğunda, her kart için toplamı tekrar hesaplayın.

Para Seçoratörü

Eğer seyirciniz globalse, USD, EUR, GBP vb. Mağaza dönüşüm oranları arasında geçiş yapmak ve temel fiyatı çoğaltmak için bir düşüş ekleyin. Güncellemesi için uygun para formatlama ile metin Güncellemesi: 03.

Animasyon Fiyat Counter

Bir polis etkisi için, eski değerden birkaç yüz milisaniye üzerinde yeni değere bir sayı.([Döneticiler) gibi kütüphaneler gerekli değildir - basit bir şekilde çalışır.

Tasarrufları

Yılca faturalama, HTML'deki her karta sığmak ve bunu uçta hesaplamak için bir “% 20 tasarruf” göstermektir.

Performansı Tahmin Ediyor

Sadece birkaç fiyat kartıyla performans endişe değil. Ama onlarca planınız varsa (örneğin, bir veritabanından plan üreten SaaS), bu optimizasyonları dikkate alın:

Gerçek Dünya Vakaları ve Örnekleri Kullanıyor

Dinamik fiyat masaları, abonelik servislerinden her yerde kullanılabilir.Dropbox) ve [[Dropbox) gibi bir aylık tasarrufa sahip olarak, $ 10 / 10 $ (Drop) ile ortak bir model, yılda bir "En İyi Değer" etiketi ile kayıt altına almak için aylık olarak.Bazı şirketler ayrıca aylık tasarruflara bir sonraki toplam yıllık ücreti gösterir. Örneğin, yıllık bir 10 / milyon dolarlık bir plan.

Bir başka varyasyon miktar için kayaç ölçekleri. Bir SaaS ürünü için fiyat tablosu, kullanıcı veya depolama için kaydırıcı olabilir. Kullanıcı kaydırıcı, fiyat güncellemeleri yaşarken, CSS Grid düzeni ele alır ve JavaScript aynı ilkelerle inşa edilebilir: mağaza fiyat tiers, giriş değişiklikleri dinlemek ve DOM'yu güncellemek.

Daha gelişmiş bir yaklaşım için, bir JSON dosyası veya API'den fiyat yükleyebilirsiniz, masanıza gerçekten veri odaklı hale getirir. Siteniz Directus gibi bir kafasız CMS ile inşa edilirse, fiyat verileri bir koleksiyondan gelir ve ön uç JavaScript'iniz onu getirir ve ağ dinamiğinizi sağlar.

Test ve Tarayıcı Destek

CSS Grid, Internet Explorer 11 dahil olmak üzere tüm modern tarayıcılarda destekleniyor - Autoprefixer veya IE11'i yeni projeler için görmezden gelmenizi tavsiye ederiz.S6:42 ve geleneksel fonksiyonlar, [[Döneticiler,|s.) Chrome'da işe alındı, Firefox, ve Edge.If you need to support old browsers, transpile with Babel or use here (ES6:42 ve geleneksel fonksiyonlar.)

Alternatif Yaklaşım: CSS Grid with CSS Custom Properties

JavaScript'i toggling fiyatlar için önlemek için ilginç bir yöntem, CSS Özel Özellikleri ve GÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜN (İsviçreviçre destek olgunları) kullanmak ve dinamik veriler için - en sağlam olanıdır.

Sonuç Sonuç Sonuç Sonuç Sonuç Sonuç Sonuç Sonuç

JavaScript ve CSS Grid ile dinamik bir fiyat masası inşa etmek hem de kullanılabilir ve genişletilebilir.Saratıcı güncellemeler, duyarlı düzen, erişilebilir kontroller - bir sonraki adım olarak, MDN CSS belgeleri için basit bir JavaScript ekleyin (Döneticileri için karmaşık fiyatlara adapte edilebilir)

Şimdi bu kalıpları kendi projesinizde uygulayın. Kullanıcılarınız netliği takdir edecek ve dönüşüm oranlarınız size teşekkür edebilir.