Introduzione: Perché un tavolo di prezzi dinamico

I tavoli di prezzo sono un punto di riferimento di qualsiasi sito web di prodotto o servizio. Una tabella statica, one-size-fits-all può presentare i punti di prezzo, ma un tabella di prezzi dinamica[] – uno che aggiorna in tempo reale sulla base delle interazioni degli utenti – può aumentare significativamente i tassi di conversione.

Impostazione della struttura HTML per una griglia di prezzi

La base di qualsiasi tabella di prezzi dinamica è una struttura HTML pulita e semantica. Iniziamo con un contenitore che diventerà il nostro CSS Grid, quindi nidifica singole carte di prezzo all'interno di esso. Ogni scheda dovrebbe contenere il nome del piano, il prezzo, un elenco di caratteristiche e un pulsante call-to-action. Per consentire aggiornamenti dinamici, includeremo un attributo su ogni scheda e strutturare il contenitore di prezzo con una classe che possiamo targetzzare con 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>

Notare il e ] per migliorare l'accessibilità. La classe [ sulla scheda Pro ci permette di evidenziare l'opzione più popolare senza JavaScript extra.

Costruire il layout CSS Grid

CSS Grid rende semplice creare una griglia reattiva che regola il numero di colonne in base al viewport. Definiamo il contenitore come griglia, impostamo un numero flessibile di colonne con e , e aggiungiamo spaziatura con []. All'interno di ogni scheda, usiamo CSS Grid internamente per allineare il prezzo, le caratteristiche e il pulsante.

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

Il assicura che il pulsante rimanga sempre in basso, anche se le liste di funzionalità differiscono in lunghezza. Il distintivo della scheda in evidenza "Più Popolari" è creato con uno pseudoelement per evitare il markup extra.

Aggiungere l'interattività JavaScript

Ora arriva la parte dinamica. Aggiungiamo un commutatore di attivazione che consente ai visitatori di passare tra i prezzi mensili e annuali. Quando il cambio di attivazione, JavaScript aggiorna i prezzi per tutte le carte. Inoltre, include un helper per formattare i prezzi e una transizione liscia per il cambiamento numerico.

<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 per la lotta:

.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 che alimenta l'aggiornamento:

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

I prezzi annuali rappresentano il costo di ogni mese quando paga ogni anno — un modello comune. La funzione itera su ogni carta, legge il suo , e aggiorna l'importo e il periodo visualizzato.

Migliorare la transizione

Per rendere il cambio di prezzo si sente liscio, possiamo aggiungere una breve transizione CSS sugli elementi [ e [. Tuttavia, poiché []] cambia istantaneamente, possiamo simulare un effetto conte-up con un piccolo intervallo, o semplicemente utilizzare un fade-in. Per un sito di produzione, una rapida transizione di opacità sul contenitore di prezzo funziona bene.

.price {
 transition: opacity 0.2s ease;
}

.updating .price {
 opacity: 0;
}

Poi in JavaScript, aggiungere brevemente e rimuovere la classe [ su ogni scheda. Ma per la maggior parte dei casi di utilizzo, l'aggiornamento istantaneo è buono.

Rendere la tabella responsabile e accessibile

CSS Grid già gestisce la reattività, ma assicura che su schermi molto piccoli le carte impilano in una singola colonna. Il valore lo fa automaticamente. Per accessibilità, dobbiamo garantire che la chiavetta sia a tastiera-operabile e annuncia il suo stato. e ]] abbiamo aggiunto già aiutano i lettori dello schermo. Inoltre, aggiungi

Inoltre, fornire un indicatore di messa a fuoco visibile per gli utenti di tastiera. Il profilo predefinito funziona, ma è possibile in stile per abbinare il vostro branding:

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

Per migliorare questo, dopo aver aggiornato il prezzo, è possibile utilizzare una regione in tensione:

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

Poi in JavaScript, impostare il suo testo in qualcosa come “Prezzi aggiornati alla fatturazione annuale” dopo ogni gioco. Questo elemento di lettura dello schermo-solo annuncia il cambiamento senza interruzioni visive.

Aggiungere più funzionalità dinamiche

Una volta che il core toggle funziona, è possibile estendere la tabella dei prezzi con l'interattività aggiuntiva:

Toggles caratteristica

Aggiungere caselle di controllo per componenti aggiuntivi (ad esempio, storage extra, membri del team) che aggiornano il prezzo totale. Conservare i prezzi base e i costi aggiuntivi in un oggetto. Quando una casella di controllo cambia, ricalcolare il totale per ogni scheda di conseguenza.

