STRAN.SI

Dinamični cenovni kalkulator

Kako narediti kalkulator, ki pri prehodih med cenovnimi stopnjami ne vrne anomalije. JS implementacija + UX.

← Vsi članki
Tehnično 7 min branja

Kako narediti kalkulator, ki pri prehodih med stopnjami ne vrne anomalije.

Problem: enotna cena ni vedno realna

Pri storitvah z variabilno ceno (digitalizacija, gravura, tisk, 3D tisk) je enotna cena pogosto napačna. Cena 1 kasete VHS ni enaka ceni 50 kaset (na kos). Cena 1 broške ni enaka ceni 200 broškov. Brez kalkulatorja stranka mora poslati povpraševanje za vsako variacijo posebej.

Stopnjevana cena – princip

Stopnjevana cena pomeni, da se cena na kos znižuje s količino:

// Primer: presnemavanje VHS kaset
1 kos        → 15 € / kos
2–4 kosi     → 13 € / kos
5–10 kosov   → 12 € / kos
11–24 kosov  → 10 € / kos
25+ kosov    →  7 € / kos

Stranka, ki ima 25 kaset, vidi takoj: "175 €". Stranka, ki ima 30 kaset, vidi "210 €" – brez ugibanja.

Robni primeri – pazljivost!

Najpogostejša napaka pri stopnjevanih cenah: pri prehodu med stopnjami cena na kos upade, ampak skupna cena lahko upade tudi. To je nelogično.

Primer napake:

4 kosi × 13 € = 52 €
5 kosov × 12 € = 60 €  // OK, narašča

Drugi primer:

10 kosov × 12 € = 120 €
11 kosov × 10 € = 110 €  // NAPAKA! Več kosov, manjša cena

Pravilna logika: pri prehodu novo stopnjo se cena uveljavi le, če je rezultat ≥ prejšnja cena. Sicer ohranimo prejšnjo stopnjo.

Implementacija v JavaScript

const tiers = [
  { min: 1,  price: 15 },
  { min: 2,  price: 13 },
  { min: 5,  price: 12 },
  { min: 11, price: 10 },
  { min: 25, price: 7 },
];

function calculate(quantity) {
  let perKos = tiers[0].price;
  for (const t of tiers) {
    if (quantity >= t.min) perKos = t.price;
  }
  return quantity * perKos;
}

document.getElementById('qty').addEventListener('input', e => {
  const q = parseInt(e.target.value) || 0;
  document.getElementById('total').textContent = calculate(q) + ' €';
});

Realnočasovni prikaz

Brez submit gumba. Vsaka sprememba `` polja sproži preračun in update prikaza. To je 10 vrstic vanilla JS, brez jQuery ali React-a.

Razčlenjen prikaz cene

Stranke radi vidijo, kako je cena sestavljena. Namesto samo "175 €" prikažemo:

  • 25 kosov × 7 € = 175 €
  • + dostava: 5 €
  • + DDV (22 %): 39,60 €
  • Skupaj: 219,60 €

PDF predračun

Z gumbom "Pošlji predračun" generiramo PDF z istim razčlenjenim cenam in pošljemo na e-mail stranke + admin-a. PDF generiramo s TCPDF ali mPDF v PHP.

Statistika in optimizacija

Po nekaj mesecih spremljamo, katere količine stranke najpogosteje izbirajo. Če 80 % strank izbira 10–15 kosov, mogoče cena pri tem prelomu ni optimalna. Lahko prilagodimo stopnje.

Konkretni primeri iz produkcije

  • Presnemavanje.si: VHS kasete – 5 stopenj od 1 do 25+ kosov.
  • Skeniranje.si: fotografije × DPI – matrika 4×3.
  • Broška.si: broške – velikost + količina + nujnost.
  • Cut.si: tisk na majice – serija + velikost + barve.

Zaključek

Dinamični cenovni kalkulator je eden najbolj učinkovitih prodajnih elementov za storitve s spreminjajočo ceno. Stranke ga uporabljajo radi, ker dobijo takojšen odgovor, vi pa zmanjšate število povpraševanj brez nakupne namere.

Imate vprašanje glede članka ali konkretnega primera?

Pošljite kratek opis svojega primera. Odgovorimo z realno usmeritvijo – tudi če ne potrebujete naših storitev.

Pokliči Povpraševanje