product-prices — current / original / VAT split
Renders the price block of a product: current price (always), optional strikethrough for the original price (discount), optional inclusive / exclusive VAT text. Pure SCSS, no JS.
Use on product detail pages, product cards, cart line items, checkout summary. Visually consistent across all of them.
Install
npx czg-ui add product-prices@import 'components/eshop/product-prices'; to app.scss. No JS.
Requires base.
Parameters
| Param | Type | Default | Notes | ||
|---|---|---|---|---|---|
current | string\ | float | — | Current price (already formatted, e.g. "1 290 Kč") | |
original | string\ | float\ | null | — | Original price → rendered strike-through; show only when discounted |
vat | string\ | null | — | "vč. DPH 1 290 Kč" line | |
noVat | string\ | null | — | "bez DPH 1 066 Kč" line | |
class | string\ | null | — | Extra wrapper class |
Usage — basic
{include /app/components/Eshop/product-prices.latte,
current => '1 290 Kč'}Usage — discount
{include /app/components/Eshop/product-prices.latte,
original => '1 690 Kč',
current => '1 290 Kč'}Usage — full B2B view (incl. + excl. VAT)
{include /app/components/Eshop/product-prices.latte,
current => '1 290 Kč',
vat => 'vč. DPH 1 290 Kč',
noVat => 'bez DPH 1 066 Kč'}Override styles per project
The component uses CSS variables for the most opinionated bits:
$product-prices-current-color: $cgui-color-discount; // brand red
$product-prices-current-size: 20px;
@import 'components/eshop/product-prices';When NOT to use
- Sale-price negotiation tables (B2B price tiers per quantity) —
build a real <table>
- Subscription pricing with billing period — use a dedicated pricing
card with the /month / /year toggle