Selezionatore di valute

Se il tuo pubblico è globale, aggiungi un dropdown per passare tra USD, EUR, GBP, ecc. Conserva i tassi di conversione e moltiplica il prezzo di base. Aggiorna il testo con la corretta formattazione della valuta utilizzando .

Contatore di prezzo animato

Per un effetto lucido, animare il numero dal vecchio valore al nuovo valore su poche centinaia di millisecondi. Le biblioteche come animate.css non sono necessarie – un semplice loop funziona. Tuttavia, mantenere esecutivo: solo animare le carte visibili.

Risparmio di Badge

Quando il fatturazione annuale è attivato, mostrare un distintivo "Salva 20%" accanto al prezzo. Calcola il risparmio come [] e visualizzarlo dinamicamente. Aggiungi un attributo a ogni scheda in HTML e lascia che JavaScript lo popola o calcolalo in volo.

Considerazioni sulle prestazioni

Con solo poche carte di prezzo, le prestazioni non sono una preoccupazione, ma se si dispone di decine di piani (ad esempio, SaaS che genera piani da un database), considerare queste ottimizzazioni:

  • Usa delegazione evento:[] Collegare un ascoltatore di eventi a un contenitore genitore invece di ogni carta. Per la manovra, che è già fatto. Per caselle di controllo all'interno delle carte, delegare.
  • Cache DOM riferimenti:[] Sulla inizializzazione, memorizzare riferimenti agli elementi [ e [] in un array o mappa per chiave di piano.
  • Utilizza per le animazioni:[] Pianifica aggiornamenti visivi per il prossimo ciclo di verniciatura per evitare la deformazione.
  • ]Minimizzare rifluisce:[] Batch DOM cambia quando aggiorna più carte. Nella nostra funzione , leggiamo e scriviamo al DOM in un unico loop – va bene. Se aggiungi classi o stili in linea, consideri la lettura di tutti i valori prima, poi scrivi tutte le modifiche.

Casi e esempi di utilizzo reali

I tavoli di prezzi dinamici sono utilizzati ovunque dai servizi di abbonamento come Dropbox e Spotify a fornitori di hosting come DigitalOcean]. Un modello comune è quello di offrire un mensile / annuale di gioco con un "miglior valore"

Un'altra variazione è la scala scorrevole per la quantità. Un tavolo di prezzi per un prodotto SaaS potrebbe avere cursori per il numero di utenti o di archiviazione. Come l'utente sposta il cursore, gli aggiornamenti dei prezzi in diretta. CSS Grid gestisce il layout e JavaScript aggiorna i valori dei prezzi. Questo può essere costruito con gli stessi principi: prezzo tiers, ascoltare le modifiche di input e aggiornare il DOM.

Per un approccio più avanzato, è possibile caricare i dati dei prezzi da un file JSON o API, rendendo la tabella veramente data-driven. Se il sito è costruito con un CMS senza testa come Directus, i dati dei prezzi sarebbero venuti da una raccolta, e il vostro Javascript front-end lo prendere e rendere la griglia dinamicamente.

Test e supporto del browser

CSS Grid è supportato in tutti i browser moderni, tra cui Internet Explorer 11 con il prefisso – anche se si consiglia di utilizzare Autoprefixer o ignorare IE11 per nuovi progetti. Il JavaScript utilizzato qui (ES6 , , funzioni freccia, , modelli literals) funziona il supporto Chrome, Firefox, Safari,

Approccio alternativo: Griglia CSS con proprietà personalizzate CSS

Un metodo interessante per evitare JavaScript per i prezzi di gioco è quello di utilizzare CSS Custom Properties e (quando il supporto del browser matura). Si imposta i prezzi come [ ecc, e cambiarli con un gioco di classe sul corpo. Tuttavia, per la logica dinamica vera (ad esempio, aggiungendo due componenti aggiuntivi), JavaScript è ancora necessario.

Conclusioni

[LTLT] La costruzione di una tabella di prezzi dinamica con JavaScript e CSS Grid è realizzabile e si estende. Iniziando con l'HTML semantico, strutturando la griglia con CSS Grid, e aggiungendo JavaScript per l'interattività, si crea uno strumento che può adattarsi a modelli di prezzi complessi senza dipendenze di tipo bloDN.

Ora implementare questi modelli nel tuo progetto. I tuoi utenti apprezzeranno la chiarezza, e i tassi di conversione possono ringraziarti